/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer, CLIENT_LOGOS */
/* combustibles.jsx — Landing por industria: Combustibles / Energía / Cobranzas B2B.
   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: partidas de cartera sin conectar.
   La ilustración del hero fue reemplazada por HeroIndustria (hero-industria.jsx). ── */

const CombustiblesFramingIllustration = () => (
  <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="Partidas de cartera con una regla de asignación sin conectar">
      <defs>
        <filter id="cmb-sfv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="24" stdDeviation="26" floodColor="#2A3BD4" floodOpacity="0.13" /></filter>
        <filter id="cmb-stv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#2A3BD4" floodOpacity="0.07" /></filter>
        <linearGradient id="cmb-surfv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FFFFFF" /><stop offset="1" stopColor="#F3F5FC" /></linearGradient>
        <linearGradient id="cmb-periv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#EEF0FE" /><stop offset="1" stopColor="#E1E5FD" /></linearGradient>
        <clipPath id="cmb-tilev"><rect x="14" y="18" width="340" height="164" rx="36" /></clipPath>
      </defs>
      <g className="tm-ind-anim-main">
        <g filter="url(#cmb-sfv)"><rect x="14" y="18" width="340" height="164" rx="36" fill="url(#cmb-surfv)" stroke="#E6E9F5" strokeWidth="2" /></g>
        <g clipPath="url(#cmb-tilev)">
          <rect x="14" y="18" width="122" height="164" fill="url(#cmb-periv)" />
          <g className="tm-ind-anim-node">
            <rect x="58" y="76" width="34" height="42" rx="3.5" fill="none" stroke="#5A6DF3" strokeWidth="2.5" />
            <line x1="65" y1="88" x2="85" y2="88" stroke="#5A6DF3" strokeWidth="2.3" />
            <line x1="65" y1="97" x2="85" y2="97" stroke="#8E99DE" strokeWidth="2.3" />
            <line x1="65" y1="106" x2="78" y2="106" stroke="#C8CEF8" strokeWidth="2.3" />
          </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(#cmb-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: 'Riesgo', cases: [
    { icon: 'target', title: 'Scoring de riesgo por cliente', body: 'Cruzando hábito de pago histórico + situación actual (partidas abiertas).' },
    { icon: 'user-focus', title: 'Detección automática de "clientes fantasma"', body: '679 en el caso YPF.' },
    { icon: 'warning-diamond', title: 'Alertas sobre importes negativos', body: 'Contados como deuda (bug de negocio detectado en piloto).' }
  ] },
  { label: 'Cobranzas', cases: [
    { icon: 'calendar-blank', title: 'Calendario de vencimientos críticos', body: 'Partidas > USD 500K, cliente enriquecido, 13 semanas rolling.' },
    { icon: 'trend-up', title: 'Semana pico automática', body: 'Detección del pico de USD 112M en 38 partidas en la semana crítica.' },
    { icon: 'calendar-x', title: 'Alertas de vencimientos en fin de semana', body: '8 detectados automáticamente en el caso YPF.' }
  ] },
  { label: 'Cartera comercial', cases: [
    { icon: 'arrows-left-right', title: 'Reasignación automática de cuentas', body: 'Aplicando reglas de negocio; solo muestra los que cambian.' },
    { icon: 'squares-four', title: 'Detección de concentración', body: '80% de facturación en 202 cuentas estratégicas.' },
    { icon: 'shield-check', title: 'Auditoría de asignaciones históricas', body: '972 cuentas Grandes que corresponden a Masivas detectadas por descarte.' }
  ] }
];

const OBJECTIONS = [
  { q: '"¿Qué pasa cuando quiera analizar dos millones de filas?"', a: 'Se procesa entero. En el caso YPF procesamos 4M de partidas para scoring de 16K clientes; el output es un dashboard interactivo, no un CSV para descargar.' },
  { q: '"Nuestras políticas de seguridad no dejan usar servicios cloud."', a: 'Se puede correr en tu infraestructura destino. La conexión a SAP HANA se hace con las credenciales y controles que ya tenés.' },
  { q: '"La consultoría externa nos recomendó otra herramienta."', a: 'La competencia real es "seguir haciéndolo a mano". Cualquier herramienta se compara contra el proceso actual en Excel + TXT + Power BI, y ahí es donde 18 minutos vs. semanas es la conversación.' },
  { q: '"¿Cómo garantizan que la IA no invente clientes o partidas?"', a: 'La IA no genera datos, opera sobre tus tablas SAP modeladas. Cada número es rastreable línea a línea a la partida original.' }
];

const CASO_ROWS = [
  { antes: 'Reasignación manual de 2.200 cuentas de cartera → semanas', con: 'Motor de reasignación aplicando reglas de negocio; delta explícito de qué cambia', despues: '18 minutos para reasignar 2.200 cuentas' },
  { antes: 'Sin scoring de riesgo consolidado por cliente', con: '4 millones de partidas históricas procesadas + situación actual', despues: 'Scoring de 16.000 clientes: 700 críticos, 7.000 alto, 120 medio, 7.000 bajo' },
  { antes: 'Calendario de vencimientos en la cabeza de dos personas', con: '174 partidas críticas (>USD 500K) enriquecidas con cliente en 13 semanas rolling', despues: 'Calendario ejecutivo por USD 54.7M gestionado en un solo dashboard' }
];

const CASO_QUOTES = [
  { text: '"Tardó 18 minutos. Todo el resto del tiempo que pasamos fue más de agarrar lo que pedimos."', author: 'Maria Cejas (Juliana), Analista de Créditos y Cobranzas' },
  { text: '"Es recontra interesante leer cómo razona por adentro, porque es como que ves lo que piensa."', author: 'Juliana' }
];

const HOW_STEPS = [
  { title: 'Conectá tus sistemas', icon: 'plugs-connected', body: 'SAP HANA, Excel, TXT export, Power BI y Salesforce. Sin migrar datos. Teramot los lee donde están.' },
  { title: 'La IA entiende tu cartera', icon: 'brain', body: '50+ agentes especializados analizan, limpian y modelan scoring, calendario y reasignación 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 CombustiblesHero = () => {
  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">Combustibles / Energía / Cobranzas B2B</span>
        </div>
        <h1 className="tm-ind-h1">Reasigná 2.200 cuentas de cartera en 18 minutos. No en semanas.</h1>
        <p className="tm-ind-sub">Conectá SAP HANA. Teramot procesa millones de partidas históricas, genera scoring de riesgo por cliente, arma el calendario de vencimientos críticos y aplica reglas de reasignación de cartera, sin equipo de datos ni consultoría.</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="combustibles" />
    </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 CombustiblesSources = () => (
  <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 HANA</span><span>Excel</span><span>TXT export</span><span>Power BI</span><span>Salesforce</span>
      </div>
    </div>
  </section>
);

const CombustiblesProblem = () => (
  <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 de C&C gestiona 14.000 clientes con partidas abiertas. Cada reasignación de cartera se hace a mano en Excel y tarda semanas. El scoring de riesgo no existe o se hace ad hoc. El calendario de vencimientos grandes vive en la cabeza de dos personas.</p>
        <p className="tm-ind-problem-body">Cuando un VP pide "gestión potenciada con IA", el equipo termina probando Copilot o volviendo a Excel. No es un problema de talento. Es que Power BI y SAP Analytics Cloud no ven tu política de negocio, solo grafican los datos que ya tenías.</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-users-three" /></span><div className="tm-ind-glass-label">14.000 clientes</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">Excel manual</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-target" /></span><div className="tm-ind-glass-label">Sin scoring de riesgo</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-calendar-blank" /></span><div className="tm-ind-glass-label">Calendario mental</div></div>
        </div>
        <div className="tm-ind-glass-footnote"><span>SIN CAPA DE INTEGRACIÓN</span></div>
      </div>
    </div>
  </section>
);

const CombustiblesFraming = () => (
  <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>
      <CombustiblesFramingIllustration />
    </div>
    <div className="tm-ind-framing-right">
      <p className="tm-ind-framing-lead">La inteligencia ya existe. El problema es que no procesa ni cruza:</p>
      <div className="tm-ind-framing-rows">
        <div className="tm-ind-framing-row"><i className="ph ph-stack" /><span>4 millones de partidas</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-arrows-left-right" /><span>hábito histórico con situación actual</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-rows" /><span>las reglas de asignación de cartera</span></div>
      </div>
    </div>
  </section>
);

const CombustiblesHowItWorks = () => (
  <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 CombustiblesCase = () => (
  <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">Reasignación de cartera + Scoring + Calendario de vencimientos</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">Semanas → 18 min</div>
          <div className="tm-ind-stat-desc">para reasignar 2.200 cuentas de cartera</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">16.000 clientes</div>
          <div className="tm-ind-stat-desc">con scoring de riesgo consolidado</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">USD 54.7M</div>
          <div className="tm-ind-stat-desc">en vencimientos críticos, un solo dashboard</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>
      {CASO_QUOTES.map((q, i) => (
        <blockquote key={i} 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' }}>{q.text}</p>
          <cite style={{ display: 'block', marginTop: 12, fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', fontStyle: 'normal', color: 'var(--muted)' }}>{q.author}</cite>
        </blockquote>
      ))}
    </div>
  </section>
);

const CombustiblesMoreCases = () => {
  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 CombustiblesAdopters = () => (
  <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">Petrolera grande · LATAM</span>
          <p className="tm-ind-adopter-body">14.000 clientes B2B, 4M partidas procesadas, scoring de 16K clientes. Cierre de PoC con 5 entregables ejecutivos.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Broker financiero + agro</span>
          <p className="tm-ind-adopter-body">Scoring de riesgo por cliente integrando situación crediticia + garantías + performance del vendedor.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Acopio + crédito comercial</span>
          <p className="tm-ind-adopter-body">Créditos operativos por vendedor con calificación integral.</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 HANA</span>
            <span className="tm-ind-pipeline-chip">Excel</span>
            <span className="tm-ind-pipeline-chip">TXT export</span>
            <span className="tm-ind-pipeline-chip">Power BI</span>
            <span className="tm-ind-pipeline-chip">Salesforce</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">Conectores</span>
            <span className="tm-ind-pipeline-chip">Modelado de partidas</span>
            <span className="tm-ind-pipeline-chip">Reglas de asignación</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">Scoring</span>
            <span className="tm-ind-pipeline-chip">Calendario</span>
            <span className="tm-ind-pipeline-chip">Reasignación</span>
            <span className="tm-ind-pipeline-chip">Alertas</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const CombustiblesObjections = () => {
  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 CombustiblesCta = () => {
  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 scoring de cartera 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 CombustiblesApp = () => {
  const rootRef = useRefInd(null);
  useScrollReveal(rootRef);
  return (
    <LangProvider>
      <NavBar current="combustibles" />
      <main ref={rootRef}>
        <CombustiblesHero />
        <IndProof />
        <CombustiblesSources />
        <CombustiblesProblem />
        <CombustiblesFraming />
        <CombustiblesHowItWorks />
        <CombustiblesCase />
        <CombustiblesMoreCases />
        <CombustiblesAdopters />
        <CombustiblesObjections />
        <IndAlternatives />
        <CombustiblesCta />
      </main>
      <Footer />
    </LangProvider>
  );
};

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