/* story.jsx — problem, how-it-works, benefits, two-ways, privacy, proof, accounts → window */
(function(){
  const { useState } = React;
  const I = window.Icons;
  const { SectionHead } = window;

  /* ---------- PROBLEM ---------- */
  function Problem(){
    const items = [
      [I.Inbox,'rgba(255,46,166,.12)','var(--accent)','The pile never stops','Hundreds in every day, across every account. The low-grade dread of “what have I missed?” never quite switches off.'],
      [I.EyeOff,'rgba(122,47,240,.14)','var(--violet)','The important thing, buried','The deadline, the payment, the one client who matters — three screens down, behind the newsletters. You find out too late.'],
      [I.Users,'rgba(47,216,238,.12)','var(--cyan)','Too many inboxes','Gmail, Outlook, Microsoft 365, Outlook.com — each its own pile. Staying on top of them means tab-hopping all week.'],
      [I.CloudOff,'rgba(255,209,102,.12)','var(--gold)','The privacy trade-off','Most AI assistants want your whole inbox in their cloud. For confidential mail, that’s a non-starter.'],
    ];
    return (
      <section className="section sec-divider" id="problem">
        <div className="wrap">
          <SectionHead label="The problem" title="The inbox never stops. Neither does the worry."
            intro="Email is where work lands, decisions get made, and things quietly fall through. Keeping up shouldn’t cost you hours — or your privacy."/>
          <div className="prob-grid">
            {items.map(([Ico,bg,col,h,p],i)=>(
              <div className="prob reveal" key={i} style={{transitionDelay:(i*60)+'ms'}}>
                <span className="pico" style={{background:bg,color:col}}><Ico/></span>
                <h3>{h}</h3><p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- HOW IT WORKS (interactive) ---------- */
  const STEPS = [
    {
      t:'Connect your accounts',
      d:'Add every inbox you juggle. Forwarded mail is attributed correctly.',
      eyebrow:'STEP 01 · CONNECT',
      h:'Add every inbox you juggle',
      desc:'Gmail, Outlook, Microsoft 365 and Outlook.com — connected securely in minutes. What’s On reads them together and keeps every message attributed to the right account.',
      chips:['Gmail · Outlook · M365','Outlook.com / Hotmail','Forwarded mail too'],
    },
    {
      t:'Choose how it runs',
      d:'Connected runs in your Claude plan. Private runs entirely on your device.',
      eyebrow:'STEP 02 · CHOOSE',
      h:'Connected, or Private',
      desc:'Connected runs inside your own Claude plan — triage is effectively free. Private runs entirely on your device with your own AI key, so your mail never leaves it. Switch anytime.',
      chips:['Your Claude plan','Or on-device','Switch whenever'],
    },
    {
      t:'It triages on a schedule',
      d:'Overnight or hourly, it reads everything and does the legwork.',
      eyebrow:'STEP 03 · IT RUNS ITSELF',
      h:'It runs itself on a schedule',
      desc:'Set it loose overnight or every hour. It reads every account, surfaces the few that matter, drafts replies, turns bookings into events — and retries reliably if a connection drops.',
      chips:['Scheduled runs','Drafts your replies','Retries on failure'],
    },
    {
      t:'You review what matters',
      d:'Wake up to a sorted inbox: the few that need you, replies ready.',
      eyebrow:'STEP 04 · YOU REVIEW',
      h:'Wake up to a sorted inbox',
      desc:'Open the app to one calm view: what needs a reply, what’s on your calendar, what’s already handled. You review and send — the legwork is done, and nothing is silently missed.',
      chips:['One calm view','Nothing missed','You stay in control'],
    },
  ];
  const NODES = [
    [I.Mail,'Your inboxes','every account','var(--accent)'],
    [I.Cpu,'What’s On','reads & sorts','var(--cyan)'],
    [I.Sparkle,'Triage','on a schedule','var(--violet)'],
    [I.CheckCircle,'Your email tasks','sorted','var(--mint)'],
  ];
  function HowItWorks(){
    return (
      <section className="section sec-divider connect" id="how">
        <div className="wrap">
          <SectionHead label="How it works" title="Your inbox, on autopilot — the round trip"
            intro="Connect once and let it run. Your device opens a secure two-way link to the What’s On relay, Claude reads and triages every account through its email connection, and your task board updates right on your device."/>
          <div className="flow-embed reveal">
            <iframe src="flow.html?bare=1" title="How What’s On works — animated flow"></iframe>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- BENEFITS ---------- */
  /* ---------- IT LEARNS YOU (centrepiece) ---------- */
  function Learns(){
    const items = [
      [I.List,'Learns your projects',false,'Learns what you’re working on, then auto-files and prioritises new mail against the right project — before you even open it.'],
      [I.Users,'Learns your people',false,'Learns who matters — advisors, family, clients — and never buries them. The noise gets moved out of the way instead.'],
      [I.EyeOff,'Learns the noise',false,'Learns what you ignore and block, and suppresses it before you ever see it. Quieter every week.'],
      [I.Reply,'Learns your voice',false,'Studies how you write and drafts replies that sound like you — your tone, your phrasing, ready to send.'],
      [I.Clock,'Learns your history',false,'Go deep: let it study months of past email to map your people, projects and patterns from day one.'],
      [I.ArrowRight,'Moves you off old accounts',false,'Forward in an old address with no app of its own — it’s triaged too, then helps your contacts move to your new one.'],
      [I.Sparkle,'AI-driven memory updating',false,'You teach it once — “project ACME is now called MissMe - change it”, “Dan Smith’s email has changed to...” — and it remembers. It’s never as dumb tomorrow as it was today.'],
      [I.CheckCircle,'Review & Clean',false,'Even great triage slips now and then — two mails that should have been one task. Review & Clean sweeps your board, spots the duplicates where matching missed, and merges them, so nothing’s counted twice.'],
    ];
    return (
      <section className="section sec-divider" id="learns">
        <div className="wrap">
          <SectionHead label="It learns you" title="It gets to know your world — and acts on it"
            intro="What’s On isn’t a filter. It learns your people, projects and priorities, applies them to every inbox, and gets a little sharper every day."/>
          <div className="benefits-grid">
            {items.map(([Ico,h,addon,p],i)=>(
              <div className="benefit reveal" key={i} style={{transitionDelay:(i%3*60)+'ms'}}>
                <span className="bico"><Ico/></span>
                {addon && <span className="tag-addon">Add-on</span>}
                <h3>{h}</h3><p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- TEACH + THIS WEEK ---------- */
  function LearnsMore(){
    const [taught,setTaught] = useState(null);
    const [why,setWhy] = useState(false);
    const chips = [['More like this','more'],['Hide this sender','hide'],['Not for me','no']];
    const msgs = {
      more:'Got it — more like this. Next time, it just knows.',
      hide:'Done — you won’t see this sender again.',
      no:'Noted — not for you. It’ll keep these out of the way.',
    };
    const week = [
      ['add','var(--cyan)','3 new people','added to your world this week'],
      ['add','var(--accent)','2 projects','it now files to — “Acme launch”, “Q3 budget”'],
      ['star','var(--gold)','1 new VIP','someone you always reply to — never buried again'],
      ['hide','var(--violet)','11 senders','now hidden before they ever reach you'],
    ];
    return (
      <section className="section sec-divider" id="teach">
        <div className="wrap">
          <SectionHead label="You’re in charge" title="Teach it once. It remembers forever."
            intro="You’re never correcting it — you’re teaching it. One tap, and next time it just knows. And it always shows its work."/>
          <div className="teach-grid teach-solo">
            <div className="week-phone-wrap reveal">
              <div className="phone wk-phone">
                <div className="phone-screen">
                  <div className="notch"></div>
                  <div className="scr-status"><span>9:41</span><span className="right"><span style={{color:'var(--gold)'}}>This week</span> ●</span></div>
                  <div className="tw-head">
                    <div className="tw-ttl">This week</div>
                    <div className="tw-sub">What I learned about you · Jun 2–8</div>
                  </div>
                  <div className="tw-hero">
                    <span className="tw-hero-k">YOU'RE GETTING EASIER TO READ</span>
                    <span className="tw-hero-v">17 new things learned</span>
                  </div>
                  <div className="tw-list">
                    {week.map(([type,col,big,rest],i)=>(
                      <div className="tw-item" key={i}>
                        <span className="tw-mark" style={{color:col,borderColor:col,background:'rgba(255,255,255,.03)'}}>{type==='add'?'+':type==='hide'?'–':'★'}</span>
                        <div className="tw-txt"><span className="tw-big">{big}</span><span className="tw-rest">{rest}</span></div>
                      </div>
                    ))}
                  </div>
                  <div className="tw-foot">Updated every Sunday · tap to review</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- TWO WAYS ---------- */
  function TwoWays(){
    return (
      <section className="section sec-divider" id="ways">
        <div className="wrap">
          <SectionHead label="Two ways to run it" title="The same calm inbox. Your level of privacy."
            intro="Start with Connected, or run everything on your own device with Private. The software subscription is What’s On either way."/>
          <div className="ways-grid">
            <div className="way connected reveal">
              <span className="wtag"><I.Cpu/> Connected · everyday</span>
              <div className="wname">Connected</div>
              <div className="wpos">Your inbox, handled — before you wake up.</div>
              <p className="wbody">Runs inside your own <b>Claude plan</b>, so triage is effectively free. It’s powered by your Claude, which already knows your projects and people — <b>smart from day one</b>.</p>
              <ul className="wlist">
                <li><I.Check/><span>All the triage, drafting and planning</span></li>
                <li><I.Check/><span>Move-In: migrate off old accounts</span></li>
                <li><I.Check/><span>Runs in your existing Claude plan</span></li>
                <li><I.Check/><span>Every account in one calm view</span></li>
              </ul>
              <div className="wfor"><b>Best for:</b> everyone who wants a calmer inbox.</div>
            </div>
            <div className="way private reveal">
              <span className="ribbon">Upgrade</span>
              <span className="wtag"><I.Lock/> Private · on-device</span>
              <div className="wname">Private</div>
              <div className="wpos">The AI email assistant that can’t read your email.</div>
              <p className="wbody">Everything Connected does — but <b>entirely on your device</b>, with your own AI key. It builds a memory of you that learns over time and <b>lives only on your device</b>. Yours alone.</p>
              <ul className="wlist">
                <li><I.Check/><span>Runs only on your device</span></li>
                <li><I.Check/><span>Move-In, fully on your device</span></li>
                <li><I.Check/><span>Your keys, your mail — never ours</span></li>
                <li><I.Check/><span>Built for confidential correspondence</span></li>
              </ul>
              <div className="wfor"><b>Best for:</b> lawyers, finance, healthcare and founders who mean it about privacy.</div>
            </div>
          </div>
          <p className="proof-note reveal" style={{marginTop:'24px'}}>Upgrade to Private and your assistant’s memory of you comes with you — onto your device, where no one else can see it.</p>
        </div>
      </section>
    );
  }

  /* ---------- PRIVACY ---------- */
  function Privacy(){
    const pts = [
      [I.Cpu,'On-device, not cloud','In Private, the assistant runs locally on your device. Your email is read where it already lives — it never travels to us.'],
      [I.EyeOff,'We can’t see your mail','There’s no copy of your inbox on our servers, because in Private there’s no server in the loop. We’re incapable of reading it.'],
      [I.Key,'Your keys stay yours','Your own AI key and account credentials stay on your device. They never touch our systems.'],
    ];
    return (
      <section className="section sec-divider privacy" id="privacy">
        <div className="wrap">
          <SectionHead label="Security & privacy" title="The assistant that can’t read your email"
            intro="Most AI assistants ask you to hand over your inbox. With Private, What’s On runs only on your device — and we never see your mail. We won’t claim more than that."/>
          <div className="priv-grid priv-solo">
            <div className="priv-points reveal">
              {pts.map(([Ico,h,p],i)=>(
                <div className="priv-pt" key={i}>
                  <span className="pi"><Ico/></span>
                  <div><h4>{h}</h4><p>{p}</p></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- PROOF / OUTCOMES ---------- */
  function Proof(){
    const vigs = [
      [I.List,'rgba(47,216,238,.12)','var(--cyan)','It files to your projects','New mail lands against the right project automatically — because it learned what you’re working on, and who’s involved.'],
      [I.Shield,'rgba(255,46,166,.12)','var(--accent)','It caught the takeover','Flagged a flurry of near-simultaneous credential and address changes across three providers as urgent — a coordinated account-compromise pattern.'],
      [I.Bolt,'rgba(255,209,102,.12)','var(--gold)','It read the fine print','Translated foreign-language mail inline — Spanish contracts read in English, without downgrading the original.'],
    ];
    return (
      <section className="section sec-divider" id="proof">
        <div className="wrap">
          <SectionHead label="Proof · from real testing" title="84 emails in. The 16 that mattered, out."
            intro="It already knows your advisors, files to your projects, attributes forwarded mail, and learns every sender you block. In one early pass across two mailboxes:"/>
          <div className="cost reveal">
            <div className="stat"><div className="num">84</div><div className="cap">emails triaged in a single pass across two mailboxes</div></div>
            <div className="stat"><div className="num"><span className="u">16</span></div><div className="cap">that actually mattered — surfaced for you</div></div>
            <div className="stat"><div className="num">44</div><div className="cap">marketing & noise emails discarded automatically</div></div>
          </div>
          <div className="vignettes">
            {vigs.map(([Ico,bg,col,h,p],i)=>(
              <div className="vig reveal" key={i} style={{transitionDelay:(i*70)+'ms'}}>
                <span className="vico" style={{background:bg,color:col}}><Ico/></span>
                <h4>{h}</h4><p>{p}</p>
              </div>
            ))}
          </div>
          <p className="proof-note reveal">ANONYMISED FROM REAL TESTING · <span className="ph">[verify figures before publishing]</span></p>
        </div>
      </section>
    );
  }

  /* ---------- MULTI ACCOUNT ---------- */
  function MultiAccount(){
    const provs = [['Gmail','var(--accent)'],['Outlook','var(--cyan)'],['Microsoft 365','var(--violet)'],['Outlook.com / Hotmail','var(--gold)']];
    return (
      <section className="section sec-divider multi" id="accounts">
        <div className="wrap">
          <SectionHead label="Works everywhere you do" title="Every account. One calm view."
            intro="Connect every inbox you juggle. What’s On triages them together and shows you a single picture of your day."/>
          <div className="providers reveal">
            {provs.map(([n,c],i)=>(
              <div className="prov" key={i}><span className="pd" style={{background:c,boxShadow:'0 0 10px '+c}}></span>{n}</div>
            ))}
          </div>
          <p className="sec-intro reveal" style={{marginTop:'28px',fontSize:'15px',color:'var(--mist)'}}>More providers coming.</p>
        </div>
      </section>
    );
  }

  Object.assign(window, { Problem, HowItWorks, Learns, LearnsMore, TwoWays, Privacy, Proof, MultiAccount });
})();