<?php
session_start();
?>
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Contact Us | Faren Interior Design</title>
    <meta name="author" content="themeholy">
    <meta name="description" content="Contact Faren Interior Design for residential and commercial interior projects.">
    <meta name="keywords" content="interior design, contact, architecture, renovation">
    <meta name="robots" content="INDEX,FOLLOW">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicons/manifest.json">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="../../css2-1?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/auth-ui-global.js"></script>

    <style>
        :root {
            --contact-bg: #f5f2ec;
            --contact-surface: #ffffff;
            --contact-ink: #1d1a16;
            --contact-muted: #6f665c;
            --contact-accent: #b88a5a;
            --contact-accent-dark: #8f6640;
            --contact-border: #e8ded3;
        }

        .contact-page {
            background: linear-gradient(180deg, #f9f6f1 0%, #f1ece5 100%);
            
        }

        .contact-hero {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 24px;
            background: radial-gradient(circle at top right, rgba(184, 138, 90, 0.22), transparent 45%), var(--contact-surface);
            border: 1px solid var(--contact-border);
        }

        .contact-kicker {
            margin: 0 0 10px;
            font-size: 14px;
            letter-spacing: 0.12em;
            color: var(--contact-accent-dark);
            text-transform: uppercase;
            font-weight: 700;
        }

        .contact-heading {
            margin: 0;
            font-size: clamp(30px, 5vw, 56px);
            line-height: 1.08;
            color: var(--contact-ink);
            max-width: 760px;
        }

        .contact-subtext {
            margin-top: 14px;
            max-width: 780px;
            color: var(--contact-muted);
            font-size: clamp(15px, 2vw, 18px);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: clamp(20px, 3vw, 28px);
        }

        .contact-card {
            background: var(--contact-surface);
            border: 1px solid var(--contact-border);
            border-radius: 22px;
            padding: clamp(20px, 3vw, 34px);
            box-shadow: 0 14px 36px rgba(36, 28, 19, 0.06);
        }

        .info-list {
            display: grid;
            gap: 14px;
            margin: 20px 0 0;
            padding: 0;
            list-style: none;
        }

        .info-item {
            display: grid;
            grid-template-columns: 44px 1fr;
            align-items: start;
            gap: 12px;
            padding: 12px;
            border-radius: 14px;
            background: #fbf8f4;
            border: 1px solid #efe5d9;
        }

        .info-item i {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: #fff;
            background: linear-gradient(140deg, var(--contact-accent), var(--contact-accent-dark));
            font-size: 15px;
        }

        .info-label {
            display: block;
            margin: 0 0 4px;
            color: var(--contact-ink);
            font-size: 15px;
            font-weight: 700;
        }

        .info-value,
        .info-value a {
            margin: 0;
            color: var(--contact-muted);
            font-size: 14px;
            line-height: 1.5;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .info-value a:hover {
            color: var(--contact-accent-dark);
        }

        .contact-form-wrap h3,
        .contact-detail-wrap h3 {
            margin: 0;
            color: var(--contact-ink);
            font-size: clamp(22px, 3vw, 30px);
            line-height: 1.2;
        }

        .contact-form-wrap p,
        .contact-detail-wrap p {
            margin: 10px 0 0;
            color: var(--contact-muted);
            font-size: 15px;
        }

        .contact-form {
            margin-top: 22px;
            display: grid;
            gap: 12px;
        }

        .form-row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            border: 1px solid var(--contact-border);
            border-radius: 12px;
            background: #fff;
            color: #2f2a24;
            font-size: 15px;
            padding: 12px 14px;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

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

        .contact-form input:focus,
        .contact-form select:focus,
        .contact-form textarea:focus {
            border-color: var(--contact-accent);
            box-shadow: 0 0 0 3px rgba(184, 138, 90, 0.15);
        }

        .contact-submit {
            border: 0;
            border-radius: 12px;
            background: linear-gradient(140deg, var(--contact-accent), var(--contact-accent-dark));
            color: #fff;
            font-weight: 700;
            font-size: 15px;
            padding: 13px 18px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-submit:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(143, 102, 64, 0.35);
        }

        .form-messages .alert {
            margin: 2px 0 0;
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 14px;
        }

        .contact-map {
            margin-top: clamp(20px, 3vw, 28px);
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid var(--contact-border);
            min-height: 320px;
        }

        .contact-map iframe {
            width: 100%;
            height: 100%;
            min-height: 320px;
            border: 0;
        }

        @media (max-width: 991.98px) {
            .contact-grid {
                grid-template-columns: 1fr;
            }

            .contact-page {
                padding-top: 88px;
            }

            .contact-map,
            .contact-map iframe {
                min-height: 280px;
            }
        }

        @media (max-width: 575.98px) {
            .contact-page {
                padding-top: 68px;
            }

            .contact-card {
                border-radius: 16px;
                padding: 18px;
            }

            .contact-hero {
                border-radius: 16px;
                padding: 20px;
            }

            .form-row-2 {
                grid-template-columns: 1fr;
            }

            .info-item {
                grid-template-columns: 40px 1fr;
                padding: 10px;
            }

            .info-item i {
                width: 40px;
                height: 40px;
            }
        }
    </style>
    <!-- Responsive Design System -->
    <link rel="stylesheet" href="assets/css/responsive-utilities.css">
    <link rel="stylesheet" href="assets/css/responsive-chat.css">
</head>

<body id="show-grid">
    <?php include 'header-php.php'; ?>

    <main class="contact-page">
        <div class="container">
            <section class="contact-hero">
                <p class="contact-kicker">Faren Interior Studio</p>
                <h1 class="contact-heading">Let us design a space that feels premium, practical, and truly yours.</h1>
                <p class="contact-subtext">Share your project goals and our team will respond with design direction, estimated timeline, and next steps tailored for your home or commercial interior.</p>
            </section>

            <section class="contact-grid" aria-label="Contact details and form">
                <article class="contact-card contact-detail-wrap">
                    <h3>Talk to Our Design Team</h3>
                    <p>We handle apartment interiors, villas, office fit-outs, retail design, and turnkey renovation execution.</p>

                    <ul class="info-list">
                        <li class="info-item">
                            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
                            <div>
                                <span class="info-label">Studio Address</span>
                                <p class="info-value">4517 Washington Ave, Manchester, Kentucky 39495, USA</p>
                            </div>
                        </li>
                        <li class="info-item">
                            <i class="fa-solid fa-phone" aria-hidden="true"></i>
                            <div>
                                <span class="info-label">Call Us</span>
                                <p class="info-value"><a href="tel:+00123666000666">+00 (123) 666 000 666</a></p>
                            </div>
                        </li>
                        <li class="info-item">
                            <i class="fa-solid fa-envelope" aria-hidden="true"></i>
                            <div>
                                <span class="info-label">Email</span>
                                <p class="info-value"><a href="mailto:info@fareninterior.com">info@fareninterior.com</a></p>
                            </div>
                        </li>
                        <li class="info-item">
                            <i class="fa-solid fa-clock" aria-hidden="true"></i>
                            <div>
                                <span class="info-label">Working Hours</span>
                                <p class="info-value">Mon to Sat, 9:00 AM to 7:00 PM</p>
                            </div>
                        </li>
                    </ul>
                </article>

                <article class="contact-card contact-form-wrap">
                    <h3>Start Your Project Discussion</h3>
                    <p>Fill in your details and we will get back with a suitable consultation slot.</p>

                    <form class="contact-form ajax-contact" action="mail.php" method="POST" novalidate>
                        <div class="form-messages" aria-live="polite"></div>
                        <div class="form-row-2">
                            <input type="text" name="name" placeholder="Your Name" required>
                            <input type="email" name="email" placeholder="Your Email" required>
                        </div>
                        <div class="form-row-2">
                            <input type="tel" name="number" placeholder="Phone Number" required>
                            <select name="subject" required>
                                <option value="" selected disabled>Select Project Type</option>
                                <option value="Residential Interior">Residential Interior</option>
                                <option value="Commercial Interior">Commercial Interior</option>
                                <option value="Renovation">Renovation</option>
                                <option value="Turnkey Project">Turnkey Project</option>
                            </select>
                        </div>
                        <textarea name="message" placeholder="Tell us about your space, budget range, and preferred timeline" required></textarea>
                        <button class="contact-submit" type="submit">Send Message</button>
                    </form>
                </article>
            </section>

            <div class="contact-map" aria-label="Studio location map">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3644.7310056272386!2d89.2286059153658!3d24.00527418490799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39fe9b97badc6151%3A0x30b048c9fb2129bc!2sAngfuztheme!5e0!3m2!1sen!2sbd!4v1651028958211!5m2!1sen!2sbd"
                    loading="lazy"
                    allowfullscreen>
                </iframe>
            </div>
        </div>
    </main>

    <?php include 'footer-section.html'; ?>

    <div class="scroll-top">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewbox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
        </svg>
    </div>

    <script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/jquery-ui.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/nice-select.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/threesixty.min.js"></script>
    <script src="assets/js/panolens.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/ScrollTrigger.min.js"></script>
    <script src="assets/js/SplitText.js"></script>
    <script src="assets/js/SplitType.js"></script>
    <script src="assets/js/lenis.min.js"></script>
    <script src="assets/js/CustomEase.min.js"></script>
    <script src="assets/js/main.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var form = document.querySelector('.ajax-contact');
            if (!form) return;

            var submitBtn = form.querySelector('button[type="submit"]');
            var messageElement = form.querySelector('.form-messages');

            form.addEventListener('submit', function (e) {
                e.preventDefault();

                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.textContent = 'Sending...';
                }

                var formData = new FormData(form);

                fetch('mail.php', {
                    method: 'POST',
                    body: formData
                })
                    .then(function (response) { return response.json(); })
                    .then(function (data) {
                        if (!messageElement) return;

                        if (data.success) {
                            messageElement.innerHTML = '<div class="alert alert-success" role="alert">' + data.message + '</div>';
                            form.reset();
                        } else {
                            messageElement.innerHTML = '<div class="alert alert-danger" role="alert">' + (data.message || 'Unable to send message.') + '</div>';
                        }
                    })
                    .catch(function (error) {
                        if (messageElement) {
                            messageElement.innerHTML = '<div class="alert alert-danger" role="alert">Error: ' + error.message + '</div>';
                        }
                    })
                    .finally(function () {
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            submitBtn.textContent = 'Send Message';
                        }
                    });
            });
        });
    </script>

    <!-- Chat Widget -->
    <?php include 'includes/chat-widget.html'; ?>
    
    <!-- Responsive Chat Script -->
    <script src="assets/js/responsive-chat-ai.js"></script>
</body>

</html>
