/* Home — Naomi as the artist (not only hostages). Red is primary. */
const { useState: useHomeState } = React;

/* ============ HERO ============ */
function Hero({ go }) {
  return (
    <section className="ng-hero" style={{ background:'var(--paper)', padding:'clamp(26px,5vw,52px) var(--pad-x) clamp(40px,7vw,68px)',
      borderBottom:'1px solid var(--line)', overflow:'hidden' }}>
      <div className="ng-hero-bg" aria-hidden="true">
        <img src="assets/hero-1.jpg" alt="" decoding="async"/>
        <img src="assets/hero-2.jpg" alt="" decoding="async"/>
        <img src="assets/hero-3.jpg" alt="" decoding="async"/>
        <img src="assets/hero-4.jpg" alt="" decoding="async"/>
        <img src="assets/hero-5.jpg" alt="" decoding="async"/>
        <div className="ng-hero-sketch"></div>
        <div className="ng-hero-veil"></div>
      </div>
      <div className="ng-hero-grid">
        <div>
          <Reveal delay={120}>
            <h1 style={{ fontFamily:'var(--font-display)', textTransform:'uppercase',
              fontSize:'clamp(42px, 7.4vw, 116px)', lineHeight:.94, letterSpacing:'var(--track-display)',
              margin:'18px 0 4px', color:'var(--ink)' }}>
              I draw what I can't<br/>
              bear to <span style={{ color:'var(--marker-red)' }}>forget</span>.
            </h1>
          </Reveal>
          <Reveal delay={260}>
            <p style={{ fontFamily:'var(--font-sans)', fontWeight:300, fontSize:'clamp(17px,4.2vw,22px)', lineHeight:1.55,
              color:'var(--ink-soft)', maxWidth:560, margin:'clamp(22px,4vw,34px) 0 clamp(24px,4vw,32px)' }}>
              From October 7 hostages to presidents, drawn one face at a time.
            </p>
          </Reveal>
          <Reveal delay={380}>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              <Button kind="red" onClick={()=>go('hostages')}>See the portraits →</Button>
              <Button kind="ghost" onClick={()=>go('about')}>About me</Button>
            </div>
          </Reveal>
        </div>

        {/* Naomi cutout — transparent PNG, no frame needed */}
        <Reveal delay={200} className="ng-hero-photo">
          <div style={{ position:'relative', width:'100%' }}>
            <img src="assets/naomi-portrait.png" alt="Naomi Gal" fetchpriority="high" decoding="async" style={{ display:'block', width:'100%', height:'auto',
              WebkitMaskImage:'linear-gradient(180deg, #000 0, #000 86%, transparent 100%)',
              maskImage:'linear-gradient(180deg, #000 0, #000 86%, transparent 100%)' }}/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ NAME TICKER — a quiet memorial marquee ============ */
function NameTicker({ go }) {
  const names = [...window.NG_PEOPLE, ...window.NG_PEOPLE];
  const dur = Math.round(window.NG_PEOPLE.length * 2.2);
  const dot = (s) => s==='held' ? 'var(--ribbon)' : s==='returned' ? 'var(--hope)' : 'var(--memory)';
  return (
    <div onClick={()=>go('hostages')} title="Open the hostages page"
      style={{ background:'var(--ink)', color:'var(--paper)', overflow:'hidden', position:'relative',
        cursor:'pointer', borderBottom:'1px solid var(--line)' }}>
      <div className="ng-ticker-label" style={{ position:'absolute', left:0, top:0, bottom:0, zIndex:2, display:'flex', alignItems:'center',
        background:'var(--marker-red)', color:'#fff',
        fontFamily:'var(--font-sans)', fontWeight:700 }}>
        <Ribbon size={13} color="#fff"/> Not a number
      </div>
      <div style={{ position:'absolute', right:0, top:0, bottom:0, width:90, zIndex:2, pointerEvents:'none',
        background:'linear-gradient(90deg, rgba(20,17,15,0), var(--ink))' }}/>
      <div className="ng-ticker" style={{ display:'flex', whiteSpace:'nowrap', willChange:'transform', paddingLeft:8,
        width:'max-content', '--ticker-dur': `${dur}s` }}>
        {names.map((p,i)=>(
          <span key={i} style={{ display:'inline-flex', alignItems:'center', gap:9, padding:'15px 24px',
            fontFamily:'var(--font-sans)', fontSize:15 }}>
            <span style={{ width:8, height:8, borderRadius:'50%', background:dot(p.status) }}/>
            <strong style={{ fontWeight:700 }}>{p.name}{p.age!=null?`, ${p.age}`:''}</strong>
            <span style={{ opacity:.42, fontSize:13 }}>{p.place}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ============ HOSTAGES BAND ============ */
function HostagesBand({ go }) {
  const [expanded, setExpanded] = useHomeState(false);
  const initial = 8;
  const full = expanded ? 32 : initial;
  return (
    <section className="ng-faces-band" style={{ background:'var(--white)', borderBottom:'1px solid var(--line)' }}>
      <div className="ng-faces-bg" aria-hidden="true"></div>
      <div className="ng-faces-inner" style={{ padding:'clamp(44px,7vw,68px) var(--pad-x) clamp(48px,7vw,76px)' }}>
        <div style={{ maxWidth:1180, margin:'0 auto' }}>
          <Reveal>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:16 }}>
              <div>
                <h2 style={{ fontSize:'clamp(30px,5vw,48px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 0', maxWidth:'22ch' }}>
                  Every face is a whole world.
                </h2>
              </div>
              <Button kind="ink" onClick={()=>go('hostages')}>The full list →</Button>
            </div>
          </Reveal>
          <div style={{ marginTop:36, display:'grid',
            gridTemplateColumns:'repeat(auto-fill, minmax(150px, 1fr))', gap:12 }}>
            {Array.from({length:full}).map((_,i)=>{
              const p = window.NG_PEOPLE[i % window.NG_PEOPLE.length];
              return (
                <Reveal key={i} delay={Math.min(i,8)*40}>
                  <div onClick={()=>go('hostages')} className="ng-card is-lift" style={{ cursor:'pointer', borderRadius:'var(--radius-md)', overflow:'hidden',
                    background:'var(--white)', boxShadow:'0 1px 2px rgba(20,17,15,.05), 0 6px 18px rgba(20,17,15,.06)' }}>
                    <Portrait person={p}/>
                    <div style={{ padding:'10px 12px 12px' }}>
                      <div style={{ fontWeight:700, fontSize:13, color:'var(--ink)' }}>{p.name}{p.age!=null?`, ${p.age}`:''}</div>
                      <div style={{ fontSize:11, color:'var(--graphite)' }}>{p.place}</div>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
          <div style={{ display:'flex', justifyContent:'center', marginTop:30, gap:12, flexWrap:'wrap' }}>
            {!expanded && <Button kind="yellow" onClick={()=>setExpanded(true)}>
              <Ribbon size={13} color="var(--ink)"/> See more
              <span style={{ display:'inline-flex', alignItems:'center', justifyContent:'center',
                padding:'2px 8px', borderRadius:999, background:'rgba(20,17,15,.16)', fontSize:12.5 }}>{window.NG_PEOPLE.length}+</span>
            </Button>}
            <Button kind="ghost" onClick={()=>go('hostages')}>Open the full page →</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ MY LATEST REELS ============
   Real videos. Cards autoplay muted on hover; clicking opens the full reel
   with sound. Drop more files into assets/reels and add a row here. */
const NG_REELS = [
  { id:'r1', src:'assets/reels/reel-2.mp4', title:'Opening night', meta:'Mileiaday.com' },
  { id:'r2', src:'assets/reels/reel-4.mp4', title:'Hot off the press', meta:'Milei books, ES & EN' },
  { id:'r3', src:'assets/reels/reel-5.mp4', title:'Mi exhibición', meta:'120 años del Congreso' },
  { id:'r4', src:'assets/reels/reel-3.mp4', title:'The best power tool', meta:'Slashing inflation' },
  { id:'r5', src:'assets/reels/reel-7.mp4', title:'In Forbes Argentina', meta:'@forbesargentina' },
  { id:'r6', src:'assets/reels/reel-6.mp4', title:'Gracias por venir', meta:'After the exhibition' },
  { id:'r7', src:'assets/reels/reel-1.mp4', title:'Moshe & memory', meta:'Why a nation remembers' },
];

function PlayMark({ size = 56 }) {
  return (
    <span style={{ width:size, height:size, borderRadius:'50%', background:'rgba(20,17,15,.55)',
      backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)',
      display:'flex', alignItems:'center', justifyContent:'center', color:'#fff' }}>
      <svg width={size*.36} height={size*.36} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M4 2.5 L17 10 L4 17.5 Z" />
      </svg>
    </span>
  );
}

function ReelCard({ r, onOpen, active }) {
  const [h, setH] = useHomeState(false);
  const vref = React.useRef(null);
  const enter = () => {
    setH(true);
    const v = vref.current;
    if (v) { v.currentTime = 0; const p = v.play(); if (p && p.catch) p.catch(()=>{}); }
  };
  const leave = () => {
    setH(false);
    const v = vref.current;
    if (v) { v.pause(); }
  };
  return (
    <div onClick={()=>onOpen(r)} onMouseEnter={enter} onMouseLeave={leave}
      className="ng-card"
      style={{ cursor:'pointer', position:'relative', aspectRatio:'9/16', borderRadius:'var(--radius-md)', overflow:'hidden',
        background:'#000',
        transform: h ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: h ? '0 26px 50px rgba(20,17,15,.26)' : '0 2px 12px rgba(20,17,15,.12)',
        transition:'transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s' }}>
      <video ref={vref} src={r.src} muted loop playsInline preload="metadata"
        style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover',
          transform: h ? 'scale(1.04)' : 'scale(1)', transition:'transform .5s ease' }}></video>

      {/* play affordance, fades out on hover */}
      <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
        pointerEvents:'none', opacity: h ? 0 : 1, transition:'opacity .25s' }}>
        <PlayMark size={56} />
      </div>

      {/* bottom gradient + caption */}
      <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'44px 14px 14px',
        background:'linear-gradient(180deg, rgba(20,17,15,0) 0%, rgba(20,17,15,.72) 72%, rgba(20,17,15,.9) 100%)',
        color:'var(--paper)', fontFamily:'var(--font-sans)', pointerEvents:'none' }}>
        <div style={{ fontSize:13.5, fontWeight:700, lineHeight:1.25 }}>{r.title}</div>
        <div style={{ fontSize:11, opacity:.78, marginTop:3, letterSpacing:'.03em' }}>{r.meta}</div>
      </div>
    </div>
  );
}

function ReelPlayer({ r, onClose, onPrev, onNext }) {
  const vref = React.useRef(null);
  React.useEffect(() => {
    const v = vref.current;
    if (v) { v.currentTime = 0; const p = v.play(); if (p && p.catch) p.catch(()=>{}); }
  }, [r.id]);
  return (
    <div role="dialog" aria-modal="true" onClick={onClose} className="ng-reel-overlay"
      style={{ position:'fixed', inset:0, background:'rgba(20,17,15,.82)', backdropFilter:'blur(8px)',
        WebkitBackdropFilter:'blur(8px)', zIndex:100, display:'flex', alignItems:'center', justifyContent:'center' }}>
      <button onClick={(e)=>{ e.stopPropagation(); onPrev(); }} aria-label="Previous reel"
        className="ng-reel-arrow is-prev"
        style={{ position:'absolute', display:'flex', alignItems:'center', justifyContent:'center',
          width:48, height:48, borderRadius:'50%', border:'none',
          background:'rgba(247,242,233,.12)', color:'var(--paper)', cursor:'pointer' }}><Chevron dir="left" size={24}/></button>
      <button onClick={(e)=>{ e.stopPropagation(); onNext(); }} aria-label="Next reel"
        className="ng-reel-arrow is-next"
        style={{ position:'absolute', display:'flex', alignItems:'center', justifyContent:'center',
          width:48, height:48, borderRadius:'50%', border:'none',
          background:'rgba(247,242,233,.12)', color:'var(--paper)', cursor:'pointer' }}><Chevron dir="right" size={24}/></button>
      <button onClick={onClose} aria-label="Close reel"
        style={{ position:'absolute', top:16, right:16, width:42, height:42, borderRadius:'50%',
          display:'flex', alignItems:'center', justifyContent:'center',
          border:'none', background:'rgba(247,242,233,.12)', color:'var(--paper)',
          cursor:'pointer', zIndex:2 }}><CloseIcon size={19}/></button>

      <div onClick={(e)=>e.stopPropagation()} className="ng-reel-frame"
        style={{ position:'relative', aspectRatio:'9/16',
          background:'#000', borderRadius:'var(--radius-lg)', overflow:'hidden',
          boxShadow:'0 40px 90px rgba(0,0,0,.5)' }}>
        <video ref={vref} src={r.src} controls autoPlay loop playsInline
          style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'contain', background:'#000' }}></video>
      </div>
    </div>
  );
}

function ReelsBand({ go }) {
  const [open, setOpen] = useHomeState(null);
  const idx = open ? NG_REELS.findIndex(r=>r.id===open.id) : -1;
  const next = () => setOpen(NG_REELS[(idx+1+NG_REELS.length) % NG_REELS.length]);
  const prev = () => setOpen(NG_REELS[(idx-1+NG_REELS.length) % NG_REELS.length]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setOpen(null);
      if (e.key === 'ArrowRight') next();
      if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, idx]);

  return (
    <section style={{ background:'var(--paper)', padding:'clamp(52px,8vw,80px) var(--pad-x)', borderBottom:'1px solid var(--line)' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <Reveal>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:16 }}>
            <div>
              <h2 style={{ fontSize:'clamp(30px,5vw,48px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 6px', maxWidth:'22ch' }}>
                My latest reels
              </h2>
            </div>
            <a href="https://www.instagram.com/naomiygal/" target="_blank" rel="noreferrer"
              style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:14, color:'var(--ink)',
                backgroundImage:'linear-gradient(var(--marker-red),var(--marker-red))', backgroundSize:'100% 2px',
                backgroundRepeat:'no-repeat', backgroundPosition:'0 100%', paddingBottom:2, textDecoration:'none' }}>
              Open Instagram →
            </a>
          </div>
        </Reveal>
        <div className="ng-reels-grid" style={{ marginTop:32, display:'grid',
          gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap:16 }}>
          {NG_REELS.map((r, i) => (
            <Reveal key={r.id} delay={i*80}>
              <ReelCard r={r} onOpen={setOpen} active={open && open.id===r.id} />
            </Reveal>
          ))}
        </div>
      </div>
      {open && <ReelPlayer r={open} onClose={()=>setOpen(null)} onNext={next} onPrev={prev} />}
    </section>
  );
}

/* ============ COMING SOON — the sword / chainsaw teaser ============ */
function ComingSoon() {
  return (
    <section className="ng-coming" aria-label="Coming soon">
      <div className="ng-coming-inner">
        <h2 className="ng-coming-title">Coming&nbsp;Soon</h2>
        <div className="ng-coming-slot-wrap">
          <img src="assets/coming-soon.png" alt="" className="ng-coming-silhouette" aria-hidden="true" loading="lazy" decoding="async"/>
        </div>
      </div>
    </section>
  );
}

/* ============ ABOUT TEASER ============ */
function AboutTeaser({ go }) {
  return (
    <section style={{ background:'var(--white)', padding:'clamp(34px,6vw,60px) var(--pad-x)', borderBottom:'1px solid var(--line)' }}>
      <div className="ng-about-teaser">
        <Reveal className="ng-split-photo">
          <div style={{ position:'relative' }}>
            <img src="assets/naomi-portrait.png" alt="Naomi Gal" loading="lazy" decoding="async" style={{ display:'block', width:'100%', height:'auto',
              WebkitMaskImage:'linear-gradient(180deg, #000 0, #000 84%, transparent 100%)',
              maskImage:'linear-gradient(180deg, #000 0, #000 84%, transparent 100%)' }}/>
          </div>
        </Reveal>
        <Reveal delay={150}>
          <h2 style={{ fontSize:'clamp(30px,4.8vw,46px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 16px' }}>
            Mother of six. Granddaughter of four survivors. Marker in hand.
          </h2>
          <p style={{ fontSize:18, lineHeight:1.65, color:'var(--ink-soft)', margin:'0 0 24px', maxWidth:'52ch' }}>
            For most of my life I was the one drawing comic faces on lunch bags. Then October 7 happened, and I couldn't sleep, so I picked up a marker. I haven't put it down since.
          </p>
          <a onClick={()=>go('about')} style={{ cursor:'pointer', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:15, color:'var(--ink)',
            backgroundImage:'linear-gradient(var(--marker-red),var(--marker-red))', backgroundSize:'100% 2px',
            backgroundRepeat:'no-repeat', backgroundPosition:'0 100%', paddingBottom:2, textDecoration:'none' }}>Read my story →</a>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ FINAL CTA ============ */
function HomeCTA({ go }) {
  return (
    <section style={{ background:'var(--ink)', color:'var(--paper)', padding:'clamp(56px,9vw,90px) var(--pad-x)', textAlign:'center' }}>
      <Reveal>
        <h2 style={{ fontFamily:'var(--font-display)', textTransform:'uppercase', fontSize:'clamp(40px,5.4vw,80px)',
          letterSpacing:'var(--track-display)', lineHeight:.97, margin:'0 0 18px', maxWidth:760, marginLeft:'auto', marginRight:'auto' }}>
          Want me to draw <span style={{ color:'var(--marker-red)' }}>someone</span>?
        </h2>
        <p style={{ fontSize:18, lineHeight:1.6, color:'rgba(247,242,233,.78)', margin:'0 auto 28px', maxWidth:560 }}>
          Someone you love, or someone the world shouldn't forget. Tell me who, and I'll start tonight.
        </p>
        <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
          <Button kind="red" onClick={()=>go('commission')}>Commission a portrait</Button>
          <Button kind="ghost" onClick={()=>go('speaking')}
            style={{ color:'var(--paper)', borderColor:'var(--paper)' }}>Invite Naomi</Button>
        </div>
      </Reveal>
    </section>
  );
}

function HomePage({ go }) {
  return (
    <main>
      <Hero go={go}/>
      <ComingSoon/>
      <NameTicker go={go}/>
      <HostagesBand go={go}/>
      <ReelsBand go={go}/>
      <AboutTeaser go={go}/>
      <HomeCTA go={go}/>
    </main>
  );
}

Object.assign(window, { HomePage });