const { useState, useEffect } = React;

// Smoke Effect Component
const SmokeEffect = () => {
    const [particles, setParticles] = useState([]);
    
    useEffect(() => {
        // Create initial particles
        const initialParticles = Array.from({ length: 15 }, (_, i) => ({
            id: i,
            x: Math.random() * window.innerWidth,
            y: window.innerHeight + 50,
            size: Math.random() * 30 + 20,
            opacity: Math.random() * 0.3 + 0.1,
            speed: Math.random() * 2 + 1,
            drift: (Math.random() - 0.5) * 2
        }));
        setParticles(initialParticles);

        // Animation loop
        const animateParticles = () => {
            setParticles(prevParticles => 
                prevParticles.map(particle => {
                    let newY = particle.y - particle.speed;
                    let newX = particle.x + particle.drift;
                    let newOpacity = particle.opacity;

                    // Reset particle when it goes off screen
                    if (newY < -100) {
                        newY = window.innerHeight + 50;
                        newX = Math.random() * window.innerWidth;
                        newOpacity = Math.random() * 0.3 + 0.1;
                    }

                    // Fade out as it rises
                    if (newY < window.innerHeight * 0.7) {
                        newOpacity = newOpacity * 0.995;
                    }

                    return {
                        ...particle,
                        x: newX,
                        y: newY,
                        opacity: Math.max(0, newOpacity)
                    };
                })
            );
        };

        const interval = setInterval(animateParticles, 50);
        return () => clearInterval(interval);
    }, []);

    return (
        <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            pointerEvents: 'none',
            zIndex: 1,
            overflow: 'hidden'
        }}>
            {particles.map(particle => (
                <div
                    key={particle.id}
                    style={{
                        position: 'absolute',
                        left: `${particle.x}px`,
                        top: `${particle.y}px`,
                        width: `${particle.size}px`,
                        height: `${particle.size}px`,
                        background: `radial-gradient(circle, rgba(200,200,200,${particle.opacity}) 0%, rgba(150,150,150,${particle.opacity * 0.5}) 50%, transparent 100%)`,
                        borderRadius: '50%',
                        filter: 'blur(8px)',
                        transform: 'scale(1)',
                        transition: 'opacity 0.1s ease-out'
                    }}
                />
            ))}
        </div>
    );
};

// Shared Navigation Component
const Navigation = () => {
    const [scrolled, setScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 50);
        const handleResize = () => {
            setIsMobile(window.innerWidth <= 768);
            if (window.innerWidth > 768) setMobileMenuOpen(false);
        };

        handleResize();
        window.addEventListener('scroll', handleScroll);
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('scroll', handleScroll);
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    const navLinkStyle = {
        color: 'var(--charcoal)',
        textDecoration: 'none',
        fontSize: '1rem',
        fontWeight: '500',
        transition: 'color 0.2s',
        cursor: 'pointer'
    };

    const buttonStyle = {
        display: 'inline-block',
        padding: '0.875rem 2rem',
        borderRadius: '8px',
        textDecoration: 'none',
        fontWeight: '600',
        fontSize: '1rem',
        transition: 'all 0.3s ease',
        cursor: 'pointer',
        border: 'none',
        letterSpacing: '0.02em'
    };

    return (
        <nav style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            zIndex: 1000,
            padding: isMobile ? '1rem 1.5rem' : '1.5rem 4rem',
            background: scrolled ? 'rgba(245, 241, 232, 0.95)' : 'rgba(26, 26, 26, 0.8)',
            backdropFilter: 'blur(10px)',
            borderBottom: scrolled ? '1px solid rgba(212, 82, 42, 0.1)' : '1px solid rgba(245, 241, 232, 0.1)',
            transition: 'all 0.3s ease'
        }}>
            <div style={{
                maxWidth: '1600px',
                margin: '0 auto',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: isMobile ? 'column' : 'row'
            }}>
                <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <a href="index.html" style={{
                        fontSize: '1.5rem',
                        fontWeight: '700',
                        color: scrolled ? 'var(--charcoal)' : 'var(--cream)',
                        letterSpacing: '-0.02em',
                        transition: 'color 0.3s ease',
                        textDecoration: 'none'
                    }}>SAUCY'S</a>
                    {isMobile && (
                        <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} style={{
                            background: 'none',
                            border: 'none',
                            color: scrolled ? 'var(--charcoal)' : 'var(--cream)',
                            fontSize: '1.5rem',
                            cursor: 'pointer',
                            padding: '0.5rem'
                        }}>
                            {mobileMenuOpen ? '✕' : '☰'}
                        </button>
                    )}
                </div>
                <div style={{
                    display: isMobile ? (mobileMenuOpen ? 'flex' : 'none') : 'flex',
                    gap: isMobile ? '1rem' : '3rem',
                    alignItems: 'center',
                    flexDirection: isMobile ? 'column' : 'row',
                    width: isMobile ? '100%' : 'auto',
                    marginTop: isMobile ? '1rem' : '0'
                }}>
                    <a href="menu.html" style={{ ...navLinkStyle, color: scrolled ? 'var(--charcoal)' : 'var(--cream)', width: isMobile ? '100%' : 'auto', textAlign: isMobile ? 'center' : 'left' }}>Menu</a>
                    <a href="catering.html" style={{ ...navLinkStyle, color: scrolled ? 'var(--charcoal)' : 'var(--cream)', width: isMobile ? '100%' : 'auto', textAlign: isMobile ? 'center' : 'left' }}>Catering</a>
                    <a href="location.html" style={{ ...navLinkStyle, color: scrolled ? 'var(--charcoal)' : 'var(--cream)', width: isMobile ? '100%' : 'auto', textAlign: isMobile ? 'center' : 'left' }}>Visit</a>
                    <a href="jobs.html" style={{ ...navLinkStyle, color: scrolled ? 'var(--charcoal)' : 'var(--cream)', width: isMobile ? '100%' : 'auto', textAlign: isMobile ? 'center' : 'left' }}>Jobs</a>
                    <a href="contact-us.html" style={{ ...navLinkStyle, color: scrolled ? 'var(--charcoal)' : 'var(--cream)', width: isMobile ? '100%' : 'auto', textAlign: isMobile ? 'center' : 'left' }}>Contact</a>
                    <a href="order.html" style={{ ...buttonStyle, padding: '0.75rem 2rem', textDecoration: 'none', width: isMobile ? '100%' : 'auto', textAlign: 'center', background: 'var(--terracotta)', color: 'white' }}>Order Now</a>
                </div>
            </div>
        </nav>
    );
};

// Footer Component
const Footer = () => {
    const footerLinkStyle = {
        color: 'rgba(245, 241, 232, 0.7)',
        textDecoration: 'none',
        transition: 'color 0.2s',
        cursor: 'pointer'
    };

    return (
        <footer style={{ background: 'var(--charcoal)', padding: '4rem 4rem 2rem', color: 'var(--cream)' }}>
            <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '3rem', marginBottom: '3rem' }}>
                    <div>
                        <h3 style={{ fontSize: '2rem', fontFamily: "'DM Serif Display', serif", marginBottom: '1rem', color: 'var(--terracotta-light)' }}>Saucy's</h3>
                        <p style={{ fontSize: '0.95rem', lineHeight: '1.7', color: 'rgba(245, 241, 232, 0.7)', fontWeight: '300' }}>
                            Denver's favorite destination for authentic Southern BBQ, served with love since day one.
                        </p>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.1rem', marginBottom: '1rem', fontWeight: '600', letterSpacing: '0.05em' }}>Quick Links</h4>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', fontSize: '0.95rem', fontWeight: '300' }}>
                            <a href="menu.html" style={footerLinkStyle}>Menu</a>
                            <a href="catering.html" style={footerLinkStyle}>Catering</a>
                            <a href="order.html" style={footerLinkStyle}>Order Online</a>
                            <a href="location.html" style={footerLinkStyle}>Location</a>
                            <a href="jobs.html" style={footerLinkStyle}>Jobs</a>
                            <a href="contact-us.html" style={footerLinkStyle}>Contact</a>
                        </div>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.1rem', marginBottom: '1rem', fontWeight: '600', letterSpacing: '0.05em' }}>Connect</h4>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', fontSize: '0.95rem', fontWeight: '300' }}>
                            <a href="https://www.facebook.com/saucysouthern" target="_blank" rel="noopener noreferrer" style={footerLinkStyle}>Facebook</a>
                            <a href="https://www.instagram.com/saucysouthern" target="_blank" rel="noopener noreferrer" style={footerLinkStyle}>Instagram</a>
                            <a href="tel:7204846035" style={footerLinkStyle}>(720) 484-6035</a>
                        </div>
                    </div>
                </div>
                <div style={{ borderTop: '1px solid rgba(245, 241, 232, 0.1)', paddingTop: '2rem', textAlign: 'center', fontSize: '0.9rem', color: 'rgba(245, 241, 232, 0.5)', fontWeight: '300' }}>
                    © {new Date().getFullYear()} Saucy's Southern BBQ & Cuisine. All rights reserved.
                </div>
            </div>
        </footer>
    );
};

// Catering Page
const CateringPage = () => {
    const [isMobile, setIsMobile] = React.useState(false);
    const [formData, setFormData] = React.useState({ 
        name: '', 
        email: '', 
        phone: '', 
        eventDate: '', 
        guestCount: '', 
        eventType: '', 
        message: '' 
    });
    const [submitted, setSubmitted] = React.useState(false);

    React.useEffect(() => {
        const handleResize = () => setIsMobile(window.innerWidth <= 768);
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        setSubmitted(true);
        console.log('Catering inquiry submitted:', formData);
        setTimeout(() => {
            setSubmitted(false);
            setFormData({ name: '', email: '', phone: '', eventDate: '', guestCount: '', eventType: '', message: '' });
        }, 3000);
    };

    const buttonStyle = {
        display: 'inline-block',
        padding: '0.875rem 2rem',
        borderRadius: '8px',
        textDecoration: 'none',
        fontWeight: '600',
        fontSize: '1rem',
        transition: 'all 0.3s ease',
        cursor: 'pointer',
        border: 'none',
        letterSpacing: '0.02em'
    };

    return (
        <div>
            <SmokeEffect />
            <Navigation />
            
            {/* Hero Section with Form */}
            <section style={{
                padding: isMobile ? '6rem 1.5rem 4rem' : '10rem 4rem 6rem',
                background: 'linear-gradient(180deg, var(--charcoal) 0%, #2a1f1a 100%)'
            }}>
                <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
                    <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
                        <div style={{
                            fontSize: '0.9rem',
                            letterSpacing: '0.3em',
                            color: 'var(--terracotta-light)',
                            marginBottom: '1rem',
                            fontWeight: '500',
                            textTransform: 'uppercase'
                        }}>
                            Catering Services
                        </div>
                        <h1 style={{
                            fontSize: isMobile ? '2.5rem' : 'clamp(3rem, 6vw, 5rem)',
                            fontFamily: "'DM Serif Display', serif",
                            marginBottom: '1.5rem',
                            color: 'var(--cream)',
                            lineHeight: '1.1'
                        }}>
                            Plan Your <span style={{ fontStyle: 'italic', color: 'var(--terracotta-light)' }}>Event</span>
                        </h1>
                        <p style={{
                            fontSize: '1.2rem',
                            color: 'rgba(245, 241, 232, 0.8)',
                            maxWidth: '700px',
                            margin: '0 auto',
                            fontWeight: '300',
                            lineHeight: '1.7'
                        }}>
                            Get a quote for your special occasion. We'll get back to you within 24 hours.
                        </p>
                    </div>

                    {/* Contact Form */}
                    <div style={{
                        background: 'white',
                        padding: isMobile ? '2rem' : '3rem',
                        borderRadius: '16px',
                        boxShadow: '0 20px 60px rgba(0,0,0,0.1)',
                        border: '1px solid rgba(212, 82, 42, 0.1)',
                        maxWidth: '800px',
                        margin: '0 auto'
                    }}>
                        {submitted ? (
                            <div style={{ textAlign: 'center', padding: '3rem', color: 'var(--terracotta)' }}>
                                <div style={{ 
                                    width: '60px', 
                                    height: '60px', 
                                    background: 'linear-gradient(135deg, #22c55e, #16a34a)', 
                                    borderRadius: '50%', 
                                    display: 'flex', 
                                    alignItems: 'center', 
                                    justifyContent: 'center', 
                                    margin: '0 auto 1rem',
                                    boxShadow: '0 8px 25px rgba(34, 197, 94, 0.3)'
                                }}>
                                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
                                        <polyline points="20,6 9,17 4,12"/>
                                    </svg>
                                </div>
                                <h3 style={{ fontSize: '1.8rem', fontFamily: "'DM Serif Display', serif", marginBottom: '1rem', color: 'var(--charcoal)' }}>Thank You!</h3>
                                <p style={{ fontSize: '1.1rem', color: 'var(--smoke)', fontWeight: '300' }}>We've received your catering inquiry and will contact you within 24 hours.</p>
                            </div>
                        ) : (
                            <form onSubmit={handleSubmit}>
                                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '1.5rem', marginBottom: '1.5rem' }}>
                                    <div>
                                        <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Name *</label>
                                        <input type="text" required value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
                                    </div>
                                    <div>
                                        <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Email *</label>
                                        <input type="email" required value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
                                    </div>
                                </div>
                                
                                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '1.5rem', marginBottom: '1.5rem' }}>
                                    <div>
                                        <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Phone *</label>
                                        <input type="tel" required value={formData.phone} onChange={(e) => setFormData({...formData, phone: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
                                    </div>
                                    <div>
                                        <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Event Date *</label>
                                        <input type="date" required value={formData.eventDate} onChange={(e) => setFormData({...formData, eventDate: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
                                    </div>
                                </div>

                                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '1.5rem', marginBottom: '1.5rem' }}>
                                    <div>
                                        <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Guest Count *</label>
                                        <input type="number" required value={formData.guestCount} onChange={(e) => setFormData({...formData, guestCount: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }} />
                                    </div>
                                    <div>
                                        <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Event Type</label>
                                        <select value={formData.eventType} onChange={(e) => setFormData({...formData, eventType: e.target.value})} style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none' }}>
                                            <option value="">Select event type</option>
                                            <option value="corporate">Corporate Event</option>
                                            <option value="wedding">Wedding</option>
                                            <option value="birthday">Birthday Party</option>
                                            <option value="family">Family Reunion</option>
                                            <option value="other">Other</option>
                                        </select>
                                    </div>
                                </div>

                                <div style={{ marginBottom: '2rem' }}>
                                    <label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.95rem', fontWeight: '600', color: 'var(--charcoal)' }}>Additional Details</label>
                                    <textarea rows="4" value={formData.message} onChange={(e) => setFormData({...formData, message: e.target.value})} placeholder="Tell us about your event, dietary restrictions, special requests, etc." style={{ width: '100%', padding: '1rem', fontSize: '1rem', border: '2px solid rgba(212, 82, 42, 0.2)', borderRadius: '8px', fontFamily: "'Archivo', sans-serif", outline: 'none', resize: 'vertical' }} />
                                </div>

                                <button type="submit" style={{ ...buttonStyle, background: 'var(--terracotta)', color: 'white', padding: '1.2rem 3rem', width: '100%', fontSize: '1.1rem', fontWeight: '600', cursor: 'pointer' }}>
                                    Request Catering Quote
                                </button>
                            </form>
                        )}
                    </div>
                </div>
            </section>

            {/* About Our Catering Section */}
            <section style={{ padding: isMobile ? '4rem 1.5rem' : '6rem 4rem', background: 'var(--cream)' }}>
                <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                    <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
                        <h2 style={{
                            fontSize: isMobile ? '2rem' : '2.5rem',
                            fontFamily: "'DM Serif Display', serif",
                            marginBottom: '1rem',
                            color: 'var(--charcoal)'
                        }}>
                            BBQ That Brings People Together
                        </h2>
                        <p style={{
                            fontSize: '1.1rem',
                            color: 'var(--smoke)',
                            fontWeight: '300',
                            maxWidth: '700px',
                            margin: '0 auto'
                        }}>
                            From intimate gatherings to large corporate events, we bring authentic Southern BBQ to your special occasion.
                        </p>
                    </div>

                    {/* Services Grid */}
                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
                        gap: '2rem',
                        marginBottom: '4rem'
                    }}>
                        <div style={{
                            background: 'white',
                            borderRadius: '20px',
                            padding: '2.5rem',
                            boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
                            border: '1px solid rgba(212, 82, 42, 0.1)',
                            textAlign: 'center'
                        }}>
                            <div style={{ 
                                width: '80px', 
                                height: '80px', 
                                background: 'linear-gradient(135deg, var(--terracotta), var(--terracotta-light))', 
                                borderRadius: '20px', 
                                display: 'flex', 
                                alignItems: 'center', 
                                justifyContent: 'center', 
                                margin: '0 auto 1.5rem',
                                boxShadow: '0 10px 30px rgba(212, 82, 42, 0.3)'
                            }}>
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
                                    <path d="M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z"/>
                                </svg>
                            </div>
                            <h3 style={{
                                fontSize: '1.5rem',
                                fontFamily: "'DM Serif Display', serif",
                                color: 'var(--charcoal)',
                                marginBottom: '1rem'
                            }}>
                                Corporate Events
                            </h3>
                            <p style={{
                                color: 'var(--smoke)',
                                fontWeight: '300',
                                lineHeight: '1.6'
                            }}>
                                Office parties, team building events, and business meetings. Professional service that impresses.
                            </p>
                        </div>

                        <div style={{
                            background: 'white',
                            borderRadius: '20px',
                            padding: '2.5rem',
                            boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
                            border: '1px solid rgba(212, 82, 42, 0.1)',
                            textAlign: 'center'
                        }}>
                            <div style={{ 
                                width: '80px', 
                                height: '80px', 
                                background: 'linear-gradient(135deg, var(--terracotta), var(--terracotta-light))', 
                                borderRadius: '20px', 
                                display: 'flex', 
                                alignItems: 'center', 
                                justifyContent: 'center', 
                                margin: '0 auto 1.5rem',
                                boxShadow: '0 10px 30px rgba(212, 82, 42, 0.3)'
                            }}>
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
                                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                                </svg>
                            </div>
                            <h3 style={{
                                fontSize: '1.5rem',
                                fontFamily: "'DM Serif Display', serif",
                                color: 'var(--charcoal)',
                                marginBottom: '1rem'
                            }}>
                                Weddings & Celebrations
                            </h3>
                            <p style={{
                                color: 'var(--smoke)',
                                fontWeight: '300',
                                lineHeight: '1.6'
                            }}>
                                Make your special day unforgettable with our signature BBQ. From rehearsal dinners to receptions.
                            </p>
                        </div>

                        <div style={{
                            background: 'white',
                            borderRadius: '20px',
                            padding: '2.5rem',
                            boxShadow: '0 10px 40px rgba(0,0,0,0.1)',
                            border: '1px solid rgba(212, 82, 42, 0.1)',
                            textAlign: 'center'
                        }}>
                            <div style={{ 
                                width: '80px', 
                                height: '80px', 
                                background: 'linear-gradient(135deg, var(--terracotta), var(--terracotta-light))', 
                                borderRadius: '20px', 
                                display: 'flex', 
                                alignItems: 'center', 
                                justifyContent: 'center', 
                                margin: '0 auto 1.5rem',
                                boxShadow: '0 10px 30px rgba(212, 82, 42, 0.3)'
                            }}>
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                    <polyline points="9,22 9,12 15,12 15,22"/>
                                </svg>
                            </div>
                            <h3 style={{
                                fontSize: '1.5rem',
                                fontFamily: "'DM Serif Display', serif",
                                color: 'var(--charcoal)',
                                marginBottom: '1rem'
                            }}>
                                Private Parties
                            </h3>
                            <p style={{
                                color: 'var(--smoke)',
                                fontWeight: '300',
                                lineHeight: '1.6'
                            }}>
                                Birthday parties, family reunions, and backyard gatherings. Authentic BBQ for your loved ones.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Packages Section */}
            <section style={{ padding: isMobile ? '4rem 1.5rem' : '6rem 4rem', background: 'var(--charcoal)' }}>
                <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                    <div style={{
                        background: 'rgba(212, 82, 42, 0.1)',
                        borderRadius: '20px',
                        padding: isMobile ? '2.5rem' : '4rem',
                        border: '1px solid rgba(212, 82, 42, 0.2)'
                    }}>
                        <h2 style={{
                            fontSize: isMobile ? '2rem' : '2.5rem',
                            fontFamily: "'DM Serif Display', serif",
                            color: 'var(--cream)',
                            marginBottom: '2rem',
                            textAlign: 'center'
                        }}>
                            Catering Packages
                        </h2>
                        
                        <div style={{
                            display: 'grid',
                            gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
                            gap: '2rem'
                        }}>
                            <div>
                                <h3 style={{
                                    fontSize: '1.3rem',
                                    color: 'var(--terracotta-light)',
                                    marginBottom: '1rem',
                                    fontWeight: '600'
                                }}>
                                    BBQ Buffet Package
                                </h3>
                                <ul style={{
                                    color: 'rgba(245, 241, 232, 0.8)',
                                    fontWeight: '300',
                                    lineHeight: '1.8',
                                    listStyle: 'none',
                                    paddingLeft: '0'
                                }}>
                                    <li>• Choice of 2-3 meats (ribs, brisket, pulled pork, chicken)</li>
                                    <li>• 3 signature sides (mac & cheese, coleslaw, baked beans)</li>
                                    <li>• Fresh cornbread and rolls</li>
                                    <li>• House-made BBQ sauces</li>
                                    <li>• Disposable plates, utensils, and napkins</li>
                                    <li>• Minimum 20 people</li>
                                </ul>
                            </div>
                            
                            <div>
                                <h3 style={{
                                    fontSize: '1.3rem',
                                    color: 'var(--terracotta-light)',
                                    marginBottom: '1rem',
                                    fontWeight: '600'
                                }}>
                                    Premium Full Service
                                </h3>
                                <ul style={{
                                    color: 'rgba(245, 241, 232, 0.8)',
                                    fontWeight: '300',
                                    lineHeight: '1.8',
                                    listStyle: 'none',
                                    paddingLeft: '0'
                                }}>
                                    <li>• All BBQ Buffet Package items</li>
                                    <li>• Professional setup and breakdown</li>
                                    <li>• Chafing dishes and serving utensils</li>
                                    <li>• On-site staff for 2 hours</li>
                                    <li>• Appetizer options available</li>
                                    <li>• Minimum 50 people</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <Footer />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CateringPage />);