/* global React, COPY, SiteHeader, SiteFooter */
const { useState, useEffect, useMemo, useRef } = React;

/* ============================================================
   HERO — three variants exposed via Tweaks
   ============================================================ */
function HeroEditorial({ lang }) {
  const t = COPY[lang].hero;
  return (
    <section className="hero hero--editorial section-pad">
      <div className="hairlines" aria-hidden="true" />
      <div className="shell">
        <div className="hero-meta reveal reveal-1">
          <span className="eyebrow"><span className="dot" />{t.eyebrow}</span>
          <span className="mono muted">N° 001 / Home</span>
        </div>

        <h1 className="h-display reveal reveal-2" style={{ marginTop: "var(--gap-12)" }}>
          {t.kicker} <em>{t.kickerEm}</em> {t.kickerLast}
        </h1>

        <div className="hero-row reveal reveal-3">
          <p className="lead">{t.sub}</p>
          <div className="hero-cta">
            <a href="contact.html" className="btn btn--primary">
              {COPY[lang].cta.primary} <span className="arrow">→</span>
            </a>
            <a href="convive.html" className="btn btn--ghost">
              {COPY[lang].cta.secondary}
            </a>
          </div>
        </div>

        <div className="hero-stats reveal reveal-4">
          <div className="stat">
            <div className="stat-v">{t.stat1.v}</div>
            <div className="stat-l mono">{t.stat1.l}</div>
          </div>
          <div className="stat">
            <div className="stat-v">{t.stat2.v}</div>
            <div className="stat-l mono">{t.stat2.l}</div>
          </div>
          <div className="stat">
            <div className="stat-v">{t.stat3.v}</div>
            <div className="stat-l mono">{t.stat3.l}</div>
          </div>
          <div className="stat stat--meta">
            <div className="stat-l mono">{t.meta1}</div>
            <div className="stat-l mono">{t.meta2}</div>
          </div>
        </div>

        {/* Giant isotipo as background graphic */}
        <div className="hero-iso reveal reveal-5" aria-hidden="true">
          <img src="assets/isotipo-teal.svg" alt="" />
        </div>
      </div>
    </section>
  );
}

function HeroCinematic({ lang }) {
  const t = COPY[lang].hero;
  return (
    <section className="hero hero--cinematic section-pad">
      <div className="cinematic-bg" aria-hidden="true">
        <div className="cinematic-glow" />
        <img className="cinematic-iso" src="assets/isotipo-fondo-gradado.svg" alt="" />
      </div>
      <div className="shell" style={{ position: "relative", zIndex: 3 }}>
        <span className="eyebrow reveal reveal-1"><span className="dot" />{t.eyebrow}</span>
        <h1 className="h-display reveal reveal-2" style={{ marginTop: "var(--gap-8)", textAlign: "center", maxWidth: "18ch", margin: "var(--gap-8) auto 0" }}>
          {t.kicker} <em>{t.kickerEm}</em> {t.kickerLast}
        </h1>
        <p className="lead reveal reveal-3" style={{ textAlign: "center", margin: "var(--gap-8) auto 0" }}>{t.sub}</p>
        <div className="hero-cta reveal reveal-4" style={{ justifyContent: "center", marginTop: "var(--gap-8)" }}>
          <a href="contact.html" className="btn btn--primary">{COPY[lang].cta.primary} <span className="arrow">→</span></a>
          <a href="convive.html" className="btn btn--ghost">{COPY[lang].cta.secondary}</a>
        </div>
      </div>
    </section>
  );
}

function HeroBrutalist({ lang }) {
  const t = COPY[lang].hero;
  return (
    <section className="hero hero--brutalist">
      <div className="shell brutalist-grid">
        <div className="brutalist-cell brutalist-cell--main">
          <div className="brutalist-meta">
            <span className="mono">{t.eyebrow}</span>
            <span className="mono">N° 001 / 2026</span>
          </div>
          <h1 className="h-display" style={{ fontSize: "clamp(3rem, 9vw, 9rem)" }}>
            {t.kicker}<br/>
            <em>{t.kickerEm}</em><br/>
            {t.kickerLast}
          </h1>
        </div>
        <div className="brutalist-cell brutalist-cell--side">
          <p className="mono muted">{t.meta1}</p>
          <p className="mono muted">{t.meta2}</p>
          <p className="lead" style={{ marginTop: "var(--gap-6)" }}>{t.sub}</p>
          <div className="hero-cta" style={{ marginTop: "var(--gap-6)" }}>
            <a href="contact.html" className="btn btn--primary">{COPY[lang].cta.primary} <span className="arrow">→</span></a>
          </div>
        </div>
        <div className="brutalist-cell brutalist-cell--stats">
          <div className="brutalist-stat"><span className="mono">{t.stat1.l}</span><span className="brutalist-stat-v">{t.stat1.v}</span></div>
          <div className="brutalist-stat"><span className="mono">{t.stat2.l}</span><span className="brutalist-stat-v">{t.stat2.v}</span></div>
          <div className="brutalist-stat"><span className="mono">{t.stat3.l}</span><span className="brutalist-stat-v">{t.stat3.v}</span></div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   WHY — full-bleed editorial block
   ============================================================ */
function WhySection({ lang }) {
  const t = COPY[lang].why;
  return (
    <section id="why" className="section-pad why">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow index">{t.eyebrow}</span>
          <h2 className="h-section">{t.title}</h2>
        </div>
        <div className="why-grid">
          <p className="lead" style={{ maxWidth: "44ch" }}>{t.body}</p>
          <ul className="pillars">
            {t.pillars.map((p, i) => (
              <li key={i} className="pillar">
                <span className="mono pillar-n">P/0{i + 1}</span>
                <div>
                  <h3 className="h-card">{p.k}</h3>
                  <p className="body" style={{ margin: "6px 0 0" }}>{p.v}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES — 3 columns, dense
   ============================================================ */
function ServicesSection({ lang }) {
  const t = COPY[lang].services;
  return (
    <section id="services" className="section-pad services">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow index">{t.eyebrow}</span>
          <div>
            <h2 className="h-section">{t.title}</h2>
            <p className="lead" style={{ marginTop: "var(--gap-4)" }}>{t.sub}</p>
          </div>
        </div>
        <div className="services-grid">
          {t.items.map((s, i) => (
            <a key={i} className="service-card" href={`services.html#s${i + 1}`}>
              <h3 className="h-card service-t">{s.t}</h3>
              <p className="body service-body">{s.body}</p>
              <div className="service-tags">
                {s.tags.map((tag) => <span key={tag} className="chip">{tag}</span>)}
              </div>
              <span className="service-arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   METHOD — process timeline
   ============================================================ */
function MethodSection({ lang }) {
  const t = COPY[lang].method;
  return (
    <section className="section-pad method">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow index">{t.eyebrow}</span>
          <h2 className="h-section">{t.title}</h2>
        </div>
        <ol className="method-track">
          {t.steps.map((s, i) => (
            <li key={i} className="method-step">
              <div className="method-rail" aria-hidden="true">
                <span className="method-dot" />
                {i < t.steps.length - 1 && <span className="method-line" />}
              </div>
              <div>
                <span className="mono muted">{s.n}</span>
                <h3 className="h-card" style={{ marginTop: 4 }}>{s.t}</h3>
                <p className="body" style={{ marginTop: 6 }}>{s.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ============================================================
   CONVIVE CASE STUDY — feature block w/ phone mockup
   ============================================================ */
function ConviveSection({ lang }) {
  const t = COPY[lang].convive;
  return (
    <section className="section-pad convive">
      <div className="shell">
        <div className="convive-grid">
          <div className="convive-copy">
            <span className="eyebrow"><span className="dot" />{t.eyebrow}</span>
            <h2 className="h-section" style={{ marginTop: "var(--gap-4)" }}>
              {t.title}
              <span className="convive-tag">PRODUCTO PROPIO</span>
            </h2>
            <p className="lead" style={{ marginTop: "var(--gap-4)" }}>{t.sub}</p>
            <p className="body" style={{ marginTop: "var(--gap-4)", maxWidth: "52ch" }}>{t.body}</p>
            <ul className="convive-bullets">
              {t.bullets.map((b, i) => (
                <li key={i}>
                  <span className="bullet-mark mono">{String(i + 1).padStart(2, "0")}</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <div className="convive-stats">
              {t.stats.map((s, i) => (
                <div key={i} className="convive-stat">
                  <span className="convive-stat-v">{s.v}</span>
                  <span className="mono muted">{s.l}</span>
                </div>
              ))}
            </div>
            <a href="convive.html" className="btn btn--primary" style={{ marginTop: "var(--gap-8)" }}>
              {t.cta} <span className="arrow">→</span>
            </a>
          </div>

          <div className="convive-mock" aria-hidden="true">
            <PhoneMock lang={lang} />
          </div>
        </div>
      </div>
    </section>
  );
}

function PhoneMock({ lang }) {
  const lines = lang === "es"
    ? [
        { who: "vecino", text: "Hola, no hay agua en el 4°B desde anoche", time: "08:42" },
        { who: "ai",    text: "Hola, lamento el inconveniente. Registré el caso #2417. Estoy contactando a Aguas Bonaerenses para coordinar visita técnica.", time: "08:42" },
        { who: "ai",    text: "Confirmado: técnico llega entre 11:00–13:00. Te aviso cuando esté en el edificio.", time: "08:43" },
        { who: "vecino", text: "Perfecto, gracias 🙌", time: "08:44" },
      ]
    : [
        { who: "vecino", text: "Hi, no water on 4B since last night", time: "08:42" },
        { who: "ai",    text: "Hi — sorry about that. Logged as case #2417. Reaching out to the water vendor to schedule a visit.", time: "08:42" },
        { who: "ai",    text: "Confirmed: technician arriving 11:00–13:00. I'll notify you when they're on-site.", time: "08:43" },
        { who: "vecino", text: "Perfect, thanks 🙌", time: "08:44" },
      ];
  return (
    <div className="phone">
      <div className="phone-frame">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className="phone-bar">
            <div className="phone-back">‹</div>
            <div className="phone-contact">
              <div className="phone-avatar">C</div>
              <div>
                <div className="phone-name">Convive · Edificio Roca 1240</div>
                <div className="phone-status mono">en línea · 24/7</div>
              </div>
            </div>
          </div>
          <div className="phone-thread">
            {lines.map((m, i) => (
              <div key={i} className={`bubble bubble--${m.who}`}>
                <p>{m.text}</p>
                <span className="bubble-time mono">{m.time}</span>
              </div>
            ))}
            <div className="bubble bubble--ai bubble--typing">
              <span /><span /><span />
            </div>
          </div>
          <div className="phone-input">
            <span>Escribir mensaje…</span>
          </div>
        </div>
      </div>
      <div className="phone-label mono">→ WHATSAPP · CONVIVE.IA · v0.7</div>
    </div>
  );
}

/* ============================================================
   TEAM
   ============================================================ */
function TeamSection({ lang }) {
  const t = COPY[lang].team;
  return (
    <section className="section-pad team">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow index">{t.eyebrow}</span>
          <div>
            <h2 className="h-section">{t.title}</h2>
            <p className="lead" style={{ marginTop: "var(--gap-4)" }}>{t.sub}</p>
          </div>
        </div>
        <div className="team-grid">
          <div className="team-portrait" aria-label="Portrait placeholder">
            <div className="team-portrait-inner">
              <span className="mono">PORTRAIT · 4×5</span>
              <span className="mono muted">{t.bio.name}</span>
            </div>
          </div>
          <div className="team-bio">
            <h3 className="h-card" style={{ fontSize: "clamp(1.5rem, 2vw, 2rem)", letterSpacing: "-0.02em" }}>{t.bio.name}</h3>
            <span className="mono" style={{ color: "var(--accent)" }}>{t.bio.role}</span>
            <p className="body" style={{ marginTop: "var(--gap-4)", maxWidth: "48ch" }}>{t.bio.body}</p>
            <div className="team-creds">
              <span className="chip">CFA Lvl 1</span>
              <span className="chip">Big Four</span>
              <span className="chip">NIIF 9 / IFRS 9</span>
              <span className="chip">Banking</span>
            </div>
            <p className="body muted" style={{ marginTop: "var(--gap-8)" }}>{t.open}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BLOG TEASERS
   ============================================================ */
const POSTS = [
  {
    slug: "post-salud-niif9.html",
    cat: "NIIF 9",
    date: "2026-02-10",
    read: "18 min",
    title: { es: "Crisis de la salud y su impacto en NIIF 9", en: "Healthcare crisis and its impact on IFRS 9" },
    excerpt: {
      es: "Cómo la ruptura en la cadena de pagos del sector salud colombiano está impactando las provisiones de PCE en los laboratorios farmacéuticos.",
      en: "How the payment chain breakdown in Colombia's healthcare sector is impacting ECL provisions at pharmaceutical labs.",
    },
  },
  {
    slug: "post-niif9.html",
    cat: "NIIF 9",
    date: "2026-04-22",
    read: "9 min",
    title: { es: "Calibrar PCE sin caer en sobreajuste: cinco señales tempranas", en: "Calibrating ECL without overfitting: five early signals" },
    excerpt: {
      es: "Notas de campo sobre cómo detectamos modelos sobreentrenados durante la recalibración de un cliente del sector real.",
      en: "Field notes on detecting overfit models during recalibration for a real-sector client.",
    },
  },
  {
    slug: "post-convive.html",
    cat: "Producto",
    date: "2026-04-08",
    read: "6 min",
    title: { es: "Convive IA, 8 semanas: cómo validamos el MVP en WhatsApp", en: "Convive IA, 8 weeks in: how we validated the MVP on WhatsApp" },
    excerpt: {
      es: "Bitácora honesta del primer mes: qué funcionó, qué descartamos, y por qué un Google Sheet siguió siendo el backend correcto.",
      en: "Honest journal of month one: what worked, what we killed, and why a Google Sheet was the right backend.",
    },
  },
  {
    slug: "post-automation.html",
    cat: "Automatización",
    date: "2026-03-19",
    read: "11 min",
    title: { es: "Reemplazar Excel sin romperlo: la curva de adopción real", en: "Replacing Excel without breaking it: the real adoption curve" },
    excerpt: {
      es: "Tres meses migrando un proceso de provisiones manual a Python. Lo que aprendimos de los usuarios que se resisten.",
      en: "Three months migrating a manual provisions process to Python. What we learned from resistant users.",
    },
  },
];

function BlogTeasers({ lang }) {
  const t = COPY[lang].blog;
  return (
    <section className="section-pad blog-teasers">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow index">{t.eyebrow}</span>
          <div>
            <h2 className="h-section">{t.title}</h2>
            <p className="lead" style={{ marginTop: "var(--gap-4)" }}>{t.sub}</p>
          </div>
        </div>
        <div className="blog-teaser-grid">
          {POSTS.map((p, i) => (
            <a key={i} href={p.slug} className="blog-teaser">
              <div className="blog-teaser-meta">
                <span className="chip chip--accent">{p.cat}</span>
                <span className="mono muted">{p.date} · {p.read}</span>
              </div>
              <h3 className="h-card blog-teaser-title">{p.title[lang]}</h3>
              <p className="body" style={{ marginTop: "var(--gap-3)", color: "var(--fg-mute)" }}>{p.excerpt[lang]}</p>
              <span className="blog-teaser-cta mono">Read →</span>
            </a>
          ))}
        </div>
        <div style={{ marginTop: "var(--gap-12)", textAlign: "center" }}>
          <a href="blog.html" className="btn btn--ghost">{t.seeAll} <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CONTACT TEASER
   ============================================================ */
function ContactSection({ lang }) {
  const t = COPY[lang].contact;
  return (
    <section className="section-pad contact-teaser">
      <div className="shell">
        <span className="eyebrow"><span className="dot" />{t.eyebrow}</span>
        <h2 className="h-display" style={{ fontSize: "clamp(2rem, 5vw, 4.5rem)", marginTop: "var(--gap-6)", maxWidth: "20ch" }}>
          {t.title} <em>{t.titleEm}</em> {t.titleEnd}
        </h2>
        <div className="contact-row">
          <p className="lead">{t.sub}</p>
          <div className="contact-actions">
            <a href={`mailto:${t.email}`} className="contact-email">
              <span className="mono muted">→ Email</span>
              <span className="contact-email-v">{t.email}</span>
            </a>
            <a href="contact.html" className="btn btn--primary">{COPY[lang].cta.contact} <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  HeroEditorial, HeroCinematic, HeroBrutalist,
  WhySection, ServicesSection, MethodSection,
  ConviveSection, TeamSection, BlogTeasers, ContactSection,
  PhoneMock, POSTS,
});