/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* presupuesto-forecast.jsx — landing "Producto" para /presupuesto-forecast
   (redesign 2026-09, Sprint 3). Textos definitivos del handoff: no
   reescribir. Página en español únicamente (sin toggle EN) — mismo
   criterio que cierre-mensual.jsx/rentabilidad.jsx. Reusa product.css/
   hero-nav.css tal cual quedaron después del pase de consistencia con la
   home — no redeclarar nada de nav/botones/cards/animación acá. 

   Casos anonimizados (pedido del usuario, 2026-09-18): ningún caso
   citado en el sitio lleva nombre de persona ni de empresa cliente; se
   atribuyen por función y tamaño. Los originales quedan en git. */

const PROBLEM_CARDS = [
  { icon: 'ph-clock-countdown', title: 'El presupuesto se hace en septiembre y queda desactualizado en enero', body: 'Sin proceso de refresh, el número que se aprueba en el directorio pierde sentido antes de que arranque el año.' },
  { icon: 'ph-git-branch', title: 'Los escenarios viven en 40 tabs de Excel', body: 'Alguien probó qué pasa si el volumen cae 10%, pero esa versión se perdió. Nadie sabe cuál es la buena.' },
  { icon: 'ph-calendar-x', title: 'El rolling forecast es una promesa, no una práctica', body: 'Todos hablan de rolling forecast pero pocos lo tienen. Implica rearmar el modelo cada mes, y no hay equipo que aguante.' },
];

const HOW_CHECKLIST = [
  'Presupuesto base + forecast rolling automatizado',
  'Escenarios versionados con supuestos parametrizados',
  'Análisis de sensibilidad sobre las variables que importan',
  'Budget vs actual vs forecast, con drill-down al ERP',
  'Aprobaciones y comentarios por línea, con log de cambios',
];

const FAQ_ITEMS = [
  { q: '¿Reemplaza a Anaplan o Adaptive Planning?', a: 'En la mayoría de los casos sí. Teramot cubre presupuesto, escenarios, sensibilidad y forecast rolling con conectores a tu ERP, <b>sin el proyecto de implementación</b> que pide una herramienta enterprise.' },
  { q: '¿Puedo mantener mi modelo de presupuesto actual en Excel?', a: 'Sí. Teramot lo lee como fuente y lo usa de base: <b>seguís cargando donde cargás hoy</b> y el forecast se refresca sobre ese modelo.' },
  { q: '¿Cómo maneja escenarios múltiples?', a: 'Como <b>versiones del mismo modelo</b> con supuestos parametrizados. Cambiás el supuesto y el escenario se recalcula solo; cada versión queda guardada con su autor y su fecha.' },
  { q: '¿Sirve para presupuesto por centro de costo?', a: 'Sí. El presupuesto se arma con la misma estructura que usás en el ERP — entidad, centro de costo y cuenta — con <b>responsables y aprobaciones por línea</b>.' },
  { q: '¿Puedo hacer forecast de flujo de caja?', a: 'Sí. Además del P&amp;L proyectado podés forecastear cobranzas y pagos a partir de tus plazos reales, y compararlos contra el ejecutado.' },
];

const { useEffect: useEffectPF, useRef: useRefPF } = React;

/* Scroll reveal — mismo hook que cierre-mensual.jsx/rentabilidad.jsx/home.jsx. */
const useScrollReveal = (rootRef) => {
  useEffectPF(() => {
    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 PresupuestoHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="presupuesto-forecast" />
      <div className="tm-prod-hero-grid">
        <div className="tm-prod-hero-copy">
          <p className="tm-prod-hero-eyebrow">FP&amp;A · Planificación financiera · Presupuesto empresarial</p>
          <h1>Automatizá planificación financiera y FP&amp;A con IA: del presupuesto anual al <span>forecast rolling</span>.</h1>
          <p className="tm-prod-hero-sub">Escenarios, sensibilidad y consolidación con la data real de tu ERP — con trazabilidad completa.</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 presupuesto y forecast 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 }} /> Presupuesto &amp; Forecast</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-clipboard-text', label: 'Presupuesto base aprobado', status: 'Listo' },
                { icon: 'ph-git-branch', label: 'Escenarios versionados', status: '3 activos', neutral: true },
                { icon: 'ph-sliders-horizontal', label: 'Sensibilidad de volumen', status: 'Calculada' },
                { icon: 'ph-arrows-clockwise', label: 'Forecast rolling', status: 'Refrescado' },
              ].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 100px 0 4px' }}>
              <p style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#4B5563' }}>Cada desvío abre su drill-down al ERP</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' }}>Budget vs actual vs forecast</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ProblemaSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>El forecast honesto es el que nadie tiene tiempo de armar</h2>
      </div>
      <div className="tm-prod-cards">
        {PROBLEM_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 ComoFuncionaSection = () => (
  <section className="tm-prod-section tm-prod-section-wash">
    <div className="tm-container">
      <h2 style={{ maxWidth: 820, margin: '0 auto 48px', textAlign: 'center', fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536', textWrap: 'pretty' }}>El presupuesto se sostiene solo, escenario a escenario</h2>
      <div className="tm-prod-split">
        <div style={{ borderRadius: 12, overflow: 'hidden', background: '#fff', border: '1px solid rgba(11,15,20,.06)', boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '13px 18px', borderBottom: '1px solid #EEF0F4', background: '#FCFCFE' }}>
            <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF' }}>Forecast · Q3</p>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.18)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-check-circle" style={{ fontSize: 12 }} /> Rolling</span>
          </div>
          <div style={{ display: 'grid', gap: 6, padding: '16px 18px' }}>
            <div style={{ border: '1px solid #EEF0F4', borderRadius: 10, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-plugs-connected" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Base del modelo</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['Presupuesto aprobado', 'Actual del ERP', 'Supuestos'].map((t) => (
                  <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', fontSize: 11, fontWeight: 500, color: '#374151' }}><span style={{ width: 6, height: 6, borderRadius: 9999, background: '#7BC1AD' }} /> {t}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid #EEF0F4', borderRadius: 10, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <i className="ph ph-git-branch" style={{ fontSize: 14, color: '#253DE5' }} />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Escenarios</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>Versionados</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {[['Base', 'activo'], ['Volumen −10%', 'guardado'], ['Precio +5%', 'guardado']].map(([label, status]) => (
                  <div key={label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '7px 10px', borderRadius: 7, background: '#F7F8FD' }}>
                    <span style={{ fontSize: 11, fontWeight: 500, color: '#374151' }}>{label}</span>
                    <span style={{ fontSize: 10, color: '#6B7280' }}>{status}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid rgba(37,61,229,.18)', borderRadius: 10, padding: '13px 14px', background: '#F7F8FD' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-chart-line" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Budget vs actual vs forecast</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['Ingresos', false], ['Costos', false], ['Resultado proyectado', true]].map(([label, bold]) => (
                  <div key={label} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 14, padding: '8px 11px', background: '#fff' }}>
                    <span style={{ fontSize: 11, fontWeight: bold ? 600 : 500, color: bold ? '#0B0F14' : '#4B5563' }}>{label}</span>
                    <span style={{ fontSize: 11, fontWeight: bold ? 600 : 400, color: '#0B0F14' }}>—</span>
                    <i className="ph ph-git-commit" style={{ fontSize: 12, color: '#253DE5' }} />
                  </div>
                ))}
              </div>
              <p style={{ marginTop: 10, fontSize: 10.5, fontWeight: 500, color: '#6B7280' }}>Cada desvío abre su drill-down al ERP</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>Teramot arma el forecast rolling sobre tu presupuesto base y lo refresca automáticamente con la data real de cada cierre. Los escenarios no son 40 planillas: son versiones del mismo modelo con supuestos parametrizados. Compararás budget vs actual vs forecast con un click y ves de dónde viene cada desvío.</p>
          <div className="tm-prod-checklist">
            {HOW_CHECKLIST.map((t) => (
              <div className="tm-prod-checklist-item" key={t}><i className="ph-bold ph-check" />{t}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const TestimonioSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container" style={{ maxWidth: 820 }}>
      <article className="tm-prod-testi tm-prod-testi-before">
        <blockquote>&ldquo;Lo que a mí más me interesa hoy es tener modelos predictivos de proyecciones hacia adelante. La IA hoy donde más nos podría aportar es en la toma de decisiones dentro de las cosas que van a pasar en los próximos 12 meses.&rdquo;</blockquote>
        <div className="tm-prod-testi-sig">
          <span className="tm-prod-testi-avatar"><i className="ph ph-user" /></span>
          <span>Control de Gestión · <b>Mid-market</b></span>
        </div>
      </article>
    </div>
  </section>
);

const HeadOfPlanningSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div className="tm-prod-head" style={{ maxWidth: 900 }}>
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Para el Head of Planning</span>
        <h2 style={{ marginTop: 16 }}>Si venís de Anaplan, Adaptive Planning o Vena y el stack te queda grande</h2>
        <p>Foco LATAM: multi-entidad, multi-moneda, y conexión directa a la base de tu ERP con un usuario de solo lectura. Alternativa moderna para mid-market que no quiere pagar enterprise.</p>
      </div>
    </div>
  </section>
);

const FaqSection = () => {
  useJsonLd({
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: FAQ_ITEMS.map((item) => ({
      '@type': 'Question',
      name: item.q,
      acceptedAnswer: { '@type': 'Answer', text: item.a.replace(/<\/?b>/g, '') },
    })),
  });
  return (
    <section className="tm-prod-section tm-prod-section-white">
      <div className="tm-container">
        <div className="tm-prod-faq-grid">
          <aside className="tm-prod-faq-aside">
            <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Preguntas frecuentes</span>
            <h2>Preguntas frecuentes sobre <span>planificación financiera</span></h2>
          </aside>
          <div className="tm-prod-faq-list">
            {FAQ_ITEMS.map((item, i) => (
              <details className="tm-prod-faq-item" key={item.q} open={i === 0 ? true : undefined}>
                <summary>
                  <span className="tm-prod-faq-q">{item.q}</span>
                  <span className="tm-prod-faq-icon"><i className="ph-bold ph-plus" /></span>
                </summary>
                <p className="tm-prod-faq-a" dangerouslySetInnerHTML={{ __html: item.a }} />
              </details>
            ))}
          </div>
        </div>
      </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>Empezá a planificar con datos reales</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tu propio caso, no un demo genérico.</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 PresupuestoForecastApp = () => {
  const rootRef = useRefPF(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <PresupuestoHero />
      <ProblemaSection />
      <ComoFuncionaSection />
      <TestimonioSection />
      <HeadOfPlanningSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

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