/* Appearances — talks, exhibitions, the calendar, and invite Naomi */

function EventCard({ e }) {
  const realDay = e.day && e.day !== '\u2014';
  return (
    <article className="ng-event-card ng-card" style={{ background:'var(--white)',
      borderRadius:'var(--radius-lg)', overflow:'hidden',
      boxShadow:'0 1px 2px rgba(20,17,15,.05), 0 10px 30px rgba(20,17,15,.08)' }}>
      <div className="ng-event-date" style={{
        background: e.upcoming ? 'var(--ink)' : 'var(--paper-2)',
        color: e.upcoming ? 'var(--paper)' : 'var(--ink)',
        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        padding:'20px 16px', textAlign:'center', lineHeight:1 }}>
        <span style={{ fontSize:13, fontWeight:700, opacity:.85 }}>{e.month}</span>
        <span style={{ fontSize: realDay ? 40 : 27, fontWeight:800, margin:'5px 0' }}>{realDay ? e.day : e.year}</span>
        {realDay && <span style={{ fontSize:13, opacity:.6 }}>{e.year}</span>}
      </div>
      <div style={{ padding:'20px 24px 22px', display:'flex', flexDirection:'column', gap:7 }}>
        <h3 style={{ margin:0, fontSize:'clamp(19px,2.5vw,22px)', fontWeight:700, letterSpacing:'-.015em',
          lineHeight:1.22, color:'var(--ink)' }}>{e.title}</h3>
        <div style={{ display:'flex', alignItems:'center', gap:7, fontSize:14, fontWeight:600, color:'var(--graphite)' }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"
            strokeLinecap="round" strokeLinejoin="round" style={{ flex:'none', opacity:.7 }} aria-hidden="true">
            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="2.6"/>
          </svg>
          {e.place}
        </div>
        <p style={{ margin:'5px 0 0', fontSize:15, lineHeight:1.62, color:'var(--ink-soft)' }}>{e.desc}</p>
      </div>
    </article>
  );
}

function SpeakingPage({ go }) {
  const events = window.NG_EVENTS || [];
  const upcoming = events.filter(e=>e.upcoming);
  const past = events.filter(e=>!e.upcoming);
  return (
    <main style={{ background:'var(--paper)' }}>
      {/* Hero — words first, the button sits naturally beneath them */}
      <section className="ng-hero" style={{ position:'relative', overflow:'hidden', padding:'clamp(48px,7.5vw,72px) var(--pad-x) clamp(32px,5vw,44px)', 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:'0 0 16px', maxWidth:'18ch' }}>
            I'll come to your school,<br className="ng-br-d"/> your shul, your <span style={{ color:'var(--marker-red)' }}>kitchen table</span>.
          </h1>
          <p style={{ fontSize:18, lineHeight:1.6, color:'var(--ink-soft)', maxWidth:'62ch', margin:0 }}>
            Talks, exhibitions, gallery openings, live-drawing nights, school visits. I bring markers, the booklets, and the stories families have trusted me with. I draw while I talk. By the end of the night you'll know names you didn't know this morning.
          </p>
          <div style={{ marginTop:26, display:'flex', gap:12, flexWrap:'wrap' }}>
            <Button kind="ink" onClick={()=>{ window.location.href='mailto:naomigal@gmail.com?subject=Invitation%20to%20speak'; }}>Invite Naomi</Button>
            <Button kind="ghost" onClick={()=>{
              const el = document.getElementById('ng-calendar');
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 80, behavior:'smooth' });
            }}>
              Where I've been <Chevron dir="down" size={18}/>
            </Button>
          </div>
        </div>
      </section>

      {/* The calendar */}
      <section id="ng-calendar" style={{ padding:'clamp(40px,6vw,60px) var(--pad-x) clamp(20px,4vw,32px)' }}>
        <div style={{ maxWidth:1120, margin:'0 auto' }}>
          {upcoming.length > 0 && (
            <React.Fragment>
              <h2 style={{ fontSize:'clamp(24px,4vw,34px)', fontWeight:700, letterSpacing:'-.01em', margin:'0 0 6px' }}>
                On the calendar
              </h2>
              <p style={{ fontSize:15, color:'var(--graphite)', margin:'0 0 24px' }}>What's coming up next.</p>
              <div className="ng-event-grid">
                {upcoming.map(e => <EventCard key={e.id} e={e}/>)}
              </div>
            </React.Fragment>
          )}

          <h2 style={{ fontSize:'clamp(24px,4vw,34px)', fontWeight:700, letterSpacing:'-.01em',
            margin: upcoming.length ? 'clamp(40px,6vw,56px) 0 6px' : '0 0 6px' }}>
            Where I've been
          </h2>
          <p style={{ fontSize:15, color:'var(--graphite)', margin:'0 0 24px' }}>Exhibitions, talks and live-drawing nights.</p>
          <div className="ng-event-grid">
            {past.map(e => <EventCard key={e.id} e={e}/>)}
          </div>
        </div>
      </section>

      {/* Booking */}
      <section style={{ padding:'clamp(20px,4vw,28px) var(--pad-x) clamp(44px,7vw,64px)' }}>
        <div style={{ maxWidth:1120, margin:'0 auto' }}>
          <div className="ng-invite-card" style={{ background:'var(--white)',
            borderRadius:'var(--radius-xl)', padding:'clamp(28px,5vw,48px)',
            boxShadow:'0 2px 6px rgba(20,17,15,.05), 0 16px 40px rgba(20,17,15,.10)',
            display:'flex', alignItems:'center', justifyContent:'space-between', gap:'clamp(20px,4vw,40px)', flexWrap:'wrap' }}>
            <div style={{ maxWidth:'52ch' }}>
              <h2 style={{ fontSize:'clamp(26px,4vw,40px)', fontWeight:700, letterSpacing:'-.015em',
                lineHeight:1.08, margin:'0 0 12px' }}>
                Tell me about your event.
              </h2>
              <p style={{ fontSize:'clamp(16px,2.4vw,18px)', lineHeight:1.6, color:'var(--ink-soft)', margin:0 }}>
                I take a limited number of talks, exhibitions and live-drawing nights each season. Send me your event and your dates, and I'll write back to find a time that works.
              </p>
            </div>
            <Button kind="red" onClick={()=>{ window.location.href='mailto:naomigal@gmail.com?subject=Invitation%20to%20speak'; }}>Invite Naomi</Button>
          </div>
        </div>
      </section>
    </main>
  );
}

function Quote({ person, text }) {
  return (
    <figure style={{ margin:0, background:'var(--white)',
      borderRadius:'var(--radius-md)', padding:'24px 26px', boxShadow:'0 2px 6px rgba(20,17,15,.05),0 12px 30px rgba(20,17,15,.08)',
      position:'relative' }}>
      <div style={{ position:'absolute', top:-12, left:24, width:64, height:18,
        background:'rgba(242,183,5,.55)', border:'1px solid rgba(200,146,10,.4)' }}/>
      <blockquote style={{ margin:0, fontStyle:'italic', fontSize:20, lineHeight:1.5, color:'var(--ink)' }}>
        "{text}"
      </blockquote>
      <figcaption style={{ marginTop:14, fontSize:13.5, fontWeight:700, color:'var(--graphite)' }}>{person}</figcaption>
    </figure>
  );
}

Object.assign(window, { SpeakingPage });