/* about-page.jsx — /nosotros page composition.
   Aligned with platform-page / technology-page design language:
   - Hero: dark teal, single photo with diagonal clip-path
   - Sections use shared .sect / .sect-inner / .sect-head primitives
   - on-cream / on-dark-deep for backgrounds
   - .hl is color only (no background marker)

   Structure:
     1  Nav
     2  AboutHero (dark + single photo)
     3  StatsBar (cream strip, 4 metrics)
     4  BankingFocus (cream — copy + photo zigzag)
     5  TeamShowcase (dark-deep — copy + clean photo strip + quote)
     6  ValuesGrid (cream — 4 numbered cards)
     7  UruguayMap (cream — copy + LATAM map)
     8  Sustainability (cream — 3 SDG cards)
     9  Recognition (cream — partner logos + press)
     10 CTAFinal + Footer + OrbChat
*/

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

  /* ============================================================
     HERO — dark teal, copy left + single photo right (diagonal)
     ============================================================ */
  function AboutHero({ t }) {
    return (
      <section className="ab-hero">
        <div className="hero-bg" aria-hidden>
          <div className="hero-dots"></div>
        </div>
        <div className="ab-hero-inner">
          <div className="ab-hero-copy reveal r-up">
            <div className="ap-eyebrow-tag">{t.about.hero.eyebrow}</div>
            <h1 dangerouslySetInnerHTML={{ __html: t.about.hero.headline }} />
            <p className="ab-hero-sub">{t.about.hero.sub}</p>
            <div className="ab-hero-ctas">
              <a href="#demo" className="btn btn-primary">
                {t.about.hero.cta_primary} <IconArrowRight size={16} stroke={2.5} />
              </a>
              <a href="/platform.html" className="btn btn-ghost">
                <IconPlay size={12} /> {t.about.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="ab-hero-photo reveal r-up">
            <img src="/img/Delto-125.jpg" alt="Equipo Delto colaborando" />
          </div>

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

  /* ============================================================
     STATS BAR — playful tonal cards with animated CountUp numbers.
     Each card has its own accent (teal/lilac/lime/sand) so the strip
     reads as four punchy banking-credentials at a glance.
     ============================================================ */
  const STAT_ICONS = [IconBank, IconGlobe, IconUsers, IconSparkles];
  const STAT_TONES = ['teal', 'lilac', 'lime', 'sand'];

  function StatsBar({ t }) {
    return (
      <section className="ab-stats sect on-cream">
        <div className="sect-inner">
          <div className="ab-stats-grid reveal">
            {t.about.stats.map((s, i) => {
              const Ico = STAT_ICONS[i % STAT_ICONS.length];
              const tone = STAT_TONES[i % STAT_TONES.length];
              return (
                <div
                  key={i}
                  className={`ab-stat ab-stat-${tone}`}
                  style={{ animationDelay: `${i * .08}s` }}
                >
                  <div className="ab-stat-ico" aria-hidden>
                    <span className="ab-stat-ico-orb"></span>
                    <Ico size={22} stroke={2} />
                  </div>
                  <div className="ab-stat-tag">{s.tag}</div>
                  <div className="ab-stat-v">
                    {s.pre}
                    <CountUp value={s.n} duration={1400} />
                    {s.suf && <span className="ab-stat-suf">{s.suf}</span>}
                  </div>
                  <div className="ab-stat-l">{s.l}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     BANKING FOCUS — cream, copy + photo zigzag
     ============================================================ */
  function BankingFocus({ t }) {
    const d = t.about.banking;
    return (
      <section className="ab-banking sect on-cream">
        <div className="sect-inner ab-banking-inner">
          <div className="ab-banking-copy reveal">
            <div className="eyebrow">{d.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: d.title }} />
            <p className="sect-sub">{d.body}</p>
            <ul className="ab-banking-bullets">
              {d.bullets.map((b, i) => (
                <li key={i} style={{ animationDelay: `${.15 + i * .08}s` }}>
                  <span className="ab-banking-bullet-ic"><IconCheck size={14} stroke={3} /></span>
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <div className="ab-banking-photo reveal r-up">
            <img src="/img/Delto-75.jpg" alt="Equipo Delto en sesión de trabajo bancario" loading="lazy" />
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     TEAM — dark, centered copy + clean 4-photo strip + quote
     ============================================================ */
  const TEAM_PHOTOS = [
    '/img/Delto-83.jpg',
    '/img/Delto-89.jpg',
    '/img/Delto-104.jpg',
    '/img/Delto-110.jpg',
  ];

  function TeamShowcase({ t }) {
    const d = t.about.team;
    return (
      <section className="ab-team sect on-dark-deep">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow on-dark">{d.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: d.title }} />
            <p className="sect-sub on-dark-sub">{d.sub}</p>
          </div>

          <div className="ab-team-strip reveal">
            {TEAM_PHOTOS.map((src, i) => (
              <div
                key={src}
                className="ab-team-photo"
                style={{ animationDelay: `${i * .08}s` }}
              >
                <img src={src} alt="" loading="lazy" />
              </div>
            ))}
          </div>

          <div className="ab-team-quote reveal r-up">
            <div className="ab-team-quote-mark">"</div>
            <div className="ab-team-quote-text">{d.quote}</div>
            <div className="ab-team-quote-author">— {d.quote_author}</div>
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     VALUES — cream, 4 numbered cards (mimicking platform Autonomy)
     ============================================================ */
  const VALUE_ICONS = [IconBank, IconSparkles, IconUsers, IconShield];
  const VALUE_TONES = ['teal', 'lime', 'lilac', 'sand'];

  function ValuesGrid({ t }) {
    const d = t.about.values;
    return (
      <section className="ab-values sect on-cream">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{d.eyebrow}</div>
            <h2>{d.title}</h2>
          </div>
          <div className="ab-values-grid reveal">
            {d.items.map((v, i) => {
              const Ico = VALUE_ICONS[i % VALUE_ICONS.length];
              const tone = VALUE_TONES[i % VALUE_TONES.length];
              return (
                <div
                  key={i}
                  className={`ab-value ab-value-${tone}`}
                  style={{ animationDelay: `${i * .08}s` }}
                >
                  <div className="ab-value-num">{String(i + 1).padStart(2, '0')}</div>
                  <div className="ab-value-ico"><Ico size={22} stroke={2} /></div>
                  <div className="ab-value-t">{v.t}</div>
                  <div className="ab-value-d">{v.d}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     URUGUAY / LATAM — cream, copy + static globe PNG.
     ============================================================ */
  function UruguayMap({ t }) {
    const d = t.about.uruguay;
    return (
      <section className="ab-geo sect on-cream">
        <div className="sect-inner ab-geo-inner">
          <div className="ab-geo-copy reveal">
            <div className="eyebrow">{d.eyebrow}</div>
            <h2 dangerouslySetInnerHTML={{ __html: d.title }} />
            <p className="sect-sub">{d.body}</p>
          </div>

          <div className="ab-geo-map reveal r-up">
            <CobeGlobe />
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     SUSTAINABILITY — cream, 3 simple cards
     ============================================================ */
  function Sustainability({ t }) {
    const d = t.about.sustainability;
    return (
      <section className="ab-sus sect on-cream">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{d.eyebrow}</div>
            <h2>{d.title}</h2>
            <p className="sect-sub">{d.sub}</p>
          </div>
          <div className="ab-sus-grid reveal">
            {d.items.map((s, i) => (
              <div
                key={i}
                className={`ab-sus-card ab-sus-${s.color}`}
                style={{ animationDelay: `${i * .1}s` }}
              >
                <div className="ab-sus-head">
                  <div className="ab-sus-num">{s.sdg}</div>
                  <div className="ab-sus-tag">{s.num}</div>
                </div>
                <div className="ab-sus-t">{s.t}</div>
                <div className="ab-sus-d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     RECOGNITION — cream, partner logos + press
     ============================================================ */
  function Recognition({ t }) {
    const d = t.about.recognition;
    const press = [
      { name: 'La Prensa',       loc: 'Panamá',      quote: 'Delto, la fintech uruguaya que automatiza la atención bancaria en LATAM.' },
      { name: 'El País',         loc: 'Uruguay',     quote: 'Una de las startups tecnológicas más relevantes de la región según expertos.' },
      { name: 'El Diario de Hoy', loc: 'El Salvador', quote: 'Implementaciones que llevan la experiencia bancaria a un nuevo estándar.' },
    ];
    return (
      <section className="ab-rec sect on-cream">
        <div className="sect-inner">
          <div className="sect-head reveal">
            <div className="eyebrow">{d.eyebrow}</div>
            <h2>{d.title}</h2>
            <p className="sect-sub">{d.sub}</p>
          </div>

          <div className="ab-rec-row reveal">
            <div className="ab-rec-logo ab-rec-logo-ms">
              <img src="/img/69bb038edff91be56b3b560d_microsoft logo.svg" alt="Microsoft Partner" />
              <span className="ab-rec-logo-l">Microsoft Partner</span>
            </div>
            <div className="ab-rec-logo ab-rec-logo-meta">
              <img src="/img/69bb038e8a0406623c8a4fb5_meta logo.svg" alt="Meta Business Partner" />
              <span className="ab-rec-logo-l">Meta Business Partner</span>
            </div>
            <div className="ab-rec-logo ab-rec-logo-medal">
              <img src="/img/69c1577b05ed32e8991f15ce_SELLO_DORADO_150DPI 2.svg" alt="Fintech Americas Winner 2026" />
              <span className="ab-rec-logo-l">Fintech Americas 2026</span>
            </div>
            <div className="ab-rec-logo ab-rec-logo-gptw">
              <div className="ab-rec-gptw-svg" aria-hidden>
                <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="32" cy="32" r="30" fill="#01373d"/>
                  <path d="M16 30 L26 40 L48 22" stroke="#c0f43d" strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <span className="ab-rec-logo-l">Great Place to Work</span>
            </div>
          </div>

          <div className="ab-rec-press reveal">
            <div className="ab-rec-press-h">Delto en los medios</div>
            <div className="ab-rec-press-grid">
              {press.map((p, i) => (
                <article key={i} className="ab-rec-press-item" style={{ animationDelay: `${.1 + i * .08}s` }}>
                  <div className="ab-rec-press-quote">"{p.quote}"</div>
                  <div className="ab-rec-press-meta">
                    <span className="ab-rec-press-name">{p.name}</span>
                    <span className="ab-rec-press-dot" aria-hidden>·</span>
                    <span className="ab-rec-press-loc">{p.loc}</span>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ============================================================
     PAGE COMPOSITION
     ============================================================ */
  function AboutPage() {
    const { lang, setLang, t } = useLang();
    useReveal();
    return (
      <>
        <Nav lang={lang} setLang={setLang} t={t} />
        <main>
          <AboutHero t={t} />
          <StatsBar t={t} />
          <BankingFocus t={t} />
          <TeamShowcase t={t} />
          <ValuesGrid t={t} />
          <UruguayMap t={t} />
          <Sustainability t={t} />
          <Recognition t={t} />
          <CTAFinal t={t} />
        </main>
        <Footer t={t} />
        <OrbChat />
      </>
    );
  }

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