// ====================================================================
// OK-Suite — Page templates (Home / Docs / OTP / REC / Privacy)
// ====================================================================

/* ---------- Shared building blocks ---------- */

function PageHero({ eyebrow, titleA, titleB, titleC, lead, kpis, lastUpdate, icon, statusBadge, variant = "default" }) {
  return (
    <section className={"page-hero " + variant}>
      <div className="shell">
        <div className="hero-top">
          <div className="row" style={{ gap: 12 }}>
            {icon && <img src={icon} alt="" className="page-hero-icon" />}
            <span className="eyebrow">{eyebrow}</span>
            {statusBadge}
          </div>
          {lastUpdate && <span className="mono-label">{lastUpdate}</span>}
        </div>
        <h1 className="display">
          {titleA} <em>{titleB}</em><br/>{titleC}
        </h1>
        <div className="page-hero-bottom">
          <p className="lead">{lead}</p>
          {kpis && (
            <div className="kpi-row">
              {kpis.map((k, i) => (
                <div key={i} className={"kpi " + (i === 0 ? "lime" : i === 2 ? "ink" : "")}>
                  <div className="num">{k.num}</div>
                  <div className="lbl">{k.lbl}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function FeatureBento({ eyebrow, titleA, titleB, titleC, items }) {
  const skins = ["", "lime", "ink", "", "ink", "lime", "", "lime"];
  return (
    <section className="section-pad feature-bento-section">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow">{eyebrow}</span>
            <h2 className="headline" style={{ marginTop: 18 }}>
              {titleA} <em>{titleB}</em>{titleC}
            </h2>
          </div>
        </div>
        <div className="feature-bento">
          {items.map((f, i) => (
            <div key={f.k} className={"feature-card " + skins[i % skins.length]}>
              <span className="feature-k">{f.k}</span>
              <h3 className="feature-h">{f.h}</h3>
              <p className="feature-p">{f.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTAStrip({ title, lead, btn, btn2, href = "#", href2 = null, btn3, href3 = null, accent = "lime" }) {
  return (
    <section className="section-pad" style={{ paddingTop: 0 }}>
      <div className="shell">
        <div className={"cta-strip " + accent}>
          <div>
            <h2 className="cta-title">{title}</h2>
            <p className="cta-lead">{lead}</p>
          </div>
          <div className="cta-actions">
            <a href={href} className="cta-btn primary" target="_blank" rel="noopener noreferrer">{btn} <span>↗</span></a>
            {btn2 && <a href={href2 || "#"} className="cta-btn ghost">{btn2}</a>}
            {btn3 && <a href={href3 || "#"} className="cta-btn ghost" target="_blank" rel="noopener noreferrer">{btn3} <span>↗</span></a>}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- HOME (Suite Hub) ---------- */
function HomePage({ t, lang }) {
  return (
    <>
      <Hero t={t} />
      <Marquee items={t.marquee} />
      <AppsStrip t={t} lang={lang} />
      <TrustGrid t={t} />
      <Privacy t={t} />
      <Footer t={t} />
    </>
  );
}

/* ---------- OK-Docs page ---------- */
function DocsPage({ t, lang }) {
  const p = window.PAGES[lang].docs;
  return (
    <>
      <PageHero eyebrow={p.heroEyebrow} titleA={p.heroTitleA} titleB={p.heroTitleB} titleC={p.heroTitleC} lead={p.heroLead} kpis={p.kpis}
        icon={APP_ICON["ok-docs"]} statusBadge={<StatusBadge state="public" lang={lang} />} />
      <DocsShowcase t={t} />
      <FeatureBento eyebrow={p.featuresEyebrow} titleA={p.featuresTitleA} titleB={p.featuresTitleB} titleC={p.featuresTitleC} items={p.features} />
      <CTAStrip title={p.ctaTitle} lead={p.ctaLead} btn={p.ctaBtn} btn2={p.ctaBtn2} href={PLAY_STORE["ok-docs"]} accent="lime" />
      <Footer t={t} />
    </>
  );
}

/* ---------- OK-OTP page ---------- */
function OtpPage({ t, lang }) {
  const p = window.PAGES[lang].otp;
  return (
    <>
      <PageHero eyebrow={p.heroEyebrow} titleA={p.heroTitleA} titleB={p.heroTitleB} titleC={p.heroTitleC} lead={p.heroLead} kpis={p.kpis}
        icon={APP_ICON["ok-otp"]} statusBadge={<StatusBadge state="public" lang={lang} />} />
      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="single-feature">
            <div>
              <span className="eyebrow">Demo · live</span>
              <h2 className="headline" style={{ marginTop: 18 }}>
                {t.otp.title_a}<em>{t.otp.title_b}</em>{t.otp.title_c}
              </h2>
              <p className="lead" style={{ marginTop: 22, fontSize: 18 }}>{t.otp.lead}</p>
              <ul className="docs-bullets" style={{ color: "var(--ink-2)", marginTop: 24 }}>
                {t.otp.bullets.map((b, i) => (
                  <li key={i} style={{ color: "var(--ink-2)" }}><span>{b}</span></li>
                ))}
              </ul>
            </div>
            <div><OTPVisual /></div>
          </div>
        </div>
      </section>
      <FeatureBento eyebrow={p.featuresEyebrow} titleA={p.featuresTitleA} titleB={p.featuresTitleB} titleC={p.featuresTitleC} items={p.features} />
      <CTAStrip title={p.ctaTitle} lead={p.ctaLead} btn={p.ctaBtn} href={PLAY_STORE["ok-otp"]} accent="lime" />
      <Footer t={t} />
    </>
  );
}

/* ---------- OK-REC page ---------- */
function RecPage({ t, lang }) {
  const p = window.PAGES[lang].rec;
  return (
    <>
      <PageHero eyebrow={p.heroEyebrow} titleA={p.heroTitleA} titleB={p.heroTitleB} titleC={p.heroTitleC} lead={p.heroLead} kpis={p.kpis}
        icon={APP_ICON["ok-rec"]} statusBadge={<StatusBadge state="beta" lang={lang} />} />
      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="single-feature coral-wrap">
            <div>
              <span className="eyebrow">Live · REC</span>
              <h2 className="headline" style={{ marginTop: 18 }}>
                {t.rec.title_a}<em>{t.rec.title_b}</em>{t.rec.title_c}
              </h2>
              <p className="lead" style={{ marginTop: 22, fontSize: 18 }}>{t.rec.lead}</p>
              <ul className="docs-bullets" style={{ marginTop: 24 }}>
                {t.rec.bullets.map((b, i) => (
                  <li key={i} style={{ color: "oklch(0.20 0.04 28)" }}><span>{b}</span></li>
                ))}
              </ul>
            </div>
            <div><RECVisual /></div>
          </div>
        </div>
      </section>
      <FeatureBento eyebrow={p.featuresEyebrow} titleA={p.featuresTitleA} titleB={p.featuresTitleB} titleC={p.featuresTitleC} items={p.features} />
      <CTAStrip title={p.ctaTitle} lead={p.ctaLead} btn={p.ctaBtn} btn2={p.ctaBtn2} href={betaMailto(APP_LABEL["ok-rec"], lang)} btn3={p.ctaBtn3} href3={PLAY_STORE["ok-rec"]} accent="coral" />
      <Footer t={t} />
    </>
  );
}

/* ---------- OK-Cards page ---------- */
function CardsPage({ t, lang }) {
  const p = window.PAGES[lang].cards;
  return (
    <>
      <PageHero eyebrow={p.heroEyebrow} titleA={p.heroTitleA} titleB={p.heroTitleB} titleC={p.heroTitleC} lead={p.heroLead} kpis={p.kpis}
        icon={APP_ICON["ok-cards"]} statusBadge={<StatusBadge state="beta" lang={lang} />} />
      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="single-feature emerald-wrap">
            <div>
              <span className="eyebrow">{lang === "it" ? "Live · Cards" : "Live · Cards"}</span>
              <h2 className="headline" style={{ marginTop: 18 }}>
                {t.cards.title_a}<em>{t.cards.title_b}</em>{t.cards.title_c}
              </h2>
              <p className="lead" style={{ marginTop: 22, fontSize: 18 }}>{t.cards.lead}</p>
              <ul className="docs-bullets" style={{ marginTop: 24 }}>
                {t.cards.bullets.map((b, i) => (
                  <li key={i} style={{ color: "#0B3D1F" }}><span>{b}</span></li>
                ))}
              </ul>
            </div>
            <div><CardsVisual /></div>
          </div>
        </div>
      </section>
      <FeatureBento eyebrow={p.featuresEyebrow} titleA={p.featuresTitleA} titleB={p.featuresTitleB} titleC={p.featuresTitleC} items={p.features} />
      <CTAStrip title={p.ctaTitle} lead={p.ctaLead} btn={p.ctaBtn} href={betaMailto(APP_LABEL["ok-cards"], lang)} btn3={p.ctaBtn3} href3={PLAY_STORE["ok-cards"]} accent="emerald" />
      <Footer t={t} />
    </>
  );
}

/* ---------- Privacy page ---------- */
function PrivacyPage({ t, lang }) {
  const p = window.PAGES[lang].privacy;
  return (
    <>
      <PageHero
        eyebrow={p.heroEyebrow}
        titleA={p.heroTitleA}
        titleB={p.heroTitleB}
        titleC={p.heroTitleC}
        lead={p.heroLead}
        lastUpdate={p.lastUpdate}
      />
      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="tldr-card">
            <span className="mono-label" style={{ color: "var(--ink-2)" }}>TL;DR</span>
            <h2 className="duo-name" style={{ marginTop: 8 }}>{p.tldrTitle}</h2>
            <p className="lead" style={{ marginTop: 16, color: "var(--ink-2)", maxWidth: "60ch" }}>{p.tldrText}</p>
          </div>
        </div>
      </section>
      <section className="section-pad" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="legal-sections">
            {p.sections.map((s, i) => (
              <article key={i} className="legal-section">
                <div className="legal-k">{s.k}</div>
                <h3 className="legal-h">{s.h}</h3>
                <p className="legal-p">{s.p}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <CTAStrip title={p.ctaTitle} lead={p.ctaLead} btn={p.ctaBtn} href="mailto:a.martella83@gmail.com" accent="lime" />
      <Footer t={t} />
    </>
  );
}

Object.assign(window, { HomePage, DocsPage, OtpPage, RecPage, CardsPage, PrivacyPage });