import React, { useState } from 'react';

// Define the custom colors and classes based on the original CSS
const customColors = {
    warmWhite: '#FAF9F6',
    sageGreen: '#9DB4A5',
    deepSage: '#6A857A',
    warmGold: '#D4AF37', // Increased usage for conversion elements
    charcoalBlack: '#2A2A2A',
};

// --- Global Components ---

const Button = ({ children, primary = true, gold = false, onClick }) => {
    let styleClasses = `font-medium py-3 px-8 rounded-full uppercase tracking-wider text-sm transition duration-300 shadow-lg`;
    let buttonStyle = {};

    if (gold) {
        // High-contrast Gold style for primary actions (e.g., Add to Cart, Subscribe)
        styleClasses += ' bg-warmGold text-charcoalBlack hover:bg-deepSage hover:text-warmWhite shadow-warmGold/50';
        buttonStyle.backgroundColor = customColors.warmGold;
        buttonStyle.color = customColors.charcoalBlack;
    } else if (primary) {
        // Sage Green style for main CTAs
        styleClasses += ' bg-sageGreen text-charcoalBlack hover:bg-deepSage hover:text-warmWhite shadow-sageGreen/50';
        buttonStyle.backgroundColor = customColors.sageGreen;
        buttonStyle.color = customColors.charcoalBlack;
    } else {
        // Outline style
        styleClasses += ' bg-transparent border-2 text-sageGreen hover:bg-sageGreen hover:text-charcoalBlack';
        buttonStyle.backgroundColor = 'transparent';
        buttonStyle.color = customColors.sageGreen;
        buttonStyle.borderColor = customColors.sageGreen;
    }

    return (
        <button
            onClick={onClick}
            className={styleClasses}
            style={buttonStyle}
        >
            {children}
        </button>
    );
};

// Divider now explicitly uses warmGold by default
const Divider = ({ color = customColors.warmGold }) => (
    <div 
        className="h-px w-20 mx-auto opacity-50 my-6"
        style={{ backgroundColor: color }}
    ></div>
);

const ProductCard = ({ product }) => (
    <div className="flex flex-col rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-shadow duration-300" style={{ backgroundColor: customColors.warmWhite, boxShadow: `0 10px 30px ${customColors.sageGreen}4D` }}>
        <img 
            src={product.image} 
            alt={product.name} 
            className="w-full h-64 object-cover object-center"
            onError={(e) => { e.target.onerror = null; e.target.src = product.placeholder; }}
        />
        <div className="p-6 flex flex-col flex-grow">
            <h3 className="font-elegant text-2xl font-semibold mb-2" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                {product.name}
            </h3>
            <p className="text-sm text-gray-600 mb-4 flex-grow">{product.description}</p>
            {/* Price is gold */}
            <p className="font-bold text-xl mb-4" style={{ color: customColors.warmGold }}>
                {product.price}
            </p>
            {/* CTA is gold */}
            <Button gold={true} onClick={() => console.log(`Added ${product.name} to cart`)}>
                Add to Cart
            </Button>
        </div>
    </div>
);


// --- Lead Magnet Page Component (New) ---

const LeadMagnetPage = ({ navigate }) => {
    const handleDownload = (e) => {
        e.preventDefault();
        // In a real application, this is where you'd call your email service (e.g., Mailchimp, ConvertKit)
        // to save the email and trigger the digital download (e.g., a PDF link).
        const email = document.getElementById('lead-email').value;
        if (email) {
            console.log(`Lead Magnet captured for email: ${email}. Downloading guide...`);
            // Show success message or redirect to a thank you page
            alert(`Success! Check your email (${email}) for the download link to your free Mini Guide.`);
        }
    };

    return (
        <section id="lead-magnet" className="py-20 md:py-32" style={{ backgroundColor: '#f9fafb' }}>
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                
                <h1 className="font-elegant text-5xl md:text-6xl font-bold mb-4" style={{ color: customColors.warmGold, fontFamily: 'Playfair Display, serif' }}>
                    Download Your Free Mini Guide
                </h1>
                <h2 className="text-2xl mb-8" style={{ color: customColors.deepSage }}>
                    "5 Minutes of Peace": Your guided starter journal.
                </h2>
                
                <Divider color={customColors.warmGold} />

                <div className="flex flex-col lg:flex-row items-center justify-center gap-12 mt-12">
                    
                    {/* Mockup Image */}
                    <div className="lg:w-1/3">
                        <img 
                            src="https://placehold.co/300x400/D4AF37/2A2A2A?text=Mini+Guide+Mockup" 
                            alt="5 Minutes of Peace Mini Guide Mockup" 
                            className="rounded-xl shadow-2xl w-full h-auto object-cover"
                            style={{ boxShadow: `0 15px 40px ${customColors.warmGold}77` }}
                        />
                    </div>
                    
                    {/* Value Proposition and Form */}
                    <div className="lg:w-2/3 text-left">
                        <ul className="text-lg space-y-3 mb-8 text-gray-700 list-disc list-inside">
                            <li>**Instant Clarity:** 7 guided prompts to recenter your day.</li>
                            <li>**Time-Tested:** Designed for the busiest schedules (5 mins max).</li>
                            <li>**Beautifully Designed:** Start your journey with elegance.</li>
                            <li>**100% Free:** Our gift to you.</li>
                        </ul>

                        <form onSubmit={handleDownload} className="p-8 rounded-xl shadow-inner" style={{ backgroundColor: customColors.warmWhite, border: `2px solid ${customColors.sageGreen}` }}>
                            <p className="text-xl font-semibold mb-4" style={{ color: customColors.deepSage }}>
                                Enter your email to get instant access:
                            </p>
                            <input 
                                type="email" 
                                id="lead-email"
                                placeholder="name@example.com" 
                                required 
                                className="w-full p-4 mb-4 rounded-lg border-2 focus:ring-warmGold focus:border-warmGold transition duration-150 text-lg"
                                style={{ borderColor: customColors.sageGreen, backgroundColor: customColors.warmWhite }}
                            />
                            <Button gold={true} type="submit">
                                Send My Free Guide
                            </Button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    );
};


// --- Page Components ---

const HomePage = ({ navigate }) => (
    <>
        {/* 1. Hero Section */}
        <section id="hero" className="relative overflow-hidden pt-16 pb-20 md:pt-24 md:pb-32" style={{ backgroundColor: customColors.warmWhite }}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row items-center justify-between">
                
                {/* Text Content */}
                <div className="lg:w-1/2 text-center lg:text-left mb-10 lg:mb-0">
                    <h1 className="font-elegant text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-4" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                        Your Sacred Space to Unwind.
                    </h1>
                    <p className="text-xl mb-8 max-w-lg mx-auto lg:mx-0" style={{ color: customColors.deepSage }}>
                        Mindful guidance for women, mothers, and new beginnings. Discover peace in every page.
                    </p>
                    <div className="flex justify-center lg:justify-start space-x-4">
                        {/* Primary CTA button is now gold */}
                        <Button gold={true} onClick={() => navigate('Store')}> 
                            Shop Journals
                        </Button>
                        {/* SECONDARY CTA now navigates to the Lead Magnet Page */}
                        <Button primary={false} onClick={() => navigate('LeadMagnet')}> 
                            Get Free Mini Guide
                        </Button>
                    </div>
                </div>

                {/* Image/Logo */}
                <div className="lg:w-1/2 flex justify-center">
                    <img 
                        src="uploaded:Primary Logo_ Serene Pages - 1 - Edited.jpg-ecc96615-de44-4e42-81be-5658d2057ff3" 
                        alt="Serene Pages Primary Logo - Elegant Gold and Sage Diamond" 
                        className="w-64 h-auto md:w-80 lg:w-96 rounded-3xl shadow-2xl transition-transform duration-500 hover:scale-[1.03] object-cover"
                        style={{ boxShadow: `0 10px 30px ${customColors.sageGreen}4D` }}
                        onError={(e) => { e.target.onerror = null; e.target.src = 'https://placehold.co/400x400/9DB4A5/2A2A2A?text=Serene+Pages+Logo'; }}
                    />
                </div>
            </div>
        </section>

        {/* 2. Feature Section: Focus on the Audience */}
        <section id="focus" className="py-20 md:py-32" style={{ backgroundColor: '#f9fafb' }}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <p className="text-xs tracking-widest uppercase mb-3" style={{ color: customColors.sageGreen }}>Designed with You in Mind</p>
                <h2 className="font-elegant text-4xl md:text-5xl font-semibold mb-12" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                    Finding Moments of Peace, Together.
                </h2>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    
                    {/* Feature 1: Emojis are Gold */}
                    <div className="p-8 rounded-3xl shadow-lg hover:shadow-xl transition duration-300" style={{ backgroundColor: customColors.warmWhite, boxShadow: `0 10px 30px ${customColors.sageGreen}4D` }}>
                        <div className="text-4xl mb-4" style={{ color: customColors.warmGold }}>🧘</div>
                        <h3 className="font-elegant text-2xl font-semibold mb-3" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>The Busy Mother</h3>
                        <Divider color={customColors.warmGold} />
                        <p className="text-gray-600">A daily dose of calm doesn't need to be long. Our guided prompts are designed for 5-minute windows of reflection.</p>
                    </div>

                    {/* Feature 2: Emojis are Gold */}
                    <div className="p-8 rounded-3xl shadow-lg hover:shadow-xl transition duration-300" style={{ backgroundColor: customColors.warmWhite, boxShadow: `0 10px 30px ${customColors.sageGreen}4D` }}>
                        <div className="text-4xl mb-4" style={{ color: customColors.warmGold }}>✨</div>
                        <h3 className="font-elegant text-2xl font-semibold mb-3" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>New Beginnings</h3>
                        <Divider color={customColors.warmGold} />
                        <p className="text-gray-600">Navigate the beautiful chaos of motherhood with grace. Record your journey and cherish the small victories.</p>
                    </div>

                    {/* Feature 3: Emojis are Gold */}
                    <div className="p-8 rounded-3xl shadow-lg hover:shadow-xl transition duration-300" style={{ backgroundColor: customColors.warmWhite, boxShadow: `0 10px 30px ${customColors.sageGreen}4D` }}>
                        <div className="text-4xl mb-4" style={{ color: customColors.warmGold }}>☕</div>
                        <h3 className="font-elegant text-2xl font-semibold mb-3" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>Self-Care Ritual</h3>
                        <Divider color={customColors.warmGold} />
                        <p className="text-gray-600">Reclaim your personal space. Our journals turn simple writing into a luxurious, unwinding ritual you look forward to.</p>
                    </div>
                </div>
            </div>
        </section>
        
        {/* 3. About Section */}
        <section id="about" className="py-20 md:py-32" style={{ backgroundColor: customColors.warmWhite }}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 className="font-elegant text-4xl md:text-5xl font-semibold mb-4" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                    Our Story and Mission
                </h2>
                {/* Divider is now gold */}
                <Divider color={customColors.warmGold} />
                <p className="text-lg text-gray-700 max-w-3xl mx-auto">
                    Serene Pages was created from the simple belief that every woman deserves an elegant and accessible way to pause, reflect, and reclaim her inner calm. We are dedicated to providing high-quality, guided resources that support your journey through motherhood and beyond, transforming self-care from a chore into a cherished daily ritual.
                </p>
                <div className="mt-10">
                    <Button primary={false} onClick={() => navigate('Contact')}>
                        Ask a Question
                    </Button>
                </div>
            </div>
        </section>
    </>
);


const productsData = [
    {
        id: 1,
        name: "Signature Guided Journal",
        description: "A timeless linen-bound journal with gentle prompts for daily reflection and gratitude. Physical product.",
        price: "$39.99",
        image: "uploaded:Screenshot 2025-12-14 021023.jpg-7b60d47f-8af4-47d8-96e1-c6b7c75435b7",
        placeholder: 'https://placehold.co/400x400/9DB4A5/2A2A2A?text=Signature+Journal'
    },
    {
        id: 2,
        name: "Mindful Digital Planner",
        description: "A comprehensive digital planner for intentional living, integrating self-care goals and scheduling.",
        price: "$19.99",
        image: "https://placehold.co/400x400/D4AF37/2A2A2A?text=Digital+Planner",
        placeholder: 'https://placehold.co/400x400/D4AF37/2A2A2A?text=Digital+Planner'
    },
    {
        id: 3,
        name: "52 Weeks of Serenity Prompts",
        description: "An Ebook containing 52 weekly guided prompts focusing on balance, rest, and personal growth.",
        price: "$9.99",
        image: "https://placehold.co/400x400/6A857A/FAF9F6?text=Prompts+Ebook",
        placeholder: 'https://placehold.co/400x400/6A857A/FAF9F6?text=Prompts+Ebook'
    },
];

const StorePage = ({ navigate }) => (
    <section id="store" className="py-20 md:py-32" style={{ backgroundColor: customColors.warmWhite }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="font-elegant text-4xl md:text-5xl font-semibold text-center mb-4" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                The Serene Pages Store
            </h2>
            {/* Divider is now gold */}
            <Divider color={customColors.warmGold} />
            <p className="text-lg text-gray-700 text-center max-w-2xl mx-auto mb-16">
                Explore our collection of mindful tools, from physical journals to instant digital resources, designed for peace and intentional living.
            </p>

            {/* Product Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                {productsData.map(product => (
                    <ProductCard key={product.id} product={product} navigate={navigate} />
                ))}
            </div>

            <div className="text-center mt-16">
                <Button primary={false} onClick={() => navigate('Community')}>
                    View Customer Reviews
                </Button>
            </div>
        </div>
    </section>
);


const CommunityPage = ({ navigate }) => (
    <>
        {/* Community/Newsletter Sign-up (Warm Background) */}
        <section id="community" className="py-20 md:py-24" style={{ backgroundColor: '#F0EDE8' }}>
            <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 className="font-elegant text-4xl font-semibold mb-4" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                    Join Our Serene Community
                </h2>
                {/* Divider is now gold */}
                <Divider color={customColors.warmGold} />
                <p className="text-lg text-gray-700 mb-10">
                    Receive gentle, monthly reflections, exclusive early access to new releases, and free journaling prompts delivered right to your inbox.
                </p>

                {/* Signup Form Mockup - Note: This is an optional secondary lead capture */}
                <form className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <input 
                        type="email" 
                        placeholder="Enter your email address" 
                        required 
                        className="w-full sm:w-80 p-3 rounded-full border-2 focus:ring-deepSage focus:border-deepSage transition duration-150"
                        style={{ backgroundColor: customColors.warmWhite, color: customColors.charcoalBlack, borderColor: customColors.sageGreen }}
                    />
                    {/* Subscribe button is now gold */}
                    <Button gold={true} onClick={(e) => e.preventDefault()}>
                        Subscribe Now
                    </Button>
                </form>
            </div>
        </section>

        {/* FAQ Section */}
        <section id="faq" className="py-20 md:py-32" style={{ backgroundColor: customColors.warmWhite }}>
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 className="font-elegant text-4xl font-semibold mb-12" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                    Frequently Asked Questions
                </h2>
                
                <div className="text-left space-y-8">
                    {/* FAQ Item 1: Title is now gold */}
                    <div className="border-b pb-4" style={{ borderColor: customColors.sageGreen }}>
                        <h3 className="font-elegant text-2xl font-semibold mb-2" style={{ color: customColors.warmGold }}>Do you offer physical journals?</h3>
                        <p className="text-gray-700">
                            Serene Pages is currently growing. For now, we offer digital resources, with thoughtfully curated physical journals coming soon.
                        </p>
                    </div>

                    {/* FAQ Item 2: Title is now gold */}
                    <div className="border-b pb-4" style={{ borderColor: customColors.sageGreen }}>
                        <h3 className="font-elegant text-2xl font-semibold mb-2" style={{ color: customColors.warmGold }}>Who are these journals for?</h3>
                        <p className="text-gray-700">
                            Serene Pages is created for anyone seeking a slower, more intentional way to reflect - whether you're new to journaling or returning to it after time away.
                        </p>
                    </div>

                    {/* FAQ Item 3: Title is now gold */}
                    <div className="border-b pb-4" style={{ borderColor: customColors.sageGreen }}>
                        <h3 className="font-elegant text-2xl font-semibold mb-2" style={{ color: customColors.warmGold }}>Do I need experience with journaling to begin?</h3>
                        <p className="text-gray-700">
                            Not at all. Our pages are designed to feel welcoming and flexible, allowing you to begin wherever you are, without rules or expectations.
                        </p>
                    </div>

                    {/* FAQ Item 4: Title is now gold */}
                    <div className="pb-4">
                        <h3 className="font-elegant text-2xl font-semibold mb-2" style={{ color: customColors.warmGold }}>How often should I use my journal?</h3>
                        <p className="text-gray-700">
                            There's no schedule or expectation. You're invited to write whenever it feels right. Even once a week can be transformative.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </>
);

const ContactPage = () => (
    <section id="contact" className="py-20 md:py-32" style={{ backgroundColor: customColors.warmWhite }}>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="font-elegant text-4xl md:text-5xl font-semibold mb-4" style={{ color: customColors.charcoalBlack, fontFamily: 'Playfair Display, serif' }}>
                Get In Touch
            </h2>
            {/* Divider is now gold */}
            <Divider color={customColors.warmGold} />
            <p className="text-lg text-gray-700 mb-10">
                We'd love to hear from you. Send us a message and we'll get back to you as soon as possible.
            </p>

            <form className="space-y-6 text-left p-8 rounded-xl shadow-lg" style={{ backgroundColor: '#f9fafb', boxShadow: `0 10px 30px ${customColors.sageGreen}4D` }}>
                <div>
                    {/* Labels are now gold */}
                    <label htmlFor="name" className="block text-sm font-medium mb-2" style={{ color: customColors.warmGold }}>Your Name</label>
                    <input type="text" id="name" name="name" required 
                           className="w-full p-3 border-2 rounded-lg focus:ring-deepSage focus:border-deepSage transition duration-150"
                           style={{ borderColor: customColors.sageGreen, backgroundColor: customColors.warmWhite }} />
                </div>
                <div>
                    {/* Labels are now gold */}
                    <label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: customColors.warmGold }}>Email Address</label>
                    <input type="email" id="email" name="email" required 
                           className="w-full p-3 border-2 rounded-lg focus:ring-deepSage focus:border-deepSage transition duration-150"
                           style={{ borderColor: customColors.sageGreen, backgroundColor: customColors.warmWhite }} />
                </div>
                <div>
                    {/* Labels are now gold */}
                    <label htmlFor="message" className="block text-sm font-medium mb-2" style={{ color: customColors.warmGold }}>Message</label>
                    <textarea id="message" name="message" rows="4" required 
                              className="w-full p-3 border-2 rounded-lg focus:ring-deepSage focus:border-deepSage transition duration-150"
                              style={{ borderColor: customColors.sageGreen, backgroundColor: customColors.warmWhite }}></textarea>
                </div>
                <div className="text-center">
                    <Button primary={true} onClick={(e) => { e.preventDefault(); console.log('Form Submitted (Mock)'); }}>
                        Send Message
                    </Button>
                </div>
            </form>
        </div>
    </section>
);


// --- Main Application Component ---

const App = () => {
    // State to manage the current page view
    const [currentPage, setCurrentPage] = useState('Home');

    // Function to handle navigation
    const navigate = (page) => {
        setCurrentPage(page);
        window.scrollTo(0, 0); // Scroll to top on page change
    };

    // Render the current page component based on state
    const renderPage = () => {
        switch (currentPage) {
            case 'Home':
                return <HomePage navigate={navigate} />;
            case 'Store': 
                return <StorePage navigate={navigate} />;
            case 'Community':
                return <CommunityPage navigate={navigate} />;
            case 'Contact':
                return <ContactPage navigate={navigate} />;
            case 'LeadMagnet': // New Page Case
                return <LeadMagnetPage navigate={navigate} />;
            default:
                return <HomePage navigate={navigate} />;
        }
    };

    return (
        <div style={{ backgroundColor: customColors.warmWhite, color: customColors.charcoalBlack, fontFamily: 'Inter, sans-serif' }}>
            
            <style>
                {`
                /* Font import is handled by the browser environment's head injection, 
                   but we specify the font family here for safety. */
                .font-elegant { font-family: 'Playfair Display', serif; }
                `}
            </style>


            {/* Navigation Bar (Remains consistent across pages) */}
            <nav className="sticky top-0 z-50 shadow-md" style={{ backgroundColor: customColors.warmWhite }}>
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between items-center h-20">
                        
                        {/* Logo/Brand Image (Secondary Logo) */}
                        <a href="#" onClick={() => navigate('Home')} className="flex-shrink-0">
                            <img 
                                src="uploaded:Untitled design (4).jpg-3aa9e16a-2f80-432a-b1b7-422d2d25f64a" 
                                alt="Serene Pages Logo" 
                                className="h-12 w-auto"
                                onError={(e) => { e.target.onerror = null; e.target.src = 'https://placehold.co/150x40/9DB4A5/2A2A2A?text=SERENE+PAGES'; }}
                            />
                        </a>
                        
                        {/* Desktop Menu */}
                        <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                            {[
                                { name: 'Home', page: 'Home' },
                                { name: 'Store', page: 'Store' }, 
                                { name: 'Free Mini Guide', page: 'LeadMagnet' }, // New Nav Link
                                { name: 'Community & FAQ', page: 'Community' },
                                { name: 'Contact', page: 'Contact' },
                            ].map((item) => (
                                <a 
                                    key={item.name}
                                    href="#" 
                                    onClick={() => navigate(item.page)}
                                    className={`px-3 py-2 text-sm font-medium transition duration-150 ease-in-out ${
                                        currentPage === item.page 
                                            ? 'border-b-2' 
                                            : 'border-b-2 border-transparent hover:border-sageGreen text-charcoalBlack'
                                    }`}
                                    style={{ 
                                        color: customColors.charcoalBlack, 
                                        // Gold accent on active navigation item
                                        borderColor: currentPage === item.page ? customColors.warmGold : 'transparent'
                                    }}
                                >
                                    {item.name}
                                </a>
                            ))}
                        </div>
                    </div>
                </div>
            </nav>

            <main>
                {renderPage()}
            </main>

            {/* Footer (Remains consistent across pages) */}
            <footer style={{ backgroundColor: customColors.charcoalBlack, color: customColors.warmWhite }} className="py-12">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    {/* Secondary Logo in the Footer */}
                    <img 
                        src="uploaded:Untitled design (4).jpg-3aa9e16a-2f80-432a-b1b7-422d2d25f64a" 
                        alt="Serene Pages Logo" 
                        className="h-10 w-auto mx-auto mb-6 opacity-80"
                        onError={(e) => { e.target.onerror = null; e.target.src = 'https://placehold.co/150x40/9DB4A5/2A2A2A?text=SERENE+PAGES'; }}
                    />
                    
                    <div className="flex justify-center space-x-6 mb-8 text-sm">
                        <a href="#" onClick={() => navigate('Store')} className="hover:opacity-70 transition duration-150">Shop</a> 
                        <a href="#" onClick={() => navigate('LeadMagnet')} className="hover:opacity-70 transition duration-150">Free Guide</a>
                        <a href="#" onClick={() => navigate('Community')} className="hover:opacity-70 transition duration-150">FAQ</a>
                        <a href="#" onClick={() => navigate('Contact')} className="hover:opacity-70 transition duration-150">Contact</a>
                        <a href="#" onClick={() => navigate('Home')} className="hover:opacity-70 transition duration-150">Privacy Policy</a>
                    </div>
                    
                    <p className="text-xs opacity-75">&copy; 2025 Serene Pages. All rights reserved. Designed for the Intentional Life.</p>
                </div>
            </footer>
        </div>
    );
};