/* Hostages — filterable list of all October 7 hostages */
const { useState: useHostagesState } = React;

function HostagesPage({ go }) {
  const [filter, setFilter] = useHostagesState('all');
  const [q, setQ] = useHostagesState('');
  const [sel, setSel] = useHostagesState(null);
  const counts = {
    all: window.NG_PEOPLE.length,
    held: window.NG_PEOPLE.filter(p=>p.status==='held').length,
    returned: window.NG_PEOPLE.filter(p=>p.status==='returned').length,
    memory: window.NG_PEOPLE.filter(p=>p.status==='memory').length,
  };
  const tabs = [
    ['all',      'All'],
    ['held',     'Still held'],
    ['returned', 'Home'],
    ['memory',   'Of blessed memory'],
  ];
  let list = window.NG_PEOPLE;
  if (filter !== 'all') list = list.filter(p => p.status === filter);
  if (q) list = list.filter(p => (p.name+' '+p.place).toLowerCase().includes(q.toLowerCase()));

  return (
    <main style={{ background:'var(--paper)' }}>
      {sel && <PersonProfile person={sel} onClose={()=>setSel(null)} />}
      {/* Yellow day-strip — scoped to this page */}
      <div style={{ background:'var(--ink)', color:'var(--paper)', fontFamily:'var(--font-sans)',
        display:'flex', alignItems:'center', justifyContent:'center', gap:14, padding:'10px 16px',
        fontSize:13 }}>
        <span style={{ display:'inline-flex', alignItems:'center', gap:7, background:'var(--marker-red)',
          color:'#fff', fontWeight:700, padding:'3px 11px', borderRadius:999 }}>
          <Ribbon size={12} color="#fff" /> DAY {window.NG_DAY}
        </span>
        <span style={{ opacity:.85 }}>Bring them home. All of them.</span>
      </div>

      <section style={{ borderBottom:'1px solid var(--line)', padding:'clamp(36px,6vw,56px) var(--pad-x) 32px' }}>
        <div style={{ maxWidth:1180, margin:'0 auto' }}>
          <h1 style={{ fontSize:'clamp(38px,6vw,72px)', fontWeight:700, letterSpacing:'-.015em', lineHeight:1.02, margin:'0 0 12px' }}>
            Every <span style={{ color:'var(--marker-red)' }}>face</span>, every status.
          </h1>
          <p style={{ fontSize:18, lineHeight:1.6, color:'var(--ink-soft)', maxWidth:'62ch', margin:0 }}>
            Color carries the story: yellow if still held, green if home, red of blessed memory. Click anyone to open their profile.
          </p>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:32,
            gap:18, flexWrap:'wrap' }}>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
              {tabs.map(([k,label])=>(
                <button key={k} onClick={()=>setFilter(k)} className="ng-filter-btn"
                  style={{ display:'inline-flex', alignItems:'center', gap:8,
                    fontFamily:'var(--font-sans)', fontWeight:700, fontSize:13, padding:'9px 14px 9px 16px',
                    border:'none', borderRadius:999, cursor:'pointer',
                    background: filter===k ? 'var(--ink)' : 'var(--paper-2)',
                    color: filter===k ? 'var(--paper)' : 'var(--ink)' }}>
                  {label}
                  <span style={{ display:'inline-flex', alignItems:'center', justifyContent:'center',
                    minWidth:20, height:20, padding:'0 6px', borderRadius:999, fontSize:11.5,
                    background: filter===k ? 'rgba(247,242,233,.22)' : 'var(--white)',
                    color: filter===k ? 'var(--paper)' : 'var(--graphite)' }}>{counts[k]}</span>
                </button>
              ))}
            </div>
            <label className="ng-searchbox" aria-label="Search hostages by name or place">
              <svg className="ng-searchbox-icon" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/>
              </svg>
              <input value={q} onChange={e=>setQ(e.target.value)} type="search"
                placeholder="Search by name or place…" className="ng-search"/>
              {q && (
                <button type="button" className="ng-searchbox-clear" aria-label="Clear search"
                  onClick={()=>setQ('')}><CloseIcon size={15}/></button>
              )}
            </label>
          </div>
        </div>
      </section>

      <section style={{ padding:'40px var(--pad-x) clamp(48px,7.5vw,72px)' }}>
        <div style={{ maxWidth:1120, margin:'0 auto', display:'grid',
          gridTemplateColumns:'repeat(auto-fill, minmax(150px, 1fr))', gap:'clamp(12px,2vw,18px)' }}>
          {list.map((p,i)=>(
            <div key={p.id} className="ng-rise" style={{ animationDelay:`${Math.min(i,16)*32}ms` }}>
              <article onClick={()=>setSel(p)} className="ng-card is-lift"
                style={{ background:'var(--white)', borderRadius:'var(--radius-md)',
                  overflow:'hidden', cursor:'pointer',
                  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:15, color:'var(--ink)' }}>{p.name}{p.age!=null?`, ${p.age}`:''}</div>
                  <div style={{ fontSize:12, color:'var(--graphite)', marginTop:2 }}>{p.place}</div>
                </div>
              </article>
            </div>
          ))}
        </div>
        {list.length===0 && (
          <p style={{ maxWidth:1120, margin:'40px auto 0', textAlign:'center', color:'var(--graphite)', fontSize:15 }}>
            No one matches that search.
          </p>
        )}
      </section>
    </main>
  );
}

/* A person's profile card — opens over the wall when a portrait is clicked. */
function PersonProfile({ person, onClose }) {
  React.useEffect(()=>{
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return ()=> window.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div onClick={onClose} className="ng-profile-backdrop" style={{ position:'fixed', inset:0, zIndex:120, background:'rgba(20,17,15,.55)',
      display:'flex', alignItems:'center', justifyContent:'center', padding:'clamp(14px,4vw,24px)' }}>
      <div onClick={e=>e.stopPropagation()} className="ng-profile-grid ng-profile-card" style={{ background:'var(--white)',
        borderRadius:'var(--radius-lg)', width:'min(560px, 100%)', boxShadow:'0 30px 80px rgba(20,17,15,.34)', overflow:'hidden' }}>
        <div>
          <Portrait person={person}/>
        </div>
        <div style={{ padding:'clamp(18px,4vw,24px) clamp(18px,4.5vw,26px) clamp(20px,4.5vw,26px)', position:'relative' }}>
          <button onClick={onClose} aria-label="Close" style={{ position:'absolute', top:14, right:14,
            width:36, height:36, borderRadius:999, border:'none', background:'var(--paper-2)',
            display:'flex', alignItems:'center', justifyContent:'center',
            cursor:'pointer', color:'var(--graphite)' }}><CloseIcon size={17}/></button>
          <h2 style={{ fontSize:'clamp(24px,5vw,30px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 10px', maxWidth:'14ch' }}>
            {person.name}{person.age!=null?`, ${person.age}`:''}
          </h2>
          <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap', marginBottom:16 }}>
            <StatusTag status={person.status}/>
            <span style={{ fontSize:13, color:'var(--graphite)' }}>{person.place}</span>
          </div>
          <p style={{ fontSize:16, lineHeight:1.6, color:'var(--ink-soft)', margin:0 }}>{person.line}</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HostagesPage, PersonProfile });