// React UMD Globals
const { useState, useEffect } = React;

// Main App Component
function App() {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // Simulate initial load time for better UX
        const timer = setTimeout(() => {
            setLoading(false);
        }, 800);

        return () => clearTimeout(timer);
    }, []);

    if (loading) {
        return null; // Show skeleton from index.html
    }

    return (
        <div className="container">
            <Header />
            
            {/* Zona Norte Section */}
            <SectionHeader title="Zona Norte" />
            <Unit3 />
            <Unit4 />
            <Unit5 />
            
            {/* Zona Leste Section */}
            <SectionHeader title="Zona Leste" />
            <Unit1 />
            <Unit2 />
            
            <Footer />
        </div>
    );
}

// Header Component
function Header() {
    return (
        <header>
            <div className="logo">
                <img 
                    src="https://tess-cdn.pareto.io/assets/uploads/98de80e6-0ffd-4de6-96af-a21cffcfd3dd.png" 
                    alt="Logo Sorveterias"
                />
            </div>
            <h1>Sorveterias - Links de Compra</h1>
            <p className="subtitle">Escolha sua região e peça agora</p>
        </header>
    );
}

// Section Header Component
function SectionHeader({ title }) {
    return (
        <div className="section-header">
            <h2>{title}</h2>
        </div>
    );
}

// ZONA NORTE - Unit 3: Kibon Sorveteria Vila Bancária Munhoz
function Unit3() {
    return (
        <div className="unit">
            <div className="unit-title">
                <span className="unit-badge">Zona Norte</span>
                <span>Kibon Sorveteria Vila Bancária Munhoz</span>
            </div>
            <div className="buttons">
                <DeliveryButton
                    platform="ifood"
                    icon="🍽️"
                    text="Pedir no iFood"
                    url="https://www.ifood.com.br/delivery/sao-paulo-sp/sorvetes-kibon---vila-bancaria-munhoz-vila-amelia/3150a5eb-4e39-4597-a088-2269a21f969f"
                />
                <DeliveryButton
                    platform="keeta"
                    icon="🚀"
                    text="Pedir no Keeta"
                    url="https://url-eu.mykeeta.com/4lz59ciz"
                />
            </div>
            <p className="unit-description">Vila Bancária Munhoz — links oficiais para pedido</p>
        </div>
    );
}

// ZONA NORTE - Unit 4: Mercado do Sorvete Zona Norte
function Unit4() {
    return (
        <div className="unit">
            <div className="unit-title">
                <span className="unit-badge">Zona Norte</span>
                <span>Mercado do Sorvete Zona Norte</span>
            </div>
            <div className="buttons">
                <DeliveryButton
                    platform="ifood"
                    icon="🍽️"
                    text="Pedir no iFood"
                    url="https://www.ifood.com.br/delivery/sao-paulo-sp/o-mercado-do-sorvete-vila-amelia/c554e3db-31b6-49f1-abdc-a18222aa3229"
                />
                <DeliveryButton
                    platform="99"
                    icon="🛵"
                    text="Pedir no 99Food"
                    url="https://oia.99app.com/dlp9/LOo9Ma?share_media=WHATSAPP"
                />
                <DeliveryButton
                    platform="keeta"
                    icon="🚀"
                    text="Pedir no Keeta"
                    url="https://url-eu.mykeeta.com/Oh97lEBz"
                />
            </div>
            <p className="unit-description">Vila Amélia — links oficiais para pedido</p>
        </div>
    );
}

// ZONA NORTE - Unit 5: Jundiá by Mercado do Sorvete
function Unit5() {
    return (
        <div className="unit">
            <div className="unit-title">
                <span className="unit-badge">Zona Norte</span>
                <span>Jundiá by Mercado do Sorvete</span>
            </div>
            <div className="buttons">
                <DeliveryButton
                    platform="ifood"
                    icon="🍽️"
                    text="Pedir no iFood"
                    url="https://www.ifood.com.br/delivery/sao-paulo-sp/o-mercado-do-sorvete-vila-amelia/c554e3db-31b6-49f1-abdc-a18222aa3229"
                />
                <DeliveryButton
                    platform="keeta"
                    icon="🚀"
                    text="Pedir no Keeta"
                    url="https://url-eu.mykeeta.com/WGrLLntz"
                />
            </div>
            <p className="unit-description">Links oficiais para pedido</p>
        </div>
    );
}

// ZONA LESTE - Unit 1: Sorvetes Kibon Parque Guarani
function Unit1() {
    return (
        <div className="unit">
            <div className="unit-title">
                <span className="unit-badge">Zona Leste</span>
                <span>Sorvetes Kibon — Parque Guarani</span>
            </div>
            <div className="buttons">
                <DeliveryButton
                    platform="ifood"
                    icon="🍽️"
                    text="Pedir no iFood"
                    url="https://www.ifood.com.br/delivery/sao-paulo-sp/sorvetes-kibon---parque-guarani-parque-guarani/6525921c-c9c5-4ac7-89a2-fa4f45de15eb?UTM_Medium=share"
                />
                <DeliveryButton
                    platform="keeta"
                    icon="🚀"
                    text="Pedir no Keeta"
                    url="https://url-eu.mykeeta.com/sLG1IMFz"
                />
                <DeliveryButton
                    platform="99"
                    icon="🛵"
                    text="Pedir no 99Food"
                    url="https://oia.99app.com/dlp9/RXwd65?share_media=WHATSAPP"
                />
            </div>
            <p className="unit-description">Parque Guarani — links oficiais para pedido</p>
        </div>
    );
}

// ZONA LESTE - Unit 2: Mercado do Sorvete
function Unit2() {
    return (
        <div className="unit">
            <div className="unit-title">
                <span className="unit-badge">Zona Leste</span>
                <span>Mercado do Sorvete</span>
            </div>
            <div className="buttons">
                <DeliveryButton
                    platform="keeta"
                    icon="🚀"
                    text="Pedir no Keeta"
                    url="https://url-eu.mykeeta.com/cs9Hx9Yz"
                />
                <DeliveryButton
                    platform="99"
                    icon="🛵"
                    text="Pedir no 99Food"
                    url="https://oia.99app.com/dlp9/qS7zQ0?share_media=WHATSAPP"
                />
            </div>
            <p className="unit-description">Links oficiais para pedido</p>
        </div>
    );
}

// Delivery Button Component
function DeliveryButton({ platform, icon, text, url }) {
    const buttonClass = `btn btn-${platform}`;
    
    return (
        <a 
            href={url} 
            target="_blank" 
            rel="noopener noreferrer" 
            className={buttonClass}
            aria-label={text}
        >
            <span className="btn-icon" role="img" aria-hidden="true">{icon}</span>
            <span className="btn-text">{text}</span>
        </a>
    );
}

// Footer Component
function Footer() {
    return (
        <footer>
            © Sorveterias - Zona Norte e Zona Leste — Todos os direitos reservados
        </footer>
    );
}

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