/* ===== Landing sections ===== */
const { useState } = React;
const { Phone, Icon } = window;
const L = () => window.__lang || "ru";
const FEAT_ICONS = ["cloudoff", "lock", "cube", "scan", "clock"];
const SCEN_SCREENS = ["folders", "packing", "card", "expiry"];

function StoreBadges({ soon = true }) {
  const note = window.pickStr(window.STR.storeNote),noteG = window.pickStr(window.STR.storeNoteG);
  const sn = window.pickStr(window.STR.soon);
  const apple = <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M16.365 1.43c0 1.14-.493 2.27-1.177 3.08-.744.9-1.99 1.57-2.987 1.57-.12 0-.23-.02-.3-.03-.01-.06-.04-.22-.04-.39 0-1.15.572-2.35 1.206-3.09.804-.94 2.142-1.64 3.248-1.68.03.13.04.28.04.54zm4.565 15.71c-.03.07-.463 1.58-1.518 3.12-.945 1.34-1.94 2.71-3.43 2.74-1.517.03-1.9-.87-3.63-.87-1.698 0-2.302.84-3.67.9-1.377.05-2.332-1.32-3.428-2.79-2.24-3.11-3.95-8.8-1.653-12.65 1.14-1.87 3.18-3.05 5.36-3.08 1.44-.03 2.79.98 3.67.98.85 0 2.5-1.21 4.21-1.03.72.03 2.73.29 4.02 2.18-3.11 1.79-2.6 5.28.5 6.42z" /></svg>;
  const play = <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M3.609 1.814L13.792 12 3.609 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .61-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.192 12l2.706-2.491zM5.864 2.658L16.802 8.99l-2.302 2.302-8.636-8.634z" /></svg>;
  return (
    <div className="stores">
      <a className="store" href="#" onClick={(e) => e.preventDefault()}>
        <span className="gico" style={{ color: "var(--bg)" }}>{apple}</span>
        <span><small>{note}</small><b>App Store</b></span>
        {soon && <span className="soon">{sn}</span>}
      </a>
      <a className="store" href="#" onClick={(e) => e.preventDefault()}>
        <span className="gico" style={{ color: "var(--bg)" }}>{play}</span>
        <span><small>{noteG}</small><b>Google Play</b></span>
        {soon && <span className="soon">{sn}</span>}
      </a>
    </div>);

}

function Hero({ t }) {
  const h1 = t("h1");
  const chips = L() === "ru" ? ["100% офлайн", "ru · en · es", "iOS 13+ · Android 5+"] :
  L() === "es" ? ["100% sin conexión", "ru · en · es", "iOS 13+ · Android 5+"] :
  ["100% offline", "ru · en · es", "iOS 13+ · Android 5+"];
  return (
    <section className="hero">
      <div className="dotfield dotbg"></div>
      <div className="wrap">
        <div className="hero-grid">
          <div className="reveal">
            <span className="kicker">{t("kicker")}</span>
            <h1 className="display">{h1[0]}<br />{h1[1]}</h1>
            <p className="lead">{t("hsub")}</p>
            <div className="hero-cta">
              <StoreBadges />
            </div>
            <div className="hero-meta">
              {chips.map((c, i) => <span key={i} className="chip"><span className="d"></span>{c}</span>)}
            </div>
          </div>
          <div className="hero-phone reveal"><Phone screen="folders" /></div>
        </div>
      </div>
    </section>);

}

function SectionHead({ kicker, title, sub, center }) {
  return (
    <div className="reveal" style={center ? { textAlign: "center" } : null}>
      <span className="kicker" style={center ? { justifyContent: "center" } : null}>{kicker}</span>
      <h2 className="display">{title}</h2>
      {sub && <p className="eyebrow-sub" style={center ? { margin: "10px auto 0", maxWidth: "50ch" } : null}>{sub}</p>}
    </div>);

}

function Scenarios({ t }) {
  const cases = window.pickStr(window.STR.cases);
  return (
    <section id="cases" className="section">
      <div className="wrap">
        <SectionHead kicker={t("s_cases")} title={t("s_casesH")} />
        <div className="scen" style={{ marginTop: 30 }}>
          {cases.map((c, i) =>
          <div key={i} className="scen-row reveal">
              <div className="scen-art"><Phone screen={SCEN_SCREENS[i]} w={250} /></div>
              <div className="scen-txt">
                <div className="scen-no">{String(i + 1).padStart(2, "0")} / 04</div>
                <h3>{c[0]}</h3>
                <p>{c[1]}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Features({ t }) {
  const feats = window.pickStr(window.STR.feat);
  return (
    <section id="features" className="section" style={{ background: "var(--bg2)" }}>
      <div className="wrap">
        <SectionHead kicker={t("s_feat")} title={t("s_feat")} sub={t("s_featSub")} />
        <div className="feat-grid">
          {feats.map((f, i) =>
          <div key={i} className="feat-card reveal">
              <span className="feat-no">{String(i + 1).padStart(2, "0")}</span>
              <div className="feat-ico"><Icon n={FEAT_ICONS[i]} s={24} /></div>
              <h4>{f[0]}</h4>
              <p>{f[1]}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function How({ t }) {
  const steps = window.pickStr(window.STR.steps);
  return (
    <section id="how" className="section">
      <div className="wrap">
        <SectionHead kicker={t("s_how")} title={t("s_how")} sub={t("s_howSub")} />
        <div className="steps">
          {steps.map((s, i) =>
          <div key={i} className="step reveal">
              <div className="col">
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                {i < steps.length - 1 && <div className="stem"></div>}
              </div>
              <div className="body">
                <h4>{s[0]}</h4>
                <p>{s[1]}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Privacy({ t }) {
  const priv = window.pickStr(window.STR.priv);
  return (
    <section id="privacy" className="section" style={{ background: "var(--bg2)" }}>
      <div className="wrap">
        <div className="privacy-card reveal">
          <div>
            <span className="kicker">{t("s_priv")}</span>
            <h2 className="display" style={{ fontSize: "clamp(28px,3.4vw,42px)" }}>{t("s_priv")}</h2>
            <ul className="priv-list">
              {priv.map((p, i) => <li key={i}><span className="tick">✓</span><span>{p}</span></li>)}
            </ul>
          </div>
          <div className="terminal">
            <div><span className="dim">$</span> cloud&nbsp;·········&nbsp;<span className="on">OFF</span></div>
            <div><span className="dim">$</span> storage&nbsp;·······&nbsp;LOCAL</div>
            <div><span className="dim">$</span> database&nbsp;······&nbsp;SQLITE</div>
            <div><span className="dim">$</span> backup&nbsp;········&nbsp;ENCRYPTED</div>
            <div><span className="dim">$</span> password&nbsp;······&nbsp;≥ 12</div>
          </div>
        </div>
      </div>
    </section>);

}

function FAQ({ t }) {
  const qs = window.pickStr(window.STR.faq),as = window.pickStr(window.STR.faqA);
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="wrap">
        <SectionHead kicker={t("s_faq")} title={t("s_faq")} sub={t("faqTitleSub")} />
        <div className="faq">
          {qs.map((q, i) =>
          <div key={i} className={"qa" + (open === i ? " open" : "")}>
              <button onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="qn"><span className="qi">{String(i + 1).padStart(2, "0")}</span>{q}</span>
                <span className="pm"></span>
              </button>
              <div className="ans"><p>{as[i]}</p></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function CtaBand({ t }) {
  return (
    <section className="section cta-band">
      <div className="wrap reveal" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }}>
        <h2 className="display">{window.brand()}<span style={{ color: "var(--accent)" }}>.</span></h2>
        <p className="eyebrow-sub" style={{ maxWidth: "40ch" }}>{window.pickStr(window.STR.footTagline)}</p>
        <StoreBadges />
      </div>
    </section>);

}

function SiteFooter({ t, onTerms, onNav, onPrivacy }) {
  const cols = t("footCols");const nav = t("nav");
  return (
    <footer className="site">
      <div className="wrap">
        <div className="top">
          <div className="fcol brandcol">
            <div className="brand" style={{ fontSize: 26 }}>{window.Logo ? <window.Logo /> : null}<span>{window.brand()}<span className="dot">.</span></span></div>
            <p>{window.pickStr(window.STR.footTagline)}</p>
          </div>
          <div className="fcol">
            <h5>{cols[0]}</h5>
            {nav.slice(0, 3).map((n, i) => <a key={i} href="#" onClick={(e) => {e.preventDefault();onNav(["features", "how", "cases"][i]);}}>{n}</a>)}
          </div>
          <div className="fcol">
            <h5>{cols[1]}</h5>
            <a href="#" onClick={(e) => {e.preventDefault();onNav("faq");}}>{t("s_faq")}</a>
            <a href="mailto:nmelnikdev@gmail.com">{t("contact")}</a>
          </div>
          <div className="fcol">
            <h5>{cols[2]}</h5>
            <a href="#" onClick={(e) => {e.preventDefault();onTerms();}}>{t("terms")}</a>
            <a href="#" onClick={(e) => {e.preventDefault();onPrivacy();}}>{t("privacy")}</a>
          </div>
        </div>
        <div className="bottom">
          <span>© 2026 {window.brand()} · {t("rights")}</span>
          <span>offline-first · ru · en · es</span>
        </div>
      </div>
    </footer>);

}

function Landing({ t, onTerms, onPrivacy, onNav }) {
  return (
    <React.Fragment>
      <Hero t={t} />
      <Scenarios t={t} />
      <Features t={t} />
      <How t={t} />
      <Privacy t={t} />
      <FAQ t={t} />
      <CtaBand t={t} />
      <SiteFooter t={t} onTerms={onTerms} onPrivacy={onPrivacy} onNav={onNav} />
    </React.Fragment>);

}

Object.assign(window, { StoreBadges, Landing, SiteFooter });