/* platform-page.jsx — /platform page composition.
   Reuses Nav / Footer / CTAFinal / OrbChat from shell + sections.

   Structure:
     1  Nav
     2  Hero (copy left + Delto-75 photo with diagonal cut on right)
     3  LogoBar
     4  GenericVsBanking (shift-card pattern)
     5  SuiteZigzag (4 modules alternating image/text)
     6  TeamFocus (Delto-48 photo)
     8  Autonomy (6 pillars grid)
     9  BuiltForBanking (shared component)
     10 CTAFinal + Footer + OrbChat
*/

(function () {
  const { useState, useEffect, useRef } = React;

  /* ============================================================
     HERO — copy + diagonal-cut photo
     ============================================================ */
  function PlatformHero({ t }) {
    return (
      <section className="pp-hero">
        <div className="hero-bg" aria-hidden>
          <div className="hero-dots"></div>
        </div>
        <div className="pp-hero-inner">
          <div className="pp-hero-copy reveal r-up">
            <div className="ap-eyebrow-tag">{t.platform.hero.eyebrow}</div>
            <h1 dangerouslySetInnerHTML={{ __html: t.platform.hero.headline }} />
            <p className="pp-hero-sub">{t.platform.hero.sub}</p>
            <div className="pp-hero-ctas">
              <a href="#demo" className="btn btn-primary">
                {t.platform.hero.cta_primary} <IconArrowRight size={16} stroke={2.5} />
              </a>
              <a href="#suite" className="btn btn-ghost">
                <IconPlay size={12} /> {t.platform.hero.cta_secondary}
              </a>
            </div>
            <div className="hero-badges">
              <div className="hero-badges-row">
                <img className="hero-badge-logo" src="/img/69bb038edff91be56b3b560d_microsoft logo.svg" alt="Microsoft Partner" />
                <img className="hero-badge-logo" src="/img/69bb038e8a0406623c8a4fb5_meta logo.svg" alt="Meta Business Partner" />
                <img className="hero-badge-logo hero-badge-medal" src="/img/69c1577b05ed32e8991f15ce_SELLO_DORADO_150DPI 2.svg" alt="Fintech Americas Winner 2026" />
              </div>
            </div>
          </div>

          <div className="pp-hero-photo reveal r-up">
            <img src="/img/Delto-89.jpg" alt="Equipo Delto en banca conversacional" />
          </div>

          <div className="ha-scrollhint" aria-hidden>
            <span>scroll</span>
            <span className="ha-scrollhint-line"></span>
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     SECTION 4 — Generic vs banking-native (shift comparison)
     ============================================================ */
  function GenericVsBanking({ t }) {
    const data = t.platform.shift;
    return (
      <section className="ap-shift pp-shift sect on-cream">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{data.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: data.title }} />
            <p className="sect-sub">{data.sub}</p>
          </div>
          <div className="ap-shift-grid reveal">
            <div className="ap-shift-col ap-shift-old">
              <div className="ap-shift-label">
                <span className="ap-shift-x"><IconX size={12} stroke={3} /></span>
                {data.old.label}
              </div>
              <ul className="ap-shift-list">
                {data.old.items.map((it, i) => <li key={i}>{it}</li>)}
              </ul>
            </div>
            <div className="ap-shift-arrow" aria-hidden>
              <span className="ap-shift-arrow-line"></span>
              <span className="ap-shift-arrow-tip"><IconArrowRight size={20} stroke={2.5} /></span>
            </div>
            <div className="ap-shift-col ap-shift-new">
              <div className="ap-shift-label ap-shift-label-new">
                <span className="ap-shift-check"><IconCheck size={12} stroke={3} /></span>
                {data.new.label}
              </div>
              <ul className="ap-shift-list ap-shift-list-new">
                {data.new.items.map((it, i) => <li key={i}>{it}</li>)}
              </ul>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     SECTION 5 — Suite zigzag — 4 modules alternating image/text.
     Each func chip is clickable and swaps the module's screenshot.
     ============================================================ */
  const SUITE_MODULES = [
    {
      key: 'studio', name: 'Studio',
      tagline: 'Bot builder visual',
      desc: 'Construí, versioná y testeá agentes bancarios sin escribir código. Skills pre-entrenadas, deploy multi-canal y experimentos A/B integrados.',
      funcs: [
        { ico: '◆', n: 'Skill Builder',    d: 'Visual flow builder con hooks y variables', img: '/assets/images/deck/studio-skill-builder.png' },
        { ico: '▲', n: 'Deployments',      d: 'Versionado git-like + rollback instantáneo', img: '/assets/images/deck/studio-deployments.png' },
        { ico: '⇌', n: 'A/B Testing',      d: 'Experimentos con métricas en vivo',         img: '/assets/images/deck/studio-ab-testing.png' },
        { ico: '⌂', n: 'Knowledge Center', d: 'RAG sobre tus políticas internas',          img: '/assets/images/deck/studio-knowledge.png' },
      ],
    },
    {
      key: 'analytics', name: 'Analytics',
      tagline: 'Dashboards en tiempo real',
      desc: 'Operación visible al minuto. KPIs por skill, token tracking, perfil 360° del cliente y consultas en lenguaje natural sobre tus datos.',
      funcs: [
        { ico: '▣', n: 'Dashboard',      d: 'KPIs en tiempo real + token tracking',                img: '/assets/images/deck/analytics-dashboard.png' },
        { ico: '✦', n: 'Chat with Data', d: '"Mostrame el churn del mes" en lenguaje natural',     img: '/assets/images/deck/analytics-chat-with-data.png' },
        { ico: '☰', n: 'Report Builder', d: 'Reportes custom con export a Excel/PDF',              img: '/assets/images/deck/analytics-reports.png' },
        { ico: '◉', n: 'User Profile',   d: 'Perfil 360° del cliente con historial completo',       img: '/assets/images/deck/analytics-user-profile.png' },
      ],
    },
    {
      key: 'engage', name: 'Engage',
      tagline: 'Campañas conversacionales',
      desc: 'Motor de campañas WhatsApp con audiencias segmentadas, templates aprobados, scheduling y analytics por nodo. Para ventas, cobranzas, retención y onboarding.',
      funcs: [
        { ico: '+', n: 'Crear Campaña', d: 'Ventas · cobranzas · retención · onboarding',  img: '/assets/images/deck/engage-campaigns.png' },
        { ico: '▤', n: 'Templates',     d: 'Multi-idioma con aprobación integrada',         img: '/assets/images/deck/engage-templates.png' },
        { ico: '◈', n: 'Results',       d: 'Delivery · open-rate · conversión por nodo',    img: '/assets/images/deck/engage-results.png' },
        { ico: '▶', n: 'Playbooks',     d: 'Secuencias automatizadas reutilizables',        img: '/assets/images/deck/engage-playbooks.png' },
      ],
    },
    {
      key: 'pulse', name: 'Pulse',
      tagline: 'NPS / CSAT in-chat',
      desc: 'Encuestas dentro del chat — sin redirigir al cliente a un formulario externo. Insights con IA y alertas de detractores en vivo.',
      funcs: [
        { ico: '▣', n: 'Dashboard',      d: 'NPS · CSAT · CES en tiempo real',         img: '/assets/images/deck/pulse-insights.png' },
        { ico: '+', n: 'Crear Encuesta', d: 'NPS · CSAT · CES · custom multi-step',    img: '/assets/images/deck/pulse-create.png' },
        { ico: '✦', n: 'AI Insights',    d: 'Análisis automático de comentarios',      img: '/assets/images/deck/pulse-ai-insights.png' },
        { ico: '⚠', n: 'Alertas',        d: 'Detractores en vivo → acción inmediata',  img: '/assets/images/deck/pulse-alerts.png' },
      ],
    },
  ];

  function SuiteModule({ m, index, intro }) {
    const reversed = index % 2 === 1;
    const dark = index % 2 === 1;
    const [active, setActive] = useState(0);
    const f = m.funcs[active];

    return (
      <section
        className={`pp-mod sect ${dark ? 'on-dark-deep' : 'on-cream'} ${reversed ? 'pp-mod-reversed' : ''} ${intro ? 'pp-mod-with-intro' : ''}`}
        id={index === 0 ? 'suite' : undefined}
      >
        <div className="sect-inner">
          {intro && (
            <div className="sect-head reveal">
              <div className="eyebrow">{intro.eyebrow}</div>
              <h2 dangerouslySetInnerHTML={{ __html: intro.title }} />
              <p className="sect-sub">{intro.sub}</p>
            </div>
          )}
          <div className="pp-mod-grid reveal">
            <div className="pp-mod-img-wrap">
              <div className="pp-mod-img-frame">
                <img
                  key={f.img}    /* re-mount on src change so the fade animation replays */
                  src={f.img}
                  alt={`${m.name} — ${f.n}`}
                  loading="lazy"
                />
              </div>
            </div>
            <div className="pp-mod-copy">
              <div className={`eyebrow ${dark ? 'on-dark' : ''}`}>{`Módulo · ${m.name}`}</div>
              <h2>
                {m.name} — <span className="hl">{m.tagline.toLowerCase()}</span>.
              </h2>
              <p className={`sect-sub ${dark ? 'on-dark-sub' : ''}`}>{m.desc}</p>
              <div className="pp-mod-funcs">
                {m.funcs.map((fn, j) => (
                  <button
                    key={j}
                    type="button"
                    className={`pp-mod-func ${active === j ? 'active' : ''}`}
                    onClick={() => setActive(j)}
                    aria-pressed={active === j}
                  >
                    <span className="pp-mod-func-ico" aria-hidden>{fn.ico}</span>
                    <div className="pp-mod-func-body">
                      <div className="pp-mod-func-n">{fn.n}</div>
                      <div className="pp-mod-func-d">{fn.d}</div>
                    </div>
                    <span className="pp-mod-func-mark" aria-hidden>
                      {active === j ? '●' : '○'}
                    </span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function SuiteZigzag({ t }) {
    return (
      <>
        {SUITE_MODULES.map((m, i) => (
          <SuiteModule
            key={m.key}
            m={m}
            index={i}
            intro={i === 0 ? t.platform.suite : null}
          />
        ))}
      </>
    );
  }


  /* ============================================================
     SECTION 7 — Equipo enfocado en banca (with Delto-48)
     ============================================================ */
  function TeamFocus({ t }) {
    const data = t.platform.team;
    return (
      <section className="pp-team sect on-dark-deep">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow on-dark">{data.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: data.title }} />
            <p className="sect-sub on-dark-sub">{data.sub}</p>
          </div>
          <div className="pp-team-grid reveal">
            <div className="pp-team-card">
              <div className="pp-team-card-eyebrow">{data.card.eyebrow}</div>
              <h3 className="pp-team-card-t">{data.card.title}</h3>
              <ul className="pp-team-list">
                {data.card.items.map((it, i) => (
                  <li key={i}>
                    <span className="pp-team-li-icon"><IconCheck size={12} stroke={3} /></span>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
            <div className="pp-team-photo">
              <img src="/img/Delto-48.jpg" alt="Equipo Delto enfocado en banca" loading="lazy" />
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     SECTION 8 — Autonomía real (6 pillars grid)
     ============================================================ */
  function Autonomy({ t }) {
    const data = t.platform.autonomy;
    return (
      <section className="pp-auto sect on-cream">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{data.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: data.title }} />
            <p className="sect-sub">{data.sub}</p>
          </div>
          <div className="pp-auto-grid reveal">
            {data.pillars.map((p, i) => (
              <div key={i} className="pp-auto-card">
                <div className="pp-auto-card-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="pp-auto-card-t">{p.t}</div>
                <div className="pp-auto-card-d">{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     SECTION 9 — Built for banking (reuses Partners from sections.jsx)
     ============================================================ */
  function PlatformBuiltForBanking({ t }) {
    return <Partners t={t} />;
  }

  /* ============================================================
     PAGE COMPOSITION
     ============================================================ */
  function PlatformPage() {
    const { lang, setLang, t } = useLang();
    useReveal();

    return (
      <>
        <Nav lang={lang} setLang={setLang} t={t} />
        <PlatformHero t={t} />
        <LogoBar />
        <GenericVsBanking t={t} />
        <SuiteZigzag t={t} />
        <TeamFocus t={t} />
        <Autonomy t={t} />
        <PlatformBuiltForBanking t={t} />
        <CTAFinal t={t} />
        <Footer t={t} />
        <OrbChat />
      </>
    );
  }

  Object.assign(window, { PlatformPage });
})();