BLACKSITE


	: 216.73.216.62
	: 147.93.18.13 / vinyasaweddings.com
	: Linux srv667811 6.8.0-134-generic #134-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 26 18:43:11 UTC 2026 x86_64
: /var/www/shrikrishna/views/
files >> /var/www/shrikrishna/views/landingpage.php
 <?php
require_once __DIR__ . '/../db.php';
require_once 'config/config.php';

// Check if the request method is POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        // Validate inputs
        if (empty($_POST['name']) || empty($_POST['phone'])) {
            throw new Exception('Name and phone number are required');
        }

        if (!preg_match('/^[0-9]{10,15}$/', $_POST['phone'])) {
            throw new Exception('Please enter a valid 10-15 digit phone number');
        }

        // Prepare SQL statement using PDO
        $stmt = $db->prepare("INSERT INTO enquiries (name, phone, message) VALUES (:name, :phone, :message)");

        // Bind parameters and execute
        $stmt->execute([
            ':name' => $_POST['name'],
            ':phone' => $_POST['phone'],
            ':message' => $_POST['message'] ?? null
        ]);

        // Success - redirect to thank you page
        header('Location: thankyou');
        exit();

    } catch (PDOException $e) {
        $error = "Database error: " . $e->getMessage();
    } catch (Exception $e) {
        $error = $e->getMessage();
    }
}


// Get slug from URL
$slug = $_GET['slug'] ?? '';

if (empty($slug)) {
    header("HTTP/1.0 404 Not Found");
    die("Page not found");
}

// Fetch landing page data
try {
    $stmt = $db->prepare("SELECT * FROM landing_pages WHERE slug = ?");
    $stmt->execute([$slug]);
    $page = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$page) {
        header("HTTP/1.0 404 Not Found");
        die("Page not found");
    }

    // Fetch section images
    $sections = [];
    for ($i = 1; $i <= 4; $i++) {
        $stmt = $db->prepare("SELECT * FROM landing_images WHERE landing_page_id = ? AND section = ?");
        $stmt->execute([$page['id'], "section$i"]);
        $sections["section$i"] = $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

    // Fetch FAQs
    $stmt = $db->prepare("SELECT * FROM landing_faqs WHERE landing_page_id = ? ORDER BY id");
    $stmt->execute([$page['id']]);
    $faqs = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {
    die("Error loading page: " . $e->getMessage());
}



$settings = [
    'phone' => '+91 84480 78931',
    'whatsapp' => '',
    'facebook_url' => '',
    'instagram_url' => '',
    'youtube_url' => '',
    'twitter_url' => '',
    'about_heading' => '',
    'about_banner' => '',
    'about_description' => '',
    'home_faqs' => [],
    'working_hours' => 'Mon - Sat: 8.00 am - 7.00 pm'
];

try {
    $stmt = $db->prepare("SELECT * FROM website_settings WHERE id = 1");
    $stmt->execute();

    if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        // Merge with default values
        $settings = array_merge($settings, $row);

        // Handle JSON fields
        if (isset($row['home_faqs'])) {
            $settings['home_faqs'] = json_decode($row['home_faqs'], true) ?: [];
        }
    }
} catch (PDOException $e) {
    error_log("Error fetching website settings: " . $e->getMessage());

    // You might want to display a user-friendly message in development
    if (defined('DEVELOPMENT_MODE') && DEVELOPMENT_MODE) {
        echo "<!-- Database error: " . htmlspecialchars($e->getMessage()) . " -->";
    }
}


?>



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($page['meta_title'] ?? 'Premium Hair Solutions') ?></title>
    <meta name="description" content="<?= htmlspecialchars($page['meta_description'] ?? 'Professional hair treatments for all hair types') ?>">
    <meta name="keywords" content="<?= htmlspecialchars($page['meta_keywords'] ?? 'hair treatment, hair fall solution, hair care') ?>">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
  <link rel="stylesheet" href="<?= BASE_URL ?>/public/assets/css/landing.css">
</head>

<body>
    

    <section class="desktop-hero d-none d-md-block">
        <div class="container">
            <div class="row align-items-center gx-5">


                <!-- Right Column - Form (content unchanged, only styling added) -->
                <div class="col-lg-6">
                    <div class="contact-form bg-white p-4 p-lg-4 rounded-3 shadow"
                        style="border-top: 4px solid #0d6efd;">
                        <?php if (isset($error)): ?>
                            <div class="alert alert-danger mb-3"><?= htmlspecialchars($error) ?></div>
                        <?php endif; ?>

                        <img src="<?= BASE_URL ?>/public/assets/img/logo_1.png" alt="Clinic Logo" height="120"
                            class="mb-3 d-block mx-auto">
                        <form method="POST" action="">
                            <div class="mb-3">
                                <input type="text" class="form-control form-control-lg" name="name"
                                    placeholder="Your Name" required style="padding: 12px 15px; border-radius: 8px;"
                                    value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>">
                            </div>
                            <div class="mb-3">
                                <input type="tel" class="form-control form-control-lg" name="phone"
                                    placeholder="Phone Number" required style="padding: 12px 15px; border-radius: 8px;"
                                    value="<?= isset($_POST['phone']) ? htmlspecialchars($_POST['phone']) : '' ?>">
                            </div>
                            <div class="mb-3">
                                <textarea class="form-control form-control-lg" name="message" rows="3"
                                    placeholder="Describe Your Concern"
                                    style="padding: 12px 15px; border-radius: 8px; min-height: 100px;"><?= isset($_POST['message']) ? htmlspecialchars($_POST['message']) : '' ?></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-100 py-3 fw-bold"
                                style="border-radius: 8px; font-size: 1.1rem; letter-spacing: 0.5px;">
                                Submit Now
                            </button>
                        </form>
                    </div>
                </div>



                <!-- Left Column - Content (unchanged) -->
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold mb-4 "><?= htmlspecialchars($page['heading']) ?></h1>
                    <img src="<?= BASE_URL ?>/public/assets/img/landing/1.jpeg" alt="Hair restoration before after"
                        class="img-fluid w-100 rounded-lg object-fit-cover" style="height: 300px;">
                </div>


            </div>
        </div>
    </section>

    <section class="hero-box mobile-nav-box d-md-none" id="contact"> <!-- Show only on mobile and tablet -->
        <div class="container">
            <!-- Single Row for both heading and form -->
            <div class="row align-items-stretch g-2 g-md-3"> <!-- Changed to align-items-stretch -->


                <!-- Form Column -->
                <div class="col-6 col-md-6" id="top-row">
                    <div class="contact-form bg-white h-100 p-3 p-lg-3 rounded-3 shadow-sm"
                        style="border-top: 4px solid #0d6efd;">
                        <?php if (isset($error)): ?>
                            <div class="alert alert-danger mb-2 p-2" style="font-size: 12px;">
                                <?= htmlspecialchars($error) ?>
                            </div>
                        <?php endif; ?>

                        <img src="<?= BASE_URL ?>/public/assets/img/logo_1.png" alt="Clinic Logo"
                            style="height: 50px; width: auto; margin-bottom: 12px;" class="d-block mx-auto">

                        <form method="POST" action="">
                            <div class="mb-2">
                                <input type="text" class="form-control" name="name" placeholder="Your Full Name"
                                    required style="padding: 8px 12px; border-radius: 6px; font-size: 13px;"
                                    value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>">
                            </div>
                            <div class="mb-2">
                                <input type="tel" class="form-control" name="phone" placeholder="Phone Number" required
                                    style="padding: 8px 12px; border-radius: 6px; font-size: 13px;"
                                    value="<?= isset($_POST['phone']) ? htmlspecialchars($_POST['phone']) : '' ?>">
                            </div>
                            <div class="mb-2">
                                <textarea class="form-control" name="message" rows="2"
                                    placeholder="Describe Your Concern"
                                    style="padding: 8px 12px; border-radius: 6px; min-height: 70px; font-size: 13px;"><?= isset($_POST['message']) ? htmlspecialchars($_POST['message']) : '' ?></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-100 py-2 fw-bold"
                                style="border-radius: 6px; font-size: 13px; letter-spacing: 0.5px;">
                                Submit Now
                            </button>
                        </form>
                    </div>
                </div>


                <!-- Heading Column -->
                <div class="col-6 col-md-6 d-flex flex-column"> <!-- Added flex column -->
                    <div class="h-100 p-3 rounded-3 shadow-sm d-flex align-items-center justify-content-center"
                        style="background: white; border-top: 4px solid #0d6efd;">
                        <h1 class="fw-bold mb-0 section-title" style="font-size: 30px; line-height: 1.4;">
                            <?= htmlspecialchars($page['heading']) ?>
                        </h1>
                    </div>
                </div>


            </div>

            <!-- Full Width Image Row -->
            <!-- Full Width Image Row -->
            <div class="row mt-2 gx-0"> <!-- gx-0 removes horizontal gutters -->
                <div class="col-12 px-0"> <!-- px-0 removes padding -->
                    <img src="<?= BASE_URL ?>/public/assets/img/landing/ABHI.png" alt="Hair restoration before after"
                        class="img-fluid w-100 rounded-0 object-fit-cover landing-image">
                </div>
            </div>

        </div>
    </section>

   

<section class="why-choose">
    <div class="container">
        <?php if (!empty($page['section1_title'])): ?>
            <h2 class="section-title text-center"><?= htmlspecialchars($page['section1_title']) ?></h2>
        <?php endif; ?>

        <div class="row justify-content-center">
            <?php if (!empty($sections['section1'])): ?>
                <?php 
                // First, sort the images by their sequence number
                usort($sections['section1'], function($a, $b) {
                    return $a['sequence'] <=> $b['sequence'];
                });
                
                // Then display them in order
                foreach ($sections['section1'] as $image): ?>
                    <div class="col-md-4 mb-4">
                        <div class="image-card h-100" data-aos="zoom-in">
                            <img src="<?= BASE_URL ?>/<?= htmlspecialchars($image['image_path']) ?>"
                                alt="Section 1 Image"
                                class="img-fluid w-100 h-100 object-fit-cover rounded">
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <!-- Fallback static images (optional) -->
                <div class="col-md-4 mb-4">
                    <div class="image-card h-100" data-aos="zoom-in">
                        <img src="<?= BASE_URL ?>/public/assets/img/landing/2.jpeg" alt="Proven Results"
                            class="img-fluid w-100 h-100 object-fit-cover rounded">
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="image-card h-100" data-aos="zoom-in">
                        <img src="<?= BASE_URL ?>/public/assets/img/landing/3.jpeg" alt="Personalized Care"
                            class="img-fluid w-100 h-100 object-fit-cover rounded">
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

    <?php if (!empty($page['section2_title']) || !empty($sections['section2'])): ?>
        <!-- Craftsmanship Section -->
        <section class="craft-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center mb-5">
                        <?php if (!empty($page['section2_title'])): ?>
                            <h2 class="section-title"><?= htmlspecialchars($page['section2_title']) ?></h2>

                        <?php endif; ?>

                    </div>
                </div>

                <div class="row g-4">
                    <?php foreach ($sections['section2'] as $image): ?>
                        <div class="col-md-4" data-aos="zoom-in">
                            <img src="<?= BASE_URL ?>/<?= htmlspecialchars($image['image_path']) ?>"
                                alt="<?= htmlspecialchars($image['alt_text'] ?? 'Section 2 Image') ?>"
                                class="img-fluid craft-img w-100 h-100 object-fit-cover">
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

    <?php endif; ?>
    <!-- Gallery -->

    <section class="why-choose">
        <div class="container">
            <h2 class="section-title text-center">Gallery</h2>

            <div class="owl-carousel owl-theme">
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/1.jpeg" alt="Expert Doctors"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>

                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/2.jpeg" alt="Advanced Technology"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>

                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/3.jpeg" alt="Proven Results"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>

                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/4.jpeg" alt="Personalized Care"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>

                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/5.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/6.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/7.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/8.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/9.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/10.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/11.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
                <div class="item">
                    <div class="image-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/gallery/12.jpeg" alt="Affordable Packages"
                            class="img-fluid w-100 h-100 object-fit-cover">
                    </div>
                </div>
            </div>

        </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="team-section">
        <div class="container">
            <h2 class="section-title text-center mb-5">Our Expert Team</h2>

            <div class="row justify-content-center">


                <div class="col-lg-5 col-md-6 mb-4">
                    <div class="team-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/doctors/2.jpeg" alt="Dr. Patel"
                            class="img-fluid team-img w-100">
                        <div class="p-4 text-center">
                            <h4>Dr. Mohit Kumar</h4>
                            <p>
                                Dr. Mohit Kumar is a highly respected Trichologist, Senior Hair Transplant Consultant,
                                and Aesthetic Physician with over 12 years of experience in advanced hair and skin care.
                                He completed his medical graduation from Agra University, Uttar Pradesh.
                            </p>
                            <p>
                                Over the years, he has held key positions at India's top hair clinics:
                            <ul>
                                <li>Senior Trichologist – Richfeel Trichology Centre, New Delhi (2014–2016)</li>
                                <li>Hair Transplant Consultant – Plush Hair Clinic, Greater Noida (2016–2017)</li>
                                <li>Senior Consultant – Advanced Hair Studio, Hyderabad & New Delhi (2017–2022)</li>
                                <li>Consultant – Clinic Dermatech, New Delhi (2022–2023)</li>
                                <li>Aesthetic Physician – AK Clinics (2023)</li>
                                <li>Founder & Senior Consultant – Skin Healer Clinic, Delhi (Sep 2023–Present)</li>
                            </ul>
                            </p>
                            <p>
                                Driven by a passion to restore confidence and natural beauty, Dr. Kumar specializes in
                                personalized treatments that deliver real, visible results in hair restoration and
                                aesthetic care.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 mb-4">
                    <div class="team-card">
                        <img src="<?= BASE_URL ?>/public/assets/img/doctors/1.jpeg" alt="Dr. Smith"
                            class="img-fluid team-img w-100">
                        <div class="p-4 text-center">
                            <h4>Dr. Aparna Gupta</h4>
                            <p>
                                MBBS (Santosh Medical College, Ghaziabad)<br>
                                MD (Ram Manohar Lohia, New Delhi)
                            </p>
                            <p>
                                Dr. Aparna Gupta is a highly skilled hair transplant surgeon specializing in advanced
                                techniques like Follicular Unit Extraction (FUE), Bio-FUE, and Direct Hair Transplant
                                (DHT). Her meticulous approach and attention to detail ensure natural-looking,
                                long-lasting results tailored to each individual.
                            </p>
                            <p>
                                At SKINHEALER CLINIC, she blends the latest technology with compassionate, personalized
                                care to deliver seamless and satisfying outcomes. Her dedication to excellence and
                                patient satisfaction has made her a trusted name in the field of hair restoration.
                            </p>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </section>


    <!-- Before and After -->
    <?php if (!empty($page['section3_title']) || !empty($sections['section3'])): ?>
        <section class="why-choose">
            <div class="container">
                <?php if (!empty($page['section3_title'])): ?>
                    <h2 class="section-title text-center"><?= htmlspecialchars($page['section3_title']) ?></h2>
                <?php endif; ?>

                <div class="owl-carousel owl-theme">
                    <?php foreach ($sections['section3'] as $image): ?>
                        <div class="item">
                            <div class="image-card">
                                <img src="<?= BASE_URL ?>/<?= htmlspecialchars($image['image_path']) ?>"
                                    alt="<?= htmlspecialchars($image['alt_text'] ?? 'Before After') ?>"
                                    class="img-fluid w-100 h-100 object-fit-cover">
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

    <!-- Google Review -->

    <?php if (!empty($page['section4_title']) || !empty($sections['section4'])): ?>
    <!-- Why Choose Us Section -->
    <section class="why-choose">
        <div class="container">
            <!-- <?php if (!empty($page['section4_title'])): ?>
                <div class="row">
                    <div class="col-lg-12 text-center mb-5">
                        <h2 class="section-title"><?= htmlspecialchars($page['section4_title']) ?></h2>
                    </div>
                </div>
            <?php endif; ?> -->

            <?php if (!empty($sections['section4'])): ?>
                <div class="owl-carousel owl-theme">
                    <?php foreach ($sections['section4'] as $image): ?>
                        <div class="item">
                            <div class="image-card">
                                <img src="<?= BASE_URL ?>/<?= htmlspecialchars($image['image_path']) ?>" 
                                     alt="<?= htmlspecialchars($image['alt_text'] ?? $page['section4_title'] ?? 'Feature') ?>"
                                     class="img-fluid w-100 h-100 object-fit-cover">
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <!-- Fallback static content if no images are uploaded -->
                <div class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="image-card">
                            <img src="<?= BASE_URL ?>/public/assets/img/landing/review/1.webp" alt="Expert Doctors"
                                class="img-fluid w-100 h-100 object-fit-cover">
                        </div>
                    </div>
                    <!-- Additional fallback items if needed -->
                </div>
            <?php endif; ?>
        </div>
    </section>
<?php endif; ?>



    <!-- conatct -->
    <section class="hero-section">
        <div class="contact-background"></div> <!-- Background image layer -->
        <div class="contact-overlay"></div> <!-- Color overlay layer -->
        <div class="container position-relative"> <!-- Content container -->
            <div class="row justify-content-center"> <!-- Changed to center the column -->
                <div class="col-lg-6 col-md-8"> <!-- Adjusted column width for better centering -->
                    <div class="contact-form bg-white p-4 p-lg-5 rounded-3 shadow"
                        style="border-top: 4px solid #0d6efd;">
                        <?php if (isset($error)): ?>
                            <div class="alert alert-danger mb-4"><?= htmlspecialchars($error) ?></div>
                        <?php endif; ?>

                        <h3 class="text-center mb-4">Book Free Consultation</h3>
                        <form method="POST" action="">
                            <div class="mb-3">
                                <input type="text" class="form-control py-3" name="name" placeholder="Your Full Name"
                                    required style="border-radius: 8px;"
                                    value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>">
                            </div>
                            <div class="mb-3">
                                <input type="tel" class="form-control py-3" name="phone" placeholder="Phone Number"
                                    required style="border-radius: 8px;"
                                    value="<?= isset($_POST['phone']) ? htmlspecialchars($_POST['phone']) : '' ?>">
                            </div>
                            <div class="mb-3">
                                <textarea class="form-control py-3" name="message" rows="3"
                                    placeholder="Describe your Concerns"
                                    style="border-radius: 8px; min-height: 120px;"><?= isset($_POST['message']) ? htmlspecialchars($_POST['message']) : '' ?></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary w-100 py-3 fw-bold"
                                style="border-radius: 8px; font-size: 1.1rem;">
                                Submit Now
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Faq  -->

    <section class="why-choose">
        <div class="container">
            <h2 class="section-title text-center mb-5">Frequently Asked Questions</h2>

            <div class="accordion" id="hairTransplantFAQ">
                <!-- FAQ 1 -->
                <?php foreach ($faqs as $index => $faq): ?>
                    <?php
                    $headingId = "heading" . ($index + 1);
                    $collapseId = "collapse" . ($index + 1);
                    ?>
                    <div class="accordion-item border-0 mb-3 shadow-sm rounded-3 overflow-hidden">
                        <h2 class="accordion-header" id="<?= $headingId ?>">
                            <button class="accordion-button collapsed bg-white text-dark fw-bold py-3" type="button"
                                data-bs-toggle="collapse" data-bs-target="#<?= $collapseId ?>" aria-expanded="false"
                                aria-controls="<?= $collapseId ?>">
                                <span class="faq-question"><?= htmlspecialchars($faq['question']) ?></span>
                            </button>
                        </h2>
                        <div id="<?= $collapseId ?>" class="accordion-collapse collapse" aria-labelledby="<?= $headingId ?>"
                            data-bs-parent="#hairTransplantFAQ">
                            <div class="accordion-body bg-light">
                                <?= nl2br(htmlspecialchars($faq['answer'])) ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <footer class="landing-footer py-4 bg-light border-top">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <p class="m-0 text-muted">&copy;
                        <script>document.write(new Date().getFullYear())</script> Skin Healer. All rights reserved.
                    </p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <!-- <p class="m-0 text-muted">
                    <a href="#" class="text-decoration-none text-muted me-3">Privacy Policy</a>
                    <a href="#" class="text-decoration-none text-muted">Terms of Service</a>
                </p> -->
                </div>
            </div>
        </div>
    </footer>



    <!-- Sticky Buttons -->
    <div class="sticky-buttonBook">

        <a href="#contact" class="book-btn call-btn-sticky">
            Book Appointment
        </a>
    </div>
    <div class="sticky-buttons">

        <?php if (!empty($settings['whatsapp'])): ?>
            <a href="https://wa.me/91<?= $settings['whatsapp'] ?>" class="sticky-btn whatsapp-btn">
                <i class="bi bi-whatsapp"></i>
            </a>
        <?php endif; ?>

    </div>
    <div class="sticky-buttons1">

        <a href="tel:<?= htmlspecialchars($settings['phone']) ?>" class="sticky-btn call-btn-sticky">
            <i class="bi bi-telephone"></i>
        </a>
        </a>
    </div>



    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Owl Carousel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

    <script>
        // Header scroll effect
        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('.main-header').addClass('scrolled');
            } else {
                $('.main-header').removeClass('scrolled');
            }
        });

        // Owl Carousel
        $(document).ready(function () {
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 20,
                nav: false,
                dots: false,
                autoplay: true, // Auto play
                autoplayTimeout: 3000, // Auto play interval in milliseconds (3 seconds)
                autoplayHoverPause: true, // Pause on hover
                responsive: {
                    0: {
                        items: 1,

                    },
                    768: {
                        items: 2
                    },
                    992: {
                        items: 3
                    },
                    1200: {
                        items: 3
                    }
                }
            });
        });
    </script>

    <script>
        AOS.init();
    </script>

    <script>
        function adjustImageHeight() {
            const topRow = document.getElementById('top-row');
            const image = document.querySelector('.landing-image');
            if (topRow && image) {
                const topRowHeight = topRow.offsetHeight;
                image.style.height = `calc(92vh - ${topRowHeight}px)`;
            }
        }

        // Adjust on load and resize
        window.addEventListener('load', adjustImageHeight);
        window.addEventListener('resize', adjustImageHeight);
    </script>

</body>

</html>