// site-sections-q.jsx — TopBar, Hero, Video, Teaching DNA (quirky skin)

const {
  QPAGE, QReveal, qUseParallax, qUseMotionEl,
  QSectionLabel, QSquiggle, QUnderline, QSticker, QChip,
  QPolaroid, QGallery, QBigNum, QBrandLogo, QDivider,
} = window;

const qp = QPAGE.palette;
const qf = QPAGE.fonts;

// ── Brand mark — Akash × Clay combined logo.
// Wider than the old single-circle avatar since the mark itself is two
// circles side by side with a coral × overlaid at their intersection.
function QBrandMark({ height = 36 }) {
  return (
    <img
      src="uploads/akash-x-clay-logo-transparent.png"
      alt="Akash × Clay"
      height={height}
      style={{
        height, width: 'auto', display: 'block', flexShrink: 0,
        filter: 'drop-shadow(2px 2px 0 rgba(255,91,58,0.6))',
      }}
    />
  );
}

// ── TopBar ───────────────────────────────────────────────────
function QTopBar() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: 'rgba(251, 246, 236, 0.82)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: `1px dashed ${qp.hairStrong}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '12px 40px',
      fontFamily: qf.mono, fontSize: 12, color: qp.muted,
      letterSpacing: '0.04em',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <a href="https://telzi.com/5pdtez70" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center' }}>
          <QBrandMark height={42} />
        </a>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
        <a
          href="https://cal.com/akash-radadiya/brain-at-work"
          target="_blank" rel="noopener"
          style={{
            padding: '8px 16px', borderRadius: 3,
            background: qp.ink, color: qp.pop,
            textDecoration: 'none', fontFamily: qf.mono, fontSize: 11, fontWeight: 600,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            boxShadow: `2px 2px 0 ${qp.accent}`,
          }}
        >let's talk →</a>
      </div>
    </nav>
  );
}

// ── Email typewriter — plays ONCE, settles on "akash@clay.com?" forever.
// The reserved width matches the FINAL state (akash@clay.com?), so the
// final is perfectly centered in the h1. During the brief intro the
// initial longer email overflows to the right, which is fine because it
// only shows for ~1.5s before erasing back to the target.
function QEmailTypewriter() {
  const STATIC = 'akash';
  const START_SUFFIX = 'radadiya@gmail.com';
  const TARGET_SUFFIX = '@clay.com';
  const FINAL = STATIC + TARGET_SUFFIX + '?'; // reserved width basis
  const [suffix, setSuffix] = React.useState(START_SUFFIX);
  const [phase, setPhase] = React.useState('hold1');

  React.useEffect(() => {
    if (phase === 'done') return;
    let timer;
    if (phase === 'hold1') {
      timer = setTimeout(() => setPhase('erase'), 1600);
    } else if (phase === 'erase') {
      if (suffix.length > 0) {
        timer = setTimeout(() => setSuffix(s => s.slice(0, -1)), 55);
      } else {
        timer = setTimeout(() => setPhase('type'), 260);
      }
    } else if (phase === 'type') {
      if (suffix.length < TARGET_SUFFIX.length) {
        timer = setTimeout(() => setSuffix(TARGET_SUFFIX.slice(0, suffix.length + 1)), 85);
      } else {
        timer = setTimeout(() => setPhase('done'), 120);
      }
    }
    return () => clearTimeout(timer);
  }, [phase, suffix]);

  const isDone = phase === 'done';
  const suffixColor = isDone ? qp.accent : qp.ink;
  const sharedType = {
    fontFamily: qf.display, fontStyle: 'italic', fontWeight: 400,
  };
  return (
    <span style={{
      position: 'relative', display: 'inline-block', whiteSpace: 'nowrap',
      verticalAlign: 'baseline',
    }}>
      {/* Ghost reserves the FINAL string's width. This is what centers
          the h1. akash@clay.com? becomes the visual anchor. */}
      <span aria-hidden="true" style={{ ...sharedType, visibility: 'hidden' }}>{FINAL}</span>
      {/* Animated layer — left-aligned over the ghost. During the intro
          (long email), the suffix + cursor + ? extend past the ghost's
          right edge. Once the animation lands on @clay.com, the content
          fits the ghost exactly and everything is centered. */}
      <span style={{
        position: 'absolute', left: 0, top: 0, whiteSpace: 'nowrap',
      }}>
        <span style={{ ...sharedType, color: qp.ink }}>{STATIC}</span>
        <span style={{
          ...sharedType, color: suffixColor, transition: 'color 400ms',
        }}>{suffix}</span>
        {!isDone && (
          <span style={{
            display: 'inline-block', width: '0.08em', height: '0.92em',
            background: qp.accent, marginLeft: 2, marginRight: 2, verticalAlign: '-0.12em',
            animation: 'cursorBlink 1s steps(1) infinite',
          }} />
        )}
        <span style={{ ...sharedType, color: qp.ink, fontStyle: 'normal' }}>?</span>
      </span>
      {isDone && <QSquiggle color={qp.pop} variant="wave" />}
    </span>
  );
}

// ── Handwritten "pitch" label floats ABOVE the struck-out word,
// with a thin hand-drawn UPWARD brush-stroke caret coming up from below
// the word and pointing at the label. The text and arrow take separate
// colors so "pitch" can read black while the arrow keeps the accent.
function QPitchScribble({ top, left, right, rotate = -4, textColor, arrowColor }) {
  const tc = textColor || qp.ink;
  const ac = arrowColor || qp.accentDeep;
  return (
    <div aria-hidden="true" style={{
      position: 'absolute',
      top, left, right,
      transform: `rotate(${rotate}deg)`,
      transformOrigin: 'bottom center',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      gap: 0, pointerEvents: 'none',
      lineHeight: 1, zIndex: 4,
    }}>
      <span style={{
        fontFamily: '"Caveat", "Kalam", cursive', fontWeight: 700,
        fontSize: 24, letterSpacing: '0.01em',
        color: tc,
        textShadow: '0 1px 0 rgba(0,0,0,0.06)',
        textTransform: 'lowercase',
        marginBottom: -4,
      }}>pitch</span>
      {/* Handwritten brush-stroke upward caret. Asymmetric: the right leg
          is longer and dips lower, crossing into the pill below — like a
          marker flick made in one motion. Colored separately from "pitch". */}
      <svg viewBox="0 0 80 44" style={{ width: 34, height: 20, marginTop: 0 }} fill={ac}>
        <path d="M 6 22
                 C 12 20, 20 14, 28 8
                 C 32 5, 36 3, 40 2
                 C 44 4, 48 9, 54 16
                 C 60 22, 68 30, 76 40
                 C 72 41, 66 38, 60 34
                 C 54 30, 48 24, 42 14
                 C 41 12, 40 11, 40 11
                 C 39 12, 38 13, 36 15
                 C 30 22, 22 26, 14 26
                 C 10 26, 7 24, 6 22 Z" />
      </svg>
    </div>
  );
}

// ── Hero ─────────────────────────────────────────────────────
// Redesigned: centered magazine-masthead layout with the email
// typewriter as the centerpiece. Stats as rotated sticker-chips,
// bullets as a handwritten-feel numbered column. No grid card wall.
function QHero() {
  const [pref] = qUseParallax(6);

  return (
    <section style={{
      padding: '70px 40px 110px', position: 'relative', overflow: 'hidden',
      background: `radial-gradient(ellipse 70% 50% at 50% 35%, ${qp.accent}14 0%, transparent 60%)`,
    }}>
      {/* Ambient orange orb */}
      <div ref={pref} style={{
        position: 'absolute', top: '20%', left: '50%',
        width: 780, height: 780, borderRadius: '50%',
        transform: 'translateX(-50%)',
        background: `radial-gradient(circle, ${qp.accent}22 0%, ${qp.pop}0a 40%, transparent 70%)`,
        filter: 'blur(40px)', pointerEvents: 'none', zIndex: 0,
      }} />

      {/* Marginalia sparks + squiggles */}
      <svg aria-hidden="true" style={{ position: 'absolute', top: 120, left: '12%', width: 44, height: 44, color: qp.accent, opacity: 0.8, zIndex: 2 }} viewBox="0 0 48 48" fill="none">
        <path d="M 24 6 L 26 22 L 42 24 L 26 26 L 24 42 L 22 26 L 6 24 L 22 22 Z" fill="currentColor" />
      </svg>
      <svg aria-hidden="true" style={{ position: 'absolute', top: 220, right: '10%', width: 86, height: 38, color: qp.pop, opacity: 0.9, transform: 'rotate(-8deg)', zIndex: 2 }} viewBox="0 0 86 38" fill="none">
        <path d="M 4 20 Q 20 4 40 18 T 82 16" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" fill="none" />
      </svg>
      <svg aria-hidden="true" style={{ position: 'absolute', bottom: 300, left: '8%', width: 68, height: 68, color: qp.accent2, opacity: 0.7, transform: 'rotate(12deg)', zIndex: 2 }} viewBox="0 0 68 68" fill="none">
        <circle cx="34" cy="34" r="28" stroke="currentColor" strokeWidth="2" strokeDasharray="4 5" fill="none" />
        <circle cx="34" cy="34" r="4" fill="currentColor" />
      </svg>

      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 3, textAlign: 'center' }}>
        {/* Masthead ticker — black pill contains "a cold ~email~ · for yash & izzy".
            Handwritten "pitch" + thin upward arrow floats ABOVE the struck "email",
            pointing down to it from the label. */}
        <QReveal>
          <div style={{ display: 'inline-block', position: 'relative', marginBottom: 68 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 18px', borderRadius: 3,
              background: qp.ink, color: qp.deepInk,
              fontFamily: qf.mono, fontSize: 12, fontWeight: 500,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              boxShadow: `3px 3px 0 ${qp.accent}`,
            }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: qp.accent, animation: 'blink 1.4s infinite' }} />
              a cold{' '}
              <span
                ref={(el) => { if (el) el.dataset.strikeWord = '1'; }}
                className="strike-email"
                style={{ position: 'relative', display: 'inline-block' }}
              >
                <span style={{ position: 'relative', zIndex: 1 }}>email</span>
                <svg aria-hidden="true" viewBox="0 0 60 18" preserveAspectRatio="none" style={{
                  position: 'absolute', left: -4, right: -4, top: '42%',
                  width: 'calc(100% + 8px)', height: '0.8em',
                  transform: 'translateY(-50%)', overflow: 'visible', pointerEvents: 'none',
                }}>
                  <path d="M 2 10 C 18 3, 38 14, 58 7" stroke={qp.accent} strokeWidth="3" strokeLinecap="round" fill="none" vectorEffect="non-scaling-stroke" />
                </svg>
              </span>
              <span style={{ opacity: 0.5 }}>·</span>
              <span style={{ color: qp.pop }}>for yash &amp; izzy</span>
            </div>
            {/* "pitch" label sits just above the struck "email".
                The struck word starts after the red dot + "a cold " —
                that's ≈ 86px from the pill's left edge at 12px mono. */}
            <QPitchScribble top={-28} left={170} rotate={-4} textColor={qp.ink} arrowColor={qp.accentDeep} />
          </div>
        </QReveal>

        {/* Sub-line: "Big-time unofficial advocate for Clay." + Clay logo */}
        <QReveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            justifyContent: 'center', marginBottom: 18,
          }}>
            <span style={{
              fontFamily: qf.display, fontStyle: 'italic', fontWeight: 400,
              fontSize: 'clamp(24px, 3vw, 38px)', color: qp.inkSoft,
              letterSpacing: '-0.01em', lineHeight: 1.15,
            }}>Big-time unofficial advocate for</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center',
              padding: '6px 14px', borderRadius: 3,
              background: qp.paper, border: `1.5px solid ${qp.ink}`,
              boxShadow: `2px 2px 0 ${qp.accent}`,
              transform: 'rotate(-2deg)',
            }}>
              <img src="uploads/clay-logo.png" alt="Clay" style={{
                height: 'clamp(26px, 2.8vw, 36px)', width: 'auto', objectFit: 'contain', display: 'block',
              }} />
              <span style={{
                fontFamily: qf.displaySans, fontWeight: 700, color: qp.ink,
                fontSize: 'clamp(20px, 2.4vw, 28px)', letterSpacing: '-0.02em',
                marginLeft: 2,
              }}>.</span>
            </span>
          </div>
        </QReveal>

        {/* Line 2 — punchline with typewriter */}
        <QReveal>
          <h1 style={{
            fontFamily: qf.displaySans, fontWeight: 700,
            fontSize: 'clamp(44px, 6.4vw, 94px)', lineHeight: 0.98,
            letterSpacing: '-0.045em', color: qp.ink,
            margin: '0 0 28px', textWrap: 'balance',
          }}>
            What if I did this as{' '}
            <span style={{ whiteSpace: 'nowrap' }}><QEmailTypewriter /></span>
          </h1>
        </QReveal>

        {/* Line 3 — supporting prose */}
        <QReveal>
          <p style={{
            fontFamily: qf.display, fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(20px, 2vw, 26px)',
            color: qp.inkSoft, lineHeight: 1.45,
            margin: '0 auto 60px', maxWidth: 720, textWrap: 'pretty',
          }}>
            Applying to be part of Clay's education team.
          </p>
        </QReveal>

        {/* Stat sticker chips — rotated, colorful, placed in a row */}
        <QReveal>
          <div style={{
            display: 'inline-flex', flexWrap: 'wrap', gap: 18, justifyContent: 'center',
            marginBottom: 72,
          }}>
            {[
              { k: '252', u: '', l: 'attendees', rot: -3, bg: qp.pop, fg: qp.ink },
              { k: '4', u: '', l: 'events', rot: 2, bg: qp.accent, fg: qp.paper },
              { k: '700', u: '+', l: 'kids · Funstein', rot: -2, bg: qp.paper, fg: qp.ink, accent: qp.accent2 },
              { k: '9k', u: '', l: 'essays graded · IELTS24', rot: 3, bg: qp.accent2, fg: qp.paper },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '12px 18px',
                background: s.bg, color: s.fg,
                border: `1.5px solid ${qp.ink}`,
                borderRadius: 3,
                transform: `rotate(${s.rot}deg)`,
                boxShadow: `3px 3px 0 ${qp.ink}`,
                display: 'flex', alignItems: 'baseline', gap: 10,
                fontFamily: qf.body,
              }}>
                <span style={{
                  fontFamily: qf.display, fontSize: 34, fontWeight: 400,
                  letterSpacing: '-0.03em', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
                }}>{s.k}<span style={{ fontSize: 20, fontStyle: 'italic', color: s.accent || s.fg, opacity: s.accent ? 1 : 0.7 }}>{s.u}</span></span>
                <span style={{
                  fontFamily: qf.mono, fontSize: 10, letterSpacing: '0.12em',
                  textTransform: 'uppercase', fontWeight: 500, opacity: 0.82,
                }}>{s.l}</span>
              </div>
            ))}
          </div>
        </QReveal>

        {/* Four lines — handwritten-feel column */}
        <QReveal>
          <div style={{
            position: 'relative',
            padding: '36px 44px',
            background: qp.paper,
            border: `1.5px solid ${qp.ink}`,
            borderRadius: 4,
            boxShadow: `5px 5px 0 ${qp.accent}`,
            maxWidth: 760, margin: '0 auto',
            textAlign: 'left',
          }}>
            <QSticker rotate={-5} top={-28} left={-30} maxWidth={200} color={qp.pop}>
              <span style={{ fontFamily: qf.display, fontStyle: 'italic', fontSize: 15 }}>
                the four-line version.
              </span>
            </QSticker>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {[
                { n: '01', t: 'Official TA to Clay for ', hl: 'GTME School', tail: ', supporting Yash & Izzy live.' },
                { n: '02', t: 'Host of ', hl: 'Clay Club Surat', tail: '. 4 events, 252 attendees, 200+ WA community.' },
                { n: '03', t: 'Clay ', hl: 'Outbound Automation certified', tail: '. Clay 101. First AI Skills cohort.' },
                { n: '04', t: 'Built ', hl: 'IELTS24', tail: ' in 2021. An AI essay grader on GPT + spaCy. Sunset Nov 2024.' },
              ].map((l, i) => (
                <li key={l.n} style={{
                  display: 'grid', gridTemplateColumns: '38px 1fr', gap: 14,
                  padding: '14px 0',
                  borderTop: i === 0 ? 'none' : `1px dashed ${qp.hair}`,
                  alignItems: 'baseline',
                }}>
                  <span style={{
                    fontFamily: qf.mono, fontSize: 11, color: qp.accent, letterSpacing: '0.1em',
                    fontWeight: 600,
                  }}>{l.n}</span>
                  <span style={{ fontFamily: qf.body, fontSize: 17, color: qp.ink, fontWeight: 400, lineHeight: 1.5 }}>
                    {l.t}
                    <span style={{ fontFamily: qf.display, fontStyle: 'italic', color: qp.accent2, fontWeight: 400, fontSize: 20 }}>{l.hl}</span>
                    {l.tail}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </QReveal>
      </div>
    </section>
  );
}

// ── Video ────────────────────────────────────────────────────
function QVideoSection() {
  const fileRef = React.useRef(null);
  const [src, setSrc] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(false);
  const handleFile = (file) => {
    if (!file || !file.type.startsWith('video/')) return;
    setSrc(URL.createObjectURL(file));
  };
  return (
    <section style={{ padding: '30px 40px 100px', position: 'relative' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative' }}>
        <QReveal>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 20 }}>
            <QSectionLabel n={1} text="a walk through" color={qp.accent2} />
            <span style={{ fontFamily: qf.display, fontSize: 22, fontStyle: 'italic', color: qp.inkSoft }}>
              in my voice.
            </span>
          </div>
        </QReveal>
        <QReveal>
          <div
            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={(e) => { e.preventDefault(); setDragOver(false); if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]); }}
            onClick={() => !src && fileRef.current?.click()}
            style={{
              position: 'relative', aspectRatio: '16/9', borderRadius: 6,
              background: qp.paper,
              border: dragOver ? `2.5px dashed ${qp.accent}` : `1.5px dashed ${qp.hairStrong}`,
              overflow: 'hidden',
              cursor: src ? 'default' : 'pointer',
              transition: 'border-color 180ms',
              boxShadow: `4px 4px 0 ${qp.ink}, 6px 6px 0 ${qp.accent}`,
            }}>
            <input ref={fileRef} type="file" accept="video/*" style={{ display: 'none' }}
              onChange={(e) => handleFile(e.target.files?.[0])} />
            {src ? (
              <video src={src} controls autoPlay style={{ width: '100%', height: '100%', display: 'block', background: '#000' }} />
            ) : (
              <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
                <div style={{
                  width: 72, height: 72, borderRadius: 8,
                  background: dragOver ? qp.accent : qp.pop,
                  border: `2px solid ${qp.ink}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transform: 'rotate(-3deg)',
                  boxShadow: `3px 3px 0 ${qp.ink}`,
                }}>
                  <svg width="26" height="26" viewBox="0 0 24 24"><path d="M9 6L18 12L9 18V6Z" fill={qp.ink} /></svg>
                </div>
                <div style={{ fontFamily: qf.display, fontSize: 26, fontWeight: 400, fontStyle: 'italic', color: qp.ink, letterSpacing: '-0.01em' }}>
                  {dragOver ? 'drop it here.' : 'drop the video in, or click to upload.'}
                </div>
                <div style={{ fontFamily: qf.mono, fontSize: 11, color: qp.muted, letterSpacing: '0.1em' }}>
                  .mp4 · .mov · .webm · stays in your browser
                </div>
              </div>
            )}
          </div>
        </QReveal>
      </div>
    </section>
  );
}

// ── Teaching DNA ─────────────────────────────────────────────
function QTeachingDNA({ onOpenImage }) {
  return (
    <section style={{
      background: qp.deep, color: qp.deepInk,
      padding: '140px 40px 140px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Dotted grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(circle, ${qp.deepHair} 1px, transparent 1px)`,
        backgroundSize: '30px 30px', opacity: 0.9, pointerEvents: 'none',
      }} />
      {/* Ambient orange glow */}
      <div style={{
        position: 'absolute', top: '10%', right: '-8%',
        width: 520, height: 520, borderRadius: '50%',
        background: `radial-gradient(circle, ${qp.accent}2A 0%, transparent 70%)`,
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative' }}>
        <QReveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 26 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 11px', border: `1px dashed ${qp.pop}`, borderRadius: 4,
              fontFamily: qf.mono, fontSize: 11, color: qp.pop,
              letterSpacing: '0.16em', textTransform: 'uppercase',
            }}>
              <span style={{ opacity: 0.6 }}>[</span>
              <span style={{ fontWeight: 500 }}>02</span>
              <span style={{ opacity: 0.6 }}>·</span>
              <span>the DNA</span>
              <span style={{ opacity: 0.6 }}>]</span>
            </div>
            <span style={{ fontFamily: qf.mono, fontSize: 11, color: qp.deepInk, opacity: 0.6, letterSpacing: '0.1em' }}>three rooms, same job</span>
          </div>
        </QReveal>
        <QReveal>
          <h2 style={{
            fontFamily: qf.displaySans, fontWeight: 600,
            fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 1.04,
            letterSpacing: '-0.03em', color: qp.deepInk,
            margin: '0 0 24px', maxWidth: 1000, textWrap: 'pretty',
          }}>
            Before Clay, I was already{' '}
            <span style={{ fontFamily: qf.display, fontStyle: 'italic', fontWeight: 400, color: qp.accent }}>doing the work.</span>
          </h2>
        </QReveal>
        <QReveal>
          <p style={{
            fontFamily: qf.display, fontSize: 22, lineHeight: 1.5, color: qp.deepInk, opacity: 0.8, fontWeight: 400,
            margin: '0 0 88px', maxWidth: 700, textWrap: 'pretty',
          }}>
            Kids who'd never seen a laptop. Cambodian children whose language I didn't share. Friends cracking IELTS. The tool keeps changing. The move doesn't.
          </p>
        </QReveal>

        {/* Funstein */}
        <QStoryRow
          tag="every Sunday, no Sunday skipped"
          title="Funstein"
          logo="funstein"
          sub="a classroom on the floor, in Surat"
          body={<>
            <p style={{ margin: '0 0 14px' }}>Co-initiated it after coming back to India. Every Sunday. No Sunday skipped.</p>
            <p style={{ margin: 0 }}>Non-conventional subjects, mostly through practical stuff: science, art & craft, music, general knowledge, and relevant workshops. Kids who'd never seen a laptop got one, touched it, broke it, learned from it. 700+ kids over five years. Featured in The Better India.</p>
          </>}
          pill="2015 – 2019"
          photos={[
            { src: 'images/funstein-circle.jpg', meta: 'FUNSTEIN · CIRCLE', rotate: -2, accent: qp.accent },
            { src: 'images/clay-club-group-2.jpg', meta: 'FUNSTEIN · FIRST ROOM', rotate: 1.5, accent: qp.accent2 },
            { src: 'images/funstein-laptop.jpg', meta: 'FUNSTEIN · LAPTOP', rotate: -1.2, accent: qp.accent },
            { src: 'images/funstein-notebooks.jpg', meta: 'FUNSTEIN · TABLA', rotate: 0.8, accent: qp.pop },
          ]}
          onOpen={onOpenImage}
          side="right"
          sticker="five years of Sundays."
        />

        <QDividerDark />

        {/* Cambodia */}
        <QStoryRow
          tag="solo backpacking, volunteer stint"
          title="Cambodia"
          logo="cpoc"
          sub="a whiteboard, in a language I didn't share"
          body={<>
            <p style={{ margin: '0 0 14px' }}>Solo backpacking that summer. Co-initiated a stint at an orphanage with CPOC. I didn't speak Khmer. They didn't speak much English. We taught each other anyway. Gestures. Drawings. A map of the world that started with North America and ended wherever the chalk ran out.</p>
            <p style={{ margin: 0 }}>Built wooden houses, restructured their curriculum, organized games. Same job, different room.</p>
          </>}
          pill="Jul – Aug 2015 · CPOC"
          photos={[
            { src: 'images/funstein-mic.jpg', meta: 'CPOC · CLASSROOM', rotate: -1.5, accent: qp.accent },
            { src: 'images/cambodia-classroom.jpg', meta: 'CPOC · WHITEBOARD', rotate: 2, accent: qp.accent2 },
          ]}
          onOpen={onOpenImage}
          side="left"
          sticker="same job, different room."
        />

        <QDividerDark />

        {/* IELTS */}
        <QStoryRow
          tag="taught friends 2018 · public platform 2021 – 2024"
          title="IELTS24"
          logo="ielts24"
          sub="self-optimizing tutor, three years in production"
          body={<>
            <p style={{ margin: '0 0 14px' }}>In 2018 I was helping friends crack IELTS. Most weren't first-language English speakers.</p>
            <p style={{ margin: '0 0 14px' }}>In 2021 I opened it up as IELTS24. A fun side project built on GPT models and the <span style={{ color: qp.pop, fontStyle: 'italic', fontFamily: qf.display, fontSize: 18 }}>spaCy NLP library</span>. Submit an essay. It grades the writing, names the errors you keep making, and auto-generates <span style={{ color: qp.pop, fontStyle: 'italic', fontFamily: qf.display, fontSize: 18 }}>25+ exercises</span> pointed at those exact mistakes. Fill in the blank. Complete the sentence. Mark this as correct or wrong. Repeat until you score 80%.</p>
            <p style={{ margin: 0 }}>On the next essay it checks whether the error is actually gone, or whether you got lucky, and rewrites the exercise from there. Sunset November 2024 when model costs caught up.</p>
          </>}
          pill="~9k essays graded through AI"
          photos={[
            { src: 'images/cambodia-group.png', meta: 'IELTS24 · SESSION', rotate: -0.8, accent: qp.pop },
          ]}
          onOpen={onOpenImage}
          side="right"
          sticker="grading in 3 minutes, not a week"
        />
      </div>
    </section>
  );
}

function QDividerDark() {
  return (
    <div style={{ margin: '110px 0', position: 'relative', display: 'flex', alignItems: 'center', gap: 16, justifyContent: 'center' }}>
      <div style={{ flex: 1, height: 1, background: qp.deepHair }} />
      <svg width="42" height="14" viewBox="0 0 42 14" style={{ color: qp.accent }}>
        <path d="M 1 7 L 8 2 L 15 12 L 22 2 L 29 12 L 36 2 L 41 7" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div style={{ flex: 1, height: 1, background: qp.deepHair }} />
    </div>
  );
}

function QStoryRow({ tag, title, sub, body, pill, photos, onOpen, side = 'left', logo, sticker }) {
  const isLeft = side === 'left';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
      gap: 80, alignItems: 'center', position: 'relative',
    }} className="story-grid">
      <QReveal style={{ order: isLeft ? 1 : 2, position: 'relative' }}>
        {logo && <div style={{ marginBottom: 22 }}><QBrandLogo name={logo} /></div>}
        <div style={{
          fontFamily: qf.mono, fontSize: 10, color: qp.accent,
          letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 14,
        }}>{tag}</div>
        <h3 style={{
          fontFamily: qf.display, fontWeight: 400,
          fontSize: 'clamp(46px, 5.6vw, 84px)', lineHeight: 0.95, letterSpacing: '-0.03em',
          color: qp.deepInk, margin: '0 0 10px', fontStyle: 'italic',
        }}>{title}</h3>
        <div style={{
          fontFamily: qf.body, fontSize: 16, fontWeight: 500,
          color: qp.deepInk, opacity: 0.7, margin: '0 0 26px',
        }}>{sub}</div>
        <div style={{
          fontFamily: qf.body, fontSize: 15, lineHeight: 1.7,
          color: qp.deepInk, opacity: 0.75, maxWidth: 520, marginBottom: 26,
        }}>{body}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          {pill && (
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '9px 16px', borderRadius: 3,
              background: qp.pop, color: qp.ink,
              fontFamily: qf.mono, fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase',
              boxShadow: `2px 2px 0 ${qp.accent}`,
            }}>
              {pill}
            </div>
          )}
          {sticker && (
            <span style={{
              display: 'inline-block', padding: '8px 14px',
              background: 'transparent', border: `1.5px dashed ${qp.pop}`,
              borderRadius: 3, transform: `rotate(${isLeft ? -2 : 2}deg)`,
              fontFamily: qf.display, fontStyle: 'italic', fontSize: 15,
              color: qp.pop, lineHeight: 1.2,
            }}>{sticker}</span>
          )}
        </div>
      </QReveal>
      <QReveal style={{ order: isLeft ? 2 : 1, position: 'relative' }}>
        <QGallery photos={photos} onOpen={onOpen} auto={photos.length > 1} aspect="4/3" variant="window" />
      </QReveal>
    </div>
  );
}

Object.assign(window, { QTopBar, QHero, QVideoSection, QTeachingDNA, QBrandMark });