/* comingsoon.jsx — What's On 2 BETA teaser, now a full marketing page.
   Hero shows the real Tasks screen (dummy data) in an iPhone frame,
   followed by the complete product story reused from the main site. */
(function(){
  const { useState, useEffect, useRef } = React;
  const I = window.Icons;
  const {
    StoreBadges, useReveal,
    Qualifier, Problem, HowItWorks, Learns, LearnsMore, MoveIn,
    TwoWays, Privacy, Proof, Addons, MultiAccount, PlanCards, Pricing, FAQ, FinalCTA, Footer,
  } = window;

  // Coming-soon nav: same chrome as the live site, but the CTA is a
  // non-clickable "Get the app / Coming Soon!" badge.
  const NAV = [['How it works','#how'],['Move-In','#movein'],['Two ways','#ways'],['Privacy','#privacy'],['Pricing','#pricing']];
  function SoonCTA(){
    return (
      <span className="btn btn-primary cs-cta-soon" aria-disabled="true">
        <span className="l1">Get the app</span>
        <span className="l2">Coming Soon!</span>
      </span>
    );
  }
  function CSNav(){
    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">
              <SoonCTA/>
              <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>
          <SoonCTA/>
        </div>
      </React.Fragment>
    );
  }

  function Stars(){
    const ref = useRef(null);
    useEffect(()=>{
      const el = ref.current; if(!el) return;
      let h='';
      for(let i=0;i<90;i++){
        const sz = Math.random()<.16?2.4:Math.random()*1.3+.5;
        h += `<i style="left:${Math.random()*100}%;top:${Math.random()*100}%;width:${sz}px;height:${sz}px;opacity:${Math.random()*.5+.15}"></i>`;
      }
      el.innerHTML = h;
    },[]);
    return <div className="stars" ref={ref}></div>;
  }

  function Device(){
    return (
      <div className="cs-device-wrap reveal">
        <div className="cs-device">
          <div className="cs-island"></div>
          <div className="cs-screen">
            <img src="assets/whatson-tasks-screen.png" alt="What's On 2 — your tasks, triaged and prioritised across every inbox" />
          </div>
        </div>
        <div className="cs-device-cap"><span className="dot"></span>A real look at the beta · your inbox, already triaged</div>
      </div>
    );
  }

  function NotifyForm(){
    const [val,setVal] = useState('');
    const [done,setDone] = useState(false);
    const [busy,setBusy] = useState(false);
    const [err,setErr] = useState('');
    const submit = async (e)=>{
      e.preventDefault();
      if(!/.+@.+\..+/.test(val)){ setErr('Please enter a valid email address.'); return; }
      setBusy(true); setErr('');
      try{
        const r = await fetch('/forms/early-access',{
          method:'POST',
          headers:{'Content-Type':'application/json'},
          body:JSON.stringify({ email: val.trim(), source: 'comingsoon' }),
        });
        if(!r.ok) throw new Error('status '+r.status);
        setDone(true);
      }catch(_){
        setErr('Something went wrong — please try again in a moment.');
      }finally{
        setBusy(false);
      }
    };
    if(done) return (
      <div className="cs-done">
        <span className="cs-done-ic"><I.CheckCircle/></span>
        You’re on the list — we’ll email you the moment the beta opens.
      </div>
    );
    return (
      <form className="cs-form" onSubmit={submit}>
        <input type="email" required placeholder="you@example.com" value={val}
          onChange={e=>{setVal(e.target.value); if(err) setErr('');}} aria-label="Email address" disabled={busy}/>
        <button className="btn btn-primary" type="submit" disabled={busy}>{busy ? 'Adding you…' : 'Get early access'}</button>
        {err && <div className="cs-err" role="alert">{err}</div>}
      </form>
    );
  }

  function BetaHero(){
    return (
      <section className="cs-hero" id="top">
        <div className="wrap cs-grid">
          <div className="cs-copy">
            <div className="cs-badge"><span className="cs-pulse"></span>BETA · COMING SOON TO APPLE</div>
            <h1 className="cs-h1">
              <span className="whatson-wordmark cs-mark">What’s On<span className="two">2</span></span>
              <span className="cs-beta">BETA</span>
              <span className="cs-soon">Coming soon.</span>
            </h1>
            <p className="cs-lead">
              The next What’s On is almost here — <b>sharper triage, a weekly memory of your world,
              and replies in your voice</b>, all running privately on your own device.{' '}
              <b>Launching first on Apple</b> — iPhone &amp; Mac, with Android to follow. Be first through the door.
            </p>

            <NotifyForm/>

            <div className="cs-stores"><StoreBadges soon={true}/></div>

            <div className="hero-trust cs-trust">
              <span><span className="dot"></span>Apple first — iPhone &amp; Mac</span>
              <span><span className="dot"></span>Needs Claude + a Gmail or Outlook inbox</span>
              <span><span className="dot"></span>Private mode: we can’t see your mail</span>
            </div>
          </div>

          <Device/>
        </div>
      </section>
    );
  }

  function App(){
    useReveal();
    return (
      <React.Fragment>
        <div className="bg-glow"></div>
        <Stars/>
        <CSNav/>
        <main id="root-main">
          <BetaHero/>
          <Qualifier/>
          <Problem/>
          <HowItWorks/>
          <Learns/>
          <LearnsMore/>
          <MoveIn/>
          <TwoWays/>
          <Privacy/>
          <Proof/>
          <Addons cur="£"/>
          <MultiAccount/>
          <PlanCards/>
          <Pricing cur="£"/>
          <FAQ/>
          <FinalCTA/>
          <Footer/>
        </main>
      </React.Fragment>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
})();