<?php
// include 'connect.php';

$response = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $service = trim($_POST['service'] ?? '');
    $messageText = trim($_POST['message'] ?? '');
    $tdate = date('Y-m-d H:i:s');

    if ($name !== '' && filter_var($email, FILTER_VALIDATE_EMAIL) && $messageText !== '') {
        $storedMessage = "Service: {$service}\n\n{$messageText}";
        $sql = "INSERT INTO interiors (name, email, message, updated) VALUES (?, ?, ?, ?)";
        $stmt = mysqli_prepare($conn, $sql);

        if ($stmt) {
            mysqli_stmt_bind_param($stmt, 'ssss', $name, $email, $storedMessage, $tdate);

            if (mysqli_stmt_execute($stmt)) {
                $to = $email;
                $subject = "Project Request Confirmation";
                $emailBody = "Hi {$name},\n\n"
                    . "Thank you for your project request. Here are the details you provided:\n\n"
                    . "Service: {$service}\n"
                    . "Message: {$messageText}\n\n"
                    . "We will get back to you shortly.\n\n"
                    . "Regards,\n"
                    . "Client Interiors Team";
                $headers = "From: noreply@example.com";

                if (mail($to, $subject, $emailBody, $headers)) {
                    $response = "<div class='success-msg'>Your request has been submitted successfully. A confirmation email has been sent.</div>";
                } else {
                    $response = "<div class='error-msg'>Your request was saved, but the confirmation email could not be sent.</div>";
                }
            } else {
                $response = "<div class='error-msg'>An error occurred while saving your request. Please try again.</div>";
            }

            mysqli_stmt_close($stmt);
        } else {
            $response = "<div class='error-msg'>Could not prepare the request. Please try again.</div>";
        }
    } else {
        $response = "<div class='error-msg'>Please provide a valid name, email, and message.</div>";
    }

    mysqli_close($conn);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client Interiors - Interior Finishes & Installation Services</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #111827;
            --primary-light: #1f2937;
            --secondary-color: #b88746;
            --secondary-hover: #9f733a;
            --accent-color: #f7f3ed;
            --text-dark: #1f2937;
            --text-light: #6b7280;
            --bg-white: #ffffff;
            --bg-light: #f8f5f0;
            --border-color: #e8ded1;
            --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
            --shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.14);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 84px;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: var(--bg-white);
            color: var(--text-dark);
            line-height: 1.7;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.97);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 4px 18px rgba(17, 24, 39, 0.06);
        }

        .nav-container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .logo {
            width: 48px;
            height: 48px;
            object-fit: contain;
        }

        .brand-name {
            font-size: 1.25rem;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 30px;
            list-style: none;
        }

        .nav-link {
            color: var(--text-dark);
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-decoration: none;
            text-transform: uppercase;
            transition: var(--transition);
        }

        .nav-link:hover {
            color: var(--secondary-color);
        }

        .hamburger {
            display: none;
            width: 42px;
            height: 42px;
            border: 0;
            background: transparent;
            cursor: pointer;
        }

        .hamburger span {
            display: block;
            width: 26px;
            height: 2px;
            margin: 6px auto;
            background: var(--primary-color);
            transition: var(--transition);
        }

        .hero {
    min-height: 96vh;
    padding-top: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;

    background: linear-gradient(rgba(17,24,39,0.65), rgba(17,24,39,0.65)),
                url("images/gyp/img-4.jpg (3).jpeg") center center/cover no-repeat;
}

        .hero-background {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            animation: heroFade 14s infinite;
        }

        .hero-bg-1 {
            background-image: url('images/tv/img-4.jpg (3).jpeg');
        }

        .hero-bg-2 {
            background-image: url('images/curtain/img-1.jpg (3).jpeg');
            animation-delay: 7s;
        }

        @keyframes heroFade {
            0%, 45%, 100% {
                opacity: 1;
                transform: scale(1);
            }

            50%, 95% {
                opacity: 0;
                transform: scale(1.05);
            }
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(17, 24, 39, 0.68), rgba(17, 24, 39, 0.42), rgba(184, 135, 70, 0.26));
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 900px;
            padding: 0 24px;
        }

        .hero-content h1 {
            font-size: clamp(2.4rem, 7vw, 5rem);
            line-height: 1.05;
            margin-bottom: 22px;
        }

        .hero-content p {
            font-size: clamp(1rem, 2vw, 1.35rem);
            color: rgba(255, 255, 255, 0.92);
            margin-bottom: 34px;
        }

        .cta-btn,
        .submit-btn,
        .service-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 12px 24px;
            border-radius: 8px;
            border: 0;
            background: var(--secondary-color);
            color: #fff;
            text-decoration: none;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            cursor: pointer;
            transition: var(--transition);
        }

        .cta-btn:hover,
        .submit-btn:hover,
        .service-btn:hover {
            background: var(--secondary-hover);
            transform: translateY(-2px);
        }

        section {
            padding: 88px 0;
        }

        .section-header {
            text-align: center;
            max-width: 760px;
            margin: 0 auto 48px;
        }

        .section-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: 14px;
            color: var(--primary-color);
        }

        .section-header p {
            color: var(--text-light);
            font-size: 1.05rem;
        }

        .intro {
            background: var(--bg-light);
        }

        .intro-grid,
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
        }

        .intro-card,
        .service-card,
        .portfolio-card,
        .contact-form,
        .contact-info {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .intro-card {
            padding: 30px;
            transition: var(--transition);
        }

        .intro-card:hover,
        .service-card:hover,
        .portfolio-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
        }

        .intro-card i {
            font-size: 2rem;
            color: var(--secondary-color);
            margin-bottom: 18px;
        }

        .intro-card h3,
        .service-card h3,
        .portfolio-card h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .intro-card p,
        .service-card p,
        .portfolio-card p,
        .about-text p,
        .contact-info p {
            color: var(--text-light);
        }

        .service-card {
            overflow: hidden;
            transition: var(--transition);
        }

        .service-card .img-container {
            height: 230px;
            background: var(--accent-color);
            overflow: hidden;
        }

        .service-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .service-card:hover img {
            transform: scale(1.08);
        }

        .service-card h3 {
            padding: 24px 22px 0;
            font-size: 1.25rem;
        }

        .service-card p {
            padding: 0 22px 20px;
        }

        .service-btn {
            margin: 0 22px 24px;
            background: transparent;
            color: var(--secondary-color);
            border: 2px solid var(--secondary-color);
        }

        .service-btn:hover {
            color: #fff;
            background: var(--secondary-color);
        }

        .about {
            background: var(--bg-light);
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 52px;
            align-items: center;
        }

        .about-image {
            border-radius: 8px;
            min-height: 420px;
            object-fit: cover;
            box-shadow: var(--shadow-lg);
        }

        .about-text h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: 24px;
            color: var(--primary-color);
        }

        .about-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            list-style: none;
            margin-top: 28px;
        }

        .about-list li {
            display: flex;
            gap: 10px;
            align-items: center;
            font-weight: 700;
        }

        .about-list i {
            color: var(--secondary-color);
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .portfolio-card {
            overflow: hidden;
        }

        .portfolio-card img {
            width: 100%;
            height: 260px;
            object-fit: cover;
        }

        .portfolio-info {
            padding: 22px;
        }

        .contact {
            background: var(--primary-color);
        }

        .contact .section-header h2,
        .contact .section-header p {
            color: #fff;
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1.3fr 0.7fr;
            gap: 28px;
        }

        .contact-form {
            padding: 30px;
            display: grid;
            gap: 16px;
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font: inherit;
            color: var(--text-dark);
            background: #fff;
        }

        .contact-form textarea {
            min-height: 150px;
            resize: vertical;
        }

        .success-msg,
        .error-msg {
            padding: 14px 16px;
            border-radius: 8px;
            font-weight: 700;
        }

        .success-msg {
            background: #ecfdf3;
            color: #166534;
        }

        .error-msg {
            background: #fef2f2;
            color: #991b1b;
        }

        .contact-info {
            padding: 30px;
            display: grid;
            gap: 24px;
            align-content: start;
        }

        .info-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .info-item i {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-color);
            color: var(--secondary-color);
        }

        .footer {
            background: #0b1220;
            color: rgba(255, 255, 255, 0.78);
            padding: 54px 0 24px;
        }

        .footer-content {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 24px 34px;
            display: grid;
            grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
            gap: 32px;
        }

        .footer h4 {
            color: #fff;
            margin-bottom: 16px;
        }

        .footer a {
            color: rgba(255, 255, 255, 0.78);
            text-decoration: none;
        }

        .footer a:hover {
            color: var(--secondary-color);
        }

        .footer ul {
            list-style: none;
            display: grid;
            gap: 10px;
        }

        .social-icons {
            display: flex;
            gap: 12px;
        }

        .social-icons a {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--secondary-color);
            color: #fff;
        }

        .footer-bottom {
            max-width: 1240px;
            margin: 0 auto;
            padding: 24px 24px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            text-align: center;
            font-size: 0.9rem;
        }

        @media (max-width: 860px) {
            .nav-menu {
                display: none;
                position: absolute;
                top: 76px;
                left: 0;
                right: 0;
                background: #fff;
                padding: 24px;
                flex-direction: column;
                box-shadow: var(--shadow-lg);
            }

            .nav-menu.active {
                display: flex;
            }

            .hamburger {
                display: block;
            }

            .about-content,
            .contact-content,
            .footer-content {
                grid-template-columns: 1fr;
            }

            section {
                padding: 64px 0;
            }
        }

        @media (max-width: 520px) {
            .brand-name {
                font-size: 1rem;
            }

            .logo {
                width: 40px;
                height: 40px;
            }

            .service-card .img-container,
            .portfolio-card img {
                height: 210px;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.php" class="logo-section">
                <img src="logo.png" alt="Client Interiors Logo" class="logo">
                <span class="brand-name">Client Interiors</span>
            </a>
            <ul class="nav-menu">
                <li><a href="#home" class="nav-link">Home</a></li>
                <li><a href="#services" class="nav-link">Services</a></li>
                <li><a href="#about" class="nav-link">About</a></li>
                <li><a href="#portfolio" class="nav-link">Projects</a></li>
                <li><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
            <button class="hamburger" type="button" aria-label="Open menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </nav>

    <section id="home" class="hero">
        <div class="hero-background hero-bg-1"></div>
        <div class="hero-background hero-bg-2"></div>
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <h1>Interior Finishes Built Around Your Space</h1>
            <p>Professional installation for doors, frames, partitions, cabinetry, flooring, gypsum, curtains, tiles, and custom interior details.</p>
            <a href="#services" class="cta-btn">Explore Services</a>
        </div>
    </section>

    <section id="introduction" class="intro">
        <div class="container">
            <div class="section-header">
                <h2>Complete Interior Solutions</h2>
                <p>From structural finishing to elegant storage and decor, we help clients create practical, polished residential and commercial spaces.</p>
            </div>

            <div class="intro-grid">
                <div class="intro-card">
                    <i class="fas fa-door-open"></i>
                    <h3>Doors & Frames</h3>
                    <p>Quality door fitting, frame installation, and finishing for homes, offices, and apartments.</p>
                </div>
                <div class="intro-card">
                    <i class="fas fa-border-all"></i>
                    <h3>Wainscoting</h3>
                    <p>Decorative wall paneling that adds texture, depth, and a refined architectural finish.</p>
                </div>
                <div class="intro-card">
                    <i class="fas fa-grip"></i>
                    <h3>Tiles & SPC Flooring</h3>
                    <p>Durable tile work and SPC flooring installation for beautiful, easy-to-maintain surfaces.</p>
                </div>
                <div class="intro-card">
                    <i class="fas fa-building"></i>
                    <h3>Office Partitioning</h3>
                    <p>Functional office layouts with clean partitions that improve privacy, workflow, and space use.</p>
                </div>
                <div class="intro-card">
                    <i class="fas fa-rug"></i>
                    <h3>Curtain Installation</h3>
                    <p>Professional curtain rods, tracks, blinds, and soft furnishing installation for finished rooms.</p>
                </div>
                <div class="intro-card">
                    <i class="fas fa-kitchen-set"></i>
                    <h3>Cabinetry & Storage</h3>
                    <p>Custom TV units, wardrobes, and kitchen cabinets designed to fit the client's lifestyle.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="services" class="services">
        <div class="container">
            <div class="section-header">
                <h2>Our Services</h2>
                <p>Use these cards as the main website service structure. Each one can later link to its own detailed page.</p>
            </div>

            <div class="services-grid">
                <div class="service-card">
                    <div class="img-container">
                        <img src="images/doors-and-frames.jpg" alt="Doors and frames installation">
                    </div>
                    <h3>Doors & Frames</h3>
                    <p>Supply, fitting, repair, and finishing of doors and frames for residential and commercial spaces.</p>
                    <a href="doors-frames.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/wainscoting.jpg" alt="Wainscoting wall panels">
                    </div>
                    <h3>Wainscoting</h3>
                    <p>Elegant wall panel designs for living rooms, bedrooms, corridors, offices, and feature walls.</p>
                    <a href="wainscoting.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/tiles.jpg" alt="Tiles installation">
                    </div>
                    <h3>Tiles</h3>
                    <p>Professional floor and wall tile installation for kitchens, bathrooms, offices, and outdoor areas.</p>
                    <a href="tiles.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/office-partitioning.jpg" alt="Office partitioning">
                    </div>
                    <h3>Office Partitioning</h3>
                    <p>Office partitions, glass dividers, privacy sections, and modern workspace separation solutions.</p>
                    <a href="office-partitioning.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/curtains-installation.jpg" alt="Curtains installation">
                    </div>
                    <h3>Curtains Installation</h3>
                    <p>Tracks, rods, curtains, sheers, blinds, and custom window treatment installation.</p>
                    <a href="curtains-installation.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/tv-units.jpg" alt="TV unit installation">
                    </div>
                    <h3>TV Units</h3>
                    <p>Modern TV walls, floating units, storage panels, shelves, and media feature designs.</p>
                    <a href="tv-units.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/wardrobes.jpg" alt="Wardrobe installation">
                    </div>
                    <h3>Wardrobes</h3>
                    <p>Custom wardrobes, walk-in closets, sliding doors, shelves, drawers, and storage systems.</p>
                    <a href="wardrobes.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/kitchen-cabinets.jpg" alt="Kitchen cabinets installation">
                    </div>
                    <h3>Kitchen Cabinets</h3>
                    <p>Functional kitchen cabinet design, fabrication, installation, repairs, and finishing.</p>
                    <a href="kitchen-cabinets.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/spc-flooring.jpg" alt="SPC flooring installation">
                    </div>
                    <h3>SPC Flooring</h3>
                    <p>Water-resistant SPC flooring installation with clean finishes for homes and offices.</p>
                    <a href="spc-flooring.php" class="service-btn">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="img-container">
                        <img src="images/gypsum-installations.jpg" alt="Gypsum installation">
                    </div>
                    <h3>Gypsum Installations</h3>
                    <p>Gypsum ceilings, lighting features, bulkheads, partitions, and decorative ceiling details.</p>
                    <a href="gypsum-installations.php" class="service-btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    <section id="about" class="about">
        <div class="container">
            <div class="about-content">
                <img src="images/about-interior-work.jpg" alt="Interior installation work" class="about-image">
                <div class="about-text">
                    <h2>About Client Interiors</h2>
                    <p>Client Interiors provides practical, stylish, and long-lasting interior finishing services for homes, offices, apartments, and commercial spaces.</p>
                    <p>The team handles projects from planning and measurements to material guidance, installation, finishing, and final handover.</p>
                    <ul class="about-list">
                        <li><i class="fas fa-check"></i> Professional Installation</li>
                        <li><i class="fas fa-check"></i> Quality Materials</li>
                        <li><i class="fas fa-check"></i> Custom Measurements</li>
                        <li><i class="fas fa-check"></i> Clean Project Handover</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="portfolio" class="portfolio">
        <div class="container">
            <div class="section-header">
                <h2>Featured Project Types</h2>
                <p>Show visitors the kind of work the client can deliver across residential and commercial interiors.</p>
            </div>

            <div class="portfolio-grid">
                <article class="portfolio-card">
                    <img src="images/project-home-interiors.jpg" alt="Residential interiors project">
                    <div class="portfolio-info">
                        <h3>Residential Interiors</h3>
                        <p>Wardrobes, TV units, kitchens, curtains, gypsum, tiles, and SPC flooring.</p>
                    </div>
                </article>

                <article class="portfolio-card">
                    <img src="images/project-office-partitioning.jpg" alt="Office partitioning project">
                    <div class="portfolio-info">
                        <h3>Office Fit-Outs</h3>
                        <p>Partitioning, cabinetry, doors, frames, flooring, and professional workspace finishing.</p>
                    </div>
                </article>

                <article class="portfolio-card">
                    <img src="images/project-wall-finishes.jpg" alt="Wall and ceiling finish project">
                    <div class="portfolio-info">
                        <h3>Wall & Ceiling Finishes</h3>
                        <p>Wainscoting, gypsum features, ceiling lighting layouts, and decorative details.</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <div class="section-header">
                <h2>Request a Quote</h2>
                <p>Tell us what you need installed, measured, repaired, or designed.</p>
            </div>

            <div class="contact-content">
                <form class="contact-form" method="POST" action="">
                    <?php echo $response; ?>

                    <input type="text" name="name" placeholder="Your Name" required>
                    <input type="email" name="email" placeholder="Your Email" required>

                    <select name="service" required>
                        <option value="">Select Service</option>
                        <option value="Doors & Frames">Doors & Frames</option>
                        <option value="Wainscoting">Wainscoting</option>
                        <option value="Tiles">Tiles</option>
                        <option value="Office Partitioning">Office Partitioning</option>
                        <option value="Curtains Installation">Curtains Installation</option>
                        <option value="TV Units">TV Units</option>
                        <option value="Wardrobes">Wardrobes</option>
                        <option value="Kitchen Cabinets">Kitchen Cabinets</option>
                        <option value="SPC Flooring">SPC Flooring</option>
                        <option value="Gypsum Installations">Gypsum Installations</option>
                    </select>

                    <textarea name="message" placeholder="Tell us about your project" required></textarea>
                    <button type="submit" class="submit-btn">Send Request</button>
                </form>

                <div class="contact-info">
                    <div class="info-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h4>Phone</h4>
                            <p>+254 700 000 000</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h4>Email</h4>
                            <p>info@example.com</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h4>Location</h4>
                            <p>Nairobi, Kenya</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fab fa-whatsapp"></i>
                        <div>
                            <h4>WhatsApp</h4>
                            <p>+254 700 000 000</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="footer-content">
            <div>
                <h4>Client Interiors</h4>
                <p>Interior finishing, custom cabinetry, flooring, partitions, gypsum, curtains, tiles, doors, and frames.</p>
            </div>
            <div>
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4>Services</h4>
                <ul>
                    <li><a href="doors-frames.php">Doors & Frames</a></li>
                    <li><a href="wardrobes.php">Wardrobes</a></li>
                    <li><a href="kitchen-cabinets.php">Kitchen Cabinets</a></li>
                    <li><a href="gypsum-installations.php">Gypsum Installations</a></li>
                </ul>
            </div>
            <div>
                <h4>Follow Us</h4>
                <div class="social-icons">
                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
                    <a href="#" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 Client Interiors. All rights reserved.</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const hamburger = document.querySelector('.hamburger');
            const navMenu = document.querySelector('.nav-menu');

            hamburger.addEventListener('click', function () {
                navMenu.classList.toggle('active');
            });

            document.querySelectorAll('.nav-menu a').forEach(function (link) {
                link.addEventListener('click', function () {
                    navMenu.classList.remove('active');
                });
            });
        });
    </script>
</body>
</html>
