/* 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'],
    [I.Cpu,'What’s On','reads & sorts'],
    [I.Sparkle,'Triage','on a schedule'],
    [I.CheckCircle,'Your morning','sorted'],
  ];
  function HowItWorks(){
    const [step,setStep] = useState(0);
    const s = STEPS[step];
    return (
      <section className="section sec-divider connect" id="how">
        <div className="wrap">
          <SectionHead label="How it works" title="Four steps to a quiet inbox"
            intro="No new inbox to learn and no rules to build. Connect once, choose how it runs, and let it do the legwork."/>
          <div className="connect-shell">
            <div className="connect-steps reveal">
              {STEPS.map((c,i)=>(
                <button className={'cstep'+(i===step?' active':'')} key={i} onClick={()=>setStep(i)}>
                  <span className="num">{i+1}</span>
                  <span className="ctxt"><h4>{c.t}</h4><p>{c.d}</p></span>
                </button>
              ))}
            </div>
            <div className="connect-stage reveal">
              <div className="stage-eyebrow">{s.eyebrow}</div>
              <h3>{s.h}</h3>
              <p className="sdesc">{s.desc}</p>
              <div className="connect-chips">{s.chips.map((c,i)=><span className="chip" key={i}>{c}</span>)}</div>
              <div className="diagram">
                <div className="flow">
                  {NODES.map(([Ico,n,sub],i)=>(
                    <React.Fragment key={i}>
                      <div className={'node'+(i<=step?' lit':'')}>
                        <span className="nico"><Ico/></span>
                        <div className="ntxt">{n}</div>
                        <div className="nsub">{sub}</div>
                      </div>
                      {i<NODES.length-1 && <span className="arr"><I.ArrowRight/></span>}
                    </React.Fragment>
                  ))}
                </div>
              </div>
              <div className="connect-nav">
                <button disabled={step===0} onClick={()=>setStep(v=>Math.max(0,v-1))}>← Back</button>
                <button disabled={step===STEPS.length-1} onClick={()=>setStep(v=>Math.min(STEPS.length-1,v+1))}>Next →</button>
              </div>
            </div>
          </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',true,'Studies how you write and drafts replies that sound like you — your tone, your phrasing, ready to send.'],
      [I.Clock,'Learns your history',true,'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,'It compounds',false,'You teach it once — “more like this”, “hide this sender” — and it remembers. It’s never as dumb tomorrow as it was today.'],
    ];
    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">
            <div className="teach-card reveal">
              <div className="tc-eyebrow"><span className="dot"></span>TEACH WHAT’S ON</div>
              <div className="tc-mail">
                <span className="tc-av"></span>
                <div className="tc-mailtxt">
                  <div className="tc-from"><span className="nm">Acme Procurement</span><span className="tc-vip">VIP</span></div>
                  <div className="tc-subj">Q3 framework agreement — please review</div>
                </div>
              </div>
              <div className="tc-why">
                <button onClick={()=>setWhy(w=>!w)}>{why?'Hide reason':'Why this?'}</button>
                {why && <p>Surfaced because Acme is a <b>VIP</b> you reply to within the hour — and it’s filed to your <b>“Acme launch”</b> project.</p>}
              </div>
              <div className="tc-chips">
                {chips.map(([l,k])=>(
                  <button key={k} className={'tc-chip'+(taught===k?' on':'')} onClick={()=>setTaught(k)}>{l}</button>
                ))}
              </div>
              {taught && <div className="tc-confirm">{msgs[taught]}</div>}
            </div>
            <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">
            <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 className="receipt reveal">
              <div className="rtop"><I.Shield/> PRIVATE MODE · ON THIS DEVICE</div>
              <div className="rline"><span>Emails read on device</span><b>2,481</b></div>
              <div className="rline"><span>Emails sent to our servers</span><span className="zero">0</span></div>
              <div className="rline"><span>Drafts written locally</span><b>37</b></div>
              <div className="rline"><span>Keys stored off-device</span><span className="zero">0</span></div>
              <div className="rline"><span>Data shared with third parties</span><span className="zero">0</span></div>
              <div className="rline"><span>Processing location</span><span className="ok">your device</span></div>
              <div className="rfoot">RUNS ONLY ON YOUR DEVICE · WE NEVER SEE YOUR MAIL</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. <span className="ph" style={{color:'var(--gold)',fontFamily:'Space Mono'}}>[confirm supported list]</span></p>
        </div>
      </section>
    );
  }

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