/* Story — a person's 10-page booklet, with the blank reunion page at the end */
const { useState: useStoryState } = React;

const BIPIN_PAGES = [
  { kind:'cover', title:'Bipin Joshi', sub:'Born 2001, Nepal',
    portrait:true, footer:'Day 100. The first page I drew.' },
  { kind:'spread', heading:'A boy from Kanchanpur',
    body:'Bipin grew up in a village where the goats outnumbered the children. He liked his school uniform pressed.' },
  { kind:'spread', heading:'Across the sea',
    body:'He came to Israel to study agriculture. He sent his mother a photo of an avocado tree the day he arrived.' },
  { kind:'spread', heading:'October 7',
    body:'When the sirens started, Bipin pulled eight friends into a shelter. He held the door.' },
  { kind:'spread', heading:'The friends he saved',
    body:'They came home. He did not. They speak his name like a prayer.' },
  { kind:'spread', heading:'His mother',
    body:'She lights a lamp every night, and has not missed a single one.' },
  { kind:'spread', heading:'Things he loves',
    body:'Cricket. Strong tea. The smell of fresh paper. His mother\u2019s laugh on a long phone call.' },
  { kind:'spread', heading:'A message for him',
    body:'Bipin, wherever you are: your friends still set a chair for you at dinner.' },
  { kind:'spread', heading:'The waiting',
    body:'Every day I draw him again, and every day his face comes back a little different. Hope has many faces.' },
  { kind:'spread', heading:'Bring him home',
    body:'Sign. Share. Speak his name. Keep the lamp lit.' },
];

function PageThumb({ p, active, idx, onClick }) {
  const isReunion = p.kind === 'reunion';
  return (
    <button onClick={onClick} aria-label={`Page ${idx+1}`} style={{
      width:46, height:60, padding:0, cursor:'pointer', borderRadius:'var(--radius-xs)', position:'relative',
      background: active ? 'var(--ink)' : (isReunion ? 'var(--white)' : 'var(--paper-2)'),
      border: isReunion ? `1.5px dashed ${active ? 'var(--paper)' : 'var(--pencil)'}` : 'none',
      boxShadow: active && !isReunion ? '0 4px 12px rgba(20,17,15,.22)' : 'none',
      transition:'background .15s ease, box-shadow .15s ease' }}>
      <span style={{ position:'absolute', bottom:2, right:4, fontSize:9,
        color: active ? 'var(--paper)' : 'var(--graphite)' }}>
        {String(idx+1).padStart(2,'0')}
      </span>
    </button>
  );
}

function BookletPage({ p }) {
  if (p.kind === 'cover') {    return (
      <div style={{ padding:'clamp(24px,5vw,44px) clamp(20px,5.5vw,48px) clamp(20px,4.5vw,36px)', display:'flex', flexDirection:'column', height:'100%' }}>
        <div style={{ fontFamily:'var(--font-sans)', fontSize:12.5, fontWeight:700, color:'var(--graphite)' }}>heARTist booklet #003</div>
        <h2 style={{ fontFamily:'var(--font-display)', textTransform:'uppercase',
          fontSize:'clamp(42px,9.5vw,72px)', lineHeight:.92, letterSpacing:'-.02em', margin:'14px 0 6px', color:'var(--ink)' }}>
          {p.title}
        </h2>
        <div style={{ fontSize:14, color:'var(--graphite)', marginBottom:28 }}>{p.sub}</div>
        <div style={{ flex:1, background:'var(--paper-2)', display:'flex', alignItems:'center',
          justifyContent:'center', position:'relative' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="var(--ink)" strokeWidth=".9"
            strokeLinecap="round" strokeLinejoin="round" style={{ width:'46%', height:'46%' }}>
            <circle cx="12" cy="9" r="3.4"/><path d="M5 20.5c0-3.9 3.1-7 7-7s7 3.1 7 7"/>
          </svg>
          <span style={{ position:'absolute', bottom:10, left:12, fontSize:11, color:'var(--pencil)' }}>marker on paper</span>
        </div>
        <div style={{ marginTop:18, fontStyle:'italic', fontSize:14, color:'var(--ink-soft)' }}>
          {p.footer}
        </div>
      </div>
    );
  }
  if (p.kind === 'reunion') {
    return (
      <div style={{ padding:'clamp(24px,5vw,44px) clamp(20px,5.5vw,48px)', height:'100%', position:'relative',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center' }}>
        <div style={{ position:'absolute', top:-9, left:'50%', transform:'translateX(-50%) rotate(-3deg)',
          width:110, height:22, background:'rgba(242,183,5,.55)', border:'1px solid rgba(200,146,10,.4)' }}/>
        <div style={{ fontFamily:'var(--font-display)', textTransform:'uppercase', fontWeight:400, fontSize:34, color:'var(--marker-red)', position:'relative', letterSpacing:'var(--track-display)', lineHeight:1 }}>
          {p.title}
        </div>
        <p style={{ fontFamily:'var(--font-sans)', fontStyle:'italic', fontSize:'clamp(17px,3vw,22px)',
          color:'var(--ink)', maxWidth:'70%', marginTop:18, lineHeight:1.4, position:'relative' }}>
          {p.body}
        </p>
        <div style={{ marginTop:24, fontSize:13, color:'var(--graphite)', position:'relative' }}>
          ↳ a photo of his homecoming goes here.
        </div>
        <div style={{ position:'absolute', bottom:18, right:24, fontSize:11, color:'var(--pencil)',
          fontWeight:700, letterSpacing:'.08em' }}>10 / 10</div>
      </div>
    );
  }
  return (
    <div style={{ padding:'clamp(24px,5vw,44px) clamp(20px,5.5vw,48px) clamp(20px,4.5vw,36px)', height:'100%', display:'flex', flexDirection:'column' }}>
      <h3 style={{ fontSize:'clamp(21px,4vw,28px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 18px', color:'var(--ink)' }}>{p.heading}</h3>
      <div className="ng-spread">
        <div style={{ background:'var(--paper-2)', display:'flex', alignItems:'center', justifyContent:'center',
          position:'relative' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="var(--ink-soft)" strokeWidth="1"
            strokeLinecap="round" strokeLinejoin="round" style={{ width:'42%', height:'42%' }}>
            <circle cx="12" cy="9" r="3.4"/><path d="M5 20.5c0-3.9 3.1-7 7-7s7 3.1 7 7"/>
          </svg>
        </div>
        <p style={{ fontStyle:'italic', fontSize:'clamp(16px,2.6vw,20px)', lineHeight:1.55, color:'var(--ink)', margin:0, alignSelf:'center' }}>
          {p.body}
        </p>
      </div>
    </div>
  );
}

function StoryPage({ go }) {
  const [i, setI] = useStoryState(0);
  const p = BIPIN_PAGES[i];
  return (
    <main style={{ background:'var(--paper)', padding:'clamp(28px,5vw,48px) var(--pad-x) clamp(52px,8vw,80px)' }}>
      <div className="ng-story-grid">

        {/* Left rail — person & actions */}
        <aside>
          <a onClick={()=>go('hostages')} style={{ cursor:'pointer', fontSize:13, color:'var(--graphite)' }}>← Back to the gallery</a>
          <h1 style={{ fontSize:'clamp(32px,5vw,42px)', fontWeight:700, letterSpacing:'-.01em', margin:'14px 0 8px' }}>Bipin, 23</h1>
          <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:18, flexWrap:'wrap' }}>
            <StatusTag status="held"/>
            <span style={{ fontSize:13, color:'var(--graphite)' }}>Nepal #003</span>
          </div>
          <p style={{ fontStyle:'italic', fontSize:17, lineHeight:1.5, color:'var(--ink)', margin:'0 0 24px' }}>
            Bipin came from Nepal to learn farming. He sheltered eight friends in a bomb shelter.
          </p>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            <Button kind="yellow"><Ribbon size={13} color="var(--ink)"/> Sign the petition</Button>
            <Button kind="ghost">Order a printed booklet</Button>
            <Button kind="quiet">Share his story →</Button>
          </div>
          <div style={{ marginTop:32, paddingTop:22, borderTop:'1px solid var(--line)',
            fontSize:13, color:'var(--graphite)', lineHeight:1.6 }}>
            Originals are gifted to the families.
          </div>
        </aside>

        {/* Booklet viewer */}
        <section>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
            <span style={{ fontFamily:'var(--font-sans)', fontSize:13, fontWeight:700, color:'var(--graphite)' }}>Booklet page {String(i+1).padStart(2,'0')} of 10</span>
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={()=>setI(Math.max(0,i-1))} disabled={i===0}
                style={{ width:38, height:38, borderRadius:'var(--radius-sm)', border:'none', background:'var(--paper-2)',
                  color:'var(--ink)', cursor:i===0?'not-allowed':'pointer', opacity:i===0?.4:1 }}>←</button>
              <button onClick={()=>setI(Math.min(BIPIN_PAGES.length-1,i+1))} disabled={i===BIPIN_PAGES.length-1}
                style={{ width:38, height:38, borderRadius:'var(--radius-sm)', border:'none', background:'var(--ink)',
                  color:'var(--paper)', cursor:i===BIPIN_PAGES.length-1?'not-allowed':'pointer',
                  opacity:i===BIPIN_PAGES.length-1?.4:1 }}>→</button>
            </div>
          </div>

          {/* page */}
          <div className="ng-booklet" style={{ background:'var(--white)',
            boxShadow:'0 2px 6px rgba(20,17,15,.05), 0 22px 50px rgba(20,17,15,.13)', position:'relative', overflow:'hidden' }}>
            <BookletPage p={p}/>
          </div>

          {/* thumb strip */}
          <div style={{ display:'flex', gap:6, marginTop:18, alignItems:'center', flexWrap:'wrap' }}>
            {BIPIN_PAGES.map((pp,idx)=>(
              <PageThumb key={idx} p={pp} idx={idx} active={idx===i} onClick={()=>setI(idx)}/>
            ))}
            <div className="ng-thumb-note" style={{ marginLeft:'auto', fontSize:12, color:'var(--graphite)' }}>
              Drag to share. Gifted to family.
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { StoryPage });