/* HOME view */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function OrbitPortrait(){
  const wrap = useRefH(null);
  useEffectH(() => {
    const el = wrap.current;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left)/r.width - 0.5;
      const py = (e.clientY - r.top)/r.height - 0.5;
      el.style.setProperty('--rx', `${-py*8}deg`);
      el.style.setProperty('--ry', `${px*8}deg`);
    };
    const reset = () => { el.style.setProperty('--rx','0deg'); el.style.setProperty('--ry','0deg'); };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', reset);
    return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', reset); };
  }, []);
  return (
    <div className="portrait-stage" ref={wrap}>
      <div className="orbit orbit-1"></div>
      <div className="orbit orbit-2"></div>
      <div className="orbit orbit-3"><span className="orbit-sat"></span></div>
      <div className="portrait-tilt">
        <div className="portrait-frame hov">
          <img src="img/sharayu.jpg" alt="Sharayu Maknikar" />
          <span className="corner tl"></span><span className="corner tr"></span>
          <span className="corner bl"></span><span className="corner br"></span>
        </div>
      </div>
      <div className="p-label p-label-1 mono">28.4°N&nbsp;/&nbsp;80.6°W</div>
      <div className="p-label p-label-2 mono">CREW&nbsp;·&nbsp;NOMINAL</div>
    </div>
  );
}

function MagneticBtn({ children, className='', ...rest }){
  const ref = useRefH(null);
  useEffectH(() => {
    const el = ref.current; if(window.matchMedia('(hover:none)').matches) return;
    const move = (e) => {
      const r = el.getBoundingClientRect();
      el.style.transform = `translate(${(e.clientX-r.left-r.width/2)*0.25}px, ${(e.clientY-r.top-r.height/2)*0.35 - 3}px)`;
    };
    const out = () => { el.style.transform=''; };
    el.addEventListener('mousemove', move); el.addEventListener('mouseleave', out);
    return () => { el.removeEventListener('mousemove', move); el.removeEventListener('mouseleave', out); };
  }, []);
  return <button ref={ref} className={`btn ${className}`} {...rest}>{children}</button>;
}

function Home({ go }){
  const S = window.SITE;
  return (
    <main className="page" key="home">
      <Cursor/>

      {/* HERO */}
      <header className="hero">
        <Starfield/>
        <div className="wrap hero-grid">
          <div className="hero-copy">
            <div className="kicker reveal in">Mission Control Officer — AARG</div>
            <h1 className="hero-title display reveal in" data-d="1">
              Space policy, built<br/>from the <span className="accent">operations</span> up.
            </h1>
            <p className="hero-lead reveal in" data-d="2">{S.heroLead}</p>
            <div className="hero-cta reveal in" data-d="3">
              <MagneticBtn className="hov" onClick={()=>go('about')}>
                Explore the work <span className="arr">↗</span>
              </MagneticBtn>
              <MagneticBtn className="ghost hov" onClick={()=>go('contact')}>
                Get in touch <span className="arr">→</span>
              </MagneticBtn>
            </div>
          </div>
          <div className="hero-portrait reveal in" data-d="2">
            <OrbitPortrait/>
          </div>
        </div>
        <div className="scroll-cue mono">SCROLL <span>↓</span></div>
      </header>

      {/* STATUS TICKER */}
      <Ticker items={S.status}/>

      {/* INTRO STATEMENT — dark */}
      <section className="statement">
        <div className="wrap">
          <div className="kicker reveal" style={{color:'rgba(244,238,226,.55)'}}>The throughline</div>
          <Reveal as="p" d={1} className="statement-text">
            Policy isn&rsquo;t theory. In a mission environment it becomes&nbsp;
            <span className="accent">safety, communication, and coordination</span> — the difference
            between a plan and a crew that trusts it.
          </Reveal>
          <div className="statement-meta mono reveal" data-d="2">
            <span>FROM REGULATORY AFFAIRS</span><span className="dash">—</span><span>TO MISSION CONTROL</span>
          </div>
        </div>
      </section>

      {/* FOCUS AREAS */}
      <section className="section focus">
        <div className="wrap">
          <div className="sec-head">
            <Reveal as="h2" className="sec-title display">What I work on</Reveal>
            <Reveal as="div" d={1} className="sec-sub">Three lenses on the same problem — making space systems safer, clearer, and better coordinated.</Reveal>
          </div>
          <div className="focus-grid">
            {S.focus.map((f,i) => (
              <Reveal as="article" key={f.no} d={i+1} className="focus-card hov">
                <div className="focus-no mono">{f.no}</div>
                <h3 className="focus-title">{f.title}</h3>
                <p className="focus-body">{f.body}</p>
                <div className="focus-tags">
                  {f.tags.map(t => <span className="tag" key={t}>{t}</span>)}
                </div>
                <div className="focus-arrow">↗</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PREVIEW STRIP → about */}
      <section className="section preview">
        <div className="wrap preview-grid">
          <div>
            <Reveal as="div" className="kicker">The path</Reveal>
            <Reveal as="h2" d={1} className="preview-title display">
              From compliance frameworks<br/>to flight directors.
            </Reveal>
            <Reveal as="p" d={2} className="preview-body">
              A decade across regulatory affairs and clinical operations, now applied to human
              spaceflight safety, liability, and space-traffic coordination. The full timeline lives on the about page.
            </Reveal>
            <Reveal as="div" d={3}>
              <button className="btn ghost hov" onClick={()=>go('about')}>Read the story <span className="arr">→</span></button>
            </Reveal>
          </div>
          <div className="preview-list">
            {S.experience.slice(0,4).map((e,i) => (
              <Reveal as="div" key={i} d={i+1} className="preview-row hov" onClick={()=>go('about')}>
                <span className="pr-role">{e.role}</span>
                <span className="pr-org mono">{e.org}</span>
                <span className="pr-period mono">{e.period}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <Footer go={go}/>
    </main>
  );
}
window.Home = Home;