/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer, CLIENT_LOGOS */
/* mineria.jsx — Landing por industria: Minería / Maquinaria pesada / SAP.
   Same template as agro.jsx — only copy/icons/casos + hero-illustration change.
   Textos definitivos del cliente: no reescribir. */

const { useState: useStateInd, useEffect: useEffectInd, useRef: useRefInd } = React;

const useScrollReveal = (rootRef) => {
  useEffectInd(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const root = rootRef.current;
    if (!root) return;
    const groups = [];
    root.querySelectorAll('section').forEach((sec) => {
      const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec;
      const kids = Array.from(wrap.children).filter((el) => el.nodeType === 1);
      if (kids.length) groups.push(kids);
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          en.target.classList.add('rv-in');
          io.unobserve(en.target);
        }
      });
    }, { rootMargin: '0px 0px -12% 0px', threshold: 0.08 });
    groups.forEach((kids) => kids.forEach((el, i) => {
      el.classList.add('rv');
      el.style.transitionDelay = Math.min(i, 4) * 80 + 'ms';
      io.observe(el);
    }));
    return () => io.disconnect();
  }, []);
};

/* ── Illustrations — framing IA: tablas SAP, indicador sin conectar.
   La ilustración del hero fue reemplazada por HeroIndustria (hero-industria.jsx). ── */

const MineriaFramingIllustration = () => (
  <div className="tm-ind-anim">
    <svg viewBox="0 0 420 210" width="100%" style={{ maxWidth: 420, height: 'auto', overflow: 'visible' }} fill="none" role="img" aria-label="Tabla SAP con un indicador aún sin modelar">
      <defs>
        <filter id="min-sfv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="24" stdDeviation="26" floodColor="#2A3BD4" floodOpacity="0.13" /></filter>
        <filter id="min-stv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#2A3BD4" floodOpacity="0.07" /></filter>
        <linearGradient id="min-surfv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FFFFFF" /><stop offset="1" stopColor="#F3F5FC" /></linearGradient>
        <linearGradient id="min-periv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#EEF0FE" /><stop offset="1" stopColor="#E1E5FD" /></linearGradient>
        <clipPath id="min-tilev"><rect x="14" y="18" width="340" height="164" rx="36" /></clipPath>
      </defs>
      <g className="tm-ind-anim-main">
        <g filter="url(#min-sfv)"><rect x="14" y="18" width="340" height="164" rx="36" fill="url(#min-surfv)" stroke="#E6E9F5" strokeWidth="2" /></g>
        <g clipPath="url(#min-tilev)">
          <rect x="14" y="18" width="122" height="164" fill="url(#min-periv)" />
          <g className="tm-ind-anim-node">
            <ellipse cx="75" cy="88" rx="20" ry="6" fill="none" stroke="#5A6DF3" strokeWidth="2.5" />
            <path d="M55 88 v12 a20 6 0 0 0 40 0 v-12" fill="none" stroke="#5A6DF3" strokeWidth="2.5" />
            <path d="M55 100 v12 a20 6 0 0 0 40 0 v-12" fill="none" stroke="#C8CEF8" strokeWidth="2.5" />
          </g>
        </g>
        <line x1="136" y1="18" x2="136" y2="182" stroke="#E6E9F5" strokeWidth="2" />
        <path d="M162 76 q30 -13 60 0 q30 13 60 0" stroke="#D9DDEF" strokeWidth="2.5" strokeLinecap="round" />
        <path d="M162 100 q30 -13 60 0 q30 13 60 0" stroke="#E6E9F5" strokeWidth="2.5" strokeLinecap="round" />
        <path className="tm-ind-anim-ants" d="M162 124 q30 -13 60 0 q30 13 60 0" stroke="#D9DDEF" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="7 7" />
        <rect className="tm-ind-anim-key" x="162" y="146" width="52" height="9" rx="4.5" fill="#253DE5" style={{ transformBox: 'fill-box', transformOrigin: 'left center' }} />
        <g className="tm-ind-anim-breathe" style={{ transformBox: 'fill-box', transformOrigin: 'center' }}>
          <g filter="url(#min-stv)"><circle cx="350" cy="100" r="26" fill="#FFFFFF" stroke="#D9DDEF" strokeWidth="2" /></g>
          <circle cx="350" cy="100" r="11" fill="#91DFC8" />
          <path d="M345.5 100.5 l3 3 l6 -6.5" stroke="#FFFFFF" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </g>
      </g>
    </svg>
  </div>
);

/* ── Content (definitivo — no reescribir) ────────────────────── */

const AREAS = [
  { label: 'Operaciones / Flota', cases: [
    { icon: 'squares-four', title: 'Balance mensual de flota', body: 'Con maestro de equipos + consignaciones + rentals + reparaciones.' },
    { icon: 'calendar-blank', title: 'Equipos en consignación', body: 'Con fechas de entrega y devolución.' },
    { icon: 'trend-up', title: 'Compras proyectadas y alquileres', body: 'Por faltantes.' }
  ] },
  { label: 'Comercial', cases: [
    { icon: 'user-focus', title: 'Ficha 360 del cliente', body: 'Consolidando historial de órdenes entre ERP viejo y nuevo.' },
    { icon: 'rows', title: 'Total comprado, última compra, cantidad de órdenes', body: 'Por cliente.' },
    { icon: 'arrows-left-right', title: 'Contactos y actividad comercial', body: 'Unificados.' }
  ] },
  { label: 'Compras y Riesgo', cases: [
    { icon: 'shield-check', title: 'Auditoría de cuentas a pagar', body: 'Con flags de riesgo por proveedor sobre SAP.' },
    { icon: 'target', title: 'Motor de alertas sobre órdenes de compra', body: 'Detección de concentración, desvíos y patrones.' },
    { icon: 'stack', title: 'Análisis de spend por categoría de material', body: 'Con maestros dimensionales.' }
  ] }
];

const OBJECTIONS = [
  { q: '"¿Dónde publico el dashboard para que la dirección lo abra sin cuenta?"', a: 'Teramot expone dashboards con URL compartida sin necesidad de cuenta. El link se abre desde cualquier navegador con los permisos que definas.' },
  { q: '"Estamos en medio de una migración SAP S/4HANA. No tenemos tiempo."', a: 'Justamente por eso conviene arrancar ahora: la migración es el mejor momento para modelar la capa de datos limpia sin tocar SAP en producción. Restauramos un .bak en S3 y trabajamos sobre eso en paralelo a tu migración.' },
  { q: '"Ya tenemos SAP Analytics Cloud / Power BI."', a: 'La diferencia no está en la visualización. Está en el ciclo de creación. Con SAC/Power BI seguís pidiendo CDS views al equipo ABAP. Con Teramot el analista funcional arma el indicador solo.' },
  { q: '"¿Cómo lo defiendo internamente ante mi jefe?"', a: 'Con datos: Milicic pasó de 6 meses a 3 días por indicador. La conversación con la dirección es sobre resultados, no sobre la herramienta.' }
];

const CASO_ROWS = [
  { antes: '6 meses por indicador: revalidación de datos entre CDS views, SAP Analytics Cloud y Power BI', con: 'Modelado automático sobre tablas SAP; tabla normalizada + relaciones ya vinculadas', despues: '3 días por indicador: reducción cercana al 98%' },
  { antes: '3 personas (analista SAP + analista de datos + programador ABAP)', con: 'Analista SAP arma el indicador directo en Teramot', despues: '1 persona que entiende de negocio' },
  { antes: 'Balance mensual de flota armado manual: ¿cuántos equipos van a estar disponibles cada mes?', con: 'Maestro de equipos + consignaciones + reparaciones + rentals conectados en una torre de control', despues: 'Balance mensual automático con equipos indisponibles proyectados' }
];

const CASO_QUOTE = { text: '"Un indicador como el que estuve haciendo con vos me tarda 6 meses por revalidar los datos. Yo ahora necesito uno que entienda de negocio."', author: 'Franco Corbalán, Analista Funcional SAP' };

const HOW_STEPS = [
  { title: 'Conectá tus sistemas', icon: 'plugs-connected', body: 'SAP ECC, S/4HANA, SQL Server y ERPs legacy. Sin migrar datos. Teramot los lee donde están.' },
  { title: 'La IA entiende tu SAP', icon: 'brain', body: '50+ agentes especializados analizan, limpian y modelan balance de flota, ficha 360 y alertas de forma autónoma.' },
  { title: 'Preguntá lo que necesites', icon: 'chat-circle-text', body: 'Cualquier persona consulta en lenguaje natural y obtiene respuestas sobre datos reales, verificables, actualizados. El conocimiento se acumula, no desaparece.' }
];

/* ── Sections ─────────────────────────────────────────────────── */

const MineriaHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-ind-hero-bleed">
      <div className="tm-ind-hero-copy">
        <div className="tm-ind-kicker">
          <span className="tm-ind-kicker-dot" />
          <span className="tm-ind-eyebrow">Minería / Maquinaria pesada / SAP</span>
        </div>
        <h1 className="tm-ind-h1">De 6 meses a 3 días por indicador. Con SAP, sin CDS views ni analista de datos.</h1>
        <p className="tm-ind-sub">Conectá SAP (ECC, S/4HANA, HANA). Teramot modela tus tablas y expone el balance de flota, la ficha 360 del cliente y las alertas de riesgo sobre órdenes de compra, sin que un programador tenga que escribir CDS views.</p>
        <div className="tm-ind-hero-actions">
          <a className="tm-btn tm-btn-primary tm-btn-lg" href={c.links.app}>Empezar gratis <i className="ph-bold ph-arrow-right" /></a>
          <a className="tm-btn tm-btn-ghost tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer">Ver demo en vivo</a>
        </div>
        <div className="tm-ind-pills">
          <span className="tm-ind-pill"><i className="ph ph-shield-check" />SOC 2 Certified</span>
          <span className="tm-ind-pill"><i className="ph ph-credit-card" />Sin tarjeta de crédito</span>
          <span className="tm-ind-pill"><i className="ph ph-clock" />Listo en 1 hora</span>
        </div>
      </div>
      <HeroIndustria industria="mineria" />
    </section>
  );
};

const TALL_LOGOS = new Set(['The Coca-Cola Company', 'Grupo Sancor Seguros', 'La Segunda', 'Bolsa de Comercio de Rosario', 'Digital House', 'Los Pumas', 'UAR']);

const IndProof = () => {
  const { c } = useLang();
  const track = [...CLIENT_LOGOS, ...CLIENT_LOGOS];
  return (
    <section className="tm-ind-proof">
      <div className="tm-ind-container tm-ind-proof-grid">
        <div className="tm-ind-proof-copy">
          <span className="tm-ind-proof-count">{c.proof.more}</span>
          <span className="tm-ind-proof-caption">{c.proof.label}</span>
        </div>
        <div className="tm-ind-proof-divider" />
        <div className="tm-ind-proof-marquee">
          <div className="tm-ind-proof-track" aria-label="Client logos">
            {track.map(({ name, Cmp }, i) => (
              <span key={name + i} title={name} aria-hidden={i >= CLIENT_LOGOS.length}>
                <Cmp className={TALL_LOGOS.has(name) ? 'is-tall' : ''} />
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const MineriaSources = () => (
  <section className="tm-ind-sources">
    <div className="tm-ind-container tm-ind-sources-inner">
      <span className="tm-ind-eyebrow-accent" style={{ color: 'var(--muted-2)' }}>Conecta con</span>
      <div className="tm-ind-sources-list">
        <span>SAP ECC</span><span>S/4HANA</span><span>SQL Server</span><span>ERPs legacy</span>
      </div>
    </div>
  </section>
);

const MineriaProblem = () => (
  <section className="tm-ind-gradient">
    <div className="tm-ind-container tm-ind-problem-inner">
      <div className="tm-ind-problem-copy">
        <div className="tm-ind-problem-kicker">
          <i className="ph-bold ph-warning-diamond" />
          <span className="tm-ind-problem-eyebrow">El problema actual</span>
        </div>
        <p className="tm-ind-statement">Tu equipo hoy trabaja así: negocio pide un indicador → analista SAP hace análisis funcional → analista de datos maqueta → programador escribe CDS views y gráficos → validación → publicación en SAP Analytics Cloud. Seis meses por indicador. Tres personas mínimo. La dirección pide velocidad y el equipo pide más gente.</p>
        <p className="tm-ind-problem-body">No es un problema de talento. Es un problema de infraestructura: SAP no entrega la vista consolidada que necesitan operaciones y comercial. Cada análisis se paga en semanas de un equipo caro.</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, justifyContent: 'center' }}>
        <div className="tm-ind-glass-grid">
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-chat-circle-text" /></span><div className="tm-ind-glass-label">Análisis funcional</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-table" /></span><div className="tm-ind-glass-label">Maqueta de datos</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-code" /></span><div className="tm-ind-glass-label">CDS views</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-cloud-check" /></span><div className="tm-ind-glass-label">SAP Analytics Cloud</div></div>
        </div>
        <div className="tm-ind-glass-footnote"><span>SEIS MESES POR INDICADOR</span></div>
      </div>
    </div>
  </section>
);

const MineriaFraming = () => (
  <section className="tm-ind-container tm-ind-framing-inner">
    <div className="tm-ind-framing-left">
      <h2 className="tm-h2 tm-ind-framing-h2">No te falta IA.<br /><span style={{ color: 'var(--accent)' }}>Le falta ver tus datos.</span></h2>
      <MineriaFramingIllustration />
    </div>
    <div className="tm-ind-framing-right">
      <p className="tm-ind-framing-lead" style={{ maxWidth: '34em' }}>La inteligencia ya existe. El problema es que no puede leer SAP directo, se queda del lado del ERP mientras el analista traduce, y por eso todo tarda.</p>
    </div>
  </section>
);

const MineriaHowItWorks = () => (
  <section className="tm-ind-how">
    <div className="tm-ind-container tm-ind-how-inner">
      <div className="tm-ind-how-head">
        <span className="tm-ind-eyebrow-accent">Cómo funciona</span>
        <h2 className="tm-h2 tm-ind-how-h2">De cero a la primera respuesta en menos de una hora.</h2>
      </div>
      <div className="tm-ind-how-steps">
        {HOW_STEPS.map((s, i) => (
          <div className="tm-ind-how-step" key={i}>
            <div className="tm-ind-how-node"><i className={`ph-bold ph-${s.icon}`} /></div>
            <h3 className="tm-ind-how-title">{s.title}</h3>
            <p className="tm-ind-how-body">{s.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const MineriaCase = () => (
  <section className="tm-ind-section-white">
    <div className="tm-ind-container tm-ind-section tm-ind-case">
      <div className="tm-ind-head">
        <span className="tm-ind-eyebrow-accent">El caso que lo demuestra</span>
        <h2 className="tm-h2 tm-ind-h2">Dashboard KPIs Flota SAP</h2>
      </div>
      <div className="tm-ind-stat-grid">
        <div className="tm-ind-stat-card is-highlight">
          <span className="tm-ind-stat-icon"><i className="ph ph-clock-countdown" /></span>
          <div className="tm-ind-stat-number">6 meses → 3 días</div>
          <div className="tm-ind-stat-desc">por indicador, ~98% de reducción</div>
        </div>
        <div className="tm-ind-stat-card">
          <span className="tm-ind-stat-icon"><i className="ph ph-squares-four" /></span>
          <div className="tm-ind-stat-number">3 → 1 persona</div>
          <div className="tm-ind-stat-desc">el analista SAP arma el indicador solo</div>
        </div>
        <div className="tm-ind-stat-card">
          <span className="tm-ind-stat-icon"><i className="ph ph-rows" /></span>
          <div className="tm-ind-stat-number">Balance automático</div>
          <div className="tm-ind-stat-desc">equipos indisponibles proyectados por mes</div>
        </div>
      </div>
      <div className="tm-ind-table">
        <div className="tm-ind-table-head">
          <div><span>Antes</span></div>
          <div className="is-highlight"><span>Con la herramienta</span></div>
          <div><span>Después</span></div>
        </div>
        {CASO_ROWS.map((row, i) => (
          <div className="tm-ind-table-row" key={i}>
            <div className="tm-ind-table-cell-before"><p>{row.antes}</p></div>
            <div className="tm-ind-table-cell-with"><p>{row.con}</p></div>
            <div className="tm-ind-table-cell-after"><i className="ph-bold ph-check" /><p>{row.despues}</p></div>
          </div>
        ))}
      </div>
      <blockquote style={{ margin: 0, borderLeft: '3px solid var(--accent)', paddingLeft: 20 }}>
        <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 'var(--text-lg)', fontStyle: 'italic', color: 'var(--ink-soft)', maxWidth: '48em' }}>{CASO_QUOTE.text}</p>
        <cite style={{ display: 'block', marginTop: 12, fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', fontStyle: 'normal', color: 'var(--muted)' }}>{CASO_QUOTE.author}</cite>
      </blockquote>
    </div>
  </section>
);

const MineriaMoreCases = () => {
  const [area, setArea] = useStateInd(0);
  return (
    <section className="tm-ind-container tm-ind-section tm-ind-cases">
      <div className="tm-ind-head">
        <span className="tm-ind-eyebrow-accent">Más casos por área</span>
        <h2 className="tm-h2 tm-ind-h2">Lo que se desbloquea cuando los maestros existen</h2>
      </div>
      <div className="tm-ind-tabs">
        {AREAS.map((a, i) => (
          <button key={a.label} type="button" className={`tm-ind-tab ${area === i ? 'is-active' : ''}`} onClick={() => setArea(i)}>{a.label}</button>
        ))}
      </div>
      <div className="tm-ind-case-grid">
        {AREAS[area].cases.map((c, i) => (
          <div className="tm-ind-case-card" key={i}>
            <i className={`ph ph-${c.icon}`} />
            <div className="tm-ind-case-title">{c.title}</div>
            <p className="tm-ind-case-body">{c.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const MineriaAdopters = () => (
  <section className="tm-ind-section-white">
    <div className="tm-ind-container tm-ind-section tm-ind-adopters">
      <span className="tm-ind-eyebrow-accent">Quién ya lo hace</span>
      <div className="tm-ind-adopters-grid">
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Minería / Maquinaria pesada</span>
          <p className="tm-ind-adopter-body">De 6 meses a 3 días por indicador. Balance de flota SAP automatizado.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Comercialización de maquinaria</span>
          <p className="tm-ind-adopter-body">Ficha 360 del cliente entre ERP legacy y ERP nuevo tras migración.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Grupo industrial SAP + SQL Server</span>
          <p className="tm-ind-adopter-body">Motor de alertas de riesgo sobre OCs y spend por categoría de material.</p>
        </div>
      </div>
      <div className="tm-ind-pipeline">
        <div className="tm-ind-pipeline-panel">
          <span className="tm-ind-pipeline-icon"><i className="ph ph-plugs" /></span>
          <span className="tm-ind-pipeline-eyebrow">Sistemas</span>
          <div className="tm-ind-pipeline-chips">
            <span className="tm-ind-pipeline-chip">SAP ECC</span>
            <span className="tm-ind-pipeline-chip">S/4HANA</span>
            <span className="tm-ind-pipeline-chip">SQL Server</span>
            <span className="tm-ind-pipeline-chip">ERPs legacy</span>
          </div>
        </div>
        <div className="tm-ind-pipeline-arrow"><i className="ph-bold ph-arrow-right" /></div>
        <div className="tm-ind-pipeline-panel is-core">
          <span className="tm-ind-pipeline-icon"><i className="ph-fill ph-circles-three" /></span>
          <span className="tm-ind-pipeline-eyebrow">Plataforma</span>
          <div className="tm-ind-pipeline-chips">
            <span className="tm-ind-pipeline-chip">Conector SAP</span>
            <span className="tm-ind-pipeline-chip">Modelado automático</span>
            <span className="tm-ind-pipeline-chip">Maestros normalizados</span>
          </div>
        </div>
        <div className="tm-ind-pipeline-arrow"><i className="ph-bold ph-arrow-right" /></div>
        <div className="tm-ind-pipeline-panel">
          <span className="tm-ind-pipeline-icon"><i className="ph ph-sparkle" /></span>
          <span className="tm-ind-pipeline-eyebrow">IA</span>
          <div className="tm-ind-pipeline-chips">
            <span className="tm-ind-pipeline-chip">Balance de flota</span>
            <span className="tm-ind-pipeline-chip">Ficha 360</span>
            <span className="tm-ind-pipeline-chip">Alertas OC</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const MineriaObjections = () => {
  const [open, setOpen] = useStateInd(0);
  return (
    <section className="tm-ind-container tm-ind-section tm-ind-objections-inner">
      <div className="tm-ind-head">
        <span className="tm-ind-eyebrow-accent">Objeciones frecuentes</span>
        <h2 className="tm-h2 tm-ind-h2">Tu objeción, la de tu industria</h2>
      </div>
      <div className="tm-ind-accordion">
        {OBJECTIONS.map((o, i) => {
          const isOpen = open === i;
          return (
            <div className="tm-ind-accordion-item" key={i}>
              <button type="button" className="tm-ind-accordion-trigger" onClick={() => setOpen(isOpen ? -1 : i)}>
                <span className="tm-ind-accordion-q">{o.q}</span>
                <i className={`ph-bold ${isOpen ? 'ph-minus' : 'ph-plus'}`} />
              </button>
              {isOpen && <p className="tm-ind-accordion-a">{o.a}</p>}
            </div>
          );
        })}
      </div>
    </section>
  );
};

const IndAlternatives = () => (
  <section className="tm-ind-section-white">
    <div className="tm-ind-container tm-ind-section" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
      <span className="tm-ind-eyebrow-accent">Las alternativas</span>
      <div className="tm-ind-alt-grid">
        <div className="tm-ind-alt-card">
          <span className="tm-ind-eyebrow-accent" style={{ color: 'var(--muted-2)' }}>Proyecto tradicional</span>
          <div className="tm-ind-alt-word">meses</div>
          <p className="tm-ind-alt-desc">Consultoría + integración + validación + go-live.</p>
        </div>
        <div className="tm-ind-alt-card">
          <span className="tm-ind-eyebrow-accent" style={{ color: 'var(--muted-2)' }}>Equipo propio</span>
          <div className="tm-ind-alt-word">caro</div>
          <p className="tm-ind-alt-desc">Data engineers, ML engineers, infraestructura y mantenimiento.</p>
        </div>
        <div className="tm-ind-alt-card">
          <span className="tm-ind-eyebrow-accent" style={{ color: 'var(--muted-2)' }}>IA genérica</span>
          <div className="tm-ind-alt-word">no sirve</div>
          <p className="tm-ind-alt-desc">Modelos generales que no conocen tus datos ni tu regulación.</p>
        </div>
        <div className="tm-ind-alt-card is-highlight">
          <span className="tm-ind-eyebrow-accent">Esta herramienta</span>
          <div className="tm-ind-alt-word">1 hora</div>
          <p className="tm-ind-alt-desc">Conectás tus fuentes, entrenás con tus datos, entregás.</p>
        </div>
      </div>
    </div>
  </section>
);

const MineriaCta = () => {
  const { c } = useLang();
  return (
    <section id="cta" className="tm-ind-gradient tm-ind-cta">
      <div className="tm-ind-cta-blob" />
      <div className="tm-ind-container tm-ind-cta-inner">
        <div className="tm-ind-cta-copy">
          <h2 className="tm-h2 tm-ind-cta-h2">Tus datos ya están. <em>Solo falta conectarlos.</em></h2>
          <p className="tm-ind-cta-sub">Sin compromisos. Sin tarjeta. Tu primer indicador SAP en menos de una hora.</p>
        </div>
        <div className="tm-ind-cta-actions">
          <a className="tm-btn tm-btn-lg tm-ind-btn-white" href={c.links.app}>Empezar gratis <i className="ph-bold ph-arrow-right" /></a>
          <a className="tm-btn tm-btn-lg tm-ind-btn-outline-light" href={c.links.call} target="_blank" rel="noopener noreferrer">Ver demo en vivo</a>
        </div>
      </div>
    </section>
  );
};

const MineriaApp = () => {
  const rootRef = useRefInd(null);
  useScrollReveal(rootRef);
  return (
    <LangProvider>
      <NavBar current="mineria" />
      <main ref={rootRef}>
        <MineriaHero />
        <IndProof />
        <MineriaSources />
        <MineriaProblem />
        <MineriaFraming />
        <MineriaHowItWorks />
        <MineriaCase />
        <MineriaMoreCases />
        <MineriaAdopters />
        <MineriaObjections />
        <IndAlternatives />
        <MineriaCta />
      </main>
      <Footer />
    </LangProvider>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<MineriaApp />);