/* pricing.jsx — two-tier comparison table + FAQ → window */
(function(){
  const { useState } = React;
  const I = window.Icons;
  const { SectionHead } = window;

  /* ---------- ADD-ONS (power-ups) ---------- */
  function Addons({cur='£'}){
    const items = [
      [I.Clock,'Deep History','Teach it everything: analyse [6] months of past email in one pass to map your people, projects and patterns — so it knows your world from day one.'],
      [I.Reply,'Write Like Me','It learns your email voice from your sent mail and drafts replies that sound like you actually wrote them.'],
    ];
    return (
      <section className="section sec-divider" id="addons">
        <div className="wrap">
          <SectionHead label="Power-ups" title="Go deeper when you’re ready"
            intro="Optional add-ons that turn up the learning. Add them to either plan; priced from their real cost."/>
          <div className="addons-grid">
            {items.map(([Ico,h,p],i)=>(
              <div className="addon reveal" key={i} style={{transitionDelay:(i*70)+'ms'}}>
                <span className="aico"><Ico/></span>
                <div className="abody">
                  <div className="arow"><h3>{h}</h3><span className="tag-addon">Add-on</span></div>
                  <p>{p}</p>
                  <div className="aprice">From {cur}<span className="ph">[X]</span><span className="aper">/mo</span></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- PRICING ---------- */
  /* Prices & strategy per "Pricing & Competitive Study" (Jun 2026):
     Private (Premium) is the LEAD plan; never show the app fee "naked" —
     message all-in cost honestly; annual ≈ 30% off; 7-day trial on both. */
  function Pricing({cur='£'}){
    const [annual,setAnnual] = useState(false);
    const per = annual ? '/mo · billed yearly' : '/mo';
    const P = annual
      ? { conn:'3.50', priv:'7', connBill:'41.99/yr', privBill:'83.99/yr' }
      : { conn:'4.99', priv:'9.99', connBill:null, privBill:null };
    return (
      <section className="section sec-divider" id="pricing">
        <div className="wrap">
          <SectionHead label="Pricing" title="Honest pricing — including the AI"
            intro="Most rivals charge £20–40 a month and the AI still reads your mail on their servers. What's On is the cheapest app fee in the category — and we'll always show you the full cost, AI included."/>
          <div className="price-toggle reveal">
            <span className={'lab'+(!annual?' on':'')}>Monthly</span>
            <div className={'switch'+(annual?' annual':'')} onClick={()=>setAnnual(a=>!a)} role="switch" aria-checked={annual}><span className="knob"></span></div>
            <span className={'lab'+(annual?' on':'')}>Yearly</span>
            <span className="save-tag">SAVE ~30%</span>
          </div>

          <div className="compare reveal">
            <div className="crow head">
              <div className="cattr"></div>
              <div className="cval">
                <span className="chname">Connected <span className="chwas">(formerly Standard)</span></span>
                <span className="chsub">Already pay for Claude? The thinking's free — just add the board.</span>
                <span className="cbadge cyan"><I.Cpu/> Runs in your Claude plan</span>
              </div>
              <div className="cval priv">
                <span className="chname">Private <span className="chwas">(formerly Premium)</span></span>
                <span className="chsub">No limits, most private. Our flagship.</span>
                <span className="cbadge gold"><I.Lock/> Runs on your device</span>
              </div>
            </div>

            <div className="crow">
              <div className="cattr">Where it runs</div>
              <div className="cval">Your Claude account</div>
              <div className="cval">Your device</div>
            </div>
            <div className="crow">
              <div className="cattr">Privacy</div>
              <div className="cval">Strong</div>
              <div className="cval">Zero-knowledge — we can’t see your mail</div>
            </div>
            <div className="crow">
              <div className="cattr">AI triage</div>
              <div className="cval">Included in the Claude plan you already pay for</div>
              <div className="cval">Unlimited — your own AI key, typically {cur}2–8/mo</div>
            </div>
            <div className="crow">
              <div className="cattr">Best for</div>
              <div className="cval">Existing Claude subscribers</div>
              <div className="cval">Everyone else — and inboxes that can’t leave the building</div>
            </div>
            <div className="crow">
              <div className="cattr">Price</div>
              <div className="cval"><span><span className="amt">{cur}{P.conn}</span> <span className="per">{per}{P.connBill?` (${cur}${P.connBill})`:''}</span></span></div>
              <div className="cval"><span><span className="amt">{cur}{P.priv}</span> <span className="per">{per}{P.privBill?` (${cur}${P.privBill})`:''}</span></span></div>
            </div>
            <div className="crow">
              <div className="cattr">True monthly cost</div>
              <div className="cval">{cur}4.99 on top of your Claude plan — or ~{cur}23 all-in if you don’t have one yet</div>
              <div className="cval">~{cur}12–18 all-in, AI included — less than every AI-email rival</div>
            </div>
            <div className="crow cta">
              <div className="cattr"></div>
              <div className="cval"><a className="btn btn-ghost" href="#download" onClick={e=>e.preventDefault()}>Start with Connected</a></div>
              <div className="cval"><a className="btn btn-primary" href="#download" onClick={e=>e.preventDefault()}>Go Private</a></div>
            </div>
          </div>
          <p className="proof-note reveal" style={{marginTop:'22px'}}>7-day free trial on both plans. Switch anytime — upgrade to Private effective immediately; downgrades take effect at renewal.</p>
        </div>
      </section>
    );
  }

  /* ---------- FAQ ---------- */
  const QAS = [
    ['What does it really cost?','Private is £9.99/mo (or £83.99/yr) plus your own AI key — typically £2–8/mo — so £12–18 all-in with unlimited triage. Connected is £4.99/mo (or £41.99/yr) on top of the Claude plan you already pay for. Rivals charge £20–40 for less.'],
    ['Do I need a Claude subscription?','Only for Connected — it runs inside your existing Claude plan, so triage is effectively free. Private doesn’t need one: it uses your own AI key instead. Either way, the software subscription you pay us for is What’s On.'],
    ['What’s BYOK — “bring your own key”?','In Private, What’s On uses an AI key that belongs to you. It’s stored on your device and powers the on-device triage, so your mail is processed with your own key and never sent to us.'],
    ['Which mailboxes are supported?','Gmail, Outlook / Microsoft 365, and Outlook.com / Hotmail — with more to come. Forwarded mail is attributed to the right account automatically. [Confirm the supported list before publishing.]'],
    ['Is my email private?','In Connected, your mail is processed in the cloud via your Claude plan. In Private, it runs only on your device — we can’t see it. That’s the strongest claim we’ll make, and we keep it true.'],
    ['What if the connection drops mid-run?','It retries automatically and tells you if something needs your attention. Nothing is silently missed.'],
    ['Can I switch plans?','Yes. Upgrade to Private anytime, effective immediately. Downgrades take effect at your next renewal. Monthly or annual — your choice.'],
  ];
  function FAQ(){
    const [open,setOpen] = useState(0);
    return (
      <section className="section sec-divider" id="faq">
        <div className="wrap">
          <SectionHead label="Questions" title="Plans, keys & privacy — answered"/>
          <div className="faq">
            {QAS.map(([q,a],i)=>(
              <div className={'qa'+(open===i?' open':'')} key={i}>
                <button onClick={()=>setOpen(open===i?-1:i)}>{q}<span className="pm"><I.Plus/></span></button>
                <div className="ans" style={{maxHeight:open===i?'320px':'0'}}><p>{a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { Addons, Pricing, FAQ });
})();