/* hero.jsx — Nav, mobile sheet, hero + phone mock → window */
(function(){
  const { useState, useEffect } = React;
  const I = window.Icons;
  const { StoreBadges } = window;

  const NAV = [
    ['How it works','#how'],['Move-In','#movein'],['Two ways','#ways'],['Privacy','#privacy'],['Pricing','#pricing']
  ];

  function Nav(){
    const [scrolled,setScrolled] = useState(false);
    const [open,setOpen] = useState(false);
    useEffect(()=>{
      const on=()=>setScrolled(window.scrollY>16);
      on(); window.addEventListener('scroll',on,{passive:true});
      return ()=>window.removeEventListener('scroll',on);
    },[]);
    useEffect(()=>{ document.body.style.overflow = open?'hidden':''; },[open]);
    return (
      <React.Fragment>
        <header className={'nav'+(scrolled?' scrolled':'')}>
          <div className="nav-inner">
            <a className="brand" href="#top" aria-label="What’s On 2 — home">
              <span className="whatson-wordmark">What’s On<span className="two">2</span></span>
            </a>
            <nav className="nav-links">
              {NAV.map(([l,h])=><a key={h} href={h}>{l}</a>)}
            </nav>
            <div className="nav-cta">
              <a className="btn btn-primary" href="#download">Get the app</a>
              <button className="hamburger" aria-label="Menu" onClick={()=>setOpen(true)}><I.Menu/></button>
            </div>
          </div>
        </header>
        <div className={'sheet'+(open?' open':'')}>
          <div className="sheet-top">
            <a className="brand" href="#top" onClick={()=>setOpen(false)} aria-label="What’s On 2 — home">
              <span className="whatson-wordmark">What’s On<span className="two">2</span></span>
            </a>
            <button onClick={()=>setOpen(false)} aria-label="Close"><I.X/></button>
          </div>
          <nav>
            {NAV.map(([l,h])=><a key={h} href={h} onClick={()=>setOpen(false)}>{l}</a>)}
          </nav>
          <a className="btn btn-primary" href="#download" onClick={()=>setOpen(false)}>Get the app</a>
        </div>
      </React.Fragment>
    );
  }

  function PhoneMock(){
    return (
      <div className="phone-wrap reveal">
        <div className="phone">
          <div className="phone-screen">
            <div className="notch"></div>
            <div className="scr-status">
              <span>9:41</span>
              <span className="right"><span style={{color:'var(--cyan)'}}>on-device</span> ●</span>
            </div>
            <div className="scr-head">
              <div className="ttl"><span className="whatson-wordmark">What’s On<span className="two">2</span></span></div>
              <div className="sub"><span className="dot"></span>LAST RUN 06:00 · 2 ACCOUNTS · 84 READ</div>
            </div>
            <div className="scr-list">
              <div className="scr-card accent">
                <div className="row1">
                  <span className="ico" style={{background:'rgba(255,46,166,.14)',color:'var(--accent)'}}><I.Reply/></span>
                  <span className="lbl">Needs you</span>
                  <span className="cnt">16</span>
                </div>
                <div className="desc">A client, an invoice due Friday, and your accountant. Replies already drafted.</div>
                <span className="scr-pill" style={{color:'var(--accent)',border:'1px solid rgba(255,46,166,.35)',background:'rgba(255,46,166,.08)'}}>DRAFTS READY</span>
              </div>
              <div className="scr-card">
                <div className="row1">
                  <span className="ico" style={{background:'rgba(47,216,238,.12)',color:'var(--cyan)'}}><I.Calendar/></span>
                  <span className="lbl">Added to your day</span>
                  <span className="cnt">Today</span>
                </div>
                <div className="desc">Hospital appointment 14:30 — pulled from your inbox into your calendar.</div>
              </div>
              <div className="scr-card">
                <div className="row1">
                  <span className="ico" style={{background:'rgba(255,209,102,.12)',color:'var(--gold)'}}><I.CheckCircle/></span>
                  <span className="lbl">Noise buried</span>
                  <span className="cnt">44</span>
                </div>
                <div className="desc">Marketing and newsletters cleared automatically — you never had to look.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function Hero({copy}){
    return (
      <section className="hero" id="top">
        <div className="wrap hero-grid">
          <div>
            <div className="reveal" style={{marginBottom:'20px'}}>
              <span className="eyebrow">On-device · Zero-knowledge · Multi-account</span>
            </div>
            <h1 className="reveal" dangerouslySetInnerHTML={{__html:copy.h}}/>
            <p className="lead reveal" dangerouslySetInnerHTML={{__html:copy.lead}}/>
            <div className="hero-cta reveal">
              <StoreBadges/>
              <div className="hero-trust">
                <span><span className="dot"></span>Runs itself on a schedule</span>
                <span><span className="dot"></span>Private mode: we can't see your mail</span>
                <span><span className="dot"></span>Gmail · Outlook · M365</span>
              </div>
            </div>
          </div>
          <PhoneMock/>
        </div>
      </section>
    );
  }

  Object.assign(window, { Nav, Hero });
})();