// ====================================================================
// OK-Suite — Section Components — Lime & Ink bento
// ====================================================================

const PLAY_STORE = {
  "ok-docs":  "https://play.google.com/store/apps/details?id=com.takeiteasy.oksuite.pdf",
  "ok-otp":   "https://play.google.com/store/apps/details?id=com.takeiteasy.oksuite.otp",
  "ok-rec":   "https://play.google.com/store/apps/details?id=com.takeiteasy.oksuite.rec",
  "ok-cards": "https://play.google.com/store/apps/details?id=com.takeiteasy.oksuite.cards",
};

const APP_ICON = {
  "ok-docs":  "icons/ok-docs-v3.png",
  "ok-otp":   "icons/ok-otp-v3.png",
  "ok-rec":   "icons/ok-rec-v3.png",
  "ok-cards": "icons/ok-cards-v4.png",
};

const APP_LABEL = { "ok-docs": "OK-Docs", "ok-otp": "OK-OTP", "ok-rec": "OK-REC", "ok-cards": "OK-Cards" };

// OK-Docs e OK-OTP sono pubbliche su Google Play. OK-REC ha sviluppo sospeso — non promossa sul sito per il momento.
// OK-Cards è in sviluppo attivo, non ancora pubblica: in beta, accesso su richiesta.
const APP_STATUS = {
  "ok-docs":  "public",
  "ok-otp":   "public",
  "ok-rec":   "beta",
  "ok-cards": "beta",
};

const STATUS_LABEL = {
  it: { public: "Pubblica", beta: "Beta" },
  en: { public: "Public", beta: "Beta" },
};

function StatusBadge({ state, lang }) {
  const label = (STATUS_LABEL[lang] || STATUS_LABEL.it)[state];
  return (
    <span className={"status-badge " + state}>
      <span className="dot" />{label}
    </span>
  );
}

function betaMailto(appLabel, lang) {
  const subject = lang === "it" ? `Richiesta accesso beta – ${appLabel}` : `Beta access request – ${appLabel}`;
  return `mailto:a.martella83@gmail.com?subject=${encodeURIComponent(subject)}`;
}

function Nav({ t, lang, setLang, current }) {
  // Sulla home ci sono più app pubbliche: un unico pulsante "scarica" sarebbe
  // ambiguo (a quale app porta?). Rimanda invece alla sezione con le app,
  // dove ogni card ha i propri pulsanti "Scopri di più"/"Download".
  const isHome = current === "home";
  const isBeta = !isHome && APP_STATUS[current] === "beta";
  const ctaHref = isHome ? "#ecosistema" : (isBeta ? betaMailto(APP_LABEL[current], lang) : (PLAY_STORE[current] || PLAY_STORE["ok-docs"]));
  const ctaLabel = isHome ? (lang === "it" ? "Scopri le app" : "Discover the apps") : (isBeta ? (lang === "it" ? "Richiedi accesso Beta" : "Request Beta access") : t.nav.cta);
  const ctaExternal = !isHome && !isBeta;
  return (
    <div className="nav">
      <div className="nav-inner">
        <a href="index.html" className="brand">
          <span className="brand-mark"><img src="icons/ok-suite-brand-v3.png" alt="OK-Suite" /></span>
          <span>OK-Suite</span>
        </a>
        <nav className="nav-links">
          {t.nav.links.map((l) => (
            <a key={l.id} href={l.href || ("#" + l.id)} className={current === l.id ? "is-active" : ""}>{l.label}</a>
          ))}
        </nav>
        <div className="row" style={{ gap: 10 }}>
          <button
            onClick={() => setLang(lang === "it" ? "en" : "it")}
            className="lang-toggle"
            aria-label="Toggle language"
          >
            {lang === "it" ? "IT · EN" : "EN · IT"}
          </button>
          <a href={ctaHref} className="nav-cta" target={ctaExternal ? "_blank" : undefined} rel={ctaExternal ? "noopener noreferrer" : undefined}>
            {ctaLabel} <span className="arr">↗</span>
          </a>
        </div>
      </div>
    </div>
  );
}

function Hero({ t }) {
  return (
    <section className="hero" id="top">
      <div className="shell">
        <div className="hero-top">
          <span className="eyebrow">{t.hero.eyebrow}</span>
          <div className="right">
            {t.hero.meta.map((m, i) => (
              <span key={i}>{m[0]} · <b>{m[1]}</b></span>
            ))}
          </div>
        </div>

        <h1 className="display">
          {t.hero.title_a} <em>{t.hero.title_b}</em><br/>{t.hero.title_c}
        </h1>

        <div className="hero-bottom">
          <div className="hero-card hero-lead-card">
            <p className="lead">{t.hero.lead}</p>
            <div className="pill-row" style={{ marginTop: "auto" }}>
              <span className="pill"><span className="d" /> {t.hero.meta[2][1]}</span>
              <span className="pill">No account · No tracking</span>
              <span className="pill">Android 13+</span>
            </div>
            <div className="hero-stats-grid">
              <div className="hero-stat lime">
                <div className="num">{t.hero.stats[0].num}</div>
                <div className="lbl">{t.hero.stats[0].lbl}</div>
              </div>
              <div className="hero-stat">
                <div className="num">{t.hero.stats[1].num}</div>
                <div className="lbl">{t.hero.stats[1].lbl}</div>
              </div>
              <div className="hero-stat ink">
                <div className="num">{t.hero.stats[2].num}</div>
                <div className="lbl">{t.hero.stats[2].lbl}</div>
              </div>
              <div className="hero-stat">
                <div className="num">{t.hero.stats[3].num}</div>
                <div className="lbl">{t.hero.stats[3].lbl}</div>
              </div>
            </div>
          </div>

          <div className="sig-card">
            <div>
              <div className="mono-label">Firma · biometrica · live</div>
            </div>
            <SignatureSVG />
            <div className="mono-label" style={{ color: "var(--accent)" }}>SHA-256 · sealed @ 09:41</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {doubled.map((m, i) => <span key={i} className="marquee-item">{m}</span>)}
      </div>
    </div>
  );
}

function AppsStrip({ t, lang }) {
  return (
    <section className="section-pad" id="ecosistema">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.apps.eyebrow}</span>
            <h2 className="headline" style={{ marginTop: 18 }}>
              {t.apps.title_a}<br/><em>{t.apps.title_b}</em>
            </h2>
          </div>
          <p className="lead">{t.apps.lead}</p>
        </div>

        <div className="apps-bento">
          <div className="app-card flagship">
            <div className="app-top-row">
              <div className="app-icon"><img src={APP_ICON["ok-docs"]} alt="OK-Docs" /></div>
              <div className="row" style={{ gap: 8 }}>
                <StatusBadge state="public" lang={lang} />
                <span className="app-version-tag">Flagship · v2.0.0</span>
              </div>
            </div>
            <h3 className="app-name">OK-<em>Docs</em></h3>
            <p className="app-desc">Scanner B2B, firma biometrica e Caveau cifrato. L'app che sostituisce stampante, scanner e cassettiera.</p>
            <div className="app-tags">
              <span className="app-tag">Scanner AI</span>
              <span className="app-tag">Firma grafometrica</span>
              <span className="app-tag">Caveau biometrico</span>
              <span className="app-tag">Ricerca universale</span>
            </div>
            <div className="app-card-actions">
              <a href="ok-docs.html" className="app-card-btn ghost">{t.apps.moreBtn}</a>
              <a href={PLAY_STORE["ok-docs"]} target="_blank" rel="noopener noreferrer" className="app-card-btn primary">{t.apps.downloadBtn} <span>↗</span></a>
            </div>
          </div>

          <div className="app-card lime">
            <div className="app-top-row">
              <div className="app-icon"><img src={APP_ICON["ok-otp"]} alt="OK-OTP" /></div>
              <div className="row" style={{ gap: 8 }}>
                <StatusBadge state="public" lang={lang} />
                <span className="app-version-tag">v2.3.1</span>
              </div>
            </div>
            <h3 className="app-name">OK-<em>OTP</em></h3>
            <p className="app-desc">Autenticatore 2FA offline. TOTP/HOTP, backup AES-256, gruppi per team.</p>
            <div className="app-tags">
              <span className="app-tag">TOTP/HOTP</span>
              <span className="app-tag">Backup cifrato</span>
              <span className="app-tag">Nascondi Token</span>
            </div>
            <div className="app-card-actions">
              <a href="ok-otp.html" className="app-card-btn ghost">{t.apps.moreBtn}</a>
              <a href={PLAY_STORE["ok-otp"]} target="_blank" rel="noopener noreferrer" className="app-card-btn primary">{t.apps.downloadBtn} <span>↗</span></a>
            </div>
          </div>

          <div className="app-card emerald">
            <div className="app-top-row">
              <div className="app-icon"><img src={APP_ICON["ok-cards"]} alt="OK-Cards" /></div>
              <div className="row" style={{ gap: 8 }}>
                <StatusBadge state="beta" lang={lang} />
                <span className="app-version-tag">{lang === "it" ? "Nuova" : "New"}</span>
              </div>
            </div>
            <h3 className="app-name">OK-<em>Cards</em></h3>
            <p className="app-desc">
              {lang === "it"
                ? "Fedeltà, gift card, coupon e abbonamenti in un unico wallet. Verifica automatica del codice, blocco biometrico per tessera."
                : "Loyalty, gift cards, coupons and memberships in one wallet. Automatic barcode check, per-card biometric lock."}
            </p>
            <div className="app-tags">
              <span className="app-tag">{lang === "it" ? "Verifica integrità" : "Integrity check"}</span>
              <span className="app-tag">{lang === "it" ? "Blocco biometrico" : "Biometric lock"}</span>
              <span className="app-tag">{lang === "it" ? "Nessun account" : "No account"}</span>
            </div>
            <div className="app-card-actions">
              <a href="ok-cards.html" className="app-card-btn ghost">{t.apps.moreBtn}</a>
              <a href={betaMailto(APP_LABEL["ok-cards"], lang)} className="app-card-btn primary">
                {lang === "it" ? "Richiedi accesso Beta" : "Request Beta access"}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DocsShowcase({ t }) {
  const [active, setActive] = React.useState("scanner");
  const current = t.docs.tabs.find((x) => x.key === active) || t.docs.tabs[0];
  return (
    <section className="section-pad" id="ok-docs" style={{ paddingTop: 0 }}>
      <div className="docs-show">
        <div className="docs-shell">
          <div className="section-head" style={{ marginBottom: 40 }}>
            <div>
              <span className="eyebrow">{t.docs.eyebrow}</span>
              <h2 className="headline" style={{ marginTop: 18 }}>
                {t.docs.title_a} <em>{t.docs.title_b}</em><br/>{t.docs.title_c}
              </h2>
            </div>
            <p className="lead">{t.docs.lead}</p>
          </div>

          <div className="docs-tabs" role="tablist">
            {t.docs.tabs.map((tab, i) => (
              <button
                key={tab.key}
                role="tab"
                aria-selected={active === tab.key}
                className={"docs-tab" + (active === tab.key ? " active" : "")}
                onClick={() => setActive(tab.key)}
              >
                <span className="num">0{i + 1}</span>{tab.tab}
              </button>
            ))}
          </div>

          <div className="docs-grid">
            <div>
              <h3 className="docs-feature-name">
                {current.name_a}<em>{current.name_b}</em>{current.name_c}
              </h3>
              <p className="docs-feature-desc">{current.desc}</p>
              <ul className="docs-bullets">
                {current.bullets.map((b, i) => <li key={i}><span>{b}</span></li>)}
              </ul>
            </div>
            <div className="phone-stage">
              <div className="phone">
                <div className="phone-screen">
                  <div className="phone-notch" />
                  {active === "scanner" && <ScannerView />}
                  {active === "sign" && <SignView />}
                  {active === "vault" && <VaultView />}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustGrid({ t }) {
  const skins = ["cream", "lime", "ink", "cream"];
  return (
    <section className="section-pad">
      <div className="shell">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.trust.eyebrow}</span>
            <h2 className="headline" style={{ marginTop: 18 }}>
              {t.trust.title_a}<em>{t.trust.title_b}</em>{t.trust.title_c}
            </h2>
          </div>
          <p className="lead">{t.trust.lead}</p>
        </div>

        <div className="trust-bento">
          {t.trust.cells.map((c, i) => (
            <div key={c.n} className={"trust-cell " + skins[i]}>
              <div className="trust-num">{c.n}</div>
              <h3 className="trust-h">{c.h}</h3>
              <p className="trust-p">{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DuoSection({ t }) {
  return (
    <section className="section-pad" style={{ paddingTop: 0 }}>
      <div className="shell">
        <div className="duo-bento">
          <div className="duo-cell" id="ok-otp">
            <span className="eyebrow">{t.otp.eyebrow}</span>
            <h2 className="duo-name">
              {t.otp.title_a}<em>{t.otp.title_b}</em>{t.otp.title_c}
            </h2>
            <p className="lead" style={{ fontSize: 17 }}>{t.otp.lead}</p>
            <OTPVisual />
            <ul className="docs-bullets" style={{ color: "var(--ink-2)" }}>
              {t.otp.bullets.map((b, i) => (
                <li key={i} style={{ color: "var(--ink-2)" }}><span>{b}</span></li>
              ))}
            </ul>
          </div>
          <div className="duo-cell coral" id="ok-rec">
            <span className="eyebrow">{t.rec.eyebrow}</span>
            <h2 className="duo-name">
              {t.rec.title_a}<em>{t.rec.title_b}</em>{t.rec.title_c}
            </h2>
            <p className="lead" style={{ fontSize: 17 }}>{t.rec.lead}</p>
            <RECVisual />
            <ul className="docs-bullets">
              {t.rec.bullets.map((b, i) => (
                <li key={i} style={{ color: "oklch(0.20 0.04 28)" }}><span>{b}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Privacy({ t }) {
  return (
    <section className="section-pad" id="privacy" style={{ paddingTop: 0 }}>
      <div className="shell">
        <div className="privacy-wrap">
          <div>
            <span className="eyebrow">{t.privacy.eyebrow}</span>
            <h2 className="display-priv">
              {t.privacy.title_a} <em>{t.privacy.title_b}</em>{t.privacy.title_c}
            </h2>
            <p className="lead">{t.privacy.lead}</p>
            <div style={{ marginTop: 24 }}>
              <a href="#privacy" className="privacy-cta">{t.privacy.cta} <span>↗</span></a>
            </div>
          </div>
          <div className="privacy-pillars">
            {t.privacy.pillars.map(([k, h, p], i) => (
              <div key={i} className="privacy-pillar">
                <span className="k">{k}</span>
                <div className="v">{h}<small>{p}</small></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div>
          <div className="brand" style={{ marginBottom: 14, color: "var(--paper)" }}>
            <span className="brand-mark"><img src="icons/ok-suite-brand-v3.png" alt="OK-Suite" /></span>
            <span>OK-Suite</span>
          </div>
          <p style={{ color: "oklch(0.85 0.012 258)", fontSize: 14, maxWidth: "36ch" }}>
            Suite operativa per professionisti B2B. Privacy-first, on-device, senza account.
          </p>
        </div>
        {t.footer.cols.map((c, i) => (
          <div key={i}>
            <h4>{c.h}</h4>
            <ul>{c.items.map((it, j) => <li key={j}><a href={it === "Privacy Policy" ? "#privacy" : "#"}>{it}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="footer-display">
        <span>{t.footer.tagline_a}<em>{t.footer.tagline_b}</em>{t.footer.tagline_c}</span>
        <span className="footer-meta">
          <span>{t.footer.meta}</span>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Marquee, AppsStrip, DocsShowcase, TrustGrid, DuoSection, Privacy, Footer });