/* global React */
const { useState: c2State } = React;

/* ── Plans: Connected (Standard) / Private (Premium). Names match storekit ids. ── */
const C2 = {
  connected: {
    id: "connected", alias: "Standard",
    sub: "Runs inside your Claude plan",
    price: { monthly: "£4.99", annual: "£41.99", eq: "£3.50" },
    cadence: { l: "Cadence", v: <>A few scheduled checks a day — about <b>5/day on Claude Pro</b>, ~15 on Max</> },
    privacy: { l: "Privacy", v: <>Triage runs <b>inside your own Claude account</b></> },
    needs:   { l: "You need", v: <>An active <b>Claude Pro or Max</b> plan (Anthropic, ~£18/mo)</> },
    cost:    { l: "Cost shape", v: <><b>Flat &amp; predictable</b> — £4.99 + the Claude plan you already pay for</> },
  },
  private: {
    id: "private", alias: "Premium",
    sub: "On-device, content-blind — your own API key",
    price: { monthly: "£9.99", annual: "£83.99", eq: "£7.00" },
    cadence: { l: "Cadence", v: <><b>Unlimited</b> — triage whenever you like, no daily caps</> },
    privacy: { l: "Privacy", v: <><b>Most private</b> — on-device &amp; content-blind; nothing leaves except calls to Anthropic</> },
    needs:   { l: "You need", v: <>An <b>Anthropic API key</b> <span className="c2-stamp-green">Pay for token usage</span> — no Claude subscription required</> },
    cost:    { l: "Cost shape", v: <><b>Metered</b> — £9.99 + API tokens you pay Anthropic (varies with use)</> },
  },
};
function planName(p, namingPrivacyLeads) {
  // namingPrivacyLeads: true => "Connected/Private" lead, alias shown muted
  return namingPrivacyLeads
    ? { lead: p.id === "connected" ? "Connected" : "Private", alias: p.alias }
    : { lead: p.alias, alias: p.id === "connected" ? "Connected" : "Private" };
}
function allInLine(id, billing) {
  if (id === "private") return billing === "annual"
    ? <>That's the What's On fee. <strong>API tokens are billed separately by Anthropic</strong> and vary with use. Example all-in: <strong>~£9–15/mo</strong> (estimate).</>
    : <>That's the What's On fee. <strong>API tokens are billed separately by Anthropic</strong> and vary with use. Example all-in: <strong>~£12–18/mo</strong> (estimate).</>;
  return billing === "annual"
    ? <>That's the What's On fee. <strong>Claude Pro is separate</strong> (~£18/mo, Anthropic). Example all-in: <strong>~£21/mo</strong>.</>
    : <>That's the What's On fee. <strong>Claude Pro is separate</strong> (~£18/mo, Anthropic). Example all-in: <strong>~£23/mo</strong>.</>;
}

/* ── icons ── */
const I = {
  shield:(s=14)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  info:(s=14)=><svg width={s} height={s} viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5"/><path d="M10 9v4.5M10 6.4v.1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>,
  clock:(s=20)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.7"/><path d="M12 7v5l3.5 2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  infinity:(s=20)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M7 9a3 3 0 100 6c2 0 3-2 5-3s3-3 5-3a3 3 0 110 6c-2 0-3-2-5-3S9 9 7 9z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/></svg>,
  lock:(s=20)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><rect x="5" y="10" width="14" height="10" rx="2.5" stroke="currentColor" strokeWidth="1.7"/><path d="M8 10V7.5a4 4 0 018 0V10" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>,
  cloud:(s=20)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M7 18a4 4 0 01-.5-7.97A5 5 0 0116.9 9.5 3.5 3.5 0 0117 18H7z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/></svg>,
  check:(s=18)=><svg width={s} height={s} viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="10" fill="#2ee6a8"/><path d="M6 10.5l2.5 2.5L14 7.5" fill="none" stroke="#04130d" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  cadence:(s=15)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.7"/><path d="M12 7v5l3.5 2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  priv:(s=15)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  coin:(s=15)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M12 7v10M9.5 9.5h4a1.8 1.8 0 010 3.5h-3a1.8 1.8 0 000 3.5h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  key:(s=15)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="8" cy="9" r="4" stroke="currentColor" strokeWidth="1.7"/><path d="M11 11l8 8M16.5 17l2-2M14.5 15l2-2" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  claude:(s=20)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><g stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 4v3M12 17v3M4 12h3M17 12h3M6.3 6.3l2 2M15.7 15.7l2 2M17.7 6.3l-2 2M8.3 15.7l-2 2"/></g></svg>,
  back:(s=15)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

/* ── billing ── */
function Billing({ billing, set }) {
  return (
    <div className="c2-billing">
      <button className={billing==="monthly"?"on":""} onClick={()=>set("monthly")}>Monthly</button>
      <button className={billing==="annual"?"on":""} onClick={()=>set("annual")}>Annual <span className="c2-save">Save 30%</span></button>
    </div>
  );
}

/* ── full plan card (used in compare + result) ── */
function PlanCard({ p, billing, selected, onSelect, badge, naming }) {
  const nm = planName(p, naming);
  const price = p.price[billing], period = billing==="annual"?"/year":"/month";
  return (
    <button className={`c2-plan ${selected?"on":""} ${badge?"reco":""}`} onClick={()=>onSelect(p.id)} aria-pressed={selected}>
      {badge && <span className="c2-badge">{badge}</span>}
      <span className="c2-plan-radio"><i/></span>
      <div className="c2-plan-head">
        <div className="c2-plan-name">{nm.lead}</div>
        <div className="c2-price"><span className="c2-amt">{price}</span><span className="c2-per">{period}</span>
          {billing==="annual" && <div className="c2-permo">{p.price.eq}/mo billed yearly</div>}
        </div>
      </div>
      <div className="c2-plan-sub">{p.sub}</div>
      <div className="c2-trial">{I.shield(14)} 7-day free trial · cancel anytime</div>
      <ul className="c2-traits">
        {[p.cadence,p.privacy,p.cost,p.needs].map((t,i)=>(
          <li className="c2-trait" key={i}>
            <span className="tk">{[I.cadence,I.priv,I.coin,p.id==="connected"?I.claude:I.key][i](15)}</span>
            <span><span className="tl">{t.l}</span><span className="tv">{t.v}</span></span>
          </li>
        ))}
      </ul>
      <div className="c2-allin">{I.info(14)}<span>{allInLine(p.id, billing)}</span></div>
      <span className="c2-extra-tag">{p.id==="connected"?"+ Claude Pro, billed separately":"+ API tokens, billed separately"}</span>
    </button>
  );
}

/* ── compare matrix ── */
function Matrix({ naming }) {
  const c = planName(C2.connected, naming), p = planName(C2.private, naming);
  const rows = [
    ["Cadence","A few checks a day (~5 Pro / 15 Max)","Unlimited, on demand"],
    ["Privacy","Runs in your Claude account","On-device · content-blind"],
    ["You need","Claude Pro or Max","An Anthropic API key"],
    ["Cost shape","Flat — fee + Claude Pro","Metered — fee + API tokens"],
    ["Example all-in","~£23/mo","~£12–18/mo (est.)"],
  ];
  return (
    <div className="c2-matrix">
      <div className="c2-mrow c2-mhead">
        <div className="mh"></div>
        <div className="mp1"><span className="c2-pname">{c.lead}</span></div>
        <div><span className="c2-pname">{p.lead}</span></div>
      </div>
      {rows.map((r,i)=>(
        <div className="c2-mrow" key={i}>
          <div className="mh"><span className="c2-mlab">{r[0]}</span></div>
          <div className="mv">{r[1]}</div>
          <div className="mv">{r[2]}</div>
        </div>
      ))}
    </div>
  );
}

/* ── shared hero ── */
function Hero({ context }) {
  return (
    <div className="c2-hero">
      <div className="c2-kicker">{context==="change"?"Change your plan":"Choose your plan"}</div>
      <h1 className="c2-headline">Email that decides <em>what needs you</em>.</h1>
      <p className="c2-subhead">Other apps make email faster. <strong>What's On turns every inbox into one living task board</strong> — and tells you what actually needs you.</p>
    </div>
  );
}

window.C2KIT = { C2, planName, allInLine, I, Billing, PlanCard, Matrix, Hero };