/** The Conscious Code — 2026 redesign (conversion).
 * ROI Calculator · Dermimed case · FAQ · Contact form.
 */

const { useEffect, useState, useMemo } = React;

/* ─────────────────────────────────────────────────  ROI Calculator */
function RoiCalculator() {
  const { lang, t } = useLang();
  const [employees, setEmployees]   = useState(15);
  const [hours, setHours]           = useState(8);
  const [salary, setSalary]         = useState(18000);
  const [email, setEmail]           = useState('');
  const [computed, setComputed]     = useState(null);
  const [animated, setAnimated]     = useState(0);
  const animatedRef = React.useRef(0);
  animatedRef.current = animated;

  const annualWaste = useMemo(() => {
    const weeklyHoursLost = employees * hours;
    const hourlyRate = salary / (4.33 * 48);          // MX work month
    return Math.round(weeklyHoursLost * hourlyRate * 52);
  }, [employees, hours, salary]);

  const annualHours = useMemo(() => employees * hours * 52, [employees, hours]);
  const monthlyWaste = Math.round(annualWaste / 12);

  // Animate the big number toward the live annual waste whenever inputs change
  useEffect(() => {
    const target = annualWaste;
    const from = animatedRef.current;
    const dur = 700;
    const t0 = performance.now();
    let raf;
    const step = (now) => {
      const t = Math.min(1, (now - t0) / dur);
      const ease = 1 - Math.pow(2, -10 * t);
      setAnimated(Math.round(from + (target - from) * ease));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [annualWaste]);

  const fmtMXN = (n) => n.toLocaleString(lang === 'EN' ? 'en-US' : 'es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 });
  const fmt    = (n) => n.toLocaleString(lang === 'EN' ? 'en-US' : 'es-MX');

  return (
    <section id="calculadora" className="section">
      <div className="container">
        <div style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, alignItems: 'end' }}>
          <div style={{ gridColumn: 'span 7' }}>
            <Eyebrow>{t('· Calculadora ROI', '· ROI calculator')}</Eyebrow>
            <h2 style={{ marginTop: 18, fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2rem, 5vw, 4.25rem)', fontWeight: 300, lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--tcc-on-surface)' }}>
              <MaskLine delay={0}><span style={{ fontWeight: 300 }}>{t('¿Cuánto te cuesta', 'What does it cost you')}</span></MaskLine>
              <MaskLine delay={180}><span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>{t('no saber?', 'to not know?')}</span></MaskLine>
            </h2>
            <p className="lead" style={{ marginTop: 24, maxWidth: 620 }}>
              {t('Las empresas familiares pierden dinero todos los días en procesos manuales, información perdida y decisiones a ciegas. Descubre cuánto podrías estar ahorrando.', 'Family businesses lose money every day to manual processes, lost information, and blind decisions. Find out how much you could be saving.')}
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 32 }}>
          {/* Form */}
          <Reveal>
            <div className="roi-card">
              <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 10, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 28 }}>
                {t('Calculadora de Ahorro', 'Savings calculator')}
              </div>

              <div className="slider-row">
                <label className="slider-label">{t('1. ¿Cuántas personas trabajan en tu empresa?', '1. How many people work at your company?')}</label>
                <div className="slider-display">{employees} {t(employees === 1 ? 'persona' : 'personas', employees === 1 ? 'person' : 'people')}</div>
                <input className="tcc-slider" type="range" min={5} max={100} step={1} value={employees} onChange={(e) => setEmployees(+e.target.value)} />
              </div>

              <div className="slider-row">
                <label className="slider-label">{t('2. ¿Cuántas horas a la semana pierde tu equipo en tareas manuales?', '2. How many hours a week does your team lose to manual tasks?')}</label>
                <div className="slider-display">{hours} {t('horas por persona', 'hours per person')}</div>
                <input className="tcc-slider" type="range" min={2} max={30} step={1} value={hours} onChange={(e) => setHours(+e.target.value)} />
                <div className="slider-hint">{t('Pasar datos entre Excel, buscar información, reportes manuales, conciliar cuentas…', 'Copying data between spreadsheets, hunting for info, manual reports, reconciling accounts…')}</div>
              </div>

              <div className="slider-row">
                <label className="slider-label">{t('3. ¿Cuál es el salario mensual promedio en tu empresa?', '3. What’s the average monthly salary at your company?')}</label>
                <div className="slider-display">{fmtMXN(salary)} {t('mensuales', 'per month')}</div>
                <input className="tcc-slider" type="range" min={8000} max={50000} step={500} value={salary} onChange={(e) => setSalary(+e.target.value)} />
              </div>

              <div className="slider-row" style={{ marginTop: 8 }}>
                <label className="slider-label" style={{ fontWeight: 400, color: 'var(--tcc-on-surface-variant)' }}>{t('Recibe tu análisis completo por correo (opcional)', 'Get your full analysis by email (optional)')}</label>
                <input
                  type="email"
                  placeholder={t('tu@correo.com', 'you@email.com')}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  style={{
                    width: '100%', background: 'var(--tcc-surface-low)',
                    border: '1px solid var(--tcc-outline-variant)',
                    borderRadius: 4, padding: '14px 16px', minHeight: 48,
                    fontFamily: 'var(--tcc-font-body)', fontSize: 14, color: 'var(--tcc-on-surface)',
                    outline: 'none',
                  }}
                />
              </div>

              <div style={{ marginTop: 12 }}>
                <PrimaryButton onClick={() => document.getElementById('contacto')?.scrollIntoView({ behavior: 'smooth' })} fullWidth>
                  {t('Recibir mi análisis completo', 'Get my full analysis')}
                  <span style={{ width: 16, height: 16 }}><Icon.ChevronRight /></span>
                </PrimaryButton>
              </div>
            </div>
          </Reveal>

          {/* Result */}
          <Reveal delay={150}>
            <div className="roi-result">
              <div style={{ position: 'relative', zIndex: 2 }}>
                <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 10, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 24 }}>
                  {t('Tu costo oculto', 'Your hidden cost')}
                </div>
                <div className="roi-num">
                  {fmtMXN(animated)}
                </div>
                <div style={{ marginTop: 8, fontFamily: 'var(--tcc-font-mono)', fontSize: 12, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>
                  {t('— al año —', '— per year —')}
                </div>

                <p style={{ marginTop: 28, fontFamily: 'var(--tcc-font-body)', fontWeight: 300, fontSize: 16, color: 'var(--tcc-on-surface-variant)', lineHeight: 1.65, maxWidth: 420 }}>
                  {t('Eso es lo que tu empresa de ', 'That’s what your ')}<strong style={{ color: 'var(--tcc-on-surface)', fontWeight: 600 }}>{employees} {t(employees === 1 ? 'persona' : 'personas', employees === 1 ? 'person' : 'people')}</strong>{t(' gasta cada año en trabajo que la tecnología puede hacer mejor, más rápido y sin errores.', ' company spends every year on work that technology can do better, faster, and error-free.')}
                </p>

                <ul style={{ listStyle: 'none', padding: 0, margin: '28px 0 0', display: 'flex', flexDirection: 'column', gap: 12, borderTop: '1px solid var(--tcc-outline-variant)', paddingTop: 20 }}>
                  <li style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: 'var(--tcc-font-body)', fontSize: 14, color: 'var(--tcc-on-surface-variant)' }}>
                    <span style={{ width: 18, height: 18, color: 'var(--tcc-primary)' }}><Icon.BarChart /></span>
                    <span>{fmt(annualHours)} {t('horas/año en tareas repetitivas', 'hours/year on repetitive tasks')}</span>
                  </li>
                  <li style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: 'var(--tcc-font-body)', fontSize: 14, color: 'var(--tcc-on-surface-variant)' }}>
                    <span style={{ width: 18, height: 18, color: 'var(--tcc-primary)' }}><Icon.DollarSign /></span>
                    <span>{fmtMXN(monthlyWaste)} {t('MXN/mes desperdiciado', 'MXN/month wasted')}</span>
                  </li>
                  <li style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: 'var(--tcc-font-body)', fontSize: 14, color: 'var(--tcc-on-surface-variant)' }}>
                    <span style={{ width: 18, height: 18, color: 'var(--tcc-primary)' }}><Icon.Sparkles /></span>
                    <span>{t('Sin contar errores ni trabajo perdido', 'Not counting errors or lost work')}</span>
                  </li>
                </ul>

                <div style={{ marginTop: 32 }}>
                  <PrimaryButton onClick={() => document.getElementById('contacto')?.scrollIntoView()}>
                    {t('Quiero recuperar ese dinero', 'I want that money back')}
                    <span style={{ width: 16, height: 16 }}><Icon.ChevronRight /></span>
                  </PrimaryButton>
                  <div style={{ marginTop: 14, fontFamily: 'var(--tcc-font-body)', fontStyle: 'italic', fontSize: 12, color: 'var(--tcc-on-surface-dim)' }}>
                    {t('No enviaremos spam. Lo prometemos.', 'No spam. We promise.')}
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────  Cases carousel
 * Reference: minimalist horizontal rail with prev/next.
 * Each card click → expand inline detail panel.
 */
function getCases(t) {
  return [
  {
    id: 'dermimed',
    tag: t('Salud · Guadalajara, MX', 'Healthcare · Guadalajara, MX'),
    short: 'Dermimed',
    title: t('Clínica de belleza con inventario invisible — ahora con datos.', 'Beauty clinic with invisible inventory — now run on data.'),
    headline: t('Clínica de belleza con inventario invisible', 'Beauty clinic with invisible inventory'),
    headlineItalic: t('— ahora con datos.', '— now run on data.'),
    location: t('Dermimed · Guadalajara, MX', 'Dermimed · Guadalajara, MX'),
    intro: t('Dermimed manejaba su inventario de productos médicos y cosméticos entre hojas de cálculo y memoria del equipo. El riesgo: medicamentos vencidos sin detectar, quiebres de stock que cancelaban citas, y cero visibilidad sobre qué proveedores convenían.', 'Dermimed ran its inventory of medical and cosmetic products on spreadsheets and the team’s memory. The risk: expired products nobody caught, stockouts that canceled appointments, and zero visibility into which suppliers were actually worth it.'),
    wins: [
      t('Visualización de inventario en tiempo real — saben qué tienen y dónde.', 'Real-time inventory view — they know what they have and where.'),
      t('Control de transacciones limpio y trazable.', 'Clean, traceable transaction records.'),
      t('Assessment de proveedores — comparan costos, tiempos y calidad para negociar mejor.', 'Supplier scoring — they compare cost, lead time, and quality to negotiate better.'),
      t('Análisis de costos que revela márgenes reales por servicio.', 'Cost analysis that reveals the real margin on each service.'),
      t('Alertas automáticas de productos próximos a vencer y quiebres de stock.', 'Automatic alerts for products about to expire and for stockouts.'),
    ],
    quote: t('"Ahora su equipo toma decisiones con datos, no con intuición. Y ningún medicamento vuelve a vencer en el estante sin que alguien lo sepa."', '“Now the team decides with data, not gut feel. And no product expires on the shelf without someone knowing.”'),
    mockup: 'dermimed',
    color: '#00ffcc',
    agent: {
      name: t('Agente de Cotizaciones', 'Quoting Agent'),
      icon: 'mail',
      desc: t('Captura cotizaciones de proveeduría directo del email, las analiza automáticamente — costos, tiempos, calidad — y dispara el flujo de compra hacia el ERP sin intervención humana.', 'Pulls supplier quotes straight from email, analyzes them automatically — cost, lead time, quality — and kicks off the purchase flow into the ERP with no human in the loop.'),
      tags: [t('Lectura de email', 'Email parsing'), t('RAG comparativo', 'Comparative RAG'), 'ERP API'],
      trace: [
        { ts: '14:02', mark: '→', cls: 'white', text: t('3 cotizaciones nuevas detectadas', '3 new quotes detected') },
        { ts: '14:02', mark: '·',  cls: 'dim',   text: t('Mediderma · 1,247€ · 5d entrega', 'Mediderma · €1,247 · 5-day delivery') },
        { ts: '14:02', mark: '·',  cls: 'dim',   text: t('FarmaPro · 1,180€ · 9d entrega', 'FarmaPro · €1,180 · 9-day delivery') },
        { ts: '14:02', mark: '·',  cls: 'dim',   text: t('VitaQ · 1,310€ · 3d entrega', 'VitaQ · €1,310 · 3-day delivery') },
        { ts: '14:03', mark: '↳', cls: 'white', text: t('Recomendación: VitaQ (urgencia · stock<14d)', 'Recommendation: VitaQ (urgent · stock<14d)') },
        { ts: '14:03', mark: '✓', cls: 'cyan',  text: t('Orden enviada al ERP · #PO-3847', 'Order sent to ERP · #PO-3847') },
      ],
    },
  },
  {
    id: 'media-hub',
    tag: t('Contenido educativo · Ciudad de México, MX', 'Educational content · Mexico City, MX'),
    short: t('Portafolio multimedia', 'Media portfolio'),
    title: t('Portafolio de videos y podcasts educativos, todo en una sola página.', 'A portfolio of educational videos and podcasts, all on one page.'),
    headline: t('Una academia con su contenido disperso', 'An academy with content scattered everywhere'),
    headlineItalic: t('— ahora en un portafolio vivo.', '— now in one living portfolio.'),
    location: t('Academia de contenido · Ciudad de México, MX', 'Content academy · Mexico City, MX'),
    intro: t('Una academia publicaba sus clases en YouTube, sus episodios en Spotify y sus recursos en Drive — sin un lugar propio donde su audiencia los encontrara. Construimos una página de contenido multimedia: un portafolio que reúne videos y podcasts educativos en una sola biblioteca con reproductor, búsqueda por tema y métricas de audiencia.', 'An academy published its classes on YouTube, its episodes on Spotify, and its resources on Drive — with no home of its own where the audience could find them. We built a multimedia content page: a portfolio that gathers educational videos and podcasts into a single library with a player, topic search, and audience analytics.'),
    wins: [
      t('Biblioteca unificada de videos y podcasts con reproductor integrado.', 'Unified library of videos and podcasts with a built-in player.'),
      t('Organización por series, temas y nivel — la audiencia encuentra todo en segundos.', 'Organized by series, topic, and level — the audience finds everything in seconds.'),
      t('Transcripciones y capítulos automáticos para cada episodio.', 'Automatic transcripts and chapters for every episode.'),
      t('Métricas de audiencia: reproducciones, retención y episodios más vistos.', 'Audience metrics: plays, retention, and most-watched episodes.'),
      t('Publicación en un clic — un nuevo episodio aparece en la página y en sus canales a la vez.', 'One-click publishing — a new episode appears on the page and on their channels at once.'),
    ],
    quote: t('"Por fin tenemos una casa para nuestro contenido. La gente ya no busca en cinco plataformas — entra a una página y encuentra todo lo que hemos creado."', '“We finally have a home for our content. People don’t hunt across five platforms anymore — they open one page and find everything we’ve made.”'),
    mockup: 'media-hub',
    color: '#00ffcc',
    agent: {
      name: t('Agente de Producción de Contenido', 'Content Production Agent'),
      icon: 'mail',
      desc: t('Toma cada video o podcast nuevo, lo transcribe, le genera capítulos, título, descripción y clips cortos para redes — y lo publica en la página y en los canales conectados sin intervención humana.', 'Takes each new video or podcast, transcribes it, generates chapters, a title, a description, and short social clips — then publishes it to the page and connected channels with no human in the loop.'),
      tags: [t('Transcripción', 'Transcription'), t('Generación de clips', 'Clip generation'), 'Multi-channel'],
      trace: [
        { ts: '11:20', mark: '→', cls: 'white', text: t('Episodio nuevo detectado · "Finanzas para fundadores"', 'New episode detected · “Finance for founders”') },
        { ts: '11:21', mark: '↻', cls: 'dim',   text: t('Transcribiendo · 48 min de audio', 'Transcribing · 48 min of audio') },
        { ts: '11:22', mark: '✓', cls: 'white', text: t('12 capítulos + resumen generados', '12 chapters + summary generated') },
        { ts: '11:23', mark: '↳', cls: 'white', text: t('4 clips cortos listos para redes', '4 short clips ready for social') },
        { ts: '11:23', mark: '·',  cls: 'dim',   text: t('SEO: título, descripción y etiquetas', 'SEO: title, description, and tags') },
        { ts: '11:24', mark: '✓', cls: 'cyan',  text: t('Publicado · página + YouTube + Spotify', 'Published · page + YouTube + Spotify') },
      ],
    },
  },
  {
    id: 'rentas-veracruz',
    tag: t('Bienes raíces · Veracruz, MX', 'Real estate · Veracruz, MX'),
    short: t('Rentas Veracruz', 'Veracruz Rentals'),
    title: t('Administradora de inmuebles con flujo de caja en hojas sueltas — ahora visible.', 'Property manager with cash flow on loose spreadsheets — now fully visible.'),
    headline: t('Administradora de rentas con flujo opaco', 'Rental manager with murky cash flow'),
    headlineItalic: t('— ahora con visibilidad real.', '— now with real visibility.'),
    location: t('Administradora de Rentas · Veracruz, MX', 'Rental Manager · Veracruz, MX'),
    intro: t('Una administradora de inmuebles en Veracruz manejaba ~100,000 MXN al mes entre cobros de renta, comisiones, mantenimiento y pagos al propietario — todo entre hojas sueltas. Consolidamos los movimientos en un dashboard de BI que muestra ingresos, egresos y la posición neta del mes en tiempo real, con un reporte por propietario listo para enviar.', 'A property manager in Veracruz handled about 100,000 MXN a month across rent collection, commissions, maintenance, and owner payouts — all on loose spreadsheets. We pulled it together into a BI dashboard that shows income, expenses, and the month’s net position in real time, with a per-owner report ready to send.'),
    wins: [
      t('Conciliación automática de cobros con el estado de cuenta bancario.', 'Automatic reconciliation of payments against the bank statement.'),
      t('Vista por inmueble: renta cobrada, comisión, mantenimiento y neto al propietario.', 'Per-property view: rent collected, commission, maintenance, and net to the owner.'),
      t('Categorización automática de egresos (servicios, reparaciones, fiscales).', 'Automatic expense categorization (utilities, repairs, taxes).'),
      t('Alertas de rentas vencidas y depósitos en garantía por liberar.', 'Alerts for overdue rent and security deposits due to be released.'),
      t('Reporte mensual por propietario, en PDF, listo para enviar.', 'Monthly per-owner report, as a PDF, ready to send.'),
    ],
    quote: t('"Antes cerrábamos el mes con Excel y café. Ahora abrimos un tablero, vemos cada peso entrar y salir, y le mandamos al dueño un reporte que no admite discusión."', '“We used to close the month with Excel and coffee. Now we open a dashboard, watch every peso come in and go out, and send the owner a report nobody can argue with.”'),
    mockup: 'rentas',
    color: '#00ffcc',
    agent: {
      name: t('Agente de Conciliación Bancaria', 'Bank Reconciliation Agent'),
      icon: 'trending',
      desc: t('Cruza los movimientos del estado de cuenta con los cobros esperados por inmueble, identifica rentas vencidas o pagos duplicados, categoriza los egresos y genera el reporte mensual por propietario sin intervención humana.', 'Matches bank-statement activity against expected rent per property, flags overdue rent or duplicate payments, categorizes expenses, and generates the monthly per-owner report with no human in the loop.'),
      tags: ['Bank API', t('Conciliación', 'Reconciliation'), t('Reporte PDF', 'PDF report')],
      trace: [
        { ts: '08:02', mark: '↻', cls: 'dim',   text: t('Sincronizando estado de cuenta · BBVA', 'Syncing bank statement · BBVA') },
        { ts: '08:02', mark: '·',  cls: 'dim',   text: t('47 movimientos · 31 abonos · 16 cargos', '47 transactions · 31 credits · 16 debits') },
        { ts: '08:03', mark: '✓', cls: 'white', text: t('29 rentas conciliadas (8,500 MXN c/u)', '29 rents reconciled (8,500 MXN each)') },
        { ts: '08:03', mark: '⚠', cls: 'white', text: t('2 rentas vencidas · Depto 4B, Local C', '2 rents overdue · Unit 4B, Suite C') },
        { ts: '08:04', mark: '↳', cls: 'white', text: t('Egresos categorizados · 11 servicios · 5 manto.', 'Expenses categorized · 11 utilities · 5 maintenance') },
        { ts: '08:05', mark: '✓', cls: 'cyan',  text: t('12 reportes PDF enviados a propietarios', '12 PDF reports sent to owners') },
      ],
    },
  },
  ];
}

function CasesCarousel() {
  const { t } = useLang();
  const CASES = getCases(t);
  const [active, setActive] = useState(null);
  const railRef = useRef(null);
  const [canPrev, setCanPrev] = useState(false);
  const [canNext, setCanNext] = useState(true);

  useEffect(() => {
    const el = railRef.current; if (!el) return;
    const update = () => {
      setCanPrev(el.scrollLeft > 4);
      setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
    };
    update();
    el.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => { el.removeEventListener('scroll', update); window.removeEventListener('resize', update); };
  }, []);

  const scrollBy = (dir) => {
    const el = railRef.current; if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.7), behavior: 'smooth' });
  };

  const activeCase = CASES.find((c) => c.id === active);

  return (
    <section id="casos" className="section bg-low">
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <Eyebrow>{t('· Case studies', '· Case studies')}</Eyebrow>
          <h2 style={{ marginTop: 18, fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2rem, 5vw, 4.25rem)', fontWeight: 300, lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--tcc-on-surface)' }}>
            <MaskLine delay={0}><span style={{ fontWeight: 300 }}>{t('Cómo nuestros clientes', 'How our clients')}</span></MaskLine>
            <MaskLine delay={180}><span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>{t('usan The Conscious Code.', 'use The Conscious Code.')}</span></MaskLine>
          </h2>
        </div>

        <div className="cases-rail-wrap">
          <button
            className={`cases-rail-arrow prev${canPrev ? '' : ' disabled'}`}
            onClick={() => scrollBy(-1)}
            aria-label={t('Anterior', 'Previous')}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
          </button>
          <button
            className={`cases-rail-arrow next${canNext ? '' : ' disabled'}`}
            onClick={() => scrollBy(1)}
            aria-label={t('Siguiente', 'Next')}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
          </button>

          <div className="cases-rail" ref={railRef}>
            {CASES.map((c) => (
              <article
                key={c.id}
                className={`case-mini${active === c.id ? ' active' : ''}`}
                onClick={() => !c.placeholder && setActive(active === c.id ? null : c.id)}
                style={c.placeholder ? { cursor: 'default', opacity: 0.55 } : {}}
              >
                <div className="case-mini-img">
                  <CaseThumbnail kind={c.mockup} placeholder={c.placeholder} />
                </div>
                <div className="case-mini-body">
                  <div className="case-mini-tag">{c.tag}</div>
                  <div className="case-mini-title">{c.title}</div>
                </div>
              </article>
            ))}
          </div>
        </div>

        {activeCase && (
          <CaseDetail caseData={activeCase} onClose={() => setActive(null)} />
        )}
      </div>
    </section>
  );
}

/* ─── Card thumbnails (small mockups inside the carousel cards) */
function CaseThumbnail({ kind, placeholder }) {
  const { t } = useLang();
  if (placeholder) {
    return (
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.25em',
        textTransform: 'uppercase', color: 'var(--tcc-on-surface-dim)',
      }}>
        {t('próximamente', 'coming soon')}
      </div>
    );
  }
  if (kind === 'dermimed') {
    return (
      <div style={{ position: 'absolute', inset: 18, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'JetBrains Mono, monospace' }}>
        <div style={{ fontSize: 9, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>{t('● Vence pronto · costo', '● Expiring soon · cost')}</div>
        <div style={{ background: 'rgba(0,255,204,0.06)', border: '1px solid rgba(0,255,204,0.20)', padding: '10px 12px', borderRadius: 4 }}>
          <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Valor en riesgo', 'Value at risk')}</div>
          <div style={{ fontFamily: 'var(--tcc-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--tcc-on-surface)', marginTop: 2 }}>$ 28,500<span style={{ fontSize: 10, color: 'var(--tcc-primary)', marginLeft: 4 }}>MXN</span></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>≤30d</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-primary)', marginTop: 2 }}>7 SKUs</div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>≤60d</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-on-surface)', marginTop: 2 }}>12 SKUs</div>
          </div>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 4, fontSize: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f87171' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>Botox · 12d</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: '#facc15' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>Hyalu-Filler · 28d</span></div>
        </div>
      </div>
    );
  }
  if (kind === 'rentas') {
    return (
      <div style={{ position: 'absolute', inset: 18, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'JetBrains Mono, monospace' }}>
        <div style={{ fontSize: 9, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>{t('● Flujo · este mes', '● Cash flow · this month')}</div>
        <div style={{ background: 'rgba(0,255,204,0.06)', border: '1px solid rgba(0,255,204,0.20)', padding: '10px 12px', borderRadius: 4 }}>
          <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Neto al cierre', 'Net at close')}</div>
          <div style={{ fontFamily: 'var(--tcc-font-display)', fontWeight: 700, fontSize: 20, color: 'var(--tcc-on-surface)', marginTop: 2 }}>+ 98,420<span style={{ fontSize: 10, color: 'var(--tcc-primary)', marginLeft: 4 }}>MXN</span></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Ingresos', 'Income')}</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-on-surface)', marginTop: 2 }}>128,500</div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Egresos', 'Expenses')}</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-primary)', marginTop: 2 }}>30,080</div>
          </div>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 4, fontSize: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--tcc-primary)' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('29 rentas conciliadas', '29 rents reconciled')}</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: '#facc15' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('2 rentas vencidas', '2 rents overdue')}</span></div>
        </div>
      </div>
    );
  }
  if (kind === 'media-hub') {
    return (
      <div style={{ position: 'absolute', inset: 18, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'JetBrains Mono, monospace' }}>
        <div style={{ fontSize: 9, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>{t('● Biblioteca · en vivo', '● Library · live')}</div>
        <div style={{ position: 'relative', background: 'rgba(0,255,204,0.06)', border: '1px solid rgba(0,255,204,0.20)', borderRadius: 4, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--tcc-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#06140f', fontSize: 11 }}>▶</span>
          <span style={{ position: 'absolute', left: 8, bottom: 5, fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{t('Destacado · video', 'Featured · video')}</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Episodios', 'Episodes')}</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-on-surface)', marginTop: 2 }}>128</div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Reproducciones', 'Plays')}</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-primary)', marginTop: 2 }}>94.2k</div>
          </div>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 4, fontSize: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ color: 'var(--tcc-primary)' }}>▶</span><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Video · Finanzas 101', 'Video · Finance 101')}</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ color: 'var(--tcc-primary)' }}>🎙</span><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Podcast · Ep. 47', 'Podcast · Ep. 47')}</span></div>
        </div>
      </div>
    );
  }
  if (kind === 'experts-gold') {
    return (
      <div style={{ position: 'absolute', inset: 18, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'JetBrains Mono, monospace' }}>
        <div style={{ fontSize: 9, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>● Oro 18K · live</div>
        <div style={{ background: 'rgba(0,255,204,0.06)', border: '1px solid rgba(0,255,204,0.20)', padding: '10px 12px', borderRadius: 4 }}>
          <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Cotización</div>
          <div style={{ fontFamily: 'var(--tcc-font-display)', fontWeight: 700, fontSize: 22, color: 'var(--tcc-on-surface)', marginTop: 2 }}>98.65<span style={{ fontSize: 11, color: 'var(--tcc-primary)', marginLeft: 4 }}>€/g</span></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Ventas año', 'Sales YTD')}</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-on-surface)', marginTop: 2 }}>110.365 €</div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--tcc-outline-variant)', padding: '6px 8px', borderRadius: 3 }}>
            <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>Trans</div>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--tcc-primary)', marginTop: 2 }}>85</div>
          </div>
        </div>
        <div style={{ marginTop: 'auto', height: 3, background: 'rgba(0,255,204,0.15)', borderRadius: 9999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: '64%', background: 'var(--tcc-primary)' }} />
        </div>
      </div>
    );
  }
  return null;
}

/* ─── Full-page detail overlay (case + its AI agent in one view) */
function CaseDetail({ caseData, onClose }) {
  const { t } = useLang();
  // Body scroll lock while overlay is open + Esc to close
  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  const AgentIcon = caseData.agent.icon === 'mail' ? Icon.Mail : Icon.TrendingUp;

  return (
    <div className="case-modal" role="dialog" aria-modal="true" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="case-modal-inner">
        <button className="case-modal-close" onClick={onClose} aria-label={t('Cerrar', 'Close')}>
          <div style={{ width: 18, height: 18 }}><Icon.X /></div>
        </button>

        {/* Top — location + headline */}
        <header className="case-modal-head">
          <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 11, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 20 }}>
            {caseData.location}
          </div>
          <h2 style={{ fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2.25rem, 4.5vw, 4rem)', fontWeight: 300, color: 'var(--tcc-on-surface)', letterSpacing: '-0.025em', lineHeight: 1.05, maxWidth: '20ch' }}>
            <span style={{ fontWeight: 700 }}>{caseData.headline}</span>{' '}
            <span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>{caseData.headlineItalic}</span>
          </h2>
        </header>

        {/* Story + mockup */}
        <section className="case-modal-body">
          <div className="case-modal-col">
            <p style={{ fontFamily: 'var(--tcc-font-body)', fontWeight: 300, fontSize: 17, color: 'var(--tcc-on-surface-variant)', lineHeight: 1.65, marginBottom: 28 }}>
              {caseData.intro}
            </p>
            <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 11, color: 'var(--tcc-primary)', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 14 }}>
              {t('Lo que construimos juntos', 'What we built together')}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {caseData.wins.map((w) => (
                <li key={w} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: 'var(--tcc-font-body)', fontSize: 14, color: 'var(--tcc-on-surface-variant)', lineHeight: 1.55, fontWeight: 300 }}>
                  <span style={{ width: 18, height: 18, color: 'var(--tcc-primary)', flexShrink: 0, marginTop: 2 }}><Icon.CheckCircle2 /></span>
                  <span>{w}</span>
                </li>
              ))}
            </ul>
            <p className="case-quote">{caseData.quote}</p>
          </div>

          <div className="case-mockup" style={{ minHeight: 460 }}>
            <div className="mock-bar">
              <span style={{ background: 'rgba(239,68,68,0.5)' }} />
              <span style={{ background: 'rgba(250,204,21,0.5)' }} />
              <span style={{ background: 'rgba(34,197,94,0.5)' }} />
              <span style={{ marginLeft: 8, color: 'var(--tcc-on-surface-dim)', opacity: 0.6, fontSize: 11 }}>
                {caseData.mockup === 'dermimed' ? 'dermimed_erp.app' : caseData.mockup === 'rentas' ? 'rentas_bi.app' : caseData.mockup === 'media-hub' ? 'academia_media.app' : 'experts_gold_erp.app'}
              </span>
            </div>
            {caseData.mockup === 'dermimed' ? <DermimedMock /> : caseData.mockup === 'rentas' ? <RentasMock /> : caseData.mockup === 'media-hub' ? <MediaHubMock /> : <ExpertsGoldMock />}
          </div>
        </section>

        {/* AI Agent section embedded in detail */}
        <section className="case-modal-agent">
          <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 11, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 16 }}>
            {t('· Agente de AI en producción', '· AI agent in production')}
          </div>
          <div className="agent-card" style={{ marginTop: 0 }}>
            <div className="agent-head">
              <div className="icon-chip"><div style={{ width: 26, height: 26 }}><AgentIcon /></div></div>
              <div className="agent-name">{caseData.agent.name}</div>
            </div>
            <p className="agent-desc">{caseData.agent.desc}</p>
            <div className="agent-trace">
              {caseData.agent.trace.map((r, i) => (
                <div key={i} className="row">
                  <span className="ts">{r.ts}</span>
                  <span className="cyan">{r.mark}</span>
                  <span className={r.cls === 'cyan' ? '' : r.cls}
                        style={r.cls === 'cyan' ? { color: 'var(--tcc-primary)' } : {}}>
                    {r.text}
                  </span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 4, flexWrap: 'wrap' }}>
              {caseData.agent.tags.map((t) => <span key={t} className="tag">{t}</span>)}
            </div>
          </div>
        </section>

        {/* CTA footer */}
        <footer style={{ paddingTop: 36, borderTop: '1px solid var(--tcc-outline-variant)', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16 }}>
          <h3 style={{ fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(1.5rem, 3vw, 2.25rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--tcc-on-surface)', maxWidth: '20ch' }}>
            {t('¿Querés un agente como este', 'Want an agent like this')} <span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>{t('para tu negocio?', 'for your business?')}</span>
          </h3>
          <PrimaryButton onClick={() => { onClose(); setTimeout(() => document.getElementById('contacto')?.scrollIntoView(), 300); }}>
            {t('Conversemos por WhatsApp', 'Let’s talk on WhatsApp')}
            <span style={{ width: 16, height: 16 }}><Icon.ChevronRight /></span>
          </PrimaryButton>
        </footer>
      </div>
    </div>
  );
}

function DermimedMock() {
  const { t } = useLang();
  return (
    <>
      <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
        {t('● SKUs próximos a caducar · costo de oportunidad', '● SKUs about to expire · opportunity cost')}
      </div>
      <div className="mock-grid">
        <div className="mock-stat"><div className="lbl">{t('Valor en riesgo', 'Value at risk')}</div><div className="v" style={{ fontSize: 18, color: 'var(--tcc-primary)' }}>$ 28,500<span style={{ fontSize: 11, color: 'var(--tcc-on-surface-variant)', marginLeft: 4 }}>MXN</span></div></div>
        <div className="mock-stat"><div className="lbl">{t('SKUs ≤30 días', 'SKUs ≤30 days')}</div><div className="v">7</div></div>
        <div className="mock-stat"><div className="lbl">{t('SKUs ≤60 días', 'SKUs ≤60 days')}</div><div className="v">12</div></div>
        <div className="mock-stat"><div className="lbl">{t('SKUs ≤90 días', 'SKUs ≤90 days')}</div><div className="v">19</div></div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="mock-row"><span className="dot" style={{ background: '#f87171' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Botox 100u · vence en 12d', 'Botox 100u · expires in 12d')}</span><span className="v" style={{ color: '#f87171' }}>$ 14,800</span></div>
        <div className="mock-row"><span className="dot" style={{ background: '#facc15' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Hyalu-Filler · vence en 28d', 'Hyalu-Filler · expires in 28d')}</span><span className="v" style={{ color: '#facc15' }}>$ 9,200</span></div>
        <div className="mock-row"><span className="dot" style={{ background: 'var(--tcc-primary)' }} /><span style={{ color: 'var(--tcc-on-surface-variant)' }}>{t('Crema regenerativa · 62d', 'Regenerative cream · 62d')}</span><span className="v">$ 4,500</span></div>
      </div>
      <div className="mock-footer">
        <div style={{ height: 3, background: 'rgba(0,255,204,0.15)', borderRadius: 9999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: '62%', background: 'var(--tcc-primary)', boxShadow: '0 0 8px var(--tcc-primary)' }} />
        </div>
        <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
          {t('Acción sugerida · promo 20% Botox · margen 38% recuperado', 'Suggested action · 20% Botox promo · 38% margin recovered')}
        </div>
      </div>
    </>
  );
}

function RentasMock() {
  const { t } = useLang();
  return (
    <>
      <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
        {t('● Flujo de caja · cierre del mes', '● Cash flow · month close')}
      </div>
      <div className="mock-grid">
        <div className="mock-stat"><div className="lbl">{t('Ingresos', 'Income')}</div><div className="v" style={{ fontSize: 18 }}>128,500<span style={{ fontSize: 11, color: 'var(--tcc-on-surface-variant)', marginLeft: 4 }}>MXN</span></div></div>
        <div className="mock-stat"><div className="lbl">{t('Egresos', 'Expenses')}</div><div className="v" style={{ fontSize: 18 }}>30,080<span style={{ fontSize: 11, color: 'var(--tcc-on-surface-variant)', marginLeft: 4 }}>MXN</span></div></div>
        <div className="mock-stat"><div className="lbl">{t('Neto al cierre', 'Net at close')}</div><div className="v" style={{ fontSize: 18, color: 'var(--tcc-primary)' }}>+98,420</div></div>
        <div className="mock-stat"><div className="lbl">{t('Ocupación', 'Occupancy')}</div><div className="v" style={{ fontSize: 18 }}>94<span style={{ fontSize: 13, color: 'var(--tcc-on-surface-variant)' }}>%</span></div></div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="mock-row"><span className="dot" style={{ background: 'var(--tcc-primary)' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Depto 3A · Boca del Río', 'Unit 3A · Boca del Río')}</span><span className="v">+8,500</span></div>
        <div className="mock-row"><span className="dot" style={{ background: 'var(--tcc-primary)' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Local C · Centro Veracruz', 'Suite C · Downtown Veracruz')}</span><span className="v">+14,200</span></div>
        <div className="mock-row"><span className="dot" style={{ background: '#facc15' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Depto 4B · renta vencida 11d', 'Unit 4B · rent overdue 11d')}</span><span className="v" style={{ color: '#facc15' }}>8,500</span></div>
        <div className="mock-row"><span className="dot" style={{ background: '#f87171' }} /><span style={{ color: 'var(--tcc-on-surface-variant)' }}>{t('Mantenimiento · bomba hidráulica', 'Maintenance · water pump')}</span><span className="v">−6,400</span></div>
      </div>
      <div className="mock-footer">
        <div style={{ height: 3, background: 'rgba(0,255,204,0.15)', borderRadius: 9999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: '76%', background: 'var(--tcc-primary)', boxShadow: '0 0 8px var(--tcc-primary)' }} />
        </div>
        <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
          {t('12 reportes enviados a propietarios · hace 4 min', '12 reports sent to owners · 4 min ago')}
        </div>
      </div>
    </>
  );
}

function MediaHubMock() {
  const { t } = useLang();
  const episodes = [
    { kind: 'video',   title: t('Finanzas para fundadores', 'Finance for founders'),   meta: t('Video · 24 min', 'Video · 24 min'),   plays: '12.4k' },
    { kind: 'podcast', title: t('Cómo leer un balance', 'How to read a balance sheet'), meta: t('Podcast · Ep. 47 · 48 min', 'Podcast · Ep. 47 · 48 min'), plays: '8.9k' },
    { kind: 'video',   title: t('Marketing sin presupuesto', 'Marketing on no budget'),   meta: t('Video · 18 min', 'Video · 18 min'),   plays: '6.1k' },
  ];
  return (
    <>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
          {t('● Biblioteca de contenido · en vivo', '● Content library · live')}
        </div>
        <div style={{ background: 'rgba(0,255,204,0.06)', border: '1px solid rgba(0,255,204,0.30)', padding: '4px 10px', borderRadius: 4 }}>
          <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Suscriptores', 'Subscribers')}</div>
          <div style={{ fontFamily: 'var(--tcc-font-display)', fontWeight: 700, fontSize: 16, color: 'var(--tcc-primary)' }}>5,840</div>
        </div>
      </div>

      {/* Featured player */}
      <div style={{ position: 'relative', borderRadius: 8, overflow: 'hidden', background: 'linear-gradient(135deg, rgba(0,255,204,0.18), rgba(0,255,204,0.04))', border: '1px solid rgba(0,255,204,0.25)', height: 96, display: 'flex', alignItems: 'center', padding: '0 18px', gap: 16 }}>
        <span style={{ flexShrink: 0, width: 44, height: 44, borderRadius: '50%', background: 'var(--tcc-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#06140f', fontSize: 16 }}>▶</span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 9, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Destacado esta semana', 'Featured this week')}</div>
          <div style={{ fontFamily: 'var(--tcc-font-display)', fontWeight: 700, fontSize: 17, color: 'var(--tcc-on-surface)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t('Masterclass: precios que venden', 'Masterclass: pricing that sells')}</div>
          <div style={{ marginTop: 8, height: 3, background: 'rgba(255,255,255,0.12)', borderRadius: 9999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '42%', background: 'var(--tcc-primary)', boxShadow: '0 0 8px var(--tcc-primary)' }} />
          </div>
        </div>
      </div>

      <div className="mock-grid">
        <div className="mock-stat"><div className="lbl">{t('Episodios', 'Episodes')}</div><div className="v" style={{ fontSize: 18 }}>128</div></div>
        <div className="mock-stat"><div className="lbl">{t('Reproducciones', 'Total plays')}</div><div className="v" style={{ fontSize: 18, color: 'var(--tcc-primary)' }}>94.2k</div></div>
        <div className="mock-stat"><div className="lbl">{t('Retención prom.', 'Avg. retention')}</div><div className="v" style={{ fontSize: 18 }}>68<span style={{ fontSize: 13, color: 'var(--tcc-on-surface-variant)' }}>%</span></div></div>
        <div className="mock-stat"><div className="lbl">{t('Series', 'Series')}</div><div className="v" style={{ fontSize: 18 }}>9</div></div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {episodes.map((e, i) => (
          <div key={i} className="mock-row">
            <span className="dot" style={{ background: e.kind === 'video' ? 'var(--tcc-primary)' : '#facc15', borderRadius: 2 }} />
            <span style={{ color: 'var(--tcc-on-surface)' }}>{e.kind === 'video' ? '▶' : '🎙'} {e.title}</span>
            <span style={{ flex: 1, textAlign: 'right', color: 'var(--tcc-on-surface-dim)', fontSize: 10, paddingRight: 10 }}>{e.meta}</span>
            <span className="v">{e.plays}</span>
          </div>
        ))}
      </div>

      <div className="mock-footer">
        <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
          {t('Nuevo episodio publicado · hace 6 min', 'New episode published · 6 min ago')}
        </div>
      </div>
    </>
  );
}

function ExpertsGoldMock() {
  const { t } = useLang();
  return (
    <>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
          {t('● Business Intelligence · este año', '● Business intelligence · this year')}
        </div>
        <div style={{ background: 'rgba(0,255,204,0.06)', border: '1px solid rgba(0,255,204,0.30)', padding: '4px 10px', borderRadius: 4 }}>
          <div style={{ fontSize: 8, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase' }}>{t('Oro 18K live', '18K gold live')}</div>
          <div style={{ fontFamily: 'var(--tcc-font-display)', fontWeight: 700, fontSize: 16, color: 'var(--tcc-primary)' }}>98.82<span style={{ fontSize: 9, color: 'var(--tcc-on-surface)', marginLeft: 2 }}>€/g</span></div>
        </div>
      </div>
      <div className="mock-grid">
        <div className="mock-stat"><div className="lbl">{t('Ventas año', 'Sales YTD')}</div><div className="v" style={{ fontSize: 18 }}>110.365<span style={{ fontSize: 12, color: 'var(--tcc-on-surface-variant)', marginLeft: 4 }}>€</span></div></div>
        <div className="mock-stat"><div className="lbl">{t('Beneficio neto', 'Net profit')}</div><div className="v" style={{ fontSize: 18, color: 'var(--tcc-primary)' }}>0<span style={{ fontSize: 12, color: 'var(--tcc-on-surface-variant)', marginLeft: 4 }}>€</span></div></div>
        <div className="mock-stat"><div className="lbl">{t('Transacciones', 'Transactions')}</div><div className="v" style={{ fontSize: 18 }}>85</div></div>
        <div className="mock-stat"><div className="lbl">{t('Margen prom.', 'Avg. margin')}</div><div className="v" style={{ fontSize: 18 }}>0.0<span style={{ fontSize: 12, color: 'var(--tcc-on-surface-variant)' }}>%</span></div></div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="mock-row"><span className="dot" style={{ background: 'var(--tcc-primary)' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Joyería de oro · 64% catálogo', 'Gold jewelry · 64% of catalog')}</span><span className="v">1,247 u</span></div>
        <div className="mock-row"><span className="dot" style={{ background: '#facc15' }} /><span style={{ color: 'var(--tcc-on-surface)' }}>{t('Monedas · 22% catálogo', 'Coins · 22% of catalog')}</span><span className="v">428 u</span></div>
        <div className="mock-row"><span className="dot" style={{ background: '#94a3b8' }} /><span style={{ color: 'var(--tcc-on-surface-variant)' }}>{t('Plata · 14% catálogo', 'Silver · 14% of catalog')}</span><span className="v">271 u</span></div>
      </div>
      <div className="mock-footer">
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          {[24, 38, 51, 70, 85, 100].map((h, i) => (
            <div key={i} style={{ flex: 1, height: `${h * 0.4}px`, background: 'var(--tcc-primary)', opacity: 0.3 + (h / 100) * 0.7, borderRadius: 2 }} />
          ))}
        </div>
        <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
          {t('Rendimiento mensual · ascendente', 'Monthly performance · trending up')}
        </div>
      </div>
    </>
  );
}

/* ───────────────────────────────────────────────────  AI Agents */
function AiAgentsSection() {
  return (
    <section id="agentes" className="section">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 880 }}>
          <Eyebrow>· Agentes de AI · en producción</Eyebrow>
          <h2 style={{ marginTop: 18, fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2rem, 5vw, 4.25rem)', fontWeight: 300, lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--tcc-on-surface)' }}>
            <MaskLine delay={0}><span style={{ fontWeight: 300 }}>Agentes que</span></MaskLine>
            <MaskLine delay={180}><span style={{ fontWeight: 700 }}>deciden y actúan</span></MaskLine>
            <MaskLine delay={360}><span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>por tu negocio.</span></MaskLine>
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>
            No solo analítica. Sistemas inteligentes que evalúan, recomiendan y ejecutan flujos completos en tiempo real — integrados a tu ERP.
          </p>
        </div>

        <Reveal>
          <div className="agents-grid">
            {/* Agent 1 — Dermimed */}
            <div className="agent-card">
              <div className="agent-tag">Caso · Dermimed</div>
              <div className="agent-head">
                <div className="icon-chip"><div style={{ width: 26, height: 26 }}><Icon.Mail /></div></div>
                <div className="agent-name">Agente de Cotizaciones</div>
              </div>
              <p className="agent-desc">
                Captura cotizaciones de proveeduría directo del email, las analiza automáticamente — costos, tiempos, calidad — y dispara el flujo de compra hacia el ERP sin intervención humana.
              </p>
              <div className="agent-trace">
                <div className="row"><span className="ts">14:02</span><span className="cyan">→</span><span className="white">3 cotizaciones nuevas detectadas</span></div>
                <div className="row"><span className="ts">14:02</span><span className="cyan">·</span><span className="dim">Mediderma · 1,247€ · 5d entrega</span></div>
                <div className="row"><span className="ts">14:02</span><span className="cyan">·</span><span className="dim">FarmaPro · 1,180€ · 9d entrega</span></div>
                <div className="row"><span className="ts">14:02</span><span className="cyan">·</span><span className="dim">VitaQ · 1,310€ · 3d entrega</span></div>
                <div className="row"><span className="ts">14:03</span><span className="cyan">↳</span><span className="white">Recomendación: VitaQ (urgencia · stock&lt;14d)</span></div>
                <div className="row"><span className="ts">14:03</span><span className="cyan">✓</span><span style={{ color: 'var(--tcc-primary)' }}>Orden enviada al ERP · #PO-3847</span></div>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 4, flexWrap: 'wrap' }}>
                <span className="tag">Email parsing</span>
                <span className="tag">RAG comparativo</span>
                <span className="tag">ERP API</span>
              </div>
            </div>

            {/* Agent 2 — Experts Gold */}
            <div className="agent-card">
              <div className="agent-tag">Caso · Experts Gold</div>
              <div className="agent-head">
                <div className="icon-chip"><div style={{ width: 26, height: 26 }}><Icon.TrendingUp /></div></div>
                <div className="agent-name">Agente de Cotización Oro</div>
              </div>
              <p className="agent-desc">
                Rastrea el precio del oro 18K en tiempo real, ajusta los precios del inventario al instante, da recomendaciones de compra/venta y explica el contexto del mercado al usuario.
              </p>
              <div className="agent-trace">
                <div className="row"><span className="ts">09:14</span><span className="cyan">▲</span><span className="white">Oro 18K · 98.65 → 99.12 €/g <span className="dim">(+0.48%)</span></span></div>
                <div className="row"><span className="ts">09:14</span><span className="cyan">↻</span><span className="dim">Re-cotizando 1,247 SKUs en stock…</span></div>
                <div className="row"><span className="ts">09:15</span><span className="cyan">✓</span><span className="white">Catálogo actualizado · margen preservado</span></div>
                <div className="row"><span className="ts">09:16</span><span className="cyan">⚐</span><span className="dim">Recomendación: subir collares 1.2%</span></div>
                <div className="row"><span className="ts">09:16</span><span className="cyan">i</span><span className="dim">Causa: tensión geopolítica + USD/EUR</span></div>
                <div className="row"><span className="ts">09:18</span><span className="cyan">●</span><span style={{ color: 'var(--tcc-primary)' }}>Próxima evaluación · 09:25 (5 min)</span></div>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 4, flexWrap: 'wrap' }}>
                <span className="tag">Precio en vivo</span>
                <span className="tag">Re-pricing engine</span>
                <span className="tag">Context LLM</span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────  Dermimed case study (LEGACY) */
function DermimedCase() {
  const wins = [
    'Visualización de inventario en tiempo real — saben qué tienen y dónde.',
    'Control de transacciones limpio y trazable.',
    'Assessment de proveedores — comparan costos, tiempos y calidad para negociar mejor.',
    'Análisis de costos que revela márgenes reales por servicio.',
    'Alertas automáticas de productos próximos a vencer y quiebres de stock — antes de que sea problema.',
  ];
  return (
    <section id="casos" className="section bg-low">
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <Eyebrow>· Así trabajamos</Eyebrow>
          <h2 style={{ marginTop: 18, fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2rem, 5vw, 4.25rem)', fontWeight: 300, lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--tcc-on-surface)', maxWidth: '20ch' }}>
            <MaskLine delay={0}><span style={{ fontWeight: 300 }}>Un caso real,</span></MaskLine>
            <MaskLine delay={180}><span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>contado sin adornos.</span></MaskLine>
          </h2>
        </div>

        <Reveal>
          <article className="case-card">
            <div>
              <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 10, color: 'var(--tcc-primary)', letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 18 }}>
                Dermimed · Guadalajara, MX
              </div>
              <h3 style={{ fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(1.75rem, 3vw, 2.5rem)', fontWeight: 700, color: 'var(--tcc-on-surface)', letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 24 }}>
                Clínica de belleza con inventario invisible <span className="accent-italic" style={{ color: 'var(--tcc-primary)', fontWeight: 300 }}>— ahora con datos.</span>
              </h3>
              <p style={{ fontFamily: 'var(--tcc-font-body)', fontWeight: 300, fontSize: 16, color: 'var(--tcc-on-surface-variant)', lineHeight: 1.65, marginBottom: 24 }}>
                Dermimed manejaba su inventario de productos médicos y cosméticos entre hojas de cálculo y memoria del equipo. El riesgo: medicamentos vencidos sin detectar, quiebres de stock que cancelaban citas, y cero visibilidad sobre qué proveedores realmente convenían.
              </p>
              <div style={{ fontFamily: 'var(--tcc-font-mono)', fontSize: 11, color: 'var(--tcc-primary)', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 14 }}>
                Lo que construimos juntos:
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {wins.map((w) => (
                  <li key={w} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: 'var(--tcc-font-body)', fontSize: 14, color: 'var(--tcc-on-surface-variant)', lineHeight: 1.55, fontWeight: 300 }}>
                    <span style={{ width: 18, height: 18, color: 'var(--tcc-primary)', flexShrink: 0, marginTop: 2 }}><Icon.CheckCircle2 /></span>
                    <span>{w}</span>
                  </li>
                ))}
              </ul>
              <p className="case-quote">
                "Ahora su equipo toma decisiones con datos, no con intuición. Y ningún medicamento vuelve a vencer en el estante sin que alguien lo sepa."
              </p>
            </div>

            {/* Stylized ERP dashboard mockup — symmetric, rhythmic. */}
            <div className="case-mockup">
              <div className="mock-bar">
                <span style={{ background: 'rgba(239,68,68,0.5)' }} />
                <span style={{ background: 'rgba(250,204,21,0.5)' }} />
                <span style={{ background: 'rgba(34,197,94,0.5)' }} />
                <span style={{ marginLeft: 8, color: 'var(--tcc-on-surface-dim)', opacity: 0.6, fontSize: 11 }}>dermimed_erp.app</span>
              </div>

              <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
                ● Panel de inventario · live
              </div>

              <div className="mock-grid">
                <div className="mock-stat">
                  <div className="lbl">SKUs activos</div>
                  <div className="v">1,247</div>
                </div>
                <div className="mock-stat">
                  <div className="lbl">Alertas hoy</div>
                  <div className="v" style={{ color: 'var(--tcc-primary)' }}>3</div>
                </div>
                <div className="mock-stat">
                  <div className="lbl">Proveedor top</div>
                  <div className="v" style={{ fontSize: 18 }}>96<span style={{ fontSize: 13, color: 'var(--tcc-on-surface-variant)' }}>%</span></div>
                </div>
                <div className="mock-stat">
                  <div className="lbl">Margen real</div>
                  <div className="v" style={{ fontSize: 18 }}>42<span style={{ fontSize: 13, color: 'var(--tcc-on-surface-variant)' }}>%</span></div>
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div className="mock-row">
                  <span className="dot" style={{ background: '#f87171' }} />
                  <span style={{ color: 'var(--tcc-on-surface)' }}>STOCK BAJO · Botox 100u</span>
                  <span className="v">4 u</span>
                </div>
                <div className="mock-row">
                  <span className="dot" style={{ background: '#facc15' }} />
                  <span style={{ color: 'var(--tcc-on-surface)' }}>VENCE EN 14d · Hyalu-Filler</span>
                  <span className="v">11 u</span>
                </div>
                <div className="mock-row">
                  <span className="dot" style={{ background: 'var(--tcc-primary)' }} />
                  <span style={{ color: 'var(--tcc-on-surface-variant)' }}>OK · Crema regenerativa</span>
                  <span className="v">87 u</span>
                </div>
              </div>

              <div className="mock-footer">
                <div style={{ height: 3, background: 'rgba(0,255,204,0.15)', borderRadius: 9999, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: '78%', background: 'var(--tcc-primary)', boxShadow: '0 0 8px var(--tcc-primary)' }} />
                </div>
                <div style={{ color: 'var(--tcc-primary)', fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', fontWeight: 700 }}>
                  Sincronizado · hace 2 min
                </div>
              </div>
            </div>
          </article>
        </Reveal>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────  FAQ accordion */
function FAQ() {
  const { t } = useLang();
  // Multi-open: each item toggles independently. Default: all closed.
  const [open, setOpen] = useState(() => new Set());
  const toggle = (i) => {
    setOpen(prev => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i);
      else next.add(i);
      return next;
    });
  };
  const items = [
    { q: t('¿Esto sirve para una empresa de mi tamaño?', 'Is this a fit for a company my size?'),
      a: t('Especialmente. Las empresas de 2 a 25 personas son las que más se benefician porque cada mejora se siente de inmediato. No necesitas ser una corporación para tener orden en tus datos. De hecho, entre más pronto empieces, más fácil es — porque tienes menos deuda tecnológica que arreglar.', 'Especially. Companies of 2 to 25 people benefit the most, because every improvement is felt right away. You don’t need to be a corporation to get your data in order. In fact, the sooner you start, the easier it is — because you have less tech debt to fix.') },
    { q: t('¿Mi equipo necesita saber de tecnología?', 'Does my team need to be tech-savvy?'),
      a: t('No. Nuestras soluciones están diseñadas para que las use cualquier persona de tu equipo — desde la recepcionista hasta el gerente. Si saben usar WhatsApp, pueden usar lo que construimos. Nosotros nos encargamos de la parte técnica; tu equipo solo ve pantallas simples con la información que necesitan.', 'No. Our tools are built so anyone on your team can use them — from the front desk to the manager. If they can use WhatsApp, they can use what we build. We handle the technical part; your team just sees simple screens with the info they need.') },
    { q: t('¿Me van a dejar amarrado a su sistema?', 'Will I get locked into your system?'),
      a: t('Nunca. Todo lo que construimos es tuyo. Usamos herramientas accesibles y abiertas, te documentamos todo, y capacitamos a tu equipo para que lo pueda operar sin nosotros. Si mañana decides continuar solo o con alguien más, puedes hacerlo sin perder nada.', 'Never. Everything we build is yours. We use open, accessible tools, document everything, and train your team to run it without us. If you decide to continue on your own or with someone else tomorrow, you can — without losing a thing.') },
    { q: t('¿Cuánto tiempo tarda en verse resultados?', 'How long until I see results?'),
      a: t('El primer diagnóstico te da claridad en 1–2 semanas. Los primeros resultados visibles — un dashboard, un proceso automatizado, una alerta funcionando — suelen estar listos en 4 a 8 semanas. No prometemos magia de la noche a la mañana, pero sí avances constantes que puedes ver y medir.', 'The first diagnosis gives you clarity in 1–2 weeks. The first visible results — a dashboard, an automated process, a working alert — are usually ready in 4 to 8 weeks. We don’t promise overnight magic, but we do promise steady progress you can see and measure.') },
    { q: t('¿Y si ya intenté algo parecido y no funcionó?', 'What if I already tried something like this and it didn’t work?'),
      a: t('Es más común de lo que crees. Muchas empresas han invertido en software que nadie usa, o en consultores que entregaron un PowerPoint y desaparecieron. Nosotros trabajamos diferente: empezamos por entender tu operación real (no la ideal), construimos paso a paso, y no avanzamos al siguiente módulo hasta que el anterior funcione y tu equipo lo domine.', 'It’s more common than you’d think. Plenty of companies have paid for software nobody uses, or consultants who handed over a slide deck and vanished. We work differently: we start by understanding how your business actually runs (not the ideal version), we build step by step, and we don’t move to the next module until the last one works and your team owns it.') },
    { q: t('¿Cuánto cuesta?', 'How much does it cost?'),
      a: t('Depende del alcance, pero somos transparentes desde el inicio. Antes de cualquier compromiso, te damos un diagnóstico gratuito donde definimos qué necesitas, qué no necesitas, y cuánto costaría. No hay letra chica ni costos sorpresa. Y siempre priorizamos las opciones más rentables — porque entendemos que cada peso cuenta.', 'It depends on scope, but we’re upfront from the start. Before any commitment, we give you a free diagnosis where we define what you need, what you don’t, and what it would cost. No fine print, no surprise charges. And we always prioritize the most cost-effective options — because we know every dollar counts.') },
  ];
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 960 }}>
        <div style={{ marginBottom: 48, textAlign: 'left' }}>
          <Eyebrow>{t('· Preguntas frecuentes', '· Frequently asked')}</Eyebrow>
          <h2 style={{ marginTop: 18, fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2rem, 5vw, 4.25rem)', fontWeight: 300, lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--tcc-on-surface)' }}>
            <MaskLine delay={0}><span style={{ fontWeight: 300 }}>{t('Preguntas que', 'Questions we')}</span></MaskLine>
            <MaskLine delay={180}><span style={{ fontWeight: 700 }}>{t('siempre nos hacen.', 'always get asked.')}</span></MaskLine>
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>{t('Y las respuestas honestas que damos.', 'And the honest answers we give.')}</p>
        </div>

        <div>
          {items.map((it, i) => (
            <Reveal key={it.q} delay={i * 60}>
              <div className={`faq-item${open.has(i) ? ' open' : ''}`}>
                <button className="faq-trigger" onClick={() => toggle(i)} aria-expanded={open.has(i)}>
                  <span>{it.q}</span>
                  <span className="faq-icon">{open.has(i) ? <Icon.Minus /> : <Icon.Plus />}</span>
                </button>
                <div className="faq-content">
                  <p>{it.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────  Contact form
 * Reframed: instead of an email submission, build a WhatsApp message from
 * the user's input and open wa.me on submit. Keep the UI but the action
 * dispatches the prospect straight to a chat with us.
 */
const WHATSAPP_NUMBER = '31628395625'; // NL international format, no + or spaces
const WHATSAPP_MESSAGE_ES = 'Hola, quiero recibir más información sobre los servicios de "The Conscious Code" para mi organización. Mi nombre es... ';
const WHATSAPP_MESSAGE_EN = 'Hi, I’d like to learn more about "The Conscious Code" services for my organization. My name is... ';

function ContactForm() {
  const { t } = useLang();
  const message = t(WHATSAPP_MESSAGE_ES, WHATSAPP_MESSAGE_EN);
  const waUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`;

  return (
    <section id="contacto" className="section bg-low">
      <div className="container" style={{ maxWidth: 1100 }}>
        <div style={{ marginBottom: 56, maxWidth: 880 }}>
          <Eyebrow>{t('· Contacto directo · vía WhatsApp', '· Direct contact · via WhatsApp')}</Eyebrow>
          <h2 style={{ marginTop: 18, fontFamily: 'var(--tcc-font-display)', fontSize: 'clamp(2.25rem, 5.5vw, 4.75rem)', fontWeight: 300, lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--tcc-on-surface)' }}>
            <MaskLine delay={0}><span style={{ fontWeight: 300 }}>{t('Cuéntanos tu', 'Tell us your')}</span></MaskLine>
            <MaskLine delay={180}><span className="accent-italic" style={{ color: 'var(--tcc-primary)' }}>{t('dolor de cabeza.', 'biggest headache.')}</span></MaskLine>
          </h2>
          <p className="lead" style={{ marginTop: 18, maxWidth: 640 }}>
            {t('Sin formularios, sin demoras. Tocá el botón y empezamos a hablar — ', 'No forms, no delays. Tap the button and we start talking — ')}<em style={{ fontStyle: 'italic', color: 'var(--tcc-on-surface)' }}>{t('sin costo, sin compromiso, sin rollo técnico.', 'no cost, no commitment, no tech jargon.')}</em>
          </p>
        </div>

        <Reveal>
          <a
            href={waUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="whatsapp-cta"
            aria-label={t('Contactar por WhatsApp', 'Contact via WhatsApp')}
          >
            <span className="whatsapp-cta-icon">
              <Icon.Whatsapp />
            </span>
            <span className="whatsapp-cta-body">
              <span className="whatsapp-cta-tag">{t('Escríbenos · WhatsApp', 'Message us · WhatsApp')}</span>
              <span className="whatsapp-cta-num">{t('Iniciar conversación', 'Start a conversation')}</span>
              <span className="whatsapp-cta-sub">{t('Respondemos en menos de 48 horas.', 'We reply in under 48 hours.')}</span>
            </span>
            <span className="whatsapp-cta-arrow">
              <Icon.ChevronRight />
            </span>
          </a>
        </Reveal>

        <Reveal delay={150}>
          <div style={{ marginTop: 32, display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center', fontFamily: 'var(--tcc-font-mono)', fontSize: 13 }}>
            <span style={{ color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.2em', textTransform: 'uppercase', fontSize: 11 }}>
              {t('¿Prefieres email?', 'Prefer email?')}
            </span>
            <a href="mailto:eduardo@the-conscious-code.com" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--tcc-on-surface)', textDecoration: 'none' }}>
              <span style={{ width: 16, height: 16, color: 'var(--tcc-primary)' }}><Icon.Mail /></span>
              eduardo@the-conscious-code.com
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ───────────────────────────────────────────────────  New Footer */
function FooterNew() {
  const { t } = useLang();
  const links = [
    { label: t('Inicio', 'Home'),       href: '#home' },
    { label: t('Nosotros', 'About'),    href: '#nosotros' },
    { label: t('Servicios', 'Services'),href: '#servicios' },
    { label: t('Casos', 'Work'),        href: '#casos' },
    { label: t('Contacto', 'Contact'),  href: '#contacto' },
  ];
  return (
    <footer style={{ background: 'rgba(24,32,43,0.8)', backdropFilter: 'blur(12px)', borderTop: '1px solid var(--tcc-outline-variant)', padding: '56px 0 40px', position: 'relative', zIndex: 4 }}>
      <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 380 }}>
            <Logo />
            <p style={{ marginTop: 18, fontFamily: 'var(--tcc-font-body)', fontWeight: 300, fontSize: 14, color: 'var(--tcc-on-surface-variant)', lineHeight: 1.6, fontStyle: 'italic' }}>
              {t('Tecnología con propósito, simplicidad absoluta, consciencia de negocio.', 'Technology with a purpose, dead-simple to use, built around your business.')}
            </p>
          </div>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            {links.map((l) => (
              <a key={l.label} href={l.href} style={{ fontFamily: 'var(--tcc-font-body)', fontSize: 11, color: 'var(--tcc-on-surface-variant)', letterSpacing: '0.15em', textTransform: 'uppercase', textDecoration: 'none' }}>{l.label}</a>
            ))}
            <a href="#privacidad" style={{ fontFamily: 'var(--tcc-font-body)', fontSize: 11, color: 'var(--tcc-on-surface-dim)', letterSpacing: '0.15em', textTransform: 'uppercase', textDecoration: 'none' }}>{t('Aviso de Privacidad', 'Privacy Notice')}</a>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid var(--tcc-outline-variant)', flexWrap: 'wrap', gap: 16 }}>
          <p style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--tcc-on-surface-dim)' }}>
            © {new Date().getFullYear()} The Conscious Code. {t('Todos los derechos reservados.', 'All rights reserved.')}
          </p>
          <p style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--tcc-on-surface-dim)' }}>
            {t('HQ · Países Bajos · Operaciones en México & LATAM', 'HQ · Netherlands · Operations in Mexico & LATAM')}
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { RoiCalculator, DermimedCase, CasesCarousel, AiAgentsSection, FAQ, ContactForm, FooterNew });