/* 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 movein-solo">
            {/* 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 });
})();