/* About — Naomi's personal page */

const NG_FACTS = [
  { n:'100',   l:'days of silence before the first marker'},
  { n:'500+',  l:'days drawing, without stopping'},
  { n:'2,000+',l:'pages across four volumes'},
];

const NG_TIMELINE = [
  { y:'Toronto', t:'One of nine', d:'I grew up in a haredi family, the granddaughter of four Holocaust survivors. The first faces I ever drew were comic cartoons for my own children, tucked into their lunch bags.' },
  { y:'Before', t:'A mother’s table', d:'Six children, and then grandchildren. I cover my hair, keep a home, once did a little late-night stand-up. Art stayed small and private.' },
  { y:'Oct 7, 2023', t:'The morning', d:'About 1,200 people were killed and 251 taken hostage. I sat with my coffee and the news, and I couldn’t draw. I didn’t draw for a hundred days.' },
  { y:'Day 100', t:'One marker', d:'On the hundredth day of captivity I picked up a marker and drew a hostage’s face. I posted it. I’ve drawn almost every day since, often in real time, as the news breaks.' },
  { y:'The booklets', t:'Nine pages each', d:'For every victim I make a nine-page booklet of their life, ending in a blank reunion page to fill in when they come home. Four volumes now, more than 2,000 pages, drawn in eleven months.' },
  { y:'Today', t:'Seen around the world', d:'A share from President Milei carried one drawing from a thousand views to five million. The work has hung in Herzliya and in Barcelona’s “Am Israel Jai.” I still keep Israeli hours: three in the morning, my time.' },
];

function AboutPage({ go }) {
  return (
    <main style={{ background:'var(--paper)' }}>
      {/* HERO */}
      <section style={{ padding:'clamp(28px,5vw,52px) var(--pad-x) clamp(30px,5vw,46px)', borderBottom:'1px solid var(--line)' }}>
        <div className="ng-about-hero">
          <Reveal className="ng-split-photo">
            <div style={{ position:'relative' }}>
              <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 85%, transparent 100%)',
                maskImage:'linear-gradient(180deg, #000 0, #000 85%, transparent 100%)' }}/>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <h1 style={{ fontSize:'clamp(40px, 5.6vw, 80px)', fontWeight:700, letterSpacing:'-.015em',
              lineHeight:1.02, margin:'0 0 18px' }}>
              Hi, I'm <span style={{ color:'var(--marker-red)' }}>Naomi</span>.
            </h1>
            <p style={{ fontSize:'clamp(18px,4vw,21px)', lineHeight:1.6, color:'var(--ink-soft)', margin:'0 0 16px', maxWidth:'56ch' }}>
              I'm a mother of six and a grandmother in Toronto, one of nine children and the granddaughter of four Holocaust survivors. I never went to art school.
            </p>
            <p style={{ fontSize:18, lineHeight:1.65, color:'var(--ink-soft)', margin:'0 0 28px', maxWidth:'56ch' }}>
              I draw what I can't bear to forget: the hostages, the families, the leaders, the small soft details that keep a person from becoming a number. I work on Israeli hours, three in the morning my time, with one marker and a kitchen table.
            </p>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              <Button kind="red" onClick={()=>go('commission')}>Ask me to draw someone</Button>
              <Button kind="ghost" onClick={()=>go('speaking')}>Invite me to speak</Button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* FACTS */}
      <section style={{ background:'var(--white)', padding:'clamp(36px,6vw,56px) var(--pad-x)', borderBottom:'1px solid var(--line)' }}>
        <div className="ng-facts">
          {NG_FACTS.map((f,i)=>(
            <Reveal key={i} delay={i*70}>
              <div style={{ padding:'22px 14px', textAlign:'center' }}>
                <div style={{ fontFamily:'var(--font-display)', textTransform:'uppercase', fontSize:'clamp(38px,6vw,54px)',
                  letterSpacing:'var(--track-display)', color:'var(--marker-red)', lineHeight:.95 }}>{f.n}</div>
                <div style={{ marginTop:8, fontSize:13, color:'var(--graphite)', fontWeight:500 }}>{f.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{ padding:'clamp(36px,6vw,56px) var(--pad-x)', borderBottom:'1px solid var(--line)' }}>
        <div style={{ maxWidth:880, margin:'0 auto' }}>
          <Reveal>
            <h2 style={{ fontSize:'clamp(30px,4.6vw,42px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 36px' }}>
              How I got here
            </h2>
          </Reveal>
          <div>
            {NG_TIMELINE.map((t,i)=>(
              <Reveal key={i} delay={i*80}>
                <div className="ng-tl-row" style={{ padding:'22px 4px',
                  borderTop: '1px solid var(--line)', borderBottom: i===NG_TIMELINE.length-1?'1px solid var(--ink)':'none' }}>
                  <div><span style={{ display:'inline-flex', alignItems:'center', background:'var(--paper-deep)',
                    color:'var(--ink-soft)', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:12.5, lineHeight:1,
                    padding:'6px 11px', borderRadius:7 }}>{t.y}</span></div>
                  <div>
                    <div style={{ fontWeight:700, fontSize:20, color:'var(--ink)', marginBottom:6, letterSpacing:'-.005em' }}>{t.t}</div>
                    <p style={{ margin:0, fontSize:16, lineHeight:1.6, color:'var(--ink-soft)' }}>{t.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CLOSING */}
      <section style={{ background:'var(--ink)', color:'var(--paper)', padding:'clamp(52px,8vw,80px) var(--pad-x)', textAlign:'center' }}>
        <Reveal>
          <p style={{ fontFamily:'var(--font-sans)', fontStyle:'italic', fontSize:'clamp(22px,3vw,32px)',
            lineHeight:1.4, maxWidth:780, margin:'0 auto 24px', color:'rgba(247,242,233,.92)' }}>
            The Talmud says the whole world was created for one person. I draw like that's literally true.
          </p>
          <div style={{ marginTop:20, display:'flex', justifyContent:'center' }}>
            <Signature height={42} tilt={-3} invert={true} style={{ transformOrigin:'center' }} />
          </div>
        </Reveal>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });