// MostlyPrivacy — Pricing (screen F). Five tiers, monthly/annual, Pro featured.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, Badge, Switch, Card } = F;
const { Icon, ICONS, PrivacyMark, MTMark, Wordmark, LangSwitch } = window.MP;

const PLANS = [
  { id: "free", name: "Free", tag: "The free cookie banner", m: 0, y: 0, sites: "1 site", cta: "Start free", variant: "secondary",
    feats: [["Compliant cookie banner", 1], ["All 30+ languages", 1], ["Google Consent Mode v2", 1], ["MostlyCookie badge", 0]] },
  { id: "starter", name: "Starter", tag: "For one small business", m: 15, y: 12, sites: "3 sites", cta: "Choose Starter", variant: "secondary",
    feats: [["Everything in Free", 1], ["Privacy, cookie & terms docs", 1], ["Hosted, auto-updating", 1], ["Email support", 1]] },
  { id: "pro", name: "Pro", tag: "For growing teams", m: 35, y: 28, sites: "10 sites", cta: "Start 14-day trial", variant: "primary", featured: true,
    feats: [["Everything in Starter", 1], ["Geo-targeting rules", 1], ["Consent logs & export", 1], ["Priority support", 1]] },
  { id: "agency", name: "Agency", tag: "For agencies & resellers", m: 129, y: 103, sites: "Unlimited sites", cta: "Choose Agency", variant: "secondary",
    feats: [["Everything in Pro", 1], ["White-label — your logo", 1], ["Client workspaces", 1], ["API & webhooks", 1]] },
  { id: "ent", name: "Enterprise", tag: "For larger organisations", custom: true, sites: "Unlimited + SSO", cta: "Talk to sales", variant: "secondary",
    feats: [["Everything in Agency", 1], ["SSO & SAML", 1], ["DPA & legal review", 1], ["Dedicated manager", 1]] },
];

function Check({ on }) {
  return on
    ? <svg width="15" height="15" 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>
    : <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--fg-subtle)" strokeWidth="2.4" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>;
}

function Pricing({ lang, setLang, nav }) {
  const [annual, setAnnual] = React.useState(true);
  return (
    <div className="pr-root mp-root">
      <header className="mp-nav">
        <div className="mp-wrap mp-nav__inner">
          <a className="mp-brand" onClick={() => nav("landing")}><PrivacyMark s={28} /><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>
          </nav>
          <div className="mp-nav__cta">
            <LangSwitch value={lang} onChange={setLang} />
            <Button variant="ghost" size="sm" onClick={() => nav("auth")}>Sign in</Button>
            <Button variant="primary" size="sm" onClick={() => nav("app", "banner")}>Get started</Button>
          </div>
        </div>
      </header>

      <div className="mp-wrap">
        <section className="pr-head">
          <span className="mp-eyebrow">Pricing</span>
          <h1 className="pr-h1">One flat price. Every site, every language.</h1>
          <p className="pr-lead">Start with a free cookie banner. Upgrade for documents and more sites. No per-domain fees, no per-clause unlocks — what you see is included.</p>
          <div className="pr-toggle">
            <span className={!annual ? "is-on" : ""}>Monthly</span>
            <Switch checked={annual} onChange={() => setAnnual(!annual)} />
            <span className={annual ? "is-on" : ""}>Annual</span>
            <Badge tone="good">Save 20%</Badge>
          </div>
        </section>

        <section className="pr-grid">
          {PLANS.map((p) => (
            <Card key={p.id} className={"pr-plan" + (p.featured ? " is-featured" : "")}>
              {p.featured && <div className="pr-plan__ribbon">Most popular</div>}
              <div className="pr-plan__name">{p.name}</div>
              <div className="pr-plan__tag">{p.tag}</div>
              <div className="pr-plan__price">
                {p.custom
                  ? <span className="pr-plan__amt" style={{ fontSize: 24 }}>Custom</span>
                  : <><span className="pr-plan__amt">${annual ? p.y : p.m}</span><span className="pr-plan__per">{p.m === 0 ? "free" : "/ mo"}</span></>}
              </div>
              <div className="pr-plan__sites">{p.sites}</div>
              <Button variant={p.variant} size="sm" block iconRight={p.variant === "primary" ? <Icon d={ICONS.arrow} size={15} /> : undefined}
                onClick={() => {
                  if (p.id === "ent") { window.location.href = "mailto:hello@mostlytiny.io?subject=MostlyPrivacy%20Enterprise"; return; }
                  if (p.id === "free") { nav("auth"); return; }
                  const api = window.MPApi || {};
                  // Paid plan → checkout if signed in; otherwise sign in first.
                  if (api.ready && api.currentUser && api.currentUser()) api.createCheckout(p.id);
                  else nav("auth");
                }}>{p.cta}</Button>
              <ul className="pr-plan__feats">
                {p.feats.map(([f, on]) => <li key={f}><Check on={on} /> {on ? <b>{f}</b> : f}</li>)}
              </ul>
            </Card>
          ))}
        </section>

        <section className="mp-section" style={{ paddingBottom: 30 }}>
          <div className="mp-section-head"><h2 className="mp-h2">Questions, answered</h2></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, maxWidth: 860, margin: "0 auto" }}>
            {[
              ["Is the cookie banner really free?", "Yes. MostlyCookie is free forever on one site, in every language, with Consent Mode v2 — we only ask for a small badge in return."],
              ["What does “every language” mean?", "All 30+ supported languages are included on every paid plan. We never charge extra to add a locale."],
              ["Do you charge per domain?", "No. Your plan covers a fixed number of sites — Pro covers 10 — with no per-domain surcharges."],
              ["Are the documents legally sound?", "They're built from current GDPR, CCPA and ePrivacy requirements and update automatically. Enterprise adds a human legal review."],
            ].map(([q, a]) => (
              <div key={q}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em", marginBottom: 6 }}>{q}</div>
                <div style={{ fontSize: 13.5, color: "var(--fg-muted)", lineHeight: 1.55 }}>{a}</div>
              </div>
            ))}
          </div>
        </section>

        <footer className="mp-footer__base" style={{ borderTop: "1px solid var(--hairline)", justifyContent: "center", marginBottom: 56 }}>
          <span className="mp-endorse"><window.ForgeKit.Endorsement /></span>
        </footer>
      </div>
    </div>
  );
}

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