/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer */
/* soluciones/head-de-planning.jsx — landing "Soluciones" para
   /soluciones/head-de-planning (redesign 2026-09, Sprint 3). Textos
   definitivos del handoff: no reescribir, salvo el mismo desvío de
   compliance que en soluciones/cfo.jsx y soluciones/controller.jsx: la sección de
   Seguridad decía "SOC 2 Type II..." — se corrigió a la única redacción
   de compliance correcta sitewide (SOC 2 Type I certificado, Type II en
   curso), y el logo "soc2-type2.png" se reemplazó por el link de texto
   al trust center. Página en español únicamente (sin toggle EN) — mismo
   criterio que el resto de las páginas de Producto/Soluciones. Reusa
   product.css/hero-nav.css tal cual quedaron después del pase de
   consistencia con la home. */

const ESCUCHAMOS_CARDS = [
  { icon: 'ph-clock-countdown', title: '"Mi forecast siempre está desactualizado"', body: 'Porque depende del cierre — y el cierre siempre llega tarde. Teramot conecta el forecast a los actuales del ERP; se refresca cuando cierra el mes, no cuando alguien lo carga a mano.' },
  { icon: 'ph-scales', title: '"Anaplan me quedó chico o me quedó grande"', body: 'Chico si tenés modelos complejos; grande (y caro) si sos mid-market. Teramot cubre modelos de complejidad media con foco LATAM a fracción del costo.' },
  { icon: 'ph-git-branch', title: '"Los escenarios se me multiplican y no controlo cuál es el bueno"', body: 'Cada escenario es una versión versionada del modelo. Comparás side-by-side y sabés cuál es cuál.' },
];

const QUE_HACE_CARDS = [
  { icon: 'ph-arrows-clockwise', title: 'Forecast rolling automatizado', body: 'Menos tiempo consolidando, más tiempo respondiendo qué está pasando y qué hacer.' },
  { icon: 'ph-git-branch', title: 'Escenarios parametrizados', body: 'Supuestos versionados, comparables side-by-side.' },
  { icon: 'ph-sliders-horizontal', title: 'Análisis de sensibilidad', body: 'Sobre las variables que realmente mueven el resultado.' },
  { icon: 'ph-chart-bar', title: 'Budget vs actual vs forecast', body: 'Con drill-down hasta la línea del ERP.' },
  { icon: 'ph-check-square-offset', title: 'Aprobaciones por línea', body: 'Comentarios y log de cambios integrados.' },
  { icon: 'ph-buildings', title: 'Multi-entidad y multi-moneda', body: 'Nativo, no como extensión.' },
];

const DIA_A_DIA_LINKS = [
  { href: '/cierre-mensual.html', icon: 'ph-check-square-offset', title: 'Cierre contable mensual', body: 'Del cierre de dos semanas al número en dos minutos' },
  { href: '/presupuesto-forecast.html', icon: 'ph-chart-line-up', title: 'Presupuesto & Forecast', body: 'Escenarios sin romper el modelo' },
  { href: '/rentabilidad.html', icon: 'ph-coins', title: 'Rentabilidad', body: 'Margen real, tres ejes.' },
  { href: '/reportes-ad-hoc.html', icon: 'ph-chat-circle-text', title: 'Reportes Ad-hoc con IA', body: 'El número en la reunión.' },
];

const { useEffect: useEffectHOP, useRef: useRefHOP } = React;

/* Scroll reveal — mismo hook que el resto de las páginas de Producto. */
const useScrollReveal = (rootRef) => {
  useEffectHOP(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const root = rootRef.current;
    if (!root) return;
    const groups = [];
    root.querySelectorAll('section, footer').forEach((sec) => {
      const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec;
      const kids = Array.from(wrap.children).filter((el) => (
        el.nodeType === 1 && !el.classList.contains('tm-drawer') && !el.classList.contains('tm-drawer-overlay')
      ));
      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 -8% 0px', threshold: 0.08 });
    groups.forEach((kids) => kids.forEach((el, i) => {
      el.classList.add('rv');
      el.style.transitionDelay = Math.min(i, 4) * 70 + 'ms';
      io.observe(el);
    }));
    return () => io.disconnect();
  }, []);
};

const HeadOfPlanningHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="head-de-planning" />
      <div className="tm-prod-hero-grid">
        <div className="tm-prod-hero-copy">
          <p className="tm-prod-hero-eyebrow">Rolling forecast · Escenarios · Sensibilidad</p>
          <h1>Software FP&amp;A para Head of Planning: <span>forecast confiable</span> sin depender del cierre.</h1>
          <p className="tm-prod-hero-sub">Escenarios y sensibilidad con la data real de tu ERP, no con lo que se pudo cargar. Refresh automático con cada mes cerrado.</p>
          <div className="tm-prod-hero-actions">
            <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-white">Pedí tu demo <i className="ph ph-arrow-right" /></a>
            <a href={c.links.app} className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-ghost-light"><i className="ph ph-play-circle" style={{ fontSize: 21 }} /> Comenzá Gratis</a>
          </div>
        </div>
        <div className="tm-prod-hero-art">
          <div className="tm-prod-hero-art-glow" />
          <div className="tm-prod-hero-mockup" style={{ position: 'relative', zIndex: 1, width: '100%', background: 'rgba(255,255,255,.96)', border: '1px solid rgba(255,255,255,.55)', borderRadius: 16, padding: 18, boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }} role="img" aria-label="Panel de forecast rolling en Teramot">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 9999, background: '#253DE5', color: '#fff', fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap' }}><i className="ph-bold ph-chart-line-up" style={{ fontSize: 12 }} /> Forecast rolling</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: '#6B7280' }}>Q3 2026</span>
            </div>
            <div style={{ marginTop: 16, borderRadius: 10, background: '#fff', border: '1px solid #EEF0F4', overflow: 'hidden' }}>
              {[
                { icon: 'ph-git-branch', label: 'Escenario base', status: 'Vigente' },
                { icon: 'ph-sliders-horizontal', label: 'Sensibilidad de precio', status: 'Listo' },
                { icon: 'ph-chart-bar', label: 'Budget vs actual vs forecast', status: 'Actualizado' },
                { icon: 'ph-arrows-clockwise', label: 'Refresh con el cierre', status: 'Automático', neutral: true },
              ].map((row, i, arr) => (
                <div key={row.label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '14px 16px', borderBottom: i < arr.length - 1 ? '1px solid rgba(11,15,20,.05)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}><i className={`ph ${row.icon}`} style={{ fontSize: 15, color: '#253DE5', flex: 'none' }} /><span style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-.005em', color: '#0B0F14' }}>{row.label}</span></div>
                  {row.neutral ? (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', padding: '4px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', background: '#fff', fontSize: 10.5, fontWeight: 600, color: '#4B5563' }}>{row.status}</span>
                  ) : (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.22)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-check" style={{ fontSize: 11 }} /> {row.status}</span>
                  )}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: 80, padding: '18px 176px 0 4px' }}>
              <p style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#4B5563' }}>Cada supuesto queda versionado y comparable</p>
            </div>
          </div>
          <div style={{ position: 'absolute', right: -16, bottom: -24, zIndex: 2, width: 172, background: '#fff', border: '1px solid #E5E7EB', borderRadius: 11, boxShadow: '0 2px 4px rgba(11,15,20,.06), 0 1px 2px rgba(11,15,20,.04)', padding: '12px 13px' }}>
            <p style={{ fontSize: 8.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF' }}>Forecast · Q3</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9 }}>
              <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 9999, background: '#263185', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ph-bold ph-check" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Escenario base</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, paddingTop: 9, borderTop: '1px solid #EEF0F4' }}>
              <i className="ph ph-git-commit" style={{ color: '#253DE5', fontSize: 12, flex: 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 500, lineHeight: 1.35, color: '#4B5563' }}>Refresh con cada mes cerrado</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const EscuchamosSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Lo que escuchamos de los Head of Planning que ya usan Teramot</h2>
      </div>
      <div className="tm-prod-cards">
        {ESCUCHAMOS_CARDS.map((card) => (
          <article className="tm-prod-card" key={card.title}>
            <div className="tm-prod-card-icon"><i className={`ph ${card.icon}`} /></div>
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const QueHaceSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Qué hace Teramot en tu rol</h2>
      </div>
      <div className="tm-prod-cards">
        {QUE_HACE_CARDS.map((card) => (
          <article className="tm-prod-card" key={card.title}>
            <div className="tm-prod-card-icon"><i className={`ph ${card.icon}`} /></div>
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const DiaADiaSection = () => (
  <section className="tm-prod-section tm-prod-section-wash">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Cómo se ve Teramot en el día a día del Head of Planning</h2>
      </div>
      <div className="tm-prod-cards">
        {DIA_A_DIA_LINKS.map((item) => (
          <a className="tm-prod-card" href={item.href} key={item.title} style={{ display: 'block', textDecoration: 'none' }}>
            <div className="tm-prod-card-icon"><i className={`ph ${item.icon}`} /></div>
            <h3>{item.title}</h3>
            <p>{item.body}</p>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 16, fontSize: 12.5, fontWeight: 600, color: '#253DE5' }}>Ver más <i className="ph-bold ph-arrow-right" style={{ fontSize: 12 }} /></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const SeguridadSection = () => (
  <section className="tm-prod-section tm-prod-section-paper" style={{ textAlign: 'center' }}>
    <div className="tm-container" style={{ maxWidth: 820 }}>
      <h2 style={{ fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536', textWrap: 'pretty' }}>SOC 2 Type I certificado, permisos por rol, trazabilidad completa</h2>
      <p style={{ marginTop: 16, fontSize: 15.5, lineHeight: 1.6, color: '#4B5563' }}>Antes de que el CISO pregunte. <a href="/seguridad.html" style={{ fontWeight: 600 }}>Ver trust center <i className="ph-bold ph-arrow-right" style={{ fontSize: 12 }} /></a></p>
    </div>
  </section>
);

const CtaFinalSection = () => {
  const { c } = useLang();
  return (
    <section id="demo" className="tm-prod-cta">
      <div className="tm-prod-cta-inner">
        <p className="tm-prod-cta-kicker">Empezá ahora</p>
        <h2>Que el forecast deje de ser una promesa</h2>
        <p className="tm-prod-cta-sub">30 minutos con nuestro equipo, sobre tu propio caso.</p>
        <div className="tm-prod-cta-actions">
          <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-btn tm-btn-lg" style={{ background: '#fff', color: '#253DE5', borderColor: 'transparent', borderRadius: 9999, fontWeight: 600 }}>Pedí tu demo</a>
          <a href={c.links.app} className="tm-btn tm-btn-lg" style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.5)', borderRadius: 9999, fontWeight: 600 }}>Comenzá Gratis</a>
        </div>
        <p className="tm-prod-cta-fine">Sin proyecto de IT · Setup en semanas, no meses · Tus planillas siguen funcionando</p>
      </div>
    </section>
  );
};

const ParaHeadOfPlanningApp = () => {
  const rootRef = useRefHOP(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <HeadOfPlanningHero />
      <EscuchamosSection />
      <QueHaceSection />
      <DiaADiaSection />
      <SeguridadSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider defaultLang="es">
    <ParaHeadOfPlanningApp />
  </LangProvider>
);