<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Wellness Journey</title>
    <!-- REMOVED: <script src="https://cdn.tailwindcss.com"></script> -->
    <!-- NEW: Link to a pre-compiled Tailwind CSS file from CDN for better stability -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* Custom CSS for global styles, animations, and scrollbar customization */

        /* Ensuring the 'Inter' font is applied globally */
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased; /* Smoother font rendering for webkit browsers */
            -moz-osx-font-smoothing: grayscale; /* Smoother font rendering for Firefox */
        }

        /* Smooth scrolling for anchor links (e.g., "Get Started" to Contact section) */
        html {
            scroll-behavior: smooth;
        }

        /* Custom Scrollbar Styling for horizontally scrollable sections (e.g., Product Carousel, Brand Bar) */
        /* This enhances the visual appeal of scrollable areas */
        .overflow-x-auto::-webkit-scrollbar {
            height: 8px; /* Height of the horizontal scrollbar */
        }
        .overflow-x-auto::-webkit-scrollbar-track {
            background: #e0e0e0; /* Light grey track background */
            border-radius: 10px; /* Rounded corners for the track */
        }
        .overflow-x-auto::-webkit-scrollbar-thumb {
            background: #a78bfa; /* Soft purple color for the scrollbar thumb */
            border-radius: 10px; /* Rounded corners for the thumb */
        }
        .overflow-x-auto::-webkit-scrollbar-thumb:hover {
            background: #8b5cf6; /* Darker purple on hover for interactivity */
        }

        /* Scroll-snapping properties for horizontally scrollable sections (Product Carousel, Brand Bar) */
        /* This makes scrolling feel more controlled and 'snappy' to each item */
        .scroll-snap-x {
            scroll-snap-type: x mandatory; /* Enforces snapping along the x-axis */
            -webkit-overflow-scrolling: touch; /* Improves scrolling performance on iOS devices */
        }
        .scroll-snap-x > * {
            scroll-snap-align: start; /* Each child item aligns to the start of the scroll container */
            flex-shrink: 0; /* Prevents items from shrinking when space is limited */
        }

        /* Keyframe animation for subtle fade-in and slight scale-up effect */
        /* Used for hero section elements and other main content sections for a smooth entry */
        @keyframes fadeInScaleUp {
            from {
                opacity: 0; /* Start completely transparent */
                transform: translateY(20px) scale(0.98); /* Start slightly below and scaled down */
            }
            to {
                opacity: 1; /* End fully opaque */
                transform: translateY(0) scale(1); /* End at original position and scale */
            }
        }
        .animate-in {
            animation: fadeInScaleUp 0.8s ease-out forwards; /* Apply animation for 0.8s with ease-out timing */
            opacity: 0; /* Ensure elements are hidden before animation starts */
        }
        /* Delay classes for staggered animation effect within sections */
        .animate-in.delay-100 { animation-delay: 0.1s; }
        .animate-in.delay-200 { animation-delay: 0.2s; }
        .animate-in.delay-300 { animation-delay: 0.3s; }
        .animate-in.delay-400 { animation-delay: 0.4s; }
        .animate-in.delay-500 { animation-delay: 0.5s; }
        .animate-in.delay-600 { animation-delay: 0.6s; }

        /* Animation for subtle pulsing background on the footer */
        @keyframes pulse-light {
            0% { opacity: 0.5; }
            50% { opacity: 0.7; }
            100% { opacity: 0.5; }
        }
        .animate-pulse-light {
            animation: pulse-light 5s infinite ease-in-out alternate;
        }

        /* Styling for the FAQ accordion icon when active */
        .faq-question.active .faq-icon {
            transform: rotate(45deg); /* Rotates the '+' icon to a 'x' */
        }
    </style>
    <!-- Optional: Link to your custom CSS file (e.g., style.css) for additional styling or overrides -->
    <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body class="font-sans text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300">

    <!-- Back to Top Button (Bonus Requirement) -->
    <!-- This button is hidden by default and will be shown/hidden by JavaScript based on scroll position -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-purple-600 text-white p-4 rounded-full shadow-lg hover:bg-purple-700 transition-all duration-300 transform scale-0 opacity-0 z-50">
        <!-- SVG icon for an upward arrow -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
        </svg>
    </button>

    <!-- 1. Hero Section (Header) -->
    <!-- This section is designed to take up the full viewport height and be centered. -->
    <header id="hero" class="relative min-h-screen flex flex-col items-center justify-center text-center p-4 overflow-hidden text-white
                           bg-cover bg-center" style="background-image:url('images/background.png');">
        <!-- The background-image style includes both a linear gradient overlay and the image.
             The gradient overlay makes the text more readable over the image.
             Replace 'https://placehold.co/...' with your actual image path (e.g., 'images/your-hero-image.jpg') -->

        <!-- Optional: A subtle wave or abstract pattern SVG overlay for visual texture (can be removed if image is too busy) -->
        <svg class="absolute bottom-0 left-0 w-full z-0 opacity-20" viewBox="0 0 1440 320" preserveAspectRatio="none">
            <path fill="rgba(255,255,255,0.1)" fill-opacity="1" d="M0,256L60,245.3C120,235,240,213,360,197.3C480,181,600,171,720,186.7C840,203,960,245,1080,240C1200,235,1320,181,1380,154.7L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
        </svg>

        <div class="z-10 text-white max-w-4xl mx-auto">
            <!-- Startup Name (h1 tag as per requirement) -->
            <h1 class="text-5xl md:text-7xl font-extrabold mb-5 leading-tight animate-in">Your Wellness Journey</h1>
            <!-- Short, meaningful tagline -->
            <p class="text-xl md:text-2xl mb-10 opacity-90 animate-in delay-200">Empowering your personalized path to a vibrant, balanced life.</p>
            <!-- Clear, styled Call to Action (CTA) button -->
            <a href="#contact" class="inline-block bg-white text-purple-600 dark:bg-purple-700 dark:text-white
                                      px-10 py-5 rounded-full text-xl font-semibold shadow-2xl
                                      hover:shadow-purple-400/50 transform hover:scale-105 transition-all duration-300
                                      border-2 border-transparent hover:border-white animate-in delay-400">
                Start Your Journey
            </a>
        </div>
    </header>

    <main class="container mx-auto px-6 py-20">

        <!-- 2. About Section -->
        <section id="about" class="bg-gradient-to-br from-white to-purple-50 dark:from-gray-800 dark:to-gray-900
                                  rounded-3xl p-10 md:p-20 mb-24 shadow-2xl flex flex-col lg:flex-row items-center justify-center lg:space-x-20 animate-in delay-500">
            <div class="lg:w-1/2 text-center lg:text-left mb-12 lg:mb-0">
                <h2 class="text-4xl md:text-5xl font-bold mb-7 text-purple-700 dark:text-purple-400 leading-tight">
                    Our Story: Forging Paths to Flourishing Lives
                </h2>
                <!-- Origin Story -->
                <p class="text-lg leading-relaxed mb-5 text-gray-700 dark:text-gray-200">
                    At Your Wellness Journey, our **origin story** is rooted in a collective desire to make genuine well-being accessible to all. Born from shared personal challenges and a vision for holistic empowerment, our founders united to build a platform that transcends generic health advice, offering deeply personalized guidance.
                </p>
                <!-- Mission -->
                <p class="text-lg leading-relaxed mb-5 text-gray-700 dark:text-gray-200">
                    Our unwavering **mission** is to equip individuals with the knowledge, tools, and support systems necessary to navigate their unique wellness paths with confidence. We commit to fostering sustainable habits and celebrating every milestone on the journey toward a more vibrant, balanced life.
                </p>
                <!-- Community Impact -->
                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-200">
                    We envision profound **community impact**, cultivating a thriving, empathetic network where diverse experiences are shared, encouragement flows freely, and collective growth elevates global health standards. Join us in building a healthier, more interconnected world.
                </p>
            </div>
            <div class="lg:w-1/2 flex justify-center items-center">
                <!-- Placeholder for logo, symbolic image, or other visual element -->
                <img src="images/growth.png" alt="Abstract illustration of growth and personal journey" 
            </div>
        </section>

        <!-- 3. Product Carousel with Key Features -->
        <section id="products" class="mb-24">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-14 text-purple-700 dark:text-purple-400">Our Key Features</h2>
            <!-- Horizontally scrollable carousel/slider container -->
            <div class="overflow-x-auto scroll-snap-x flex p-8 space-x-10 pb-12">
                <!-- Product Card 1 -->
                <div class="min-w-[340px] max-w-sm w-full bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 flex flex-col items-center text-center
                            border-t-8 border-blue-400 dark:border-blue-600 transform hover:translate-y-[-8px] transition-all duration-300 group">
                    <div class="bg-blue-100 dark:bg-blue-700 rounded-full p-5 mb-7 shadow-lg group-hover:shadow-xl transition-shadow">
                        <img src="images/nutrition.svg" alt="Nutrition Icon" class="w-18 h-18">
                    </div>
                    <!-- Title of the product/feature -->
                    <h3 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Nutrition Guidance Tools</h3>
                    <!-- Short description showing what the product does -->
                    <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
                        AI-powered meal planning, automated grocery lists, and weekly plans tailored to individual needs, simplifying healthy eating and eliminating guesswork.
                    </p>
                    <ul class="text-left text-base text-gray-600 dark:text-gray-400 list-disc list-inside space-y-2">
                        <li>What it does: Creates custom, adaptable meal plans.</li>
                        <li>Impact: Simplifies healthy eating, builds sustainable habits.</li>
                        <li>Key Features: AI-powered, personalized, smart grocery lists.</li>
                    </ul>
                </div>
                <!-- Product Card 2 -->
                <div class="min-w-[340px] max-w-sm w-full bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 flex flex-col items-center text-center
                            border-t-8 border-pink-400 dark:border-pink-600 transform hover:translate-y-[-8px] transition-all duration-300 group">
                    <div class="bg-pink-100 dark:bg-pink-700 rounded-full p-5 mb-7 shadow-lg group-hover:shadow-xl transition-shadow">
                        <img src="images/workout.svg" alt="Workout Icon" class="w-18 h-18">
                    </div>
                    <h3 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Custom Workout Plan Builder</h3>
                    <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
                        Adaptive workout progressions that adjust to individual difficulty and exercises, keeping users stronger, preventing plateaus, and maintaining motivation.
                    </p>
                    <ul class="text-left text-base text-gray-600 dark:text-gray-400 list-disc list-inside space-y-2">
                        <li>What it does: Builds dynamic, adaptable workout routines.</li>
                        <li>Impact: Ensures consistent progress, boosts motivation.</li>
                        <li>Key Features: Adaptive difficulty, plateau prevention.</li>
                    </ul>
                </div>
                <!-- Product Card 3 -->
                <div class="min-w-[340px] max-w-sm w-full bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 flex flex-col items-center text-center
                            border-t-8 border-green-400 dark:border-green-600 transform hover:translate-y-[-8px] transition-all duration-300 group">
                    <div class="bg-green-100 dark:bg-green-700 rounded-full p-5 mb-7 shadow-lg group-hover:shadow-xl transition-shadow">
                        <img src="images/coach.svg" alt="Coaching Icon" class="w-18 h-18">
                    </div>
                    <h3 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Personal Coaching Connection</h3>
                    <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
                        Connect with certified wellness coaches for one-on-one sessions, personalized goal setting, regular check-ins, and expert accountability.
                    </p>
                    <ul class="text-left text-base text-gray-600 dark:text-gray-400 list-disc list-inside space-y-2">
                        <li>What it does: Provides access to expert wellness coaches.</li>
                        <li>Impact: Accelerates progress through direct accountability.</li>
                        <li>Key Features: Personalized goals, expert guidance.</li>
                    </ul>
                </div>
                <!-- Add more product cards here if needed. They will automatically scroll horizontally. -->
            </div>
        </section>

        <!-- 4. Audience Toggle Switch (JavaScript will make this functional) -->
        <section id="audience-toggle" class="bg-purple-100 dark:bg-purple-900 rounded-3xl p-10 md:p-20 mb-24 shadow-2xl text-center animate-in delay-600">
            <h2 class="text-4xl md:text-5xl font-bold mb-10 text-purple-800 dark:text-purple-300">Tailored Wellness Experiences</h2>
            <div class="flex justify-center items-center mb-12 space-x-6">
                <!-- Toggle Buttons -->
                <button id="toggle-students" class="px-10 py-5 rounded-full text-xl font-semibold bg-purple-700 text-white shadow-lg hover:bg-purple-800 transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">For Students</button>
                <button id="toggle-mentors" class="px-10 py-5 rounded-full text-xl font-semibold bg-gray-200 text-gray-800 shadow-md hover:bg-gray-300 transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600">For Mentors</button>
            </div>
            <!-- Content for Students -->
            <div id="student-content" class="audience-content p-10 border-t-4 border-purple-500 dark:border-purple-600 rounded-2xl bg-white dark:bg-gray-800 text-left shadow-lg">
                <h3 class="text-3xl font-semibold mb-5 text-purple-700 dark:text-purple-400">Resources Tailored for Academic Success</h3>
                <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">Access bespoke study plans, effective stress management techniques, and academic performance boosters. Our curated resources are designed to help students conquer their educational goals while maintaining peak physical and mental well-being, ensuring a balanced and thriving student life.</p>
            </div>
            <!-- Content for Mentors (hidden by default, shown by JS) -->
            <div id="mentor-content" class="audience-content p-10 border-t-4 border-purple-500 dark:border-purple-600 rounded-2xl bg-white dark:bg-gray-800 text-left shadow-lg hidden">
                <h3 class="text-3xl font-semibold mb-5 text-purple-700 dark:text-purple-400">Empowering Opportunities for Guiding the Next Generation</h3>
                <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">Join our esteemed network of experienced mentors to significantly impact aspiring individuals. Share your invaluable expertise in career development, personal growth, and specialized skills. This platform offers a unique chance to empower future leaders and contribute to a supportive, knowledge-sharing community.</p>
            </div>
        </section>

        <!-- 5. FAQ Accordion (JavaScript will make this functional) -->
        <section id="faq" class="mb-24">
            <h2 class="text-4xl md:text-5xl font-bold text-center mb-14 text-purple-700 dark:text-purple-400">Frequently Asked Questions</h2>
            <div class="max-w-3xl mx-auto space-y-6">
                <!-- FAQ Item 1 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
                    <button class="faq-question w-full text-left text-xl font-bold flex justify-between items-center p-6 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                        How does the personalized meal planning work?
                        <span class="faq-icon text-3xl transform transition-transform duration-300 rotate-0">+</span>
                    </button>
                    <div class="faq-answer px-6 pb-6 text-lg text-gray-700 dark:text-gray-300 hidden">
                        Our AI analyzes your dietary preferences, health goals, and any allergies or restrictions to create a custom meal plan tailored just for you. It intelligently adjusts weekly based on your progress and feedback, ensuring optimal results and a delicious journey.
                    </div>
                </div>
                <!-- FAQ Item 2 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
                    <button class="faq-question w-full text-left text-xl font-bold flex justify-between items-center p-6 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                        Can I connect with a real coach through the platform?
                        <span class="faq-icon text-3xl transform transition-transform duration-300 rotate-0">+</span>
                    </button>
                    <div class="faq-answer px-6 pb-6 text-lg text-gray-700 dark:text-gray-300 hidden">
                        Yes, our platform offers a premium tier where you can seamlessly connect with certified wellness coaches for one-on-one sessions. These experts provide personalized guidance, unwavering accountability, and advanced strategies to accelerate your progress and overcome challenges.
                    </div>
                </div>
                <!-- FAQ Item 3 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
                    <button class="faq-question w-full text-left text-xl font-bold flex justify-between items-center p-6 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                        Is my personal health data secure and private?
                        <span class="faq-icon text-3xl transform transition-transform duration-300 rotate-0">+</span>
                    </button>
                    <div class="faq-answer px-6 pb-6 text-lg text-gray-700 dark:text-gray-300 hidden">
                        Absolutely. We prioritize your privacy and data security above all else. We employ industry-standard encryption protocols, robust security measures, and strict data access policies to protect all your personal health information. Your trust is paramount to us.
                    </div>
                </div>
                <!-- Add more FAQ items here if needed -->
            </div>
        </section>

        <!-- 6. Meet the Team -->
        <section id="team" class="bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-900
                                 rounded-3xl p-10 md:p-20 mb-24 shadow-2xl text-center">
            <h2 class="text-4xl md:text-5xl font-bold mb-14 text-purple-700 dark:text-purple-400">Meet Our Dedicated Team</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
                <!-- Team Member 1 (You) -->
                <div class="flex flex-col items-center p-8 bg-white dark:bg-gray-700 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300 border-b-4 border-purple-500 dark:border-purple-600">
                    <img src="images/Nicole.png" alt="Team Member 1 Profile" class="rounded-full w-40 h-40 object-cover mb-6 border-4 border-purple-300 dark:border-purple-500 shadow-lg">
                    <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Nicole Kirigi</h3>
                    <p class="text-purple-600 dark:text-purple-400 text-lg mb-4">Founder & Chief Wellness Architect</p>
                    <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed">Passionate about holistic well-being, I founded this platform to empower individuals on their health journey, fostering a world of vibrant living through innovative solutions.</p>
                </div>
                <!-- Team Member 2 -->
                <div class="flex flex-col items-center p-8 bg-white dark:bg-gray-700 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300 border-b-4 border-pink-500 dark:border-pink-600">
                    <img src="images/Polycarp.png" alt="Team Member 2 Profile" class="rounded-full w-40 h-40 object-cover mb-6 border-4 border-pink-300 dark:border-pink-500 shadow-lg">
                    <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Polycarp Irungu</h3>
                    <p class="text-purple-600 dark:text-purple-400 text-lg mb-4">Head of Product & Nutrition Science</p
                    <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed">A true tech innovator with a profound passion for creating intuitive, impactful user experiences that seamlessly merge cutting-edge design and robust functionality.</p>
                </div>
                <!-- Team Member 3 -->
                <div class="flex flex-col items-center p-8 bg-white dark:bg-gray-700 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300 border-b-4 border-blue-500 dark:border-blue-600">
                    <img src="images/Jude.png" alt="Team Member 3 Profile" class="rounded-full w-40 h-40 object-cover mb-6 border-4 border-blue-300 dark:border-blue-500 shadow-lg">
                    <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Jude Kibati</h3>
                    <p class="text-purple-600 dark:text-purple-400 text-lg mb-4">Lead Fitness & Coaching Strategies</p>
                    <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed">Dedicated to fostering a thriving, supportive community where every member feels heard, valued, and profoundly motivated on their individual wellness journey.</p>
                </div>
            </div>
        </section>

        <!-- 7. Brand Bar (Horizontal Tagline Row) -->
        <section id="brand-bar" class="mb-24">
            <div class="overflow-x-auto scroll-snap-x flex bg-purple-200 dark:bg-purple-950 p-8 rounded-full shadow-inner items-center justify-between">
                <p class="min-w-[280px] text-center text-2xl md:text-3xl font-extrabold text-purple-800 dark:text-purple-200 mx-8">✨ Resilient. ✨</p>
                <p class="min-w-[280px] text-center text-2xl md:text-3xl font-extrabold text-purple-800 dark:text-purple-200 mx-8">🌱 Growth-Oriented. 🌱</p>
                <p class="min-w-[280px] text-center text-2xl md:text-3xl font-extrabold text-purple-800 dark:text-purple-200 mx-8">⚡ Dynamic. ⚡</p>
                <p class="min-w-[280px] text-center text-2xl md:text-3xl font-extrabold text-purple-800 dark:text-purple-200 mx-8">❤️ Empowering. ❤️</p>
                <p class="min-w-[280px] text-center text-2xl md:text-3xl font-extrabold text-purple-800 dark:text-purple-200 mx-8">☀️ Vibrant. ☀️</p>
            </div>
        </section>

        <!-- AI Chatbot Section -->
<section id="chatbot-section" class="py-16 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-100 rounded-lg shadow-xl mx-auto max-w-4xl my-8 p-6">
    <div class="container mx-auto">
        <h2 class="text-4xl font-extrabold text-center text-purple-700 dark:text-purple-400 mb-8">Talk to Our AI Wellness Guide</h2>
        <p class="text-xl text-center text-gray-600 dark:text-gray-300 mb-8">Ask me anything about Your Wellness Journey's mission, services, or how you can get involved.</p>

        <div id="chat-container" class="bg-white dark:bg-gray-700 rounded-lg shadow-lg flex flex-col h-[600px] border border-gray-200 dark:border-gray-600">
            <!-- Sample Q&A Buttons -->
            <div class="flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600 rounded-t-lg">
                <div class="flex flex-wrap justify-center gap-2">
                    <button class="sample-question-btn bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-2 focus:ring-purple-500" data-question="What is your mission?">What is your mission?</button>
                    <button class="sample-question-btn bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-2 focus:ring-purple-500" data-question="What problems do you solve?">What problems do you solve?</button>
                    <button class="sample-question-btn bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-2 focus:ring-purple-500" data-question="What services do you offer?">What services do you offer?</button>
                    <button class="sample-question-btn bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-2 focus:ring-purple-500" data-question="Who founded the startup?">Who founded the startup?</button>
                    <button class="sample-question-btn bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-2 focus:ring-purple-500" data-question="How can I contact the team?">How can I contact the team?</button>
                </div>
            </div>

            <!-- Chat Messages Display Area -->
            <div id="chat-messages" class="flex-grow overflow-y-auto p-4 space-y-4">
                <!-- Messages will be appended here by JavaScript -->
            </div>

            <!-- Chat Input Area -->
            <div class="flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 rounded-b-lg flex items-center space-x-4">
                <input type="text" id="chat-input" placeholder="Type your question..."
                       class="flex-grow p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-gray-100 text-base" />
                <button id="send-button"
                        class="bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-lg font-semibold shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed">
                    Send
                </button>
            </div>
        </div>
    </div>
</section>

<script type="module">
    // Import Firebase modules
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
    import { getAuth, signInAnonymously } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
    import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

    // Initialize Firebase - Global variables from Canvas
    const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

    let db;
    let auth;
    let userId;
    let isAuthReady = false; // Flag to track Firebase auth status

    let chatHistory = []; // Stores user and bot messages
    let isLoading = false; // To prevent multiple requests
    let startupContext = ''; // To store the context loaded from context.txt

    // Function to append messages to the chat display
    function appendMessage(sender, text) {
        const chatMessages = document.getElementById('chat-messages'); // Get element inside function
        if (!chatMessages) {
            console.error("Chat messages display area not found.");
            return;
        }

        const messageElement = document.createElement('div');
        messageElement.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
        
        const bubbleElement = document.createElement('div');
        bubbleElement.className = `max-w-md p-4 rounded-xl shadow-md whitespace-pre-wrap ${
            sender === 'user'
                ? 'bg-purple-600 text-white rounded-br-none'
                : 'bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-100 rounded-bl-none'
        }`;
        bubbleElement.textContent = text; // Use textContent for security and simple text

        messageElement.appendChild(bubbleElement);
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to bottom
    }

    // Function to display loading indicator
    function showLoadingIndicator() {
        const chatMessages = document.getElementById('chat-messages');
        if (!chatMessages) return;

        const loadingElement = document.createElement('div');
        loadingElement.id = 'loading-indicator';
        loadingElement.className = "flex justify-start";
        loadingElement.innerHTML = `
            <div class="max-w-md p-4 rounded-xl rounded-bl-none bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-100 shadow-md">
                <div class="flex items-center space-x-2">
                    <span class="relative flex h-3 w-3">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
                    </span>
                    <span>Thinking...</span>
                </div>
            </div>
        `;
        chatMessages.appendChild(loadingElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    // Function to hide loading indicator
    function hideLoadingIndicator() {
        const loadingElement = document.getElementById('loading-indicator');
        if (loadingElement) {
            loadingElement.remove();
        }
    }

    // Main send message logic
    const sendMessage = async (question) => {
        const chatInput = document.getElementById('chat-input');
        const sendButton = document.getElementById('send-button');
        const sampleQuestionButtons = document.querySelectorAll('.sample-question-btn');

        if (isLoading) return; // Prevent multiple clicks

        const userQuestion = question || (chatInput ? chatInput.value.trim() : '');
        if (!userQuestion) {
            appendMessage("bot", "Please enter a question to start our conversation!");
            return;
        }

        if (!startupContext) {
            appendMessage("bot", "AI context is not loaded yet. Please wait a moment or check for setup errors. Make sure 'context.txt' is correctly deployed.");
            return;
        }

        appendMessage("user", userQuestion);
        if (chatInput) chatInput.value = ''; // Clear input

        isLoading = true;
        if (sendButton) sendButton.disabled = true;
        if (chatInput) chatInput.disabled = true;
        sampleQuestionButtons.forEach(btn => btn.disabled = true);
        showLoadingIndicator();

        try {
            // Construct payload for Gemini API
            const currentChatHistory = [...chatHistory]; // Copy current history
            
            // Add the context as a system prompt to the first message of the chat history
            const payloadContents = [
                { role: "user", parts: [{ text: startupContext }] }, // System prompt always sent first
                ...currentChatHistory.map(msg => ({ role: msg.sender, parts: [{ text: msg.text }] })), // Previous messages
                { role: "user", parts: [{ text: userQuestion }] } // Current user message
            ];

            const payload = { contents: payloadContents };

            const apiKey = ""; // Canvas will automatically provide the API key
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            if (!response.ok) {
                const errorBody = await response.text();
                throw new Error(`API error: ${response.status} - ${errorBody || response.statusText}`);
            }

            const contentType = response.headers.get('content-type');
            if (contentType && contentType.includes('application/json')) {
                const result = await response.json();

                let botResponseText = "I'm sorry, I couldn't generate a response. Please try again.";
                if (result.candidates && result.candidates.length > 0 &&
                    result.candidates[0].content && result.candidates[0].content.parts &&
                    result.candidates[0].content.parts.length > 0) {
                    botResponseText = result.candidates[0].content.parts[0].text;
                } else {
                    console.error("Unexpected AI response structure:", result);
                    botResponseText = "Received an unexpected response format from the AI. Please try again.";
                }

                appendMessage("bot", botResponseText);
                // Add to chat history for next turn
                chatHistory.push({ sender: "user", text: userQuestion });
                chatHistory.push({ sender: "bot", text: botResponseText });

            } else {
                const rawResponse = await response.text();
                throw new Error(`API returned non-JSON response (Content-Type: ${contentType || 'None'}). Raw response: ${rawResponse.substring(0, 200)}...`);
            }

        } catch (error) {
            console.error("Error communicating with AI:", error);
            appendMessage("bot", `AI communication error: ${error.message}. This might be due to a missing/invalid API key or a temporary service issue. Please check the console for details.`);
        } finally {
            hideLoadingIndicator();
            isLoading = false;
            if (sendButton) sendButton.disabled = false;
            if (chatInput) chatInput.disabled = false;
            sampleQuestionButtons.forEach(btn => btn.disabled = false);
            if (chatInput) chatInput.focus();
        }
    };

    // Firebase Visitor Counter Logic (Called after Firebase is initialized)
    const updateVisitorCount = async () => {
        if (isAuthReady && db && userId) {
            const visitorDocRef = doc(db, "artifacts", appId, "public", "data", "visitorCounts", "totalVisits");
            try {
                let currentLocalCount = parseInt(localStorage.getItem('site_visits_firebase_session') || '0', 10);
                if (currentLocalCount === 0) {
                    await setDoc(visitorDocRef, { count: (window.localStorage.getItem('site_visits_firebase') || 0) + 1 }, { merge: true });
                    window.localStorage.setItem('site_visits_firebase', (parseInt(window.localStorage.getItem('site_visits_firebase') || '0', 10) + 1).toString());
                    window.localStorage.setItem('site_visits_firebase_session', '1'); // Mark session as visited
                }
            } catch (e) {
                console.error("Error updating visitor count: ", e);
            }
        }
    };

    // This block ensures DOM elements are ready before we try to access them.
    window.addEventListener('load', async () => {
        // Now it's safe to get elements by ID/class
        const chatInputLocal = document.getElementById('chat-input');
        const sendButtonLocal = document.getElementById('send-button');
        const sampleQuestionButtonsLocal = document.querySelectorAll('.sample-question-btn');

        // Set up event listeners using the local variables
        if (sendButtonLocal) {
            sendButtonLocal.addEventListener('click', () => sendMessage());
        }
        if (chatInputLocal) {
            chatInputLocal.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        }
        sampleQuestionButtonsLocal.forEach(button => {
            button.addEventListener('click', () => {
                const question = button.dataset.question;
                sendMessage(question); // Send the specific sample question
            });
        });

        // Initialize Firebase and load context
        initializeFirebase(); 
        
        try {
            const contextUrl = new URL('context.txt?v=' + new Date().getTime(), window.location.origin).href;
            const response = await fetch(contextUrl);
            if (!response.ok) {
                if (response.status === 404) {
                    throw new Error(`Context file 'context.txt' not found at ${contextUrl}. Please ensure it's in your project's root directory and pushed to GitHub.`);
                } else {
                    throw new Error(`Failed to load context.txt (Status: ${response.status || 'N/A'})`);
                }
            }
            startupContext = await response.text();
            appendMessage("bot", "Hello! I'm your AI wellness guide. Ask me anything about Your Wellness Journey!");
        } catch (error) {
            console.error("Error loading startup context:", error);
            appendMessage("bot", `Error loading AI context: ${error.message}. Chatbot features might be limited.`);
        }
    });

</script>

        <!-- 9. Contact Form -->
        <section id="contact" class="bg-green-100 dark:3DA5A8 rounded-3xl p-10 md:p-20 mb-24 shadow-2xl text-center">
            <h2 class="text-4xl md:text-5xl font-bold mb-10 text-green-800 dark:text-green-300">Get In Touch</h2>
            <form class="max-w-lg mx-auto space-y-8 bg-white dark:bg-gray-800 p-12 rounded-2xl shadow-xl border border-green-200 dark:border-green-700">
                <!-- Name Input Field -->
                <div>
                    <label for="name" class="block text-left text-xl font-medium text-gray-900 dark:text-white mb-3">Your Name</label>
                    <input type="text" id="name" name="name" class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-4 focus:ring-green-400 dark:bg-gray-700 dark:text-gray-100 text-lg" placeholder="Your Name" required>
                </div>
                <!-- Email Input Field -->
                <div>
                    <label for="email" class="block text-left text-xl font-medium text-gray-900 dark:text-white mb-3">Your Email</label>
                    <input type="email" id="email" name="email" class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-4 focus:ring-green-400 dark:bg-gray-700 dark:text-gray-100 text-lg" placeholder="Your Email" required>
                </div>
                <!-- Message Textarea -->
                <div>
                    <label for="message" class="block text-left text-xl font-medium text-gray-900 dark:text-white mb-3">Your Message</label>
                    <textarea id="message" name="message" rows="7" class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-4 focus:ring-green-400 dark:bg-gray-700 dark:text-gray-100 text-lg" placeholder="Tell us about your wellness goals or feedback..." required></textarea>
                </div>
                <!-- Submit Button -->
                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg font-semibold shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-400">
                    Send Message
                </button>
            </form>
        </section>

    </main>

    <!-- 10. Footer -->
    <footer class="bg-gray-900 dark:bg-black text-white py-14 text-center relative overflow-hidden">
        <div class="container mx-auto px-6 z-10 relative">
            <p class="mb-6 text-lg">&copy; 2025 Your Wellness Journey. All rights reserved.</p>
            <div class="flex justify-center space-x-10 mb-8">
                <!-- Footer Links -->
                <a href="https://github.com/your-github" target="_blank" class="hover:text-purple-400 transition-colors duration-200 text-lg">GitHub</a>
                <a href="mailto:info@yourwellnessjourney.com" class="hover:text-purple-400 transition-colors duration-200 text-lg">Email</a>
                <a href="https://linkedin.com/in/your-linkedin" target="_blank" class="hover:text-purple-400 transition-colors duration-200 text-lg">LinkedIn</a>
                <!-- Add more links as needed -->
            </div>
            <!-- 11. Visitor Counter (JavaScript will update this) -->
            <div id="visitor-counter" class="text-base text-gray-400 dark:text-gray-500 mt-6">
                Site Visits: <span id="count" class="font-bold text-gray-300">0</span>
            </div>
        </div>
        <!-- Subtle Footer Background Animation -->
        <div class="absolute inset-0 z-0 bg-gradient-to-br from-gray-900 via-gray-800 to-purple-900 opacity-50 animate-pulse-light"></div>
    </footer>

    <!-- All JavaScript for interactivity is placed at the end of the body for better performance -->
    <script>
        // --- Dark/Light Mode Toggle Logic (Requirement 12) ---
        const body = document.body;
        // This function sets the theme based on the 'theme' parameter and saves it to localStorage.
        const setTheme = (theme) => {
            if (theme === 'dark') {
                body.classList.add('dark');
                localStorage.setItem('theme', 'dark'); // Save dark preference
            } else {
                body.classList.remove('dark');
                localStorage.setItem('theme', 'light'); // Save light preference
            }
        };

        // Initialize theme on page load based on saved preference in localStorage, default to 'light'.
        const savedTheme = localStorage.getItem('theme');
        setTheme(savedTheme || 'light');

        // Optional: If you add a button with id="theme-toggle-button" in your HTML, uncomment this to enable it.
        // const themeToggleButton = document.getElementById('theme-toggle-button');
        // if (themeToggleButton) {
        //     themeToggleButton.addEventListener('click', () => {
        //         const currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
        //         const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        //         setTheme(newTheme);
        //     });
        // }

        // --- Visitor Counter Logic (Requirement 11) ---
        const visitorCountElement = document.getElementById('count');
        // Retrieve visit count from localStorage; parse as integer, default to 0 if not found.
        let visitCount = parseInt(localStorage.getItem('site_visits') || '0', 10);
        visitCount = visitCount + 1; // Increment count for the current visit.
        localStorage.setItem('site_visits', visitCount); // Save the updated count back to localStorage.
        visitorCountElement.textContent = visitCount; // Display the current count on the page.

        // --- Back to Top Button Logic (Bonus Requirement) ---
        const backToTopButton = document.getElementById('back-to-top');

        // Show/hide button based on scroll position.
        window.addEventListener('scroll', () => {
            // Button appears after scrolling down 400 pixels.
            if (window.scrollY > 400) {
                // Remove 'hidden' class and add 'scale-100', 'opacity-100' for a smooth reveal animation.
                backToTopButton.classList.remove('scale-0', 'opacity-0', 'hidden');
                backToTopButton.classList.add('scale-100', 'opacity-100');
            } else {
                // Remove 'scale-100', 'opacity-100' and add 'scale-0', 'opacity-0', 'hidden' for a smooth hide animation.
                backToTopButton.classList.remove('scale-100', 'opacity-100');
                backToTopButton.classList.add('scale-0', 'opacity-0', 'hidden');
            }
        });

        // Smooth scroll to the top of the page when the button is clicked.
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,        // Scroll to the very top.
                behavior: 'smooth' // Enable smooth scrolling animation.
            });
        });

        // --- Audience Toggle Logic (Requirement 4) ---
        const toggleStudentsBtn = document.getElementById('toggle-students');
        const toggleMentorsBtn = document.getElementById('toggle-mentors');
        const studentContent = document.getElementById('student-content');
        const mentorContent = document.getElementById('mentor-content');

        // Function to set the active audience content and update button styles accordingly.
        const setActiveAudience = (activeId) => {
            if (activeId === 'students') {
                studentContent.classList.remove('hidden'); // Show student-specific content.
                mentorContent.classList.add('hidden');    // Hide mentor-specific content.

                // Style the 'For Students' button as active.
                toggleStudentsBtn.classList.remove('bg-gray-200', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100', 'hover:bg-gray-300', 'dark:hover:bg-gray-600');
                toggleStudentsBtn.classList.add('bg-purple-700', 'text-white', 'hover:bg-purple-800');

                // Style the 'For Mentors' button as inactive.
                toggleMentorsBtn.classList.add('bg-gray-200', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100', 'hover:bg-gray-300', 'dark:hover:bg-gray-600');
                toggleMentorsBtn.classList.remove('bg-purple-700', 'text-white', 'hover:bg-purple-800');
            } else { // If 'mentors' is the activeId.
                studentContent.classList.add('hidden');     // Hide student-specific content.
                mentorContent.classList.remove('hidden'); // Show mentor-specific content.

                // Style the 'For Students' button as inactive.
                toggleStudentsBtn.classList.add('bg-gray-200', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100', 'hover:bg-gray-300', 'dark:hover:bg-gray-600');
                toggleStudentsBtn.classList.remove('bg-purple-700', 'text-white', 'hover:bg-purple-800');

                // Style the 'For Mentors' button as active.
                toggleMentorsBtn.classList.remove('bg-gray-200', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100', 'hover:bg-gray-300', 'dark:hover:bg-gray-600');
                toggleMentorsBtn.classList.add('bg-purple-700', 'text-white', 'hover:bg-purple-800');
            }
        };

        // Add event listeners only if the elements for the audience toggle exist.
        if (toggleStudentsBtn && toggleMentorsBtn && studentContent && mentorContent) {
            toggleStudentsBtn.addEventListener('click', () => setActiveAudience('students'));
            toggleMentorsBtn.addEventListener('click', () => setActiveAudience('mentors'));
            // Set the initial active audience content when the page loads.
            setActiveAudience('students');
        }


        // --- FAQ Accordion Logic (Requirement 5) ---
        const faqQuestions = document.querySelectorAll('.faq-question');

        // Loop through each FAQ question button.
        faqQuestions.forEach(question => {
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling; // The answer content is the direct sibling.
                const icon = question.querySelector('.faq-icon'); // The icon within the button.

                // Close all other open answers (Bonus requirement: only one open at a time).
                faqQuestions.forEach(otherQuestion => {
                    const otherAnswer = otherQuestion.nextElementSibling;
                    const otherIcon = otherQuestion.querySelector('.faq-icon');
                    // Check if another answer is currently visible and it's not the one just clicked.
                    if (otherAnswer && otherAnswer !== answer && !otherAnswer.classList.contains('hidden')) {
                        otherAnswer.classList.add('hidden'); // Hide the other answer.
                        otherIcon.textContent = '+';         // Reset its icon to plus.
                        otherIcon.classList.remove('rotate-45'); // Remove the rotation.
                        otherQuestion.classList.remove('active'); // Remove active class from the other question.
                    }
                });

                // Toggle the visibility of the current answer.
                answer.classList.toggle('hidden');
                // Toggle the 'active' class on the question button for styling purposes.
                question.classList.toggle('active');

                // Update the icon and its rotation based on the answer's current visibility.
                if (answer.classList.contains('hidden')) {
                    icon.textContent = '+';              // If hidden, show plus.
                    icon.classList.remove('rotate-45');  // No rotation.
                } else {
                    icon.textContent = '-';              // If visible, show minus.
                    icon.classList.add('rotate-45'); // Add rotation for an 'x' effect or similar.
                }
            });
        });

        // --- Contact Form Validation (Requirement 9 & 12) ---
        const contactForm = document.getElementById('contact')?.querySelector('form'); // Use optional chaining for safety
        if (contactForm) {
            contactForm.addEventListener('submit', (event) => {
                event.preventDefault(); // Prevent the default form submission which would reload the page.

                const nameInput = document.getElementById('name');
                const emailInput = document.getElementById('email');
                const messageInput = document.getElementById('message');

                let isValid = true; // Flag to track if the entire form is valid.

                // Validate Name field.
                if (nameInput.value.trim() === '') {
                    nameInput.classList.add('border-red-500', 'ring-red-500'); // Apply error styling.
                    isValid = false;
                } else {
                    nameInput.classList.remove('border-red-500', 'ring-red-500'); // Remove error styling.
                }

                // Validate Email field (checks if not empty and matches a basic email regex).
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (emailInput.value.trim() === '' || !emailRegex.test(emailInput.value.trim())) {
                    emailInput.classList.add('border-red-500', 'ring-red-500'); // Apply error styling.
                    isValid = false;
                } else {
                    emailInput.classList.remove('border-red-500', 'ring-red-500'); // Remove error styling.
                }

                // Validate Message field.
                if (messageInput.value.trim() === '') {
                    messageInput.classList.add('border-red-500', 'ring-red-500'); // Apply error styling.
                    isValid = false;
                } else {
                    messageInput.classList.remove('border-red-500', 'ring-red-500'); // Remove error styling.
                }

                if (isValid) {
                    // Mock success feedback (as per requirement: "even if it's a mock alert").
                    // IMPORTANT: For a production website, you MUST replace window.alert() with a custom modal UI
                    // or a message displayed directly on the page, as alerts are intrusive and block the UI.
                    alert('Thank you for your message! We will get back to you soon.');

                    // Clear the form fields after successful submission.
                    contactForm.reset();
                    // Also ensure any error styling is removed from fields after reset.
                    nameInput.classList.remove('border-red-500', 'ring-red-500');
                    emailInput.classList.remove('border-red-500', 'ring-red-500');
                    messageInput.classList.remove('border-red-500', 'ring-red-500');

                } else {
                    // Mock error feedback if validation fails.
                    // IMPORTANT: Replace window.alert() with custom UI for production.
                    alert('Please correct the errors in the form before submitting.');
                }
            });
        }
    </script>
</body>
</html>