// sections.jsx — Hero / Services / Cases / About / Contact / Stack
// Bilingual: each section accepts `lang` ('es' | 'en') and shows both languages.

// ────────────────────────────────────────────────────────────────────
// HERO
// ────────────────────────────────────────────────────────────────────
function DevHero({ lang, flavor, setFlavor }) {
    const es = {
        eye: 'Estudio · San Luis Potosí + Kelowna',
        meta: 'EST. 2026 / N.º 001',
        h1: ['Construimos ', 'producto digital', ' que merece imprimirse.'],
        lede: 'Somos el brazo de desarrollo de Oropezas — el periódico que también escribe código. Diseñamos, programamos y desplegamos sitios, agentes de IA e infraestructura para clientes a ambos lados de la frontera.',
        ledeEn: 'Development arm of the Oropezas newsroom. Sites, AI agents and infrastructure for clients in México and Canada.',
        cta1: 'Iniciar proyecto',
        cta2: 'Ver servicios',
        status: 'Aceptando 2 proyectos · Q3',
    };
    const en = {
        eye: 'Studio · San Luis Potosí + Kelowna',
        meta: 'EST. 2026 / ISSUE 001',
        h1: ['We build ', 'digital product', ' worth printing.'],
        lede: 'We are the development arm of Oropezas — the newspaper that also ships code. We design, build and deploy sites, AI agents and infrastructure for clients on both sides of the border.',
        ledeEn: 'Brazo de desarrollo de la redacción Oropezas. Sitios, agentes de IA e infraestructura para México y Canadá.',
        cta1: 'Start a project',
        cta2: 'See services',
        status: 'Accepting 2 projects · Q3',
    };
    const t = lang === 'es' ? es : en;
    const flavors = lang === 'es'
        ? [['shell','Deploy'], ['build','Stack'], ['agent','Agente']]
        : [['shell','Deploy'], ['build','Stack'], ['agent','Agent']];

    return (
        <section className="dev-hero" id="top" data-screen-label="01 Hero">
            <div className="dev-hero-grid">
                <div className="fade-in">
                    <span className="dev-hero-eyebrow">
                        {t.eye}
                        <span className="mono">{t.meta}</span>
                    </span>
                    <h1>
                        {t.h1[0]}
                        <span className="ink">{t.h1[1]}</span>
                        {t.h1[2]}
                        <span className="caret" aria-hidden="true" />
                    </h1>
                    <p className="lede">{t.lede}</p>
                    <p className="lede-en">{t.ledeEn}</p>
                    <div className="dev-hero-actions">
                        <a href="#contacto" className="btn-primary">
                            {t.cta1} <i className="bi bi-arrow-right" />
                        </a>
                        <a href="#servicios" className="btn-ghost">{t.cta2}</a>
                        <span className="dev-hero-byline">
                            <span className="pulse" />
                            {t.status}
                        </span>
                    </div>
                </div>

                <div className="fade-in fade-in-delay-1">
                    <div style={{ marginBottom: '0.75rem', display: 'flex', gap: '0.4rem', alignItems: 'center', justifyContent: 'flex-end' }}>
                        <span style={{ fontFamily: 'var(--op-font-mono)', fontSize: '0.7rem', color: 'var(--op-gray-400)', letterSpacing: '0.05em', marginRight: '0.3rem' }}>
                            demo:
                        </span>
                        {flavors.map(([id, label]) => (
                            <button
                                key={id}
                                onClick={() => setFlavor(id)}
                                className="dev-chip"
                                style={{
                                    fontSize: '0.7rem', padding: '0.25rem 0.7rem',
                                    background: flavor === id ? 'var(--op-black)' : 'var(--op-white)',
                                    color: flavor === id ? 'var(--op-white)' : 'var(--op-gray-700)',
                                    borderColor: flavor === id ? 'var(--op-black)' : 'var(--op-border)',
                                    fontFamily: 'var(--op-font-mono)',
                                    letterSpacing: '0.04em',
                                }}
                            >{label}</button>
                        ))}
                    </div>
                    <DevTerminal flavor={flavor} />
                </div>
            </div>
        </section>
    );
}

// ────────────────────────────────────────────────────────────────────
// SERVICES
// ────────────────────────────────────────────────────────────────────
function DevServices({ lang }) {
    const items = [
        {
            no: '01',
            cat: 'Web',
            catClass: '',
            es: { h: 'Diseño + Desarrollo Web',
                  en: 'Web design + development',
                  body: 'Sitios editoriales, marketing y producto. De la composición tipográfica al despliegue. Mismo equipo de principio a fin.' },
            en: { h: 'Web design + development',
                  en: 'Diseño + desarrollo web',
                  body: 'Editorial, marketing and product sites. From typesetting to deploy. One team start to finish.' },
            stack: ['React', 'Astro', 'Next.js', 'Tailwind'],
        },
        {
            no: '02',
            cat: 'Cloud',
            catClass: 'green',
            es: { h: 'Cloudflare · Workers + Pages',
                  en: 'Cloudflare backends',
                  body: 'APIs sin servidor, edge compute, KV/D1/R2. Construimos la red sobre la que corre Oropezas todos los días.' },
            en: { h: 'Cloudflare · Workers + Pages',
                  en: 'Backends en Cloudflare',
                  body: 'Serverless APIs, edge compute, KV/D1/R2. The same stack that runs Oropezas every day.' },
            stack: ['Workers', 'D1', 'R2', 'KV', 'Pages'],
        },
        {
            no: '03',
            cat: 'AI',
            catClass: 'blue',
            es: { h: 'Integraciones de IA',
                  en: 'AI integrations',
                  body: 'Chatbots con tu voz, generación de imágenes, moderación, búsqueda semántica. La IA que escribe en Oropezas viene de aquí.' },
            en: { h: 'AI integrations',
                  en: 'Integraciones de IA',
                  body: 'Chatbots in your voice, image generation, moderation, semantic search. The same AI that runs in the Oropezas newsroom.' },
            stack: ['Llama 3.3', 'Flux-1', 'OpenAI', 'RAG'],
        },
        {
            no: '04',
            cat: 'Agentes',
            catClass: 'blue',
            es: { h: 'Agentes de IA a medida',
                  en: 'Custom AI agents',
                  body: 'Concierges, reservaciones, soporte, ventas. Agentes que conocen tu negocio, hablan tu idioma, y entregan resultados verificables.' },
            en: { h: 'Custom AI agents',
                  en: 'Agentes de IA a medida',
                  body: 'Concierges, bookings, support, sales. Agents that know your business, speak your language and ship verifiable results.' },
            stack: ['LangGraph', 'Tool-use', 'Eval', 'WhatsApp'],
        },
        {
            no: '05',
            cat: 'SEO',
            catClass: '',
            es: { h: 'SEO &amp; analítica honesta',
                  en: 'SEO & analytics',
                  body: 'Métricas sin humo. Schema, core web vitals, indexación bilingüe ES/EN, y paneles que sirven para decidir, no para presumir.' },
            en: { h: 'SEO &amp; honest analytics',
                  en: 'SEO &amp; analítica',
                  body: 'No-smoke metrics. Schema, core web vitals, bilingual ES/EN indexing, and dashboards built to decide, not to brag.' },
            stack: ['GA4', 'Plausible', 'Schema.org', 'Sitemaps'],
        },
        {
            no: '06',
            cat: 'Branding',
            catClass: '',
            es: { h: 'Identidad + Diseño',
                  en: 'Brand identity',
                  body: 'Marcas que se imprimen y se programan. Sistemas de diseño, logotipos, tipografía y guías que aguantan dos idiomas y diez años.' },
            en: { h: 'Brand identity',
                  en: 'Identidad + diseño',
                  body: 'Brands that print and ship. Design systems, marks, type and guidelines built to survive two languages and ten years.' },
            stack: ['Figma', 'Tokens', 'Inter / serif', 'Print'],
        },
    ];

    return (
        <section className="dev-section--tinted" id="servicios">
            <div className="dev-section dev-section-inner" data-screen-label="02 Services" style={{ padding: 0 }}>
                <div className="dev-section-title">
                    <span className="title-text">{lang === 'es' ? 'Servicios — Services' : 'Services — Servicios'}</span>
                    <span className="title-meta">06 / 06</span>
                </div>
                <div className="dev-section-lead">
                    <div>
                        <h2>{lang === 'es'
                            ? 'Seis disciplinas. Un solo estudio.'
                            : 'Six disciplines. One studio.'}</h2>
                        <p className="lead-en">{lang === 'es'
                            ? '— Six disciplines. One studio.'
                            : '— Seis disciplinas. Un solo estudio.'}</p>
                    </div>
                    <div>
                        <p className="lead-body">{lang === 'es'
                            ? 'Todo lo que sale del estudio se diseña, se programa y se opera por las mismas personas. No subcontratamos. Nuestro trabajo se mide por lo que sigue en pie un año después del lanzamiento.'
                            : 'Everything that leaves the studio is designed, coded and operated by the same people. We do not subcontract. Our work is judged by what is still standing a year after launch.'}</p>
                        <p className="lead-body-en">{lang === 'es'
                            ? '— Designed, coded and operated by the same people. No subcontractors. Judged by what is still standing a year after launch.'
                            : '— Diseñado, programado y operado por las mismas personas. Sin subcontratistas. Lo juzga lo que sigue en pie un año después.'}</p>
                    </div>
                </div>
                <div className="dev-services-grid">
                    {items.map((it) => {
                        const copy = lang === 'es' ? it.es : it.en;
                        return (
                            <article className="dev-service" key={it.no}>
                                <span className="dev-service-no">№ {it.no}</span>
                                <span className={`dev-service-cat ${it.catClass}`}>{it.cat}</span>
                                <h3 dangerouslySetInnerHTML={{ __html: copy.h }} />
                                <p className="en" dangerouslySetInnerHTML={{ __html: '— ' + copy.en }} />
                                <p>{copy.body}</p>
                                <div className="dev-service-stack">
                                    {it.stack.map((s) => <code key={s}>{s}</code>)}
                                </div>
                            </article>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}

// ────────────────────────────────────────────────────────────────────
// CASES
// ────────────────────────────────────────────────────────────────────
function CaseImage({ kind }) {
    const url = {
        oropezas: 'oropezas.com',
        kelowna:  'techprokelowna.com',
        dev:      'dev.oropezas.com',
    }[kind];

    return (
        <div className="dev-case-image">
            <div className="browser-chrome">
                <i /><i /><i />
                <span className="url">{url}</span>
            </div>
            <div className="browser-body">
                {kind === 'oropezas' && (
                    <div className="mock">
                        <div className="mock-stripe ticker" />
                        <div className="mock-stripe" />
                        <div className="mock-hero">
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8%' }}>
                                <div className="line lg" /><div className="line lg" />
                                <div className="line md" />
                                <div className="line sm" /><div className="line sm" /><div className="line sm" style={{ width: '85%' }} />
                            </div>
                            <div className="img" />
                        </div>
                    </div>
                )}
                {kind === 'kelowna' && (
                    <div className="mock">
                        <div className="mock-stripe" style={{ background: '#c8102e' }} />
                        <div className="mock-hero kelowna" style={{ gridTemplateColumns: '1fr', textAlign: 'left' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8%' }}>
                                <div className="line lg" style={{ height: 10 }} />
                                <div className="line md" style={{ height: 10 }} />
                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '6%' }}>
                                    <div className="img" /><div className="img" /><div className="img" />
                                </div>
                            </div>
                        </div>
                    </div>
                )}
                {kind === 'dev' && (
                    <div className="mock">
                        <div className="mock-stripe" />
                        <div className="mock-stripe ticker" />
                        <div className="mock-hero terminal" style={{ gridTemplateColumns: '1fr 1fr', alignItems: 'center', padding: '6%' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8%' }}>
                                <div className="line lg" style={{ background: '#fff' }} />
                                <div className="line lg" style={{ background: '#fff' }} />
                                <div className="line md" style={{ background: 'var(--dev-green-bright)' }} />
                                <div className="line sm" style={{ background: '#888' }} />
                                <div className="line sm" style={{ background: '#888' }} />
                            </div>
                            <div style={{ background: '#0c0c0c', borderRadius: 4, padding: '8% 6%', display: 'flex', flexDirection: 'column', gap: '5%', border: '1px solid #1a1a1a' }}>
                                <div className="line sm" style={{ background: 'var(--dev-green-bright)', width: '80%' }} />
                                <div className="line sm" style={{ background: '#cfcfcf', width: '60%' }} />
                                <div className="line sm" style={{ background: '#cfcfcf', width: '90%' }} />
                                <div className="line sm" style={{ background: 'var(--dev-green-bright)', width: '40%' }} />
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}

function DevCases({ lang }) {
    const cases = [
        {
            kind: 'oropezas',
            cat: 'Editorial', catClass: '',
            domain: 'oropezas.com / kelowna.oropezas.com',
            es: {
                h: 'El periódico que nos enseñó a programar.',
                hen: 'The newspaper that taught us how to ship.',
                body: 'Dos ediciones, un mismo Worker de Cloudflare, un mismo sistema de cuentas, un chatbot con voz mexicana y un foro moderado por IA. Es donde probamos todo antes de venderlo.',
                bodyEn: '— Two editions, one Cloudflare Worker, one account system, one Mexican-voice chatbot, one AI-moderated forum. Where we test everything before selling it.',
            },
            stats: [['4.2M', { es: 'Peticiones / día', en: 'Requests / day' }], ['120 ms', { es: 'p95 global', en: 'Global p95' }], ['ES + EN', { es: 'Bilingüe nativo', en: 'Native bilingual' }]],
            link: 'Visitar oropezas.com',
            linkEn: 'Visit oropezas.com',
        },
        {
            kind: 'kelowna',
            cat: 'Directorio', catClass: 'green',
            domain: 'techprokelowna.com',
            es: {
                h: 'Un directorio técnico para el valle del Okanagan.',
                hen: 'A technical directory for the Okanagan valley.',
                body: 'Sitio bilingüe, indexado por Google en menos de una semana, listings curados a mano y un asistente que responde en inglés y español. Hecho desde San Luis para Kelowna.',
                bodyEn: '— Bilingual site, indexed by Google in under a week, hand-curated listings and an assistant that replies in English and Spanish. Built from SLP for Kelowna.',
            },
            stats: [['98', { es: 'Lighthouse', en: 'Lighthouse' }], ['+72%', { es: 'Indexación · 30 días', en: 'Indexing · 30 days' }], ['2', { es: 'Idiomas, un dominio', en: 'Languages, one domain' }]],
            link: 'Visitar techprokelowna.com',
            linkEn: 'Visit techprokelowna.com',
        },
        {
            kind: 'dev',
            cat: 'Estudio', catClass: 'blue',
            domain: 'dev.oropezas.com',
            es: {
                h: 'Este mismo sitio. Imprimimos lo que firmamos.',
                hen: 'This very site. We print what we sign.',
                body: 'Un estudio que comparte ADN, código y servidor con el periódico del que nació. Diseñado con el mismo sistema, desplegado en el mismo Worker, mantenido por las mismas manos.',
                bodyEn: '— A studio that shares DNA, code and server with the newspaper it was born in. Same design system, same Worker, same hands.',
            },
            stats: [['1', { es: 'Worker compartido', en: 'Shared Worker' }], ['0', { es: 'Frameworks ocultos', en: 'Hidden frameworks' }], ['2026', { es: 'Edición · Vol. I', en: 'Edition · Vol. I' }]],
            link: 'Estás aquí',
            linkEn: 'You are here',
        },
    ];

    return (
        <section className="dev-section" id="clientes" data-screen-label="03 Clients">
            <div className="dev-section-title">
                <span className="title-text">{lang === 'es' ? 'Clientes — Clients' : 'Clients — Clientes'}</span>
                <span className="title-meta">03 / 03</span>
            </div>
            <div className="dev-section-lead">
                <div>
                    <h2>{lang === 'es' ? 'Trabajos que ya están en producción.' : 'Work that is already in production.'}</h2>
                    <p className="lead-en">{lang === 'es' ? '— Work already shipped, still running.' : '— Trabajos lanzados y en operación.'}</p>
                </div>
                <div>
                    <p className="lead-body">
                        {lang === 'es'
                            ? 'No mostramos mockups. Cada cliente abajo está en línea, sirviendo tráfico real, en el momento en que estás leyendo esto. Si algo no funciona, también está en producción — y lo vas a notar.'
                            : 'We do not show mockups. Every client below is live, serving real traffic, the moment you are reading this. If anything breaks, that is in production too — and you will notice.'}
                    </p>
                </div>
            </div>
            <div className="dev-cases">
                {cases.map((c) => {
                    const copy = c.es;
                    return (
                        <article className="dev-case" key={c.kind}>
                            <CaseImage kind={c.kind} />
                            <div className="dev-case-content">
                                <div className="meta-row">
                                    <span className={`case-cat ${c.catClass}`}>{c.cat}</span>
                                    <span className="case-domain">{c.domain}</span>
                                </div>
                                <h3>{lang === 'es' ? copy.h : copy.hen}</h3>
                                <p className="h3-en">{lang === 'es' ? '— ' + copy.hen : '— ' + copy.h}</p>
                                <p className="case-excerpt">{lang === 'es' ? copy.body : copy.bodyEn.replace(/^— /, '')}</p>
                                <p className="case-excerpt-en">{lang === 'es' ? copy.bodyEn : '— ' + copy.body}</p>
                                <div className="case-stats">
                                    {c.stats.map(([n, l]) => (
                                        <div key={n}>
                                            <span className="num">{n}</span>
                                            <span className="lbl">{l[lang]}</span>
                                        </div>
                                    ))}
                                </div>
                                <a href="#" className="case-link">
                                    {lang === 'es' ? c.link : c.linkEn} <i className="bi bi-arrow-up-right" />
                                </a>
                            </div>
                        </article>
                    );
                })}
            </div>
        </section>
    );
}

// ────────────────────────────────────────────────────────────────────
// ABOUT
// ────────────────────────────────────────────────────────────────────
function DevAbout({ lang }) {
    return (
        <section className="dev-section--tinted" id="nosotros">
            <div className="dev-section dev-section-inner" data-screen-label="04 About" style={{ padding: 0 }}>
                <div className="dev-section-title">
                    <span className="title-text">{lang === 'es' ? 'Nosotros — About' : 'About — Nosotros'}</span>
                    <span className="title-meta">SLP · YLW</span>
                </div>
                <div className="dev-about">
                    <div>
                        <p className="dev-about-quote">
                            {lang === 'es'
                                ? 'Antes de cobrar a un cliente, este equipo ya estaba publicando un periódico todos los días. Lo seguimos haciendo. Por eso entendemos lo que pasa cuando un sitio se rompe en domingo.'
                                : 'Before charging a single client, this team was already publishing a newspaper every day. We still do. That is why we understand what happens when a site breaks on a Sunday.'}
                        </p>
                        <p className="dev-about-quote-en">
                            {lang === 'es'
                                ? '— Eduardo García O. & Equipo · Oropezas Studio'
                                : '— Eduardo García O. & Team · Oropezas Studio'}
                        </p>
                    </div>
                    <div className="dev-about-body">
                        <p>
                            {lang === 'es'
                                ? 'Oropezas Studio nació dentro de la redacción digital de Oropezas.com en San Luis Potosí. Lo que empezó como un equipo de dos personas escribiendo notas y desplegando Workers se volvió un estudio: ahora le damos servicio a clientes en México y en el valle del Okanagan, en Canadá, con la disciplina de una redacción y la velocidad de un equipo de producto.'
                                : 'Oropezas Studio was born inside the Oropezas.com digital newsroom in San Luis Potosí. What started as two people writing pieces and shipping Cloudflare Workers became a studio: we now serve clients across México and the Okanagan valley in Canada, with the discipline of a newsroom and the velocity of a product team.'}
                        </p>
                        <p className="en">
                            {lang === 'es'
                                ? '— Born in the Oropezas.com newsroom in San Luis Potosí. From two people shipping Workers to a studio serving México and the Okanagan.'
                                : '— Nacido en la redacción de Oropezas.com en San Luis Potosí. De dos personas desplegando Workers a un estudio que sirve a México y el Okanagan.'}
                        </p>
                        <p>
                            {lang === 'es'
                                ? 'Lo que vendemos no es código nuevo: vendemos las decisiones que un equipo aprende publicando todos los días. Tono, accesibilidad, performance, bilingüismo, escalado por la noche. Cosas que no se ven hasta que faltan.'
                                : 'What we sell is not new code: we sell the decisions a team learns by publishing every day. Tone, accessibility, performance, bilingualism, scaling overnight. Things you do not see until they are missing.'}
                        </p>

                        <div className="dev-about-facts">
                            <div className="fact">
                                <span className="num">№ 01</span>
                                <span className="k">2026</span>
                                <span className="v">{lang === 'es' ? 'Fundado' : 'Founded'}</span>
                            </div>
                            <div className="fact">
                                <span className="num">№ 02</span>
                                <span className="k">SLP · YLW</span>
                                <span className="v">{lang === 'es' ? 'Bases' : 'Bases'}</span>
                            </div>
                            <div className="fact">
                                <span className="num">№ 03</span>
                                <span className="k">ES / EN</span>
                                <span className="v">{lang === 'es' ? 'Idiomas nativos' : 'Native languages'}</span>
                            </div>
                            <div className="fact">
                                <span className="num">№ 04</span>
                                <span className="k">100%</span>
                                <span className="v">{lang === 'es' ? 'Hecho en casa' : 'Built in-house'}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

// ────────────────────────────────────────────────────────────────────
// CONTACT — wired to /api/contact backend
// ────────────────────────────────────────────────────────────────────
function DevContact({ lang }) {
    const [scope, setScope] = React.useState(['web']);
    const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
    const formRef = React.useRef(null);

    const chipDefs = lang === 'es'
        ? [['web', 'Web'], ['cloud', 'Cloudflare'], ['ai', 'IA / Chatbot'], ['agents', 'Agentes'], ['seo', 'SEO'], ['brand', 'Branding'], ['otro', 'Otro']]
        : [['web', 'Web'], ['cloud', 'Cloudflare'], ['ai', 'AI / Chatbot'], ['agents', 'Agents'], ['seo', 'SEO'], ['brand', 'Branding'], ['otro', 'Other']];

    function toggle(id) {
        setScope((s) => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
    }

    async function onSubmit(e) {
        e.preventDefault();
        setStatus('sending');
        const fd = new FormData(formRef.current);
        const payload = {
            name:    fd.get('name'),
            company: fd.get('company'),
            email:   fd.get('email'),
            budget:  fd.get('budget'),
            scope:   scope,
            message: fd.get('message'),
            lang,
        };
        try {
            const res = await fetch('/api/contact', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
            });
            if (!res.ok) throw new Error('server');
            setStatus('sent');
            formRef.current.reset();
            setScope(['web']);
            setTimeout(() => setStatus('idle'), 5000);
        } catch (_) {
            setStatus('error');
            setTimeout(() => setStatus('idle'), 4000);
        }
    }

    const sending = status === 'sending';
    const sent    = status === 'sent';
    const err     = status === 'error';

    return (
        <section className="dev-section" id="contacto" data-screen-label="05 Contact">
            <div className="dev-section-title">
                <span className="title-text">{lang === 'es' ? 'Contacto — Contact' : 'Contact — Contacto'}</span>
                <span className="title-meta">hola@dev.oropezas.com</span>
            </div>
            <div className="dev-section-lead">
                <div>
                    <h2>{lang === 'es'
                        ? '¿Empezamos? Cuéntanos.'
                        : 'Ready to start? Tell us.'}</h2>
                    <p className="lead-en">{lang === 'es' ? '— Ready to start? Tell us.' : '— ¿Empezamos? Cuéntanos.'}</p>
                </div>
                <div>
                    <p className="lead-body">{lang === 'es'
                        ? 'Respondemos en menos de 24 horas hábiles. Si tu proyecto encaja, agendamos una llamada de 30 minutos. Si no, te decimos por qué — y a quién mandarte.'
                        : 'We reply within 24 business hours. If your project fits, we book a 30-minute call. If not, we tell you why — and where to send it instead.'}</p>
                </div>
            </div>

            <div className="dev-contact">
                <form className="dev-contact-form" ref={formRef} onSubmit={onSubmit}>
                    <div className="dev-field-row">
                        <div className="dev-field">
                            <label>{lang === 'es' ? 'Nombre / Name' : 'Name / Nombre'}</label>
                            <input name="name" type="text" required placeholder={lang === 'es' ? 'María García' : 'Maria Garcia'} />
                        </div>
                        <div className="dev-field">
                            <label>{lang === 'es' ? 'Empresa / Company' : 'Company / Empresa'}</label>
                            <input name="company" type="text" placeholder={lang === 'es' ? 'Opcional' : 'Optional'} />
                        </div>
                    </div>
                    <div className="dev-field-row">
                        <div className="dev-field">
                            <label>Email</label>
                            <input name="email" type="email" required placeholder="hola@empresa.com" />
                        </div>
                        <div className="dev-field">
                            <label>{lang === 'es' ? 'Presupuesto · USD' : 'Budget · USD'}</label>
                            <select name="budget" defaultValue="">
                                <option value="" disabled>{lang === 'es' ? 'Selecciona…' : 'Select…'}</option>
                                <option value="lt5k">&lt; $5K</option>
                                <option value="5k-15k">$5K – $15K</option>
                                <option value="15k-50k">$15K – $50K</option>
                                <option value="50k+">$50K +</option>
                                <option value="tbd">{lang === 'es' ? 'Por definir' : 'Not sure yet'}</option>
                            </select>
                        </div>
                    </div>
                    <div className="dev-field">
                        <label>{lang === 'es' ? '¿Qué necesitas? (selecciona los que apliquen)' : 'What do you need? (select all that apply)'}</label>
                        <div className="dev-chips">
                            {chipDefs.map(([id, l]) => (
                                <button type="button" key={id}
                                    className={`dev-chip ${scope.includes(id) ? 'active' : ''}`}
                                    onClick={() => toggle(id)}>{l}</button>
                            ))}
                        </div>
                    </div>
                    <div className="dev-field">
                        <label>{lang === 'es' ? 'Cuéntanos del proyecto' : 'Tell us about the project'}</label>
                        <textarea name="message" placeholder={lang === 'es'
                            ? '¿De qué se trata? ¿En qué etapa estás? ¿Qué soñaste mientras llenabas este formulario?'
                            : 'What is it about? Where are you in the process? What did you dream up while filling out this form?'} />
                    </div>
                    {err && (
                        <p style={{ fontSize: '0.85rem', color: 'var(--op-red)', margin: 0 }}>
                            {lang === 'es'
                                ? 'Hubo un error al enviar. Intenta de nuevo o escríbenos directo.'
                                : 'Something went wrong. Please try again or email us directly.'}
                        </p>
                    )}
                    <button type="submit" disabled={sending}
                        className={`dev-form-submit ${sent ? 'sent' : ''}`}>
                        {sent    && (lang === 'es' ? '✓ Mensaje recibido' : '✓ Message received')}
                        {sending && (lang === 'es' ? 'Enviando…' : 'Sending…')}
                        {!sent && !sending && (
                            <>
                                {lang === 'es' ? 'Enviar brief' : 'Send brief'}
                                <i className="bi bi-arrow-right" />
                            </>
                        )}
                    </button>
                </form>

                <aside className="dev-contact-side">
                    <h4>{lang === 'es' ? 'Otras formas' : 'Other channels'}</h4>
                    <div className="row">
                        <strong>Email</strong>
                        <span className="mono">hola@dev.oropezas.com</span>
                    </div>
                    <div className="row">
                        <strong>{lang === 'es' ? 'WhatsApp · México' : 'WhatsApp · Mexico'}</strong>
                        <span className="mono">+52 (442) 782-9745</span>
                    </div>
                    <div className="row">
                        <strong>{lang === 'es' ? 'Teléfono · Canadá' : 'Phone · Canada'}</strong>
                        <span className="mono">+1 (672) 968-8689</span>
                    </div>
                    <div className="row">
                        <strong>{lang === 'es' ? 'Oficinas' : 'Offices'}</strong>
                        San Luis Potosí, México<br />
                        Kelowna, BC, Canadá
                        <p className="en" style={{ margin: '0.4rem 0 0', fontSize: '0.78rem', color: 'var(--op-gray-400)', fontStyle: 'italic' }}>
                            {lang === 'es' ? '— GMT-6 · GMT-7 · Bilingüe' : '— GMT-6 · GMT-7 · Bilingual'}
                        </p>
                    </div>
                    <div className="row">
                        <strong>{lang === 'es' ? 'Tiempos' : 'Lead times'}</strong>
                        {lang === 'es' ? 'Hoy: 4 semanas. Q3 2026: empezando.' : 'Today: 4 weeks. Q3 2026: opening up.'}
                    </div>
                </aside>
            </div>
        </section>
    );
}

Object.assign(window, { DevHero, DevServices, DevCases, DevAbout, DevContact });