// chrome.jsx — Header, ticker, footer.

function DevTicker() {
    // Real-feeling activity feed; ES-leaning since the editorial chrome is ES.
    const items = [
        ['◐', 'Deploying', 'oropezas.com', 'v141 → prod'],
        ['●', 'Live', 'kelowna.oropezas.com', '120ms p95'],
        ['◇', 'Ship', 'techprokelowna.com', 'lighthouse 98/100'],
        ['◑', 'Build', 'casa-mole-slp', 'agent v2 entrenado'],
        ['●', 'Live', 'dev.oropezas.com', 'tú estás aquí'],
        ['◐', 'Now', 'workers/oropezas-api', '4.2M req/día'],
    ];
    // duplicate for seamless loop
    const all = [...items, ...items];
    return (
        <div className="dev-ticker">
            <div className="dev-ticker-track">
                {all.map((it, i) => (
                    <span key={i}>
                        <span className="dot" />
                        <span style={{ color: '#ffbab0' }}>{it[1]}</span>
                        <span>{it[2]}</span>
                        <span style={{ opacity: 0.6 }}>— {it[3]}</span>
                    </span>
                ))}
            </div>
        </div>
    );
}

function DevHeader({ lang, setLang, onCta }) {
    const [scrolled, setScrolled] = React.useState(false);
    React.useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener('scroll', onScroll);
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    const nav = lang === 'es'
        ? [['#servicios','Servicios'], ['#clientes','Clientes'], ['#nosotros','Nosotros'], ['#contacto','Contacto']]
        : [['#servicios','Services'], ['#clientes','Clients'], ['#nosotros','About'], ['#contacto','Contact']];

    return (
        <header className={`dev-header ${scrolled ? 'scrolled' : ''}`}>
            <div className="dev-header-container">
                <a className="dev-logo" href="#top" aria-label="Oropezas dev — home">
                    <img src="assets/oropezas-logo.jpeg" alt="Oropezas" />
                    <span className="dev-logo-suffix">dev</span>
                </a>
                <nav className="dev-nav">
                    {nav.map(([href, label]) => (
                        <a key={href} href={href}>{label}</a>
                    ))}
                    <a className="dev-back-link" href="https://oropezas.com" target="_blank" rel="noopener">
                        oropezas.com
                    </a>
                </nav>
                <div className="dev-header-controls">
                    <button className="dev-lang-btn" onClick={() => setLang(lang === 'es' ? 'en' : 'es')} title="Switch language">
                        <span className={lang === 'es' ? 'active' : ''}>ES</span>
                        <span className={lang === 'en' ? 'active' : ''}>EN</span>
                    </button>
                    <button className="dev-cta" onClick={onCta}>
                        <span className="dot" />
                        {lang === 'es' ? 'Empezar' : 'Start a project'}
                    </button>
                </div>
            </div>
        </header>
    );
}

function DevFooter({ lang }) {
    const t = lang === 'es' ? {
        about: 'Acerca de',
        aboutCopy: 'Estudio de desarrollo nacido en la redacción de Oropezas.com. Construimos sitios, infraestructura en Cloudflare, integraciones de IA y agentes para clientes en México y Canadá.',
        aboutCopyEn: 'Studio born inside the Oropezas newsroom. Sites, Cloudflare infrastructure, AI integrations and agents — México and Canada.',
        services: 'Servicios',
        company: 'Estudio',
        contact: 'Contacto',
        rights: 'Todos los derechos reservados',
        status: 'Aceptando 2 proyectos en Q3',
    } : {
        about: 'About',
        aboutCopy: 'Development studio born inside the Oropezas.com newsroom. We build sites, Cloudflare infrastructure, AI integrations and agents for clients across México and Canada.',
        aboutCopyEn: 'Estudio nacido en la redacción de Oropezas. Sitios, infraestructura, IA y agentes.',
        services: 'Services',
        company: 'Studio',
        contact: 'Contact',
        rights: 'All rights reserved',
        status: 'Accepting 2 projects · Q3',
    };

    return (
        <footer className="dev-footer">
            <div className="dev-footer-container">
                <div className="dev-footer-section">
                    <a className="dev-logo" href="#top" style={{ marginBottom: '1rem' }}>
                        <img src="assets/oropezas-logo.jpeg" alt="Oropezas" />
                        <span className="dev-logo-suffix">dev</span>
                    </a>
                    <p>{t.aboutCopy}</p>
                    <p className="en">{t.aboutCopyEn}</p>
                    <span className="dev-footer-status"><span className="pulse" />{t.status}</span>
                </div>
                <div className="dev-footer-section">
                    <h3>{t.services}</h3>
                    <div className="dev-footer-links">
                        <a href="#servicios">Web · Diseño + Desarrollo</a>
                        <a href="#servicios">Cloudflare Workers</a>
                        <a href="#servicios">IA · Chatbots + Contenido</a>
                        <a href="#servicios">Agentes de IA</a>
                        <a href="#servicios">SEO &amp; Analytics</a>
                        <a href="#servicios">Branding</a>
                    </div>
                </div>
                <div className="dev-footer-section">
                    <h3>{t.company}</h3>
                    <div className="dev-footer-links">
                        <a href="#nosotros">{lang === 'es' ? 'Equipo' : 'Team'}</a>
                        <a href="#clientes">{lang === 'es' ? 'Clientes' : 'Case studies'}</a>
                        <a href="https://oropezas.com" target="_blank" rel="noopener">🇲🇽 Oropezas.com</a>
                        <a href="https://kelowna.oropezas.com" target="_blank" rel="noopener">🇨🇦 Kelowna edition</a>
                    </div>
                </div>
                <div className="dev-footer-section">
                    <h3>{t.contact}</h3>
                    <div className="dev-footer-links">
                        <a href="mailto:hola@dev.oropezas.com">hola@dev.oropezas.com</a>
                        <a href="tel:+524427829745">+52 (442) 782-9745</a>
                        <a href="tel:+16729688689">+1 (672) 968-8689</a>
                        <a href="#contacto">{lang === 'es' ? 'Formulario' : 'Brief form'}</a>
                    </div>
                </div>
            </div>
            <div className="dev-footer-bottom">
                <span>© 2026 OROPEZAS · {t.rights}.</span>
                <span className="mono">dev.oropezas.com / build #2026.05.19</span>
                <div className="social">
                    <a href="#" aria-label="GitHub"><i className="bi bi-github"></i></a>
                    <a href="#" aria-label="Twitter/X"><i className="bi bi-twitter-x"></i></a>
                    <a href="#" aria-label="LinkedIn"><i className="bi bi-linkedin"></i></a>
                </div>
            </div>
        </footer>
    );
}

Object.assign(window, { DevTicker, DevHeader, DevFooter });