// Sections — 11 blocks per the ROARK brief

// 001 HERO
function Hero() {
  return (
    <section id="hero" className="section hero" style={{ opacity: "1" }}>
      <div className="section__rail"><span className="section__refno">001 / HERO</span></div>
      <div className="section__inner hero__grid">
        <div>
          <h1>
            La mayoría te vende IA.<br />
            Nosotros <em>construimos</em> <span className="accent">la tuya.</span>
          </h1>
          <p className="hero__sub">
            Sistemas que le ahorran de 15 a 30 horas semanales a tu equipo.
            Construidos a tu medida. Funcionando en 14 días.
          </p>
          <div className="hero__ctas">
            <a href="#cta" className="btn-primary">Platiquemos <span>→</span></a>
          </div>
        </div>
        <div className="hero__atom"><HeroAtom /></div>
      </div>
      <ScrollHint />
    </section>);

}

// 002 TRUSTBAR
function Trustbar() {
  const items = [
  { v: "14 días", l: "AL PRIMER FLUJO CORRIENDO", s: "De firma a sistema en producción" },
  { v: "0 slides", l: "TODO CON TUS DATOS REALES", s: "Sistema real con tus datos, no presentaciones" },
  { v: "Sin tocar", l: "LO QUE YA USAS", s: "Tu stack actual sigue donde está" }];

  return (
    <section className="trustbar" id="trustbar">
      <div className="trustbar__inner">
        {items.map((it, i) =>
        <div key={i} className="trust-item">
            <span className="mono-label">{`0${i + 1} · ${it.l}`}</span>
            <span className="val">{it.v}</span>
            <span className="sub">{it.s}</span>
          </div>
        )}
      </div>
    </section>);

}

// 003 POR QUÉ
function PorQue() {
  return (
    <Section id="por-que" refno="003 / POR QUÉ SOMOS DISTINTOS">
      <Label>003 · POR QUÉ SOMOS DISTINTOS</Label>
      <div className="porque__grid">
        <p className="porque__quote">
          La mayoría de agencias te vende una demo bonita. Nosotros nos sentamos con tu equipo antes de escribir código.
        </p>
        <div className="porque__body">
          <p>
            Mapeamos tu operación real, encontramos los cuellos de botella que te cuestan más caro,
            y construimos exactamente lo que necesitas. Nada más, nada menos. Cada sistema que entregamos
            existe porque hay una razón operativa detrás. No hay dos iguales, porque no hay dos empresas iguales.
          </p>
        </div>
      </div>
    </Section>);

}

// 004 FILTRO
function Filtro() {
  const si = [
  "Tienes procesos que funcionan, pero que se traban con frecuencia.",
  "Tu operación depende de hojas de cálculo, mensajes sueltos y el conocimiento de pocas personas.",
  "Ya intentaste resolverlo, pero la única salida parecía contratar más personal o esperar meses.",
  "Tu empresa tiene entre 5 y 80 colaboradores."];

  return (
    <Section id="filtro" refno="002 / FILTRO">
      <Label>002 · ¿ES PARA TI?</Label>
      <div className="filtro__head">
        <h2>Antes de todo: <span className="hl">¿es para ti?</span></h2>
        <p>Si te identificas con esto, vale la pena que conversemos.</p>
      </div>
      <div className="filtro__cols filtro__cols--solo">
        <div className="filtro__col filtro__col--si">
          <div className="filtro__col-head"><span className="badge">SÍ</span><span>Esto es para ti si…</span></div>
          <ul>
            {si.map((t, i) => <li key={i} data-n={`0${i + 1}`}>{t}</li>)}
          </ul>
        </div>
      </div>
    </Section>);

}

// 005 VERTICALES — Capa 1
const VERTS = [
{
  id: "V·01", ind: "DESPACHOS JURÍDICOS",
  lead: "Operación legal que corre sola.",
  body: "Expedientes organizados con IA en un dashboard. El cliente consulta el estatus en su portal sin llamar. Un detector marca irregularidades antes de que escalen.",
  diag: LiveJuridico,
  tl: "V·01 · DESPACHO·OPERANDO", br: "LFPDPPP · LIVE"
},
{
  id: "V·02", ind: "CLÍNICAS DE FISIOTERAPIA",
  lead: "El expediente clínico se escribe solo.",
  body: "El fisioterapeuta graba la sesión. La IA la estructura en SOAP compliant NOM-004 en segundos. WhatsApp agenda, recuerda y reagenda sin intervención.",
  diag: LiveFisio,
  tl: "V·02 · SESIÓN·EN·VIVO", br: "NOM-004 · REC"
},
{
  id: "V·03", ind: "DESPACHOS CONTABLES",
  lead: "Cumplimiento fiscal sin fricción.",
  body: "Los CFDIs entran por correo y se extraen solos. El validador marca inconsistencias antes del 17. La cobranza se mueve en 4 niveles hasta que pagan.",
  diag: LiveContable,
  tl: "V·03 · INBOX·CFDI·LIVE", br: "SAT·CFDI·4.0"
}];


function Verticales() {
  const carRef = React.useRef(null);

  React.useEffect(() => {
    const car = carRef.current;
    if (!car) return;
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let autoTimer = null;
    let idleTimer = null;
    let isInteracting = false;
    let dragState = null;
    const CARD_W = car.clientWidth < 760 ? 300 : 368; // card + gap
    const IDLE_RESUME_MS = 3500;

    const startAuto = () => {
      if (reduceMotion || isInteracting) return;
      stopAuto();
      autoTimer = setInterval(() => {
        if (!car) return;
        const max = car.scrollWidth - car.clientWidth;
        if (car.scrollLeft >= max - 4) {
          car.scrollTo({ left: 0, behavior: 'smooth' });
        } else {
          car.scrollBy({ left: CARD_W, behavior: 'smooth' });
        }
      }, 3800);
    };
    const stopAuto = () => { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } };
    const noteInteraction = () => {
      isInteracting = true;
      stopAuto();
      if (idleTimer) clearTimeout(idleTimer);
      idleTimer = setTimeout(() => { isInteracting = false; startAuto(); }, IDLE_RESUME_MS);
    };

    // Pointer drag (desktop)
    const onPointerDown = (e) => {
      if (e.pointerType === 'mouse' && e.button !== 0) return;
      dragState = { startX: e.clientX, startScroll: car.scrollLeft, moved: false };
      car.classList.add('is-dragging');
      noteInteraction();
    };
    const onPointerMove = (e) => {
      if (!dragState) return;
      const dx = e.clientX - dragState.startX;
      if (Math.abs(dx) > 4) dragState.moved = true;
      car.scrollLeft = dragState.startScroll - dx;
    };
    const onPointerUp = () => {
      if (!dragState) return;
      car.classList.remove('is-dragging');
      dragState = null;
    };

    // Touch: native scroll handles it, just note interaction
    const onScroll = () => noteInteraction();
    const onTouchStart = () => noteInteraction();
    const onWheel = (e) => {
      // Only intercept horizontal wheel (trackpad pan-x)
      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) noteInteraction();
    };
    const onMouseEnter = () => { stopAuto(); };
    const onMouseLeave = () => { if (!isInteracting) startAuto(); };

    car.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);
    car.addEventListener('touchstart', onTouchStart, { passive: true });
    car.addEventListener('scroll', onScroll, { passive: true });
    car.addEventListener('wheel', onWheel, { passive: true });
    car.addEventListener('mouseenter', onMouseEnter);
    car.addEventListener('mouseleave', onMouseLeave);

    startAuto();

    return () => {
      stopAuto();
      if (idleTimer) clearTimeout(idleTimer);
      car.removeEventListener('pointerdown', onPointerDown);
      window.removeEventListener('pointermove', onPointerMove);
      window.removeEventListener('pointerup', onPointerUp);
      car.removeEventListener('touchstart', onTouchStart);
      car.removeEventListener('scroll', onScroll);
      car.removeEventListener('wheel', onWheel);
      car.removeEventListener('mouseenter', onMouseEnter);
      car.removeEventListener('mouseleave', onMouseLeave);
    };
  }, []);

  // Prevent click on cards that comes right after a drag
  const onCardClick = (e) => {
    if (carRef.current && carRef.current.classList.contains('was-dragged')) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  return (
    <Section id="industrias-legacy" refno="005 / INDUSTRIAS · EN PRODUCCIÓN">
      <Label>005 · INDUSTRIAS · PRODUCTO EN PRODUCCIÓN</Label>
      <div className="verticales__intro">
        <h2>Industrias distintas. <span className="hl">El mismo método funciona.</span></h2>
        <p>Si funciona para operaciones tan diferentes entre sí, ya tienes respuesta sobre si funciona para la tuya.</p>
      </div>
      <div className="vert-carousel" ref={carRef} role="region" aria-label="Industrias en producción — desliza para ver más" tabIndex={0}>
        <div className="vert-carousel__track">
          {[...VERTS, ...VERTS].map((v, idx) => {
            const Diag = v.diag;
            return (
              <article className="vert-card" key={`${v.id}-${idx}`} onClick={onCardClick}>
                <header className="vert-card__head">
                  <span className="vert-card__id">{v.id}</span>
                  <span className="vert-card__tag">{v.ind}</span>
                </header>
                <h3 className="vert-card__lead">{v.lead}</h3>
                <p className="vert-card__body">{v.body}</p>
              </article>);

          })}
        </div>
      </div>
      <p className="vert-carousel__hint">Desliza para ver más →</p>
    </Section>);

}

// 005·BIS BENEFICIOS — reemplaza a Verticales en el render (Buca 2026-05-28)
const BENEFICIOS = [
  {
    id: "B·01",
    k: "TIEMPO RECUPERADO",
    t: "15 a 30 horas por semana, devueltas a tu equipo.",
    b: "Las tareas que tu equipo repetía cada semana ahora las realiza el sistema, y tu equipo vuelve a concentrarse en lo que aporta valor."
  },
  {
    id: "B·02",
    k: "CERO ERROR HUMANO",
    t: "El sistema no olvida. No se distrae. No se cansa.",
    b: "Los procesos críticos dejan de depender de una persona y se ejecutan de forma automática."
  },
  {
    id: "B·03",
    k: "ATENCIÓN 24/7",
    t: "El cliente recibe respuesta 24/7.",
    b: "Las citas se agendan y las dudas se resuelven en el momento, sin depender del horario de oficina."
  },
  {
    id: "B·04",
    k: "REPORTES Y ALERTAS EN VIVO",
    t: "Cada mes, tu reporte ya está hecho.",
    b: "Cuando algo se desvía, el sistema te avisa al instante. Decides con datos, no con intuición."
  }
];

function Beneficios() {
  return (
    <Section id="industrias" refno="004 / LO QUE RECIBES">
      <Label>004 · LO QUE RECIBES</Label>
      <div className="bene__head">
        <h2>Lo que recibes. <span className="hl">Tu tiempo de vuelta y tu operación bajo control.</span></h2>
      </div>
      <div className="bene__grid">
        {BENEFICIOS.map((it) => (
          <article className="bene__card" key={it.id}>
            <header className="bene__card-head">
              <span className="bene__card-id">{it.id}</span>
              <span className="bene__card-k">{it.k}</span>
            </header>
            <h3 className="bene__card-t">{it.t}</h3>
            <p className="bene__card-b">{it.b}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

// 004·BIS UN SOLO ECOSISTEMA — todo conectado, a tu medida (Buca 2026-06-14)
const ECOSISTEMA = [
  { id: "E·01", k: "DASHBOARD", t: "Un panel que ve toda tu operación.", b: "Tus indicadores reales, en vivo, en un solo lugar." },
  { id: "E·02", k: "WHATSAPP", t: "Atención con el contexto de tu negocio.", b: "Agenda, responde y da seguimiento con tus datos reales." },
  { id: "E·03", k: "LLAMADAS", t: "Una voz que atiende y agenda por teléfono.", b: "Entiende, resuelve y registra todo en tu sistema." },
  { id: "E·04", k: "INTEGRACIONES", t: "Conectado a tus herramientas, no encima.", b: "Enlazado a tu CRM y facturación. Sin capturar dos veces." },
  { id: "E·05", k: "UN SOLO CEREBRO", t: "No cinco sistemas que no se hablan.", b: "Lo de WhatsApp aparece en tu dashboard y tu reporte." },
  { id: "E·06", k: "A TU MEDIDA", t: "Hecho para cómo trabaja tu empresa.", b: "Mapeamos tu operación antes de construir. No hay dos iguales." }
];

function Ecosistema() {
  const [active, setActive] = React.useState(0);
  const it = ECOSISTEMA[active];
  return (
    <Section id="ecosistema" refno="004·BIS / TODO CONECTADO · A TU MEDIDA">
      <Label>004·BIS · UN SOLO ECOSISTEMA · CONSTRUIDO PARA TI</Label>
      <div className="bene__head eco__head">
        <h2>No te entregamos piezas sueltas. Te entregamos <span className="hl">un solo ecosistema, hecho a tu medida.</span></h2>
      </div>
      <div className="eco">
        <div className="eco__tabs" role="tablist" aria-label="Piezas del ecosistema">
          {ECOSISTEMA.map((c, i) => (
            <button
              key={c.id}
              type="button"
              role="tab"
              aria-selected={i === active}
              className={"eco__tab" + (i === active ? " is-active" : "")}
              onClick={() => setActive(i)}
              onMouseEnter={() => setActive(i)}
            >
              <span className="eco__tab-id">{c.id}</span>
              <span className="eco__tab-k">{c.k}</span>
              <span className="eco__tab-arrow" aria-hidden="true">→</span>
            </button>
          ))}
        </div>
        <div className="eco__panel" key={active} role="tabpanel">
          <span className="eco__panel-id">{it.id}</span>
          <h3 className="eco__panel-t">{it.t}</h3>
          <p className="eco__panel-b">{it.b}</p>
          {window.EcoDemo ? <EcoDemo which={active} /> : null}
        </div>
      </div>
      <div className="linea__cta">
        <a href="#cta" className="btn-primary">Platiquemos cómo se vería el tuyo <span>→</span></a>
      </div>
    </Section>
  );
}

// 006 CAPA 2
const CAPA2 = [
{ k: "seguros", t: "Agencias de seguros", d: "Clasificador de siniestros que los canaliza al ajustador correcto en segundos. Agente que responde dudas del asegurado por WhatsApp. Motor de renovación inteligente que sabe cuándo presionar y cuándo soltar." },
{ k: "dental", t: "Clínicas dentales", d: "Expediente clínico estructurado por voz. Recordatorios de mantenimientos anuales sin intervención. Agenda que entiende la diferencia entre endodoncia y limpieza." },
{ k: "escuela", t: "Escuelas privadas", d: "Comunicación padres-maestros sin fricción. Dashboard con alertas tempranas de bajo rendimiento. Bot de admisiones que responde preguntas 24/7." },
{ k: "inmo", t: "Inmobiliarias", d: "Calificador automático de leads que detecta quién compra y quién curiosea. Asistente virtual para tours. Seguimiento post-venta que no depende de que el asesor se acuerde." },
{ k: "resto", t: "Restaurantes multi-sucursal", d: "Dashboard operativo que ve todas las sucursales en tiempo real. Clasificador de reviews que detecta fuego antes de que se propague. Agente de reservaciones 24/7." },
{ k: "notaria", t: "Notarías", d: "Dashboard de escrituras en flujo. Detector de inconsistencias documentales. Portal donde el cliente consulta el estatus sin llamar." },
{ k: "marketing", t: "Agencias de marketing", d: "Dashboard multicliente con campañas y resultados. Reportes automáticos cada lunes sin intervención. Organizador de assets que encuentra lo que buscas en segundos." },
{ k: "arq", t: "Ingeniería y arquitectura", d: "Gestor de proyectos con hitos automáticos. Clasificador de requerimientos de cliente. Portal de avances que el cliente consulta sin interrumpir al equipo." }];


function Capa2() {
  return (
    <Section id="capa2" refno="006 / LO MISMO FUNCIONA PARA">
      <Label>006 · HIPÓTESIS · NO CASOS</Label>
      <div className="capa2__head">
        <h2>Lo mismo <span className="hl">funciona para…</span></h2>
        <p>
          Estas son tres industrias donde ya operamos en producción. El método funciona para cualquier operación con
          procesos repetitivos. Si tu industria no está arriba, esto es lo que <em>construiríamos</em> para ti.
        </p>
      </div>
      <div className="capa2__grid">
        {CAPA2.map((c, i) =>
        <div className="capa2__card" key={c.k}>
            <div className="mini-icon">{I[c.k]}</div>
            <h4>{`V·B·0${i + 1}`}</h4>
            <div className="title">{c.t}</div>
            <p>{c.d}</p>
          </div>
        )}
      </div>
      <p className="capa2__closing">
        ¿Tu industria no está aquí? Te garantizamos que podemos construirla.
        Platiquemos 15 minutos y te decimos cómo se vería.
      </p>
    </Section>);

}

// 007 MOAT
function Moat() {
  const cards = [
  { n: "M·01", t: "Nos metemos antes de construir.", b: "Dos días de diagnóstico sentados con tu equipo, antes de proponer nada. Nadie más lo hace a este precio.", D: MoatDiag1 },
  { n: "M·02", t: "Construimos específicamente para ti.", b: "No vendemos catálogo. Cada sistema que entregamos responde a una operación real que mapeamos primero.", D: MoatDiag2 },
  { n: "M·03", t: "Tu operación completa, no una pieza.", b: "Dashboard, agente, portal, WhatsApp, facturación — todo conectado. Cuando terminamos, no te falta integrar nada.", D: MoatDiag3 }];

  return (
    <Section id="moat" refno="007 / MOAT">
      <Label>007 · POR QUÉ NO PODEMOS SER COPIADOS RÁPIDO</Label>
      <div className="moat__head">
        <h2>Por qué <span className="hl">no podemos ser copiados</span> rápido.</h2>
      </div>
      <div className="moat__grid">
        {cards.map((c) => {
          const D = c.D;
          return (
            <div key={c.n} className="moat__card">
              <div className="moat__num"><span>{c.n}</span><span className="bar" /><span>DIF·COMP</span></div>
              <h3>{c.t}</h3>
              <p>{c.b}</p>
              <div className="diagram"><D /></div>
            </div>);

        })}
      </div>
    </Section>);

}

// 008 PROCESO
function Proceso() {
  const fases = [
  { n: "01", k: "DIAGNÓSTICO", t: "Diagnóstico", dur: "2 días", moat: "En 48 horas identificamos qué conviene automatizar primero.", b: "Nos reunimos con tu equipo para mapear dónde se pierde el tiempo, qué procesos se repiten y qué conviene priorizar. Terminamos con un plan claro de los siguientes pasos.", D: FaseDiag1,
    spec: [["FORMATO", "PRESENCIAL·O·REMOTO"], ["ENTREGABLE", "MAPA + PROPUESTA"], ["CITA", "$ 0"]] },
  { n: "02", k: "DEMO·CON·TUS·DATOS", t: "Demo con tus datos", dur: "1–2 semanas", moat: "Tu equipo lo prueba antes de que firmes el resto.", b: "Construimos un sistema funcional con tu información real, sin presentaciones de por medio. Tu equipo lo prueba directamente en su navegador y decides si continuamos.", D: FaseDiag2,
    spec: [["DATOS", "REALES · NO PRESENTACIONES"], ["ENTREGABLE", "SISTEMA NAVEGABLE"]] },
  { n: "03", k: "PRODUCCIÓN", t: "Producción", dur: "4–8 semanas", moat: "Tu sistema operando como tu empresa lo necesita.", b: "Desarrollamos tu sistema y lo ajustamos contigo, adaptándolo a la forma de trabajar de tu equipo hasta que quede a la medida. Concluimos cuando está plenamente integrado a tu operación.", D: FaseDiag3,
    spec: [["CIERRE", "SISTEMA·OPERANDO"]] }];

  return (
    <Section id="proceso" refno="005 / CÓMO TRABAJAMOS">
      <Label>005 · TRES FASES · SIN SORPRESAS</Label>
      <div className="proceso__head">
        <h2>Tres fases.<br /><span className="hl">Sin sorpresas.</span></h2>
        <p>El mismo proceso, sin importar la industria. Si algo no encaja, te lo decimos desde la fase 01.</p>
      </div>
      <div className="proceso__grid">
        {fases.map((f) => {
          const D = f.D;
          return (
            <div className="fase" key={f.n}>
              <div className="fase__diagram"><D /></div>
              <h3 className="fase__title">{f.t}</h3>
              <p className="fase__moat">{f.moat}</p>
              <p className="fase__body">{f.b}</p>
            </div>);

        })}
      </div>
    </Section>);

}

// 009 LO QUE NO HACEMOS
function NoHacemos() {
  const items = [
  { n: "01", t: "No vendemos suscripciones de IA genérica.", b: "Cada sistema se construye para una operación específica. Si buscas un ChatGPT con tu logo, no somos la opción indicada." },
  { n: "02", t: "No reusamos código de un cliente para otro.", b: "Dos despachos del mismo giro terminan con sistemas distintos, porque cada operación trabaja a su manera." }];

  return (
    <Section id="no-hacemos" refno="006 / LO QUE NO HACEMOS">
      <Label>006 · LO QUE NO HACEMOS</Label>
      <div className="nh__head">
        <h2>Lo que <span className="hl">no hacemos.</span></h2>
        <p>Lo decimos de frente para que nadie pierda el tiempo.</p>
      </div>
      <div className="nh__list">
        {items.map((it) =>
        <div className="nh__item" key={it.n}>
            <div className="nh__num"><span>{it.n}</span><span className="bar" /><span>NO</span></div>
            <h3 className="nh__t">{it.t}</h3>
            <p className="nh__b">{it.b}</p>
          </div>
        )}
      </div>
      <div className="nh__cierre manifesto__inner">
        <p className="manifesto__line">
          No prometemos magia. Prometemos sistema.
        </p>
        <p className="manifesto__line manifesto__line--accent">
          La inteligencia artificial no resuelve problemas por sí sola: <span className="hl">los resuelve un sistema bien diseñado que la usa donde tiene sentido.</span>
        </p>
      </div>
    </Section>);

}

// 009 ANTES Y DESPUÉS  (deprecated, conservado por si se requiere)
function AntesDespues() {
  const cols = [
  { ind: "JURÍDICO", a: "Actualizas expedientes manualmente. Los clientes llaman preguntando por su caso. Redactas el mismo correo 40 veces al mes.",
    d: "El dashboard se actualiza solo. Los clientes consultan en su portal. Tu equipo dedica ese tiempo a trabajo legal real." },
  { ind: "FISIOTERAPIA", a: "Escribes notas SOAP después de cada sesión. No-shows sin seguimiento. El corte de caja sale a las 10pm.",
    d: "La IA estructura el SOAP mientras tratas. WhatsApp reagenda solo. El corte de caja sale al momento, sin Excel." },
  { ind: "CONTABLE", a: "El 17 del mes es un infierno. Persigues clientes por WhatsApp. Revisas CFDIs uno por uno buscando errores.",
    d: "Las inconsistencias se detectan antes del SAT. Los clientes suben documentos por su portal. La cobranza camina sola en 4 niveles." }];

  return (
    <Section id="antes" refno="009 / ANTES Y DESPUÉS">
      <Label>009 · ASÍ SE VE TU OPERACIÓN DESPUÉS</Label>
      <div className="antes__head">
        <h2>Así se ve tu operación<br /><span className="hl">después.</span></h2>
        <p>No vendemos software. Vendemos un día distinto para tu empresa.</p>
      </div>
      <div className="antes__grid">
        {cols.map((c) =>
        <div className="antes__col" key={c.ind}>
            <div className="antes__ind">{c.ind}</div>
            <div className="antes__block antes">
              <div className="k">Antes</div>
              <p>{c.a}</p>
            </div>
            <div className="antes__sep"><span>ROARK</span></div>
            <div className="antes__block despues">
              <div className="k">Después</div>
              <p>{c.d}</p>
            </div>
          </div>
        )}
      </div>
    </Section>);

}

// 010 CTA
function CTA() {
  return (
    <Section id="cta" refno="007 / SIGUIENTE PASO">
      <Label>007 · SIGUIENTE PASO</Label>
      <div className="cta cta__grid">
        <div>
          <h2>Danos 15 minutos.<br />Te decimos si podemos <em>ayudarte</em> o no.</h2>
        </div>
        <div className="cta__card">
          <div className="cta__row">
            <span className="k">Email</span>
            <span className="v"><a href="mailto:calderon@roark.mx">calderon@roark.mx</a> <span className="cta__hint">— lo vemos nosotros, directo</span></span>
          </div>
          <div className="cta__row">
            <span className="k">WhatsApp</span>
            <span className="v"><a href="https://wa.me/525523488228">+52 55 2348 8228</a> <span className="cta__hint">— respondemos en horas hábiles</span></span>
          </div>
          <div className="cta__row">
            <span className="k">Duración</span>
            <span className="v">15 minutos</span>
          </div>
          <a href="mailto:calderon@roark.mx" className="cta__btn">Platiquemos <span>→</span></a>
        </div>
      </div>
    </Section>);

}

// 011 FOOTER
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__grid">
        <div className="footer__col">
          <h5>ROARK</h5>
          <span>Agencia de IA a medida</span>
          <span>Ciudad de México</span>
        </div>
        <div className="footer__col">
          <h5>SITIO</h5>
          <a href="#filtro">¿Es para ti?</a>
          <a href="#industrias">Lo que recibes</a>
          <a href="#ecosistema">Qué construimos</a>
          <a href="#proceso">Cómo trabajamos</a>
          <a href="#cta">Platiquemos</a>
        </div>
        <div className="footer__col">
          <h5>CONTACTO</h5>
          <a href="mailto:calderon@roark.mx">calderon@roark.mx</a>
          <a href="https://wa.me/525523488228">WhatsApp +52 55 2348 8228</a>
        </div>
      </div>
      <div className="footer__legal">
        <span>© 2026 ROARK · Ciudad de México</span>
        <span>Tu información, bajo Ley Federal de Protección de Datos Personales en Posesión de los Particulares.</span>
      </div>
    </footer>);

}

// MARQUEE — ticker técnico entre secciones
const MARQUEE_ITEMS = [
  "SISTEMAS DE IA A MEDIDA",
  "FUNCIONANDO EN 14 DÍAS",
  "UNA PERSONA, CAPACIDAD DE DIEZ",
  "CDMX · MX",
  "SIN PRESENTACIONES — SISTEMAS REALES",
  "R-MX · 2026"];

function Marquee() {
  const row = (key) => (
    <div className="marquee__row" key={key} aria-hidden={key > 0 ? "true" : undefined}>
      {MARQUEE_ITEMS.map((t, i) =>
        <span className="marquee__item" key={i}>{t}<span className="marquee__sep">·</span></span>
      )}
    </div>);

  return (
    <div className="marquee" aria-label="ROARK — sistemas de IA a medida">
      <div className="marquee__track">{[0, 1, 2, 3].map(row)}</div>
    </div>);

}

Object.assign(window, { Hero, Manifesto, Trustbar, PorQue, Filtro, Verticales, Beneficios, Ecosistema, Capa2, Moat, Proceso, AntesDespues, NoHacemos, CTA, Footer, Marquee });

function Manifesto() {
  return (
    <section id="manifesto" className="section manifesto" data-screen-label="02 Manifesto">
      <div className="section__rail"><span className="section__refno">003 / PORQUÉ</span></div>
      <div className="section__inner manifesto__inner">
        <p className="manifesto__line">
          Cada empresa tiene una forma propia de trabajar.
        </p>
        <p className="manifesto__line manifesto__line--accent">
          <span className="hl">Construimos el sistema</span> que vive y crece con ella.
        </p>
      </div>
    </section>);

}