/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer, CLIENT_LOGOS */
/* salud.jsx — Landing por industria: Medical Devices / Consumer Health.
   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: factura, return order y caso Salesforce sin conectar.
   La ilustración del hero fue reemplazada por HeroIndustria (hero-industria.jsx). ── */

const SaludFramingIllustration = () => (
  <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="Factura con return order y caso de Salesforce sin conectar">
      <defs>
        <filter id="sal-sfv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="24" stdDeviation="26" floodColor="#2A3BD4" floodOpacity="0.13" /></filter>
        <filter id="sal-stv" x="-60%" y="-60%" width="220%" height="220%"><feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#2A3BD4" floodOpacity="0.07" /></filter>
        <linearGradient id="sal-surfv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FFFFFF" /><stop offset="1" stopColor="#F3F5FC" /></linearGradient>
        <linearGradient id="sal-periv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#EEF0FE" /><stop offset="1" stopColor="#E1E5FD" /></linearGradient>
        <clipPath id="sal-tilev"><rect x="14" y="18" width="340" height="164" rx="36" /></clipPath>
      </defs>
      <g className="tm-ind-anim-main">
        <g filter="url(#sal-sfv)"><rect x="14" y="18" width="340" height="164" rx="36" fill="url(#sal-surfv)" stroke="#E6E9F5" strokeWidth="2" /></g>
        <g clipPath="url(#sal-tilev)">
          <rect x="14" y="18" width="122" height="164" fill="url(#sal-periv)" />
          <g className="tm-ind-anim-node">
            <path d="M50 100 h14 l7 -16 l11 32 l7 -16 h14" stroke="#5A6DF3" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
          </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(#sal-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: 'Comercial', cases: [
    { icon: 'trend-up', title: 'Return rate real por cliente y país', body: 'En valor y volumen.' },
    { icon: 'warning-diamond', title: 'Detección de clientes que sobredimensionan pedidos', body: 'Over-order con alta tasa de retorno.' },
    { icon: 'squares-four', title: 'Top ship-to y top productos', body: 'Por impacto en cash flow (costo alto + return rate alto).' }
  ] },
  { label: 'Finanzas', cases: [
    { icon: 'calendar-blank', title: 'Serie temporal de devoluciones', body: 'Por mes, día de la semana, motivo y material.' },
    { icon: 'trend-down', title: 'Impacto en cash flow por producto', body: 'Foco en los que mueven la aguja.' },
    { icon: 'rows', title: 'Distribución de causas de credit notes', body: 'Returns, refusals, otros: en valor y %.' }
  ] },
  { label: 'Operaciones', cases: [
    { icon: 'clock-countdown', title: 'SLA de casos de return en Salesforce', body: 'Vs. objetivo 45 días.' },
    { icon: 'target', title: 'Time offenders', body: 'Cuellos de botella por status.' },
    { icon: 'arrows-left-right', title: 'Trazabilidad línea a línea', body: 'Dado un invoice, qué orders / credit notes / return orders / OBDs / cancellations / PODs están relacionados.' }
  ] }
];

const OBJECTIONS = [
  { q: '"Nuestros datos están en SAP con lógica de matching muy customizada."', a: 'Es exactamente el escenario en el que Teramot brilla. Modelamos la lógica invoice + material sobre tus tablas (data_sales_order_invoice, data_sales_document_flow, data_sales_order_delivery) sin tocar SAP en producción.' },
  { q: '"Ya hicimos una PoC con IA y tuvo trabajo de ajuste de accuracy."', a: 'Casi seguro fue sin MCP y sin modelado sobre las tablas correctas. La accuracy sale de que la IA opera sobre datos modelados por vos, no sobre un archivo suelto.' },
  { q: '"El sponsor interno cambió, perdimos continuidad."', a: 'Es la razón principal por la que las PoCs se traban. Con Teramot el owner del dato es el negocio, no un individuo. Si cambia el sponsor, la infraestructura sigue.' },
  { q: '"Necesitamos que cualquier persona del equipo pueda consultar en lenguaje natural."', a: 'Es exactamente el paradigma. El equipo comercial pregunta directamente sobre tus tablas modeladas, sin depender del área técnica ni de un dashboard estático.' }
];

const CASO_ROWS = [
  { antes: '+5 fuentes SAP desintegradas: cada análisis requiere días de consolidación manual', con: 'Trazabilidad línea a línea de return orders contra factura original y credit memo (ZCRM)', despues: 'Una sola vista del ciclo completo: pedidos, devoluciones, notas de crédito, entregas' },
  { antes: 'Preguntas como "¿qué % está fuera de política?" no se responden con confiabilidad', con: 'Return rate real por cliente / país en valor y volumen; serie temporal por motivo', despues: 'Preguntas que tardaban días ahora en minutos' },
  { antes: 'Cuellos de botella del proceso de returns invisibles', con: 'SLA de casos SFDC vs. objetivo 45 días + tiempo por status para identificar bottlenecks', despues: 'Foco quirúrgico en dónde se atascan los casos' }
];

const HOW_STEPS = [
  { title: 'Conectá tus sistemas', icon: 'plugs-connected', body: 'SAP (invoice, document flow, sales order, delivery) y Salesforce. Sin migrar datos. Teramot los lee donde están.' },
  { title: 'La IA entiende tu ciclo de devoluciones', icon: 'brain', body: '50+ agentes especializados analizan, limpian y modelan trazabilidad, SLA y cash flow 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 SaludHero = () => {
  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">Medical Devices / Consumer Health</span>
        </div>
        <h1 className="tm-ind-h1">De +5 fuentes desintegradas a una sola vista del ciclo de devoluciones en 10 países.</h1>
        <p className="tm-ind-sub">Conectá SAP y Salesforce. Teramot construye trazabilidad línea-a-línea entre facturas, notas de crédito, órdenes de devolución y casos, para que tu equipo comercial responda "¿qué % de devoluciones está fuera de política?" en minutos, no en días.</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="medical-devices" />
    </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 SaludSources = () => (
  <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 invoice</span><span>Document flow</span><span>Sales order</span><span>Delivery</span><span>Salesforce (SFDC)</span>
      </div>
    </div>
  </section>
);

const SaludProblem = () => (
  <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 ciclo de devoluciones vive en +5 fuentes que no se hablan: facturas en SAP, notas de crédito en SAP, órdenes de devolución en SAP con lógica de matching por invoice + material, casos en Salesforce con SLA de 45 días, y planillas de motivos por país. Preguntas básicas como "¿qué clientes sobredimensionan pedidos?" o "¿cuál es la causa real de las notas de crédito?" tardan días en responderse y no siempre son confiables.</p>
        <p className="tm-ind-problem-body">No es un problema de talento. Es un problema de infraestructura: cada análisis requiere trabajo manual de consolidación que no escala a 10 países ni a decenas de plantas.</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-file-text" /></span><div className="tm-ind-glass-label">Facturas SAP</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-receipt" /></span><div className="tm-ind-glass-label">Notas de crédito</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-arrow-u-down-left" /></span><div className="tm-ind-glass-label">Órdenes de devolución</div></div>
          <div className="tm-ind-glass-card"><span className="tm-ind-glass-icon"><i className="ph ph-cloud" /></span><div className="tm-ind-glass-label">Casos Salesforce</div></div>
        </div>
        <div className="tm-ind-glass-footnote"><span>SIN CAPA DE INTEGRACIÓN</span></div>
      </div>
    </div>
  </section>
);

const SaludFraming = () => (
  <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>
      <SaludFramingIllustration />
    </div>
    <div className="tm-ind-framing-right">
      <p className="tm-ind-framing-lead">La inteligencia ya existe. El problema es que no cruza por sí sola:</p>
      <div className="tm-ind-framing-rows">
        <div className="tm-ind-framing-row"><i className="ph ph-file-text" /><span>factura</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-receipt" /><span>credit memo</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-arrow-u-down-left" /><span>return order</span></div>
        <div className="tm-ind-framing-row"><i className="ph ph-cloud" /><span>caso de Salesforce</span></div>
      </div>
    </div>
  </section>
);

const SaludHowItWorks = () => (
  <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 SaludCase = () => (
  <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">Trazabilidad de devoluciones LATAM</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">Días → minutos</div>
          <div className="tm-ind-stat-desc">en preguntas de return rate y política</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">+5 fuentes → 1 vista</div>
          <div className="tm-ind-stat-desc">SAP + Salesforce integrados</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">10 países</div>
          <div className="tm-ind-stat-desc">LATAM bajo la misma trazabilidad línea a línea</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 SaludMoreCases = () => {
  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 SaludAdopters = () => (
  <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">Multinacional consumer health</span>
          <p className="tm-ind-adopter-body">10 países LATAM, +5 fuentes SAP integradas, ciclo completo de devoluciones en una vista.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Medical devices LATAM</span>
          <p className="tm-ind-adopter-body">Análisis de return rate por país y política; trazabilidad completa factura → credit memo.</p>
        </div>
        <div className="tm-ind-adopter-card">
          <span className="tm-ind-adopter-label">Farma mayorista</span>
          <p className="tm-ind-adopter-body">Facturación por cliente/zona/provincia con ranking y evolución mensual.</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 invoice</span>
            <span className="tm-ind-pipeline-chip">Document flow</span>
            <span className="tm-ind-pipeline-chip">Sales order</span>
            <span className="tm-ind-pipeline-chip">Delivery</span>
            <span className="tm-ind-pipeline-chip">SFDC</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">Matching invoice+material</span>
            <span className="tm-ind-pipeline-chip">Modelado del ciclo de returns</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">Return rate</span>
            <span className="tm-ind-pipeline-chip">SLA</span>
            <span className="tm-ind-pipeline-chip">Bottlenecks</span>
            <span className="tm-ind-pipeline-chip">Cash flow impact</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const SaludObjections = () => {
  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 SaludCta = () => {
  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 return rate LATAM 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 SaludApp = () => {
  const rootRef = useRefInd(null);
  useScrollReveal(rootRef);
  return (
    <LangProvider>
      <NavBar current="salud" />
      <main ref={rootRef}>
        <SaludHero />
        <IndProof />
        <SaludSources />
        <SaludProblem />
        <SaludFraming />
        <SaludHowItWorks />
        <SaludCase />
        <SaludMoreCases />
        <SaludAdopters />
        <SaludObjections />
        <IndAlternatives />
        <SaludCta />
      </main>
      <Footer />
    </LangProvider>
  );
};

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