/* plancards.jsx — app-accurate plan picker (Connected / Private) + 7-day trial.
   Mirrors the in-app plan cards. → window.PlanCards */
(function(){
  const { useState } = React;
  const I = window.Icons;

  const PLANS = {
    connected: {
      name:'Connected', was:'was Standard', price:'£4.99',
      sub:'Runs the triage Routine inside your own Claude plan',
      checks:[
        'A few times a day — ~5/day on Claude Pro, ~15/day on Max',
        'Runs in your Claude account',
        <span><b>You need:</b> An active Claude Pro or Max subscription</span>,
      ],
      allin:<span><b>All-in: ≈ £23/mo</b> (What’s On + your Claude Pro ~£18)</span>,
      chip:'+ Claude Pro, billed separately by Anthropic',
      rec:true,
    },
    private: {
      name:'Private', was:'was Premium', price:'£9.99',
      sub:'On-device, content-blind — your own Anthropic API key',
      checks:[
        'Unlimited triage — no daily caps',
        'On-device, content-blind — nothing leaves your device except calls to Anthropic',
        <span><b>You need:</b> Your own Anthropic API key</span>,
      ],
      allin:<span><b>All-in: ≈ £12–18/mo est.</b> (What’s On + your API tokens)</span>,
      chip:'+ API tokens, billed separately by Anthropic',
      rec:false,
    },
  };

  function Card({k, sel, onSel}){
    const p = PLANS[k];
    const active = sel===k;
    return (
      <div className={'plan-card'+(active?' active':'')+(p.rec?' rec':'')} onClick={()=>onSel(k)} role="button" tabIndex={0}>
        {p.rec && <span className="pp-badge">Recommended for you</span>}
        <div className="pp-head">
          <div className="pp-id"><span className="pp-name">{p.name}</span><span className="pp-was">{p.was}</span></div>
          <div className="pp-right">
            <span className="pp-price">{p.price}<span className="pp-per">/mo</span></span>
            <span className={'pp-radio'+(active?' on':'')}></span>
          </div>
        </div>
        <p className="pp-sub">{p.sub}</p>
        <ul className="pp-checks">
          {p.checks.map((c,i)=>(
            <li key={i}><span className="pp-check"><I.Check/></span><span>{c}</span></li>
          ))}
        </ul>
        <div className="pp-allin">{p.allin}</div>
        <span className="pp-chip">{p.chip}</span>
      </div>
    );
  }

  function PlanCards(){
    const [sel,setSel] = useState('connected');
    return (
      <section className="section sec-divider" id="plans">
        <div className="wrap pp-wrap">
          <div className="pp-trial reveal">
            <span className="pp-trial-star"><I.Sparkle/></span>
            <div className="pp-trial-txt">
              <b>7 days free, on either plan.</b>
              <span>Full access from day one — no card charged today, cancel anytime before it ends.</span>
            </div>
          </div>

          <div className="pp-cards reveal">
            <Card k="connected" sel={sel} onSel={setSel}/>
            <div className="pp-mid">Tap below to start, or pick the other plan:</div>
            <Card k="private" sel={sel} onSel={setSel}/>
          </div>

          <div className="pp-actions reveal">
            <a className="btn btn-primary" href="#download" onClick={e=>e.preventDefault()}>
              Start free 7-day trial — {PLANS[sel].name}
            </a>
            <span className="pp-actions-note">Then {PLANS[sel].price}/mo. Switch or cancel anytime.</span>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { PlanCards });
})();