/* @jsx React.createElement */
/* Stamps — 59-character collection, hoverable / expandable */

/* 59 hand-picked motifs spanning a Japan-warm vocabulary:
   animals, food, instruments, weather, faces, plants — kid-friendly but not infantile.
   We render glyphs (emoji shapes drawn as SVG-ish or as text) on a colored disc.
   To match the "no emoji" rule, we use letters/symbols/glyphs from typographic forms only. */

const STAMP_CHARS = [
  { ch: 'A', n: 'Ace' },          { ch: 'B', n: 'Beat' },         { ch: 'C', n: 'Chord' },
  { ch: 'D', n: 'Drum' },         { ch: 'E', n: 'Echo' },         { ch: 'F', n: 'Fill' },
  { ch: 'G', n: 'Groove' },       { ch: 'H', n: 'Hi-Hat' },       { ch: 'I', n: 'Intro' },
  { ch: 'J', n: 'Jam' },          { ch: 'K', n: 'Kick' },         { ch: 'L', n: 'Loop' },
  { ch: 'M', n: 'Melody' },       { ch: 'N', n: 'Note' },         { ch: 'O', n: 'Octave' },
  { ch: 'P', n: 'Pitch' },        { ch: 'Q', n: 'Quarter' },      { ch: 'R', n: 'Rhythm' },
  { ch: 'S', n: 'Snare' },        { ch: 'T', n: 'Tempo' },        { ch: 'U', n: 'Unison' },
  { ch: 'V', n: 'Vibe' },         { ch: 'W', n: 'Wave' },         { ch: 'X', n: 'X-fade' },
  { ch: 'Y', n: 'Yell' },         { ch: 'Z', n: 'Zen' },
  { ch: '♩', n: 'Quarter note' }, { ch: '♪', n: 'Eighth' },       { ch: '♫', n: 'Beam' },
  { ch: '♬', n: 'Sixteenth' },    { ch: '♭', n: 'Flat' },         { ch: '♯', n: 'Sharp' },
  { ch: '♮', n: 'Natural' },      { ch: '𝄞', n: 'Treble' },        { ch: '𝄢', n: 'Bass clef' },
  { ch: '◐', n: 'Half' },         { ch: '◉', n: 'Bullseye' },      { ch: '◇', n: 'Diamond' },
  { ch: '◆', n: 'Filled' },       { ch: '△', n: 'Triangle' },      { ch: '▲', n: 'Solid' },
  { ch: '☆', n: 'Star' },         { ch: '★', n: 'Star+' },         { ch: '✦', n: 'Spark' },
  { ch: '✱', n: 'Burst' },        { ch: '✺', n: 'Sun' },           { ch: '✿', n: 'Bloom' },
  { ch: '❀', n: 'Plum' },         { ch: '❁', n: 'Blossom' },       { ch: '✓', n: 'Done' },
  { ch: '⌘', n: 'Cmd' },          { ch: '∞', n: 'Infinite' },      { ch: 'Ω', n: 'Omega' },
  { ch: '♥', n: 'Heart' },        { ch: '☂', n: 'Rain' },          { ch: '☀', n: 'Sun day' },
  { ch: '☾', n: 'Night' },        { ch: '✈', n: 'Send' },          { ch: 'ハ', n: 'Ha' },
  { ch: 'ピ', n: 'Pi' },
];

const STAMP_PALETTE = [
  '#D03020', '#F04000', '#004080', '#00A0E0', '#F0D050', '#001933',
  '#A52416', '#0078A8', '#2F679A', '#BFA024', '#3D3B35',
];

function StampsSection() {
  const [hovered, setHovered] = React.useState(null);
  const [collected, setCollected] = React.useState(() => new Set([0, 1, 2, 4, 7, 8, 10, 12, 13, 17, 19, 21, 24, 28, 30, 34, 41, 47, 52]));

  const toggle = (i) => {
    setCollected(prev => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i); else next.add(i);
      return next;
    });
  };

  const focus = hovered != null ? STAMP_CHARS[hovered] : null;

  return (
    <section style={{ background: 'var(--page-bg)' }}>
      <div className="ims-section">
        <div className="r-grid-2" data-ratio="sticky" style={{ gap: 56, alignItems: 'start' }}>
          {/* Left: copy */}
          <div className="r-unstick" style={{ position: 'sticky', top: 110 }}>
            <div className="ims-eyebrow">Gamifikasi · 59 stamp</div>
            <h2 className="ims-heading" style={{ fontSize: 52, marginTop: 14 }}>
              Kumpulin <span style={{ color: 'var(--accent-ims)' }}>59</span> stamp. Satu per session.
            </h2>
            <p className="ims-lede" style={{ marginTop: 18 }}>
              Tiap lesson, gurumu nge-stamp kartu kamu. Bukan dinilai — cuma <em>punya kamu</em>.
              Anak-anak ngejar. Eh, ternyata yang dewasa juga diem-diem ngejar.
            </p>
            {/* Active stamp preview */}
            <div className="stampframe" style={{
              marginTop: 28, padding: 24,
              display: 'flex', alignItems: 'center', gap: 22,
              background: 'var(--page-surface)',
            }}>
              <Stamp
                idx={hovered != null ? hovered : 12}
                size={88}
              />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: 'var(--accent-ims)' }}>
                  Stamp · {String((hovered != null ? hovered : 12) + 1).padStart(2, '0')} / 59
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, textTransform: 'uppercase', lineHeight: 1, letterSpacing: '0.01em', marginTop: 8, color: 'var(--page-ink)' }}>
                  {focus ? focus.n : STAMP_CHARS[12].n}
                </div>
                <div style={{ fontSize: 13, color: 'var(--page-ink-2)', marginTop: 8 }}>
                  Hover buat preview. Tap buat (un)collect.
                </div>
              </div>
            </div>
            {/* Collected counter */}
            <div style={{
              marginTop: 18, padding: '14px 18px',
              border: '1px dashed var(--page-border-strong)', borderRadius: 8,
              display: 'flex', alignItems: 'center', gap: 16, justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', fontWeight: 600, color: 'var(--page-ink-3)' }}>Koleksi kamu</div>
                <div className="mono" style={{ fontSize: 26, fontWeight: 700, color: 'var(--page-ink)' }}>
                  {String(collected.size).padStart(2, '0')} <span style={{ color: 'var(--page-ink-3)', fontWeight: 500 }}>/ 59</span>
                </div>
              </div>
              <button onClick={() => setCollected(new Set())} style={{
                all: 'unset', cursor: 'pointer',
                fontSize: 12, color: 'var(--page-ink-3)', textDecoration: 'underline',
              }}>Reset</button>
            </div>
          </div>

          {/* Right: grid */}
          <div className="r-grid-8" style={{
            gap: 12,
          }}>
            {STAMP_CHARS.map((s, i) => (
              <button
                key={i}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => toggle(i)}
                style={{
                  all: 'unset', cursor: 'pointer', display: 'block',
                }}
              >
                <Stamp idx={i} small earned={collected.has(i)} highlight={hovered === i} />
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Stamp({ idx, size = 64, small = false, earned = true, highlight = false }) {
  const stamp = STAMP_CHARS[idx];
  const color = STAMP_PALETTE[idx % STAMP_PALETTE.length];
  const dim = small ? '100%' : size;
  return (
    <div style={{
      position: 'relative',
      width: dim, height: small ? 'auto' : size,
      aspectRatio: '1 / 1',
      borderRadius: '50%',
      background: earned ? color : 'transparent',
      border: `1.5px ${earned ? 'solid' : 'dashed'} ${earned ? 'var(--page-ink)' : 'var(--page-border-strong)'}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: earned ? '#fff' : 'var(--page-ink-3)',
      transition: 'all 180ms var(--ease-out)',
      boxShadow: highlight && earned ? '3px 3px 0 var(--page-ink)' : 'none',
      transform: highlight ? 'translate(-2px, -2px)' : 'translate(0, 0)',
      overflow: 'hidden',
    }}>
      {/* tiny number tag */}
      {earned && (
        <span className="mono" style={{
          position: 'absolute', top: 4, left: 0, right: 0,
          textAlign: 'center', fontSize: 8, opacity: 0.7, fontWeight: 600, letterSpacing: '0.05em',
        }}>{String(idx + 1).padStart(2, '0')}</span>
      )}
      <span style={{
        fontFamily: /[A-Z]/.test(stamp.ch) ? 'var(--font-display)' : 'var(--font-sans)',
        fontSize: small ? '1.8em' : Math.round(size * 0.42),
        lineHeight: 1, fontWeight: 700,
      }}>
        {stamp.ch}
      </span>
    </div>
  );
}

Object.assign(window, { StampsSection });