/* News — a press / newsroom page for Naomi Gal, in the heARTist voice.
   Each item opens a full-screen reader (single comfortable column). */

function NewsMeta({ a, invert }) {
  const muted = invert ? 'rgba(247,242,233,.66)' : 'var(--graphite)';
  const strong = invert ? 'var(--paper)' : 'var(--ink)';
  return (
    <div style={{ display:'flex', alignItems:'baseline', gap:12, flexWrap:'wrap',
      fontFamily:'var(--font-sans)', fontSize:13.5 }}>
      <span style={{ fontWeight:700, color:strong }}>{a.source}</span>
      <span style={{ color:muted }}>{a.date}</span>
    </div>
  );
}

function NewsThumb({ a }) {
  return (
    <div style={{ position:'relative', aspectRatio:'16/10', background:'var(--paper-2)' }}>
      {a.image
        ? <img src={a.image} alt={a.title} loading="lazy" decoding="async"
            style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:a.imagePos || 'center 30%' }}/>
        : <image-slot id={`news-${a.id}`} shape="rect"
            style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}
            placeholder="Press photo"></image-slot>}
    </div>
  );
}

function NewsCard({ a, onOpen }) {
  return (
    <article className="ng-card is-lift" onClick={()=>onOpen(a)}
      style={{ cursor:'pointer', background:'var(--white)',
      borderRadius:'var(--radius-lg)', overflow:'hidden', display:'flex', flexDirection:'column',
      boxShadow:'0 1px 2px rgba(20,17,15,.05), 0 10px 30px rgba(20,17,15,.08)' }}>
      <NewsThumb a={a}/>
      <div style={{ padding:'18px 20px 20px', display:'flex', flexDirection:'column', gap:10, flex:1 }}>
        <NewsMeta a={a}/>
        <h3 style={{ margin:0, fontSize:'clamp(19px,2.6vw,23px)', fontWeight:700, letterSpacing:'-.01em',
          lineHeight:1.18, color:'var(--ink)', textWrap:'balance' }}>{a.title}</h3>
        <p style={{ margin:0, fontSize:15, lineHeight:1.6, color:'var(--ink-soft)' }}>{a.dek}</p>
        <span style={{ alignSelf:'flex-start', marginTop:'auto', paddingTop:8,
          display:'inline-flex', alignItems:'center', gap:7,
          fontFamily:'var(--font-sans)', fontWeight:700, fontSize:14, color:'var(--ink)' }}>
          Read the story <span aria-hidden="true">→</span>
        </span>
      </div>
    </article>
  );
}

function NewsReader({ a, onClose, onPrev, onNext }) {
  const scrollRef = React.useRef(null);
  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, [a.id]);
  return (
    <div role="dialog" aria-modal="true" onClick={onClose} className="ng-reel-overlay"
      style={{ position:'fixed', inset:0, background:'rgba(20,17,15,.74)', backdropFilter:'blur(7px)',
        WebkitBackdropFilter:'blur(7px)', zIndex:100, display:'flex', alignItems:'stretch', justifyContent:'center' }}>

      <button onClick={onClose} aria-label="Close"
        style={{ position:'fixed', top:18, right:18, width:44, height:44, borderRadius:'50%', zIndex:3,
          display:'flex', alignItems:'center', justifyContent:'center', border:'none',
          background:'rgba(247,242,233,.14)', color:'var(--paper)', cursor:'pointer' }}><CloseIcon size={20}/></button>

      <div ref={scrollRef} onClick={(e)=>e.stopPropagation()} className="ng-reader-scroll"
        style={{ width:'min(820px, 100%)', height:'100%', overflowY:'auto', background:'var(--paper)',
          boxShadow:'0 0 80px rgba(0,0,0,.4)' }}>

        {a.image && (
          <div style={{ position:'relative', width:'100%', aspectRatio:'16/9', background:'var(--paper-2)', overflow:'hidden' }}>
            <img src={a.image} alt={a.title} loading="lazy" decoding="async"
              style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:a.imagePos || 'center 30%' }}/>
          </div>
        )}

        <article style={{ maxWidth:680, margin:'0 auto', padding:'clamp(28px,5vw,52px) clamp(22px,5vw,40px) clamp(56px,8vw,88px)' }}>
          <NewsMeta a={a}/>
          <h1 style={{ margin:'16px 0 18px', fontSize:'clamp(28px,4.6vw,46px)', fontWeight:700,
            letterSpacing:'-.015em', lineHeight:1.08, color:'var(--ink)', textWrap:'balance' }}>{a.title}</h1>
          <p style={{ margin:'0 0 28px', fontSize:'clamp(18px,2.6vw,21px)', lineHeight:1.5, fontWeight:300,
            color:'var(--ink-soft)', textWrap:'pretty' }}>{a.dek}</p>
          <div style={{ height:1, background:'var(--line)', margin:'0 0 28px' }}/>
          {a.body.map((p,i)=>(
            <p key={i} style={{ fontFamily:'"Times New Roman", Georgia, serif',
              fontSize:'clamp(18px,2.4vw,20px)', lineHeight:1.72, color:'var(--ink)',
              margin:'0 0 20px', textWrap:'pretty' }}>{p}</p>
          ))}
          {a.link && (
            <a href={a.link} target="_blank" rel="noopener noreferrer"
              style={{ display:'inline-flex', alignItems:'center', gap:7, marginTop:10,
                fontFamily:'var(--font-sans)', fontWeight:700, fontSize:15,
                color:'var(--ink)', textDecoration:'none', borderBottom:'2px solid var(--ink)', paddingBottom:2 }}>
              Read the full piece at {a.source} <span aria-hidden="true">↗</span>
            </a>
          )}

          <div style={{ marginTop:'clamp(40px,7vw,64px)', display:'flex', justifyContent:'space-between',
            gap:12, borderTop:'1px solid var(--line)', paddingTop:22 }}>
            <button onClick={onPrev} style={{ border:'none', background:'none', cursor:'pointer', padding:'6px 0',
              display:'inline-flex', alignItems:'center', gap:7, fontFamily:'var(--font-sans)',
              fontWeight:700, fontSize:14, color:'var(--graphite)' }}>
              <Chevron dir="left" size={16}/> Previous
            </button>
            <button onClick={onNext} style={{ border:'none', background:'none', cursor:'pointer', padding:'6px 0',
              display:'inline-flex', alignItems:'center', gap:7, fontFamily:'var(--font-sans)',
              fontWeight:700, fontSize:14, color:'var(--graphite)' }}>
              Next <Chevron dir="right" size={16}/>
            </button>
          </div>
        </article>
      </div>
    </div>
  );
}

function NewsPage({ go }) {
  const news = window.NG_NEWS || [];
  const [open, setOpen] = React.useState(null);
  const idx = open ? news.findIndex(n=>n.id===open.id) : -1;
  const next = () => setOpen(news[(idx+1+news.length) % news.length]);
  const prev = () => setOpen(news[(idx-1+news.length) % news.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 (
    <main style={{ background:'var(--paper)' }}>
      <section className="ng-hero" style={{ position:'relative', overflow:'hidden', padding:'clamp(48px,7.5vw,72px) var(--pad-x) clamp(28px,4vw,40px)', borderBottom:'1px solid var(--line)' }}>
        <HeroBackdrop/>
        <div style={{ position:'relative', zIndex:3, maxWidth:1120, margin:'0 auto' }}>
          <h1 style={{ fontSize:'clamp(34px,5.4vw,62px)', fontWeight:700, letterSpacing:'-.015em',
            lineHeight:1.05, margin:'14px 0 16px', maxWidth:'16ch' }}>
            What they're writing about the work
          </h1>
          <p style={{ fontSize:18, lineHeight:1.6, color:'var(--ink-soft)', maxWidth:'58ch', margin:0 }}>
            Somehow the work travelled from hostage squares in Israel to a hall in the Argentine Congress. Here's the press.
          </p>
        </div>
      </section>

      <section style={{ padding:'clamp(40px,6vw,60px) var(--pad-x) clamp(48px,7vw,72px)' }}>
        <div style={{ maxWidth:1120, margin:'0 auto' }}>
          <h2 style={{ fontSize:'clamp(24px,4vw,34px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 24px' }}>
            In the press
          </h2>
          <div className="ng-news-grid">
            {news.map(a => <NewsCard key={a.id} a={a} onOpen={setOpen}/>)}
          </div>

          <div style={{ marginTop:'clamp(36px,5vw,52px)', background:'var(--ink)', color:'var(--paper)',
            borderRadius:'var(--radius-xl)', padding:'clamp(26px,4.5vw,44px)',
            display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap' }}>
            <div style={{ maxWidth:'46ch' }}>
              <h2 style={{ fontSize:'clamp(22px,3.4vw,32px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 8px' }}>
                Writing a story?
              </h2>
              <p style={{ fontSize:16, lineHeight:1.6, color:'rgba(247,242,233,.78)', margin:0 }}>
                Need interviews, images, or to cover an exhibition? Get in touch and I'll send what you need.
              </p>
            </div>
            <Button kind="red" onClick={()=>{ window.location.href='mailto:naomigal@gmail.com?subject=Press%20inquiry'; }}>Get in touch</Button>
          </div>
        </div>
      </section>

      {open && <NewsReader a={open} onClose={()=>setOpen(null)} onNext={next} onPrev={prev}/>}
    </main>
  );
}

Object.assign(window, { NewsPage });