/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */
/* agro.jsx — Landing por industria: Agro / Corredoras / Acopio / Insumos.
   Template shared by the other five verticals — only copy/icons/casos change.
   Textos definitivos del cliente: no reescribir. */

const { useState: useStateAgro, useEffect: useEffectAgro, useRef: useRefAgro } = React;

/* ── Scroll reveal (mirrors the site-wide IntersectionObserver pattern) ── */

const useScrollReveal = (rootRef) => {
  useEffectAgro(() => {
    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 ────────────────────────────────────────────── */

const AgroFramingIllustration = () => (
  <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="Ficha de acopio con silo, surcos y un dato sin conectar">
      <defs>
        <filter id="agro-sfv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="24" stdDeviation="26" floodColor="#2A3BD4" floodOpacity="0.13" /></filter>
        <filter id="agro-stv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#2A3BD4" floodOpacity="0.07" /></filter>
        <linearGradient id="agro-surfv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FFFFFF" /><stop offset="1" stopColor="#F3F5FC" /></linearGradient>
        <linearGradient id="agro-periv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#EEF0FE" /><stop offset="1" stopColor="#E1E5FD" /></linearGradient>
        <clipPath id="agro-tilev"><rect x="14" y="18" width="340" height="164" rx="36" /></clipPath>
      </defs>
      <g className="tm-ind-anim-main">
        <g filter="url(#agro-sfv)"><rect x="14" y="18" width="340" height="164" rx="36" fill="url(#agro-surfv)" stroke="#E6E9F5" strokeWidth="2" /></g>
        <g clipPath="url(#agro-tilev)">
          <rect x="14" y="18" width="122" height="164" fill="url(#agro-periv)" />
          <g className="tm-ind-anim-node">
            <path d="M58 82 v36 a17 9 0 0 0 34 0 v-36" stroke="#5A6DF3" strokeWidth="2.5" strokeLinecap="round" />
            <ellipse cx="75" cy="82" rx="17" ry="9" fill="#FFFFFF" stroke="#5A6DF3" strokeWidth="2.5" />
            <path d="M58 95 h34" stroke="#C8CEF8" strokeWidth="2" />
            <circle cx="75" cy="108" r="4.5" fill="#253DE5" />
          </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(#agro-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="M350 106 v-9 m0 3 q-6 -1 -7 -7 q7 0 7 6 m0 1 q6 -1 7 -7 q-7 0 -7 6" stroke="#FFFFFF" strokeWidth="1.8" strokeLinecap="round" fill="none" />
        </g>
      </g>
    </svg>
  </div>
);

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

const AREAS = [
  { label: 'Riesgo', cases: [
    { icon: 'target', title: 'Scoring de riesgo integral por cliente', body: 'Deuda vencida + mora + garantías + situación crediticia consolidada en una fila por cliente.' },
    { icon: 'user-focus', title: 'Créditos por vendedor', body: 'Calificación, garantías y performance del vendedor que otorga el crédito.' },
    { icon: 'shield-check', title: 'Compliance de personas y cuentas', body: 'Lógica de "peor escenario" sobre maestro de relaciones cuenta-persona.' }
  ] },
  { label: 'Comercial', cases: [
    { icon: 'arrows-left-right', title: 'Cross-sell agro × MdC', body: 'Toneladas correteadas + comisiones de mercado de capitales en una vista por cliente.' },
    { icon: 'moon', title: 'Leads dormidos', body: 'Clientes con actividad declarada en un negocio que no operan en otro.' },
    { icon: 'trend-down', title: 'Fuga de margen por vendedor', body: 'Cuánto descuento se cede sobre precio de lista + notas de crédito, qué % de operaciones sale fuera de la lista vigente.' }
  ] },
  { label: 'Operaciones', cases: [
    { icon: 'stack', title: 'Compras por centro de costo', body: 'Gasto por granja/planta + historial de precios pagados por insumo.' },
    { icon: 'seal-check', title: 'Pedidos pendientes de autorización', body: 'Gate automático para pedidos que superan el umbral.' },
    { icon: 'calendar-blank', title: 'Calendario agronómico', body: 'Plantío/cosecha por cultura × safra combinando IoT + ensayos + CRM.' }
  ] }
];

const OBJECTIONS = [
  { q: '"Mis datos son muy sensibles."', a: 'Data warehouse dedicado, cifrado, controles SOC 2. Vos elegís qué se conecta y qué no. Los datos nunca salen de tu infraestructura de destino.' },
  { q: '"No tenemos equipo técnico."', a: 'No lo necesitás. Teramot conecta a tu sistema de operaciones, tu ERP y tus planillas: el modelado y los maestros los construye la plataforma. Vos preguntás en lenguaje natural.' },
  { q: '"Ya probamos IA y no sirvió."', a: 'Casi seguro probaron un modelo genérico sin acceso a tus datos. La diferencia con Teramot es que la IA opera sobre tus tablas modeladas, no sobre un chat genérico.' },
  { q: '"¿Cuánto sale?"', a: 'Empezás gratis. Escalás cuando el valor está probado. La lógica es la misma que SV Matesur usó para pasar de zero a 4 casos de uso productivos.' }
];

const CASO_ROWS = [
  { antes: 'Integración de datos entre sistemas que se estimaba en 2 años', con: 'Data warehouse centralizado + 4 casos de uso conectados (Sistemas, Créditos, Gestión, Comercial)', despues: 'Integración completa en meses, no en años' },
  { antes: 'Cross-selling entre acopio, insumos y crédito técnicamente inviable', con: 'Maestros únicos de cliente, contrato, agente y garantía; refresco diario', despues: 'Cross-selling operativo y scoring de riesgo activo por cliente' },
  { antes: 'Analista dedicado a consolidar planillas antes de cada análisis', con: 'Consultas en lenguaje natural sobre datos ya modelados', despues: 'Analista libera tiempo para negocio, no para consolidación' }
];

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

const AgroHero = () => {
  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">Agro / Corredoras / Acopio / Insumos</span>
        </div>
        <h1 className="tm-ind-h1">Unificá tu operación agro y financiera en una sola vista, no en cinco planillas.</h1>
        <p className="tm-ind-sub">Conectá tu sistema de operaciones, tu ERP, tu mesa de mercado de capitales y tus insumos. Teramot construye maestros únicos de cliente, contrato y posición y desbloquea cross-sell, scoring de riesgo y control de margen que hoy son técnicamente inviables.</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="agro" />
    </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 AgroProof = () => {
  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 AgroSources = () => (
  <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>SIOGranos</span><span>ERPs agropecuarios</span><span>CRM</span><span>Sistemas de acopio</span><span>Mesa de MdC</span><span>Planillas</span>
      </div>
    </div>
  </section>
);

const AgroProblem = () => (
  <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 operación vive en 4 o 5 sistemas que no se hablan: sistema de granos, mesa de MdC, ERP contable, planillas de cada vendedor. Cada análisis estratégico requiere trabajo manual previo. Iniciativas como cross-selling entre negocios o scoring de riesgo integral son técnicamente inviables por la falta de una capa de integración.</p>
        <p className="tm-ind-problem-body">No es un problema de talento. Es un problema de infraestructura de datos que nadie diseñó para operar con la velocidad y el volumen que exige tu negocio hoy.</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-grains" /></span><div className="tm-ind-glass-label">Sistema de granos</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-chart-line" /></span><div className="tm-ind-glass-label">Mesa de MdC</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-buildings" /></span><div className="tm-ind-glass-label">ERP contable</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">Planillas por vendedor</div></div>
        </div>
        <div className="tm-ind-glass-footnote"><span>SIN CAPA DE INTEGRACIÓN</span></div>
      </div>
    </div>
  </section>
);

const AgroFraming = () => (
  <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>
      <AgroFramingIllustration />
    </div>
    <div className="tm-ind-framing-right">
      <p className="tm-ind-framing-lead">La inteligencia ya existe. El problema es que no tiene acceso a lo que importa:</p>
      <div className="tm-ind-framing-rows">
        <div className="tm-ind-framing-row"><i className="ph ph-file-text" /><span>tus contratos</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-scales" /><span>tus toneladas correteadas</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-trend-up" /><span>tus posiciones abiertas de MdC</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-calendar-x" /><span>tus vencimientos de crédito comercial</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-lock-key" /><span>tus garantías por cliente</span></div>
      </div>
    </div>
  </section>
);

const HOW_STEPS = [
  { title: 'Conectá tus sistemas', icon: 'plugs-connected', body: 'Tu base de operaciones, SIO-Granos, ERP, planillas. Sin migrar datos. Teramot los lee donde están.' },
  { title: 'La IA entiende tu corredora', icon: 'brain', body: '50+ agentes especializados analizan, limpian y modelan tus datos de forma autónoma. Sin intervención técnica.' },
  { 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.' }
];

const AgroHowItWorks = () => (
  <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 AgroCase = () => (
  <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">Cross-sell agro × mercado de capitales</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">2 años → meses</div>
          <div className="tm-ind-stat-desc">integración completa</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">4 casos de uso</div>
          <div className="tm-ind-stat-desc">conectados: Sistemas, Créditos, Gestión, Comercial</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">1 fila por cliente</div>
          <div className="tm-ind-stat-desc">con contrato, agente y garantía</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>
    </div>
  </section>
);

const AgroMoreCases = () => {
  const [area, setArea] = useStateAgro(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 AgroAdopters = () => (
  <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">Corredora de granos + MdC</span>
          <p className="tm-ind-adopter-body">Cross-sell activo entre las dos mesas, scoring integral de personas y cuentas.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Acopio + agroinsumos + crédito</span>
          <p className="tm-ind-adopter-body">Integración que se estimaba en 2 años completada en meses; maestros únicos + 4 casos de uso.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Agroinsumos enterprise</span>
          <p className="tm-ind-adopter-body">Fuga de margen sobre Grandes Productores cuantificada por vendedor, firma y 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">SIOGranos</span>
            <span className="tm-ind-pipeline-chip">ERPs agropecuarios</span>
            <span className="tm-ind-pipeline-chip">CRM</span>
            <span className="tm-ind-pipeline-chip">Sistemas de acopio</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">Pipeline</span>
            <span className="tm-ind-pipeline-chip">Modelado agro</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">Modelos de cross-sell</span>
            <span className="tm-ind-pipeline-chip">Scoring de riesgo</span>
            <span className="tm-ind-pipeline-chip">Alertas</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const AgroObjections = () => {
  const [open, setOpen] = useStateAgro(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 AgroAlternatives = () => (
  <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 AgroCta = () => {
  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 análisis de cross-sell 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 AgroApp = () => {
  const rootRef = useRefAgro(null);
  useScrollReveal(rootRef);
  return (
    <LangProvider>
      <NavBar current="agro" />
      <main ref={rootRef}>
        <AgroHero />
        <AgroProof />
        <AgroSources />
        <AgroProblem />
        <AgroFraming />
        <AgroHowItWorks />
        <AgroCase />
        <AgroMoreCases />
        <AgroAdopters />
        <AgroObjections />
        <AgroAlternatives />
        <AgroCta />
      </main>
      <Footer />
    </LangProvider>
  );
};

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