// MostlyPrivacy — Marketing landing (screen A). Live, localized previews.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, Badge, Card, CardBody } = F;
const { Icon, ICONS, PrivacyMark, MTMark, Wordmark, LangSwitch, CookieWidget, PolicyDoc, TermsDoc } = window.MP;

function Nav({ nav }) {
  return (
    <header className="mp-nav">
      <div className="mp-wrap mp-nav__inner">
        <a className="mp-brand" onClick={() => nav("landing")}><PrivacyMark s={28} animate /><Wordmark /></a>
        <nav className="mp-nav__links">
          <a onClick={() => nav("app", "banner")}>Cookie banner</a>
          <a onClick={() => nav("app", "documents")}>Documents</a>
          <a onClick={() => nav("pricing")}>Pricing</a>
          <a onClick={() => nav("landing")}>Languages</a>
        </nav>
        <div className="mp-nav__cta">
          <Button variant="ghost" size="sm" onClick={() => nav("auth")}>Sign in</Button>
          <Button variant="primary" size="sm" iconRight={<Icon d={ICONS.arrow} size={15} />} onClick={() => nav("app", "banner")}>Get started</Button>
        </div>
      </div>
    </header>
  );
}

// Hoisted to module scope: defining this inside Localization gave it a fresh
// identity each render, so React remounted every doc line on every re-render
// (e.g. a pause toggle) and replayed the locLineIn fade — the flicker.
function LocLine({ idx, children, className = "" }) {
  return <div className={"loc-line " + className} style={{ animationDelay: (0.05 + idx * 0.06) + "s" }}>{children}</div>;
}

const CYCLE_LANGS = ["en", "de", "fr", "it"];
const SHOW_DWELL = 3000; // ms each beat holds before advancing

// One shared "showcase" beat drives the whole hero + localization rhythm:
// the headline word, the mock business name, the cookie-banner language, and
// the policy/terms document all advance together — and pause together.
const SHOWCASE = [
  { word: "site",  org: "Café Lumière",    url: "café-lumiere.fr" },
  { word: "store", org: "Northwind Goods", url: "northwind.shop" },
  { word: "app",   org: "Lumo",            url: "lumo.app" },
  { word: "game",  org: "Pixel Forge",     url: "pixelforge.gg" },
];
function useShowcase(dwell = SHOW_DWELL) {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  // Time left in the current beat. Refresh it to a full dwell at the start of
  // each beat; on pause we subtract the elapsed slice so resume continues from
  // where it stopped instead of restarting the countdown.
  const remainingRef = React.useRef(dwell);
  const startedRef = React.useRef(0);
  React.useEffect(() => { remainingRef.current = dwell; }, [i, dwell]);
  React.useEffect(() => {
    if (paused) return;
    startedRef.current = performance.now();
    const t = setTimeout(() => setI((v) => v + 1), remainingRef.current);
    return () => {
      clearTimeout(t);
      remainingRef.current = Math.max(0, remainingRef.current - (performance.now() - startedRef.current));
    };
  }, [i, paused, dwell]);
  const idx = ((i % SHOWCASE.length) + SHOWCASE.length) % SHOWCASE.length;
  return {
    i, idx, dwell, paused, setPaused,
    step: SHOWCASE[idx],
    lang: CYCLE_LANGS[idx],
    docType: idx % 2 === 0 ? "privacy" : "terms",
    jumpTo: (p) => setI(p),
  };
}

function Hero({ sc, nav }) {
  return (
    <section className="mp-hero">
      <div className="mp-wrap mp-hero__inner">
        <div className="mp-fadeup">
          <span className="mp-eyebrow">Privacy · Cookies · Terms</span>
          <h1 className="mp-h1">Make your{" "}
            <span className="hero-rotor" onMouseEnter={() => sc.setPaused(true)} onMouseLeave={() => sc.setPaused(false)}>
              <span className="hero-rotor__word" key={sc.step.word}>{sc.step.word}</span>
            </span><br />legally compliant.</h1>
          <p className="mp-lead">Privacy policy, cookie consent and terms for your site, app or store — in every language, for one flat price. No lawyer, no per-domain fees. You're covered in minutes.</p>
          <div className="mp-hero__actions">
            <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => nav("app", "banner")}>Get your free cookie banner</Button>
            <Button variant="secondary" size="lg" onClick={() => nav("app", "wizard", "privacy")}>Generate a privacy policy</Button>
          </div>
          <div className="mp-trust">
            <span className="mp-trust__item"><Icon d={ICONS.check} size={15} /> GDPR</span>
            <span className="mp-trust__sep" />
            <span className="mp-trust__item"><Icon d={ICONS.check} size={15} /> CCPA</span>
            <span className="mp-trust__sep" />
            <span className="mp-trust__item"><Icon d={ICONS.check} size={15} /> ePrivacy</span>
            <span className="mp-trust__sep" />
            <span className="mp-trust__item"><Icon d={ICONS.globe} size={15} /> 30+ languages</span>
          </div>
        </div>
        <div className="mp-hero__art mp-fadeup" style={{ animationDelay: "0.08s" }}>
          <div className="mp-preview-card" onMouseEnter={() => sc.setPaused(true)} onMouseLeave={() => sc.setPaused(false)}>
            <div className="mp-preview-card__bar">
              <span className="mp-dot" style={{ background: "#ff5f57" }} />
              <span className="mp-dot" style={{ background: "#febc2e" }} />
              <span className="mp-dot" style={{ background: "#28c840" }} />
              <span className="mp-preview-card__url" key={sc.step.url}>{sc.step.url}</span>
              <span className="mp-preview-card__langtag" key={sc.lang}>{sc.lang.toUpperCase()}</span>
            </div>
            <div className="mp-preview-card__progress"><span className={"mp-preview-card__progress-bar" + (sc.paused ? " is-paused" : "")} key={sc.i} style={{ animationDuration: sc.dwell + "ms" }} /></div>
            <div className="mp-preview-card__stage" style={{ minHeight: 300 }}>
              <div className="mp-preview-card__shot"><i /><i /><i /></div>
              <CookieWidget key={sc.lang + "-" + sc.idx} variant="bar" lang={sc.lang} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Localization({ sc }) {
  const pl = sc.lang;
  const org = sc.step.org;
  const src = sc.docType === "terms" ? window.MP.TERMS[pl] : window.MP.STR[pl].policy;
  const nextName = window.MP.LANGS.find((l) => l.code === CYCLE_LANGS[(sc.idx + 1) % CYCLE_LANGS.length]).name;

  return (
    <section className="mp-section" id="languages">
      <div className="mp-wrap">
        <div className="mp-loc">
          <div className="mp-loc__copy">
            <span className="mp-eyebrow">The localization difference</span>
            <h2 className="mp-h2">One document, every market.</h2>
            <p className="mp-lead">Write it once. We translate and keep it in sync across 30+ languages — not as a paid add-on, but built in. Privacy policy and terms, for every kind of business.</p>
            <ul className="mp-feat-list">
              <li><span className="ic"><Icon d={ICONS.globe} size={16} /></span><span><b>Every document in sync.</b> Switch locale once; your privacy policy, terms and every legal page follow.</span></li>
              <li><span className="ic"><Icon d={ICONS.scan} size={16} /></span><span><b>Layouts that hold.</b> Longer German and French strings never break the design.</span></li>
              <li><span className="ic"><Icon d={ICONS.flag} size={16} /></span><span><b>Geo-aware by default.</b> Surface the clauses each region's law requires — GDPR, CCPA and more.</span></li>
            </ul>
          </div>

          <div className="loc-stage" onMouseEnter={() => sc.setPaused(true)} onMouseLeave={() => sc.setPaused(false)}>
            <div className="loc-badge"><Icon d={ICONS.globe} size={13} /> 30+ languages</div>
            <div className="loc-stack">
              <div className="loc-card loc-card--back2" aria-hidden="true" />
              <div className="loc-card loc-card--back1" aria-hidden="true">
                <div className="loc-card__ghost-title">{nextName}</div>
              </div>
              <div className="loc-card loc-card--front" key={sc.docType + "-" + pl + "-" + sc.i}>
                <div className="loc-card__brandline">
                  <span className="doc-paper__org" key={org}>{org}</span>
                  <span className="loc-card__lang">EU · {pl.toUpperCase()}</span>
                </div>
                <LocLine idx={0} className="loc-line--title"><h3 className="loc-card__title">{src.title}</h3></LocLine>
                <LocLine idx={1} className="loc-line--meta">{src.updated}: 10 Jun 2026</LocLine>
                <LocLine idx={2} className="loc-line--body">{src.intro.replace("{ORG}", org)}</LocLine>
                <LocLine idx={3} className="loc-line--h"><span className="num">01</span>{src.secs[0][0]}</LocLine>
                <LocLine idx={4} className="loc-line--body">{src.secs[0][1]}</LocLine>
                <LocLine idx={5} className="loc-line--h"><span className="num">02</span>{src.secs[1][0]}</LocLine>
                <LocLine idx={6} className="loc-line--body">{src.secs[1][1]}</LocLine>
              </div>
            </div>

            <div className="loc-pills" role="tablist" aria-label="Preview language">
              {window.MP.LANGS.map((l, p) => (
                <button key={l.code} className={"loc-pill" + (pl === l.code ? " is-active" : "")} onClick={() => sc.jumpTo(p)} role="tab" aria-selected={pl === l.code}>
                  {l.label}
                  {pl === l.code && <span className={"loc-pill__bar" + (sc.paused ? " is-paused" : "")} key={sc.i} style={{ animationDuration: sc.dwell + "ms" }} />}
                </button>
              ))}
              <span className="loc-pills__hint">{sc.paused ? "Paused" : "Auto-translating"}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  [ICONS.cookie, "Free cookie banner", "MostlyCookie — a compliant, multilingual consent banner you can ship today. Reject is as easy as Accept."],
  [ICONS.doc, "Localized documents", "Privacy policy, cookie policy and terms, generated and translated into 30+ languages from one questionnaire."],
  [ICONS.zap, "Google Consent Mode v2", "One toggle wires up Consent Mode v2 — the box every buyer checks for. No tag-manager surgery."],
  [ICONS.flag, "Geo-targeting rules", "Serve the right notice by region automatically — GDPR in the EU, CCPA in California, nothing where it isn't needed."],
  [ICONS.publish, "Auto-updating docs", "Publish to a hosted URL that updates itself as the law and your practices change. Export to HTML, PDF or DOCX."],
  [ICONS.scan, "Consent logs", "Every choice is logged and exportable — the audit trail you'll want if a regulator ever asks."],
];
function Features() {
  return (
    <section className="mp-section" id="features">
      <div className="mp-wrap">
        <div className="mp-section-head">
          <span className="mp-eyebrow">Everything you need</span>
          <h2 className="mp-h2">Compliance, without the lawyer.</h2>
        </div>
        <div className="mp-feature-grid">
          {FEATURES.map(([d, t, b]) => (
            <Card className="mp-feature" key={t}><CardBody>
              <span className="mp-feature__icon"><Icon d={d} size={20} /></span>
              <h3 className="mp-feature__title">{t}</h3>
              <p className="mp-feature__body">{b}</p>
            </CardBody></Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const X = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="2.4" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>;
  const C = () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>;
  return (
    <section className="mp-section">
      <div className="mp-wrap">
        <div className="mp-compare">
          <div className="mp-compare__head">
            <h2 className="mp-h2">Flat price. Every site. Every language.</h2>
            <p>The incumbents charge per domain and lock languages behind upgrades. We don't.</p>
          </div>
          <div className="mp-compare__grid">
            <div className="mp-compare__col mp-compare__col--them">
              <div className="mp-compare__lbl">The old way</div>
              {["Priced per domain — every site is another bill", "Each language is a paid add-on", "Hidden per-clause “unlock” fees at checkout", "Banner locked to a single property"].map((r) => (
                <div className="mp-compare__row" key={r}><X />{r}</div>
              ))}
            </div>
            <div className="mp-compare__col mp-compare__col--us">
              <div className="mp-compare__lbl">MostlyPrivacy</div>
              {["One flat price covers every site you own", "30+ languages included, always", "What you see is included — no surprises", "Unlimited compliant banners and policies"].map((r) => (
                <div className="mp-compare__row" key={r}><C />{r}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Teaser({ nav }) {
  const tiers = [["Free", "$0"], ["Starter", "$15"], ["Pro", "$35"], ["Agency", "$129"], ["Enterprise", "Let's talk"]];
  return (
    <section className="mp-section mp-teaser">
      <div className="mp-wrap">
        <span className="mp-eyebrow">Simple pricing</span>
        <h2 className="mp-h2" style={{ marginTop: 10 }}>Pay once, cover everything.</h2>
        <div className="mp-teaser__chips">
          {tiers.map(([n, p]) => (
            <span className="mp-teaser__chip" key={n}>{n} <b>{p}</b></span>
          ))}
        </div>
        <div style={{ marginTop: 28 }}>
          <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => nav("pricing")}>See full pricing</Button>
        </div>
      </div>
    </section>
  );
}

function Footer({ nav }) {
  const cols = [
    ["Product", ["Cookie banner", "Document generator", "Consent Mode v2", "Consent logs"]],
    ["Solutions", ["For freelancers", "For agencies", "For e-commerce", "For the EU"]],
    ["Legal", ["Privacy Policy", "Cookie Policy", "Terms of Service", "Imprint"]],
  ];
  return (
    <footer className="mp-footer">
      <div className="mp-wrap mp-footer__inner">
        <div>
          <a className="mp-brand" onClick={() => nav("landing")}><PrivacyMark s={26} /><Wordmark size={17} /></a>
          <p className="mp-footer__tag">Privacy policy, cookie consent and terms — localized, hosted and kept up to date. Compliance made calm.</p>
        </div>
        {cols.map(([h, links]) => (
          <div className="mp-footer__col" key={h}>
            <div className="mp-footer__h">{h}</div>
            {links.map((l) => <a key={l} onClick={() => nav("landing")}>{l}</a>)}
          </div>
        ))}
      </div>
      <div className="mp-wrap mp-footer__base">
        <span className="mp-endorse"><window.ForgeKit.Endorsement /></span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>MostlyPrivacy · v1.0</span>
      </div>
    </footer>
  );
}

function Landing({ nav }) {
  const sc = useShowcase();
  return (
    <div className="mp-root">
      <Nav nav={nav} />
      <Hero sc={sc} nav={nav} />
      <Localization sc={sc} />
      <Features />
      <Compare />
      <Teaser nav={nav} />
      <Footer nav={nav} />
      <div style={{ height: 56 }} />
    </div>
  );
}

window.MP.Landing = Landing;
})();