/* movein.jsx — "Move-In" forwarded-account migration section → window.MoveIn */
(function(){
  const { useState } = React;
  const I = window.Icons;
  const { SectionHead } = window;

  function MoveIn(){
    const base = 12, total = 16;
    const seed = [
      ['Mum', 'still writes to your old address', true],
      ['Dr. Patel — surgery', 'appointment reminders', false],
      ['Acme payroll', 'your payslips land here', false],
      ['Five-a-side group', 'Thursday match thread', false],
    ];
    const [asked,setAsked] = useState([false,false,false,false]);
    const movedExtra = asked.filter(Boolean).length;
    const moved = base + movedExtra;
    const pct = Math.round((moved/total)*100);
    const done = moved >= total;

    const steps = [
      [I.ArrowRight,'Forward it in','Point your old account at a mailbox What’s On 2 already handles, like Gmail or Outlook. No app on the old one? Doesn’t matter.'],
      [I.Inbox,'Triaged as your old address','It’s sorted alongside everything else — but clearly labelled as your old address, so nothing feels lost.'],
      [I.Reply,'A friendly nudge, one tap','It spots who still writes to the old address and drafts a warm “I’ve moved” note — most important people first. You approve every one.'],
      [I.CheckCircle,'Watch it hit 100%','As contacts move across, the bar fills. When it’s full, you can finally close the old account for good.'],
    ];

    return (
      <section className="section sec-divider" id="movein">
        <div className="wrap">
          <SectionHead label="Move-In" title="Bring your old email with you — then leave it behind."
            intro="Stuck on an old address everyone still uses? Forward it in. What’s On 2 triages it, then helps your contacts find your new one — one tap at a time."/>

          <div className="movein-grid">
            {/* interactive migration card */}
            <div className="mi-card reveal">
              <div className="mi-route">
                <div className="mi-old"><span className="mi-tag">Retiring</span><span className="mi-addr">you@btinternet.com</span></div>
                <span className="mi-arrow"><I.ArrowRight/></span>
                <div className="mi-new"><span className="mi-tag new">Your address now</span><span className="mi-addr">you@gmail.com</span></div>
              </div>

              {!done ? (
                <div className="mi-bar-wrap">
                  <div className="mi-bar"><span className="mi-fill" style={{width:pct+'%'}}></span></div>
                  <div className="mi-bar-meta"><span>{moved} of {total} contacts moved</span><b>{pct}%</b></div>
                </div>
              ) : (
                <div className="mi-done">
                  <span className="mi-check"><I.CheckCircle/></span>
                  <div><b>Ready to close this account.</b><p>Everyone who matters has your new address. The old inbox can go.</p></div>
                </div>
              )}

              <div className="mi-rows">
                {seed.map(([name,sub,vip],i)=>(
                  <div className={'mi-row'+(asked[i]?' moved':'')} key={i}>
                    {vip && <span className="mi-star"><I.Star/></span>}
                    <div className="mi-who"><span className="mi-name">{name}</span><span className="mi-sub">{sub}</span></div>
                    <button className={'mi-ask'+(asked[i]?' asked':'')} disabled={asked[i]}
                      onClick={()=>setAsked(a=>a.map((v,k)=>k===i?true:v))}>
                      {asked[i] ? 'Asked ✓' : 'Ask to update'}
                    </button>
                  </div>
                ))}
              </div>
              {!done && <p className="mi-hint">Tap “Ask to update” — it drafts the note; you approve before anything sends.</p>}
              {done && <button className="mi-reset" onClick={()=>setAsked([false,false,false,false])}>Replay</button>}
            </div>

            {/* steps + trust */}
            <div className="mi-side">
              <div className="mi-steps">
                {steps.map(([Ico,h,p],i)=>(
                  <div className="mi-step reveal" key={i} style={{transitionDelay:(i*60)+'ms'}}>
                    <span className="mi-num">{i+1}</span>
                    <span className="mi-sico"><Ico/></span>
                    <div><h4>{h}</h4><p>{p}</p></div>
                  </div>
                ))}
              </div>
              <div className="mi-chips reveal">
                <span className="mi-chip"><I.Check/> You approve every note</span>
                <span className="mi-chip"><I.Check/> No extra cost</span>
                <span className="mi-chip"><I.Lock/> Private: we never see your contacts</span>
              </div>
            </div>
          </div>

          <p className="proof-note reveal" style={{marginTop:'26px'}}>Included on both plans. On <b style={{color:'var(--gold)'}}>Private</b>, it all happens on your device — we help you move your contacts without ever seeing who they are.</p>
        </div>
      </section>
    );
  }

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