// Sticker Pack Pro — main prototype (full-bleed scrapbook)
// Animated hero, draggable stickers, peel hover, click confetti+sound,
// new sections (Spotify, moodboard, guestbook, reading), Number Lab w/ keystroke fx.

function StickerPro({ tweaks, setTweak }) {
  const K = window.KAIWAN;
  const T = SP_THEMES[tweaks.theme] || SP_THEMES.banana;
  const F = SP_FONTS[tweaks.font] || SP_FONTS.block;

  // ─── audio + confetti rigging ───
  const audioCtxRef = React.useRef(null);
  React.useEffect(() => {
    window.__sp_playSound = (kind) => {
      if (!tweaks.sound) return;
      try {
        if (!audioCtxRef.current) audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();
        const ctx = audioCtxRef.current;
        const o = ctx.createOscillator(), g = ctx.createGain();
        o.type = kind === 'pop' ? 'triangle' : 'sine';
        const f0 = kind==='pop'? 480 : 320;
        o.frequency.setValueAtTime(f0, ctx.currentTime);
        o.frequency.exponentialRampToValueAtTime(f0*1.8, ctx.currentTime + 0.06);
        g.gain.setValueAtTime(0.18, ctx.currentTime);
        g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
        o.connect(g).connect(ctx.destination);
        o.start(); o.stop(ctx.currentTime + 0.2);
      } catch(e) {}
    };
    return () => { window.__sp_playSound = null; };
  }, [tweaks.sound]);

  const [confetti, setConfetti] = React.useState([]);
  const cidRef = React.useRef(0);
  React.useEffect(() => {
    window.__sp_burstConfetti = (x, y, color) => {
      if (!tweaks.confetti) return;
      const pieces = Array.from({length: 14}).map(() => ({
        id: cidRef.current++,
        x, y,
        dx: (Math.random()-0.5)*240, dy: -Math.random()*200 - 80,
        rot: Math.random()*720-360,
        color: [color, T.accent, T.accent2, T.ink][Math.floor(Math.random()*4)],
        shape: ['rect','star','heart'][Math.floor(Math.random()*3)],
      }));
      setConfetti(c => [...c, ...pieces]);
      setTimeout(() => {
        setConfetti(c => c.filter(p => !pieces.find(pp => pp.id === p.id)));
      }, 1100);
    };
    return () => { window.__sp_burstConfetti = null; };
  }, [tweaks.confetti, T]);

  // ─── marker trail ───
  const [trail, setTrail] = React.useState([]);
  React.useEffect(() => {
    if (!tweaks.markerTrail) { setTrail([]); return; }
    let id = 0;
    const onMove = (e) => {
      setTrail(t => [...t.slice(-30), { id: id++, x: e.clientX, y: e.clientY }]);
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, [tweaks.markerTrail]);

  // ─── animated hero state ───
  const [heroVariant, setHeroVariant] = React.useState(tweaks.hero || 'bounce');
  React.useEffect(() => setHeroVariant(tweaks.hero), [tweaks.hero]);

  const root = {
    background: T.bg, color: T.ink, fontFamily: F.body, minHeight:'100%', width:'100%',
    backgroundImage: `${PAPER_BG}, radial-gradient(${T.ink}11 1px, transparent 1px)`,
    backgroundSize: '240px 240px, 18px 18px',
    transition: 'background .35s, color .35s',
    position: 'relative',
    overflow: 'hidden',
  };

  return (
    <div style={root}>
      {/* CONFETTI LAYER */}
      <div style={{position:'fixed', inset:0, pointerEvents:'none', zIndex:9000}}>
        {confetti.map(p => <ConfettiPiece key={p.id} p={p} ink={T.ink}/>)}
      </div>
      {/* MARKER TRAIL */}
      {tweaks.markerTrail && (
        <svg style={{position:'fixed', inset:0, pointerEvents:'none', zIndex:8500}}>
          <polyline points={trail.map(p => `${p.x},${p.y}`).join(' ')}
            fill="none" stroke={T.accent2} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" opacity="0.7"/>
        </svg>
      )}

      {/* HEADER */}
      <Header T={T} F={F}/>

      {/* HERO */}
      <Hero T={T} F={F} variant={heroVariant} tagline={K.tagline}/>

      {/* ABOUT */}
      <About T={T} F={F}/>

      {/* PROJECTS */}
      <Projects T={T} F={F} projects={K.projects}/>

      {/* NUMBER LAB */}
      <NumberLab T={T} F={F}/>

      {/* MINI-GAME */}
      <StickerGame T={T} F={F}/>

      {/* 2048 */}
      <Game2048 T={T} F={F}/>

      {/* KILL THE KING */}
      <KillTheKing T={T} F={F}/>

      {/* FAMILY COMPUTER */}
      <FamilyComputer T={T} F={F}/>

      {/* COIN MAZE */}
      <CoinMaze T={T} F={F}/>

      {/* TOWER STACK */}
      <TowerStack T={T} F={F}/>

      {/* SKILLS + NOW */}
      <SkillsNow T={T} F={F} K={K}/>

      {/* SPOTIFY + READING (split) */}
      <SpotifyReading T={T} F={F} K={K}/>

      {/* MOODBOARD */}
      <Moodboard T={T} F={F} K={K}/>

      {/* WRITING */}
      <Writing T={T} F={F} K={K}/>

      {/* GUESTBOOK */}
      <Guestbook T={T} F={F} K={K}/>

      {/* CONTACT */}
      <Contact T={T} F={F} K={K}/>
    </div>
  );
}

function ConfettiPiece({ p, ink }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    el.animate([
      { transform: `translate(0,0) rotate(0)`, opacity: 1 },
      { transform: `translate(${p.dx}px, ${p.dy + 220}px) rotate(${p.rot}deg)`, opacity: 0 },
    ], { duration: 1000, easing: 'cubic-bezier(.2,.6,.4,1)', fill: 'forwards' });
  }, []);
  const sz = 12;
  return (
    <div ref={ref} style={{position:'fixed', left:p.x, top:p.y, width:sz, height:sz, background: p.shape==='rect'?p.color:'transparent'}}>
      {p.shape==='star' && <Doodle.Star color={p.color} size={sz}/>}
      {p.shape==='heart' && <Doodle.Heart color={p.color} size={sz}/>}
    </div>
  );
}

// ─── HEADER ─────────────────────────────────────────────
function Header({ T, F }) {
  return (
    <div style={{position:'sticky', top:0, zIndex:80, background:T.bg, borderBottom:`2.5px solid ${T.ink}`, padding:'14px 32px', display:'flex', justifyContent:'space-between', alignItems:'center', backgroundImage: PAPER_BG, backgroundBlendMode:'multiply'}}>
      <div style={{display:'flex', alignItems:'center', gap:14}}>
        <div style={{position:'relative'}}>
          <div style={{width:38, height:38, background:T.accent, border:`2.5px solid ${T.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:F.display, fontWeight:F.dispWt, fontSize:22, color:T.ink, transform:'rotate(-4deg)', boxShadow:`3px 3px 0 0 ${T.ink}`}}>K</div>
          <Doodle.Sparkle color={T.accent2} size={14}/>
        </div>
        <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:22, letterSpacing:'-0.02em'}}>KAIWAN.LAB</div>
      </div>
      <div style={{display:'flex', gap:6, fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', alignItems:'center'}}>
        <span className="sp-nav-links" style={{display:'flex', gap:6, alignItems:'center'}}>
          {['work','writing','lab','log'].map(x => (
            <a key={x} style={{padding:'6px 10px', cursor:'pointer'}}>{x}</a>
          ))}
        </span>
        <PeelSticker t={T} bg={T.accent2} color="#fff" rotate={-4} fontSize={11}>♥ HIRE ME</PeelSticker>
      </div>
    </div>
  );
}

// ─── HERO ───────────────────────────────────────────────
function Hero({ T, F, variant, tagline }) {
  const [shuffleKey, setShuffleKey] = React.useState(0);
  const word1 = "HI!"; const word2 = "I'M"; const word3 = "KAIWAN";
  const charPalette = [T.ink, T.accent, T.accent2];

  const mkChar = (ch, idx, line) => {
    let extra = {};
    if (variant === 'bounce') {
      extra.animation = `sp-bounce 1.6s cubic-bezier(.2,.7,.3,1.4) ${idx*0.07}s infinite alternate`;
    } else if (variant === 'wobble') {
      extra.animation = `sp-wobble 2.4s ease-in-out ${idx*0.1}s infinite`;
    } else if (variant === 'shuffle') {
      // tied to shuffleKey
    }
    const color = (line === 2 && idx === 2) ? T.accent : (line===0 && idx===1?T.accent2:T.ink);
    const rot = ((idx % 5) - 2) * 3 + (Math.sin(idx + shuffleKey)*4);
    return (
      <span key={`${line}-${idx}-${shuffleKey}`} style={{
        display:'inline-block', color,
        transform: `rotate(${rot}deg) translateY(${(idx%3)*-3}px)`,
        transition: 'transform .35s cubic-bezier(.5,1.6,.4,1)',
        ...extra,
      }}>{ch}</span>
    );
  };

  return (
    <div style={{padding:'80px 48px 60px', position:'relative'}}>
      <style>{`
        @keyframes sp-bounce { 0%{transform:translateY(0) rotate(var(--r,0deg))} 100%{transform:translateY(-12px) rotate(var(--r,0deg))} }
        @keyframes sp-wobble { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
      `}</style>

      {/* floating draggable stickers */}
      <PeelSticker t={T} bg={T.accent} rotate={-8} x={20} y={10} draggable fontSize={13} style={{position:'absolute', top: 50, left: 50}}>★ NOW BOOKING 2026</PeelSticker>
      <PeelSticker className="sp-hide-mobile" t={T} bg={T.accent2} color="#fff" rotate={6} x={0} y={0} draggable fontSize={11} style={{position:'absolute', top: 80, right: 80}}>NEW! ↗</PeelSticker>
      <PeelSticker className="sp-hide-mobile" t={T} bg={T.ink} color={T.bg} rotate={-3} x={0} y={0} draggable fontSize={10} style={{position:'absolute', top: 380, right: 200}} shape="pill">v2.0</PeelSticker>

      <div className="sp-hero-title" style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize: 196, lineHeight:0.84, margin:0, letterSpacing:'-0.05em', textTransform:'uppercase', cursor:'pointer'}}
        onClick={() => setShuffleKey(k=>k+1)}>
        <div>{word1.split('').map((c,i) => mkChar(c,i,0))}</div>
        <div>{word2.split('').map((c,i) => mkChar(c,i,1))}</div>
        <div style={{position:'relative', display:'inline-block'}}>
          {word3.split('').map((c,i) => mkChar(c,i,2))}
          <svg style={{position:'absolute', bottom:-6, left:-6, right:-6, width:'calc(100% + 12px)'}} viewBox="0 0 400 24" preserveAspectRatio="none" height="22">
            <path d="M5 14 Q 100 4, 200 14 T 395 12" stroke={T.accent2} strokeWidth="6" fill="none" strokeLinecap="round"/>
          </svg>
        </div>
      </div>
      <div style={{fontFamily:F.hand, fontSize:18, marginTop:8, color:T.ink, opacity:0.6}}>
        ↳ click the headline to shuffle ◌
      </div>

      <div className="sp-hero-row" style={{display:'flex', gap:24, marginTop: 48, alignItems:'flex-start'}}>
        <div style={{flex:1, fontSize:18, lineHeight:1.5, maxWidth: 540, fontWeight:500}}>
          {tagline}
        </div>
        <ScrapBox t={T} bg={T.ink} rotate={2} style={{padding:'18px 22px', color:T.bg, maxWidth: 230}}>
          <Tape rotate={-8} color={T.tape} w={70} style={{top:-12, left:'50%', marginLeft:-35}}/>
          <div style={{fontFamily:F.hand, fontSize:24, lineHeight: 1.05, color:T.bg}}>"Make the things you wish existed."</div>
          <div style={{fontSize:10, letterSpacing:'0.16em', marginTop:8, opacity:0.7}}>— STICKY NOTE, 2024</div>
        </ScrapBox>
      </div>
    </div>
  );
}

// ─── INLINE CUSTOMIZER ──────────────────────────────────
function InlineCustomizer({ T, F, tweaks, setTweak }) {
  return (
    <div style={{margin:'0 32px 56px', padding:'22px 26px', background:T.bg, border:`2.5px solid ${T.ink}`, boxShadow:`6px 6px 0 0 ${T.ink}`, position:'relative', backgroundImage:PAPER_BG, backgroundBlendMode:'multiply'}}>
      <Tape rotate={-4} color={T.tape} w={120} style={{top:-14, left:30}}/>
      <Tape rotate={3} color={T.tape} w={90} style={{top:-12, right:50}}/>
      <PeelSticker t={T} bg={T.accent2} color="#fff" rotate={-2} fontSize={11} style={{position:'absolute', top:-18, right:140}}>♥ STYLE-O-MATIC</PeelSticker>

      <div style={{display:'grid', gridTemplateColumns:'90px 1fr', gap: 14, alignItems:'center', marginBottom: 14}}>
        <div style={{fontSize:11, fontWeight:800, textTransform:'uppercase', letterSpacing:'0.08em'}}>Color →</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
          {Object.entries(SP_THEMES).map(([k,v])=>(
            <button key={k} onClick={()=>setTweak('theme', k)} style={{
              fontFamily:F.body, fontSize:11, fontWeight:800, textTransform:'uppercase',
              padding:'6px 12px', cursor:'pointer',
              background: v.bg, color: v.ink,
              border:`2px solid ${T.ink}`,
              boxShadow: tweaks.theme===k ? `3px 3px 0 0 ${T.ink}` : 'none',
              transform: tweaks.theme===k ? 'translate(-1px,-1px)' : 'none',
            }}>{k}</button>
          ))}
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'90px 1fr', gap: 14, alignItems:'center'}}>
        <div style={{fontSize:11, fontWeight:800, textTransform:'uppercase', letterSpacing:'0.08em'}}>Type →</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
          {Object.keys(SP_FONTS).map(k=>(
            <button key={k} onClick={()=>setTweak('font', k)} style={{
              fontFamily:SP_FONTS[k].display, fontWeight:SP_FONTS[k].dispWt, fontSize:13,
              padding:'6px 14px', cursor:'pointer',
              background: tweaks.font===k ? T.ink : T.bg, color: tweaks.font===k ? T.bg : T.ink,
              border:`2px solid ${T.ink}`,
              boxShadow: tweaks.font===k ? `3px 3px 0 0 ${T.accent}` : 'none',
            }}>{k}</button>
          ))}
        </div>
      </div>
      <div style={{marginTop:14, fontFamily:F.hand, fontSize:18, color:T.ink, opacity:0.65}}>
        ↳ open the Tweaks panel for more knobs (drag, sound, confetti, hero variant…)
      </div>
    </div>
  );
}

// ─── ABOUT ──────────────────────────────────────────────
function About({ T, F }) {
  return (
    <div style={{margin:'0 32px 56px', display:'grid', gridTemplateColumns:'1.6fr 1fr', gap: 24}}>
      <ScrapBox t={T} bg={T.bg} rotate={-1} style={{padding:'30px 36px'}}>
        <PeelSticker t={T} bg={T.accent} rotate={3} fontSize={11} style={{marginBottom:14}}>About</PeelSticker>
        <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize: 40, lineHeight: 1.05, letterSpacing:'-0.02em'}}>
          I make small, slightly weird software <span style={{position:'relative', display:'inline-block'}}>experiments<span style={{position:'absolute', left:-4, right:-4, bottom:-2}}><Doodle.Underline color={T.accent2} w={'100%'}/></span></span>. Mostly to <span style={{background:T.accent, padding:'0 6px'}}>understand things</span>.
        </div>
        <div style={{display:'flex', gap:10, marginTop:18, alignItems:'center'}}>
          <Doodle.Arrow color={T.ink} w={50} h={28}/>
          <span style={{fontFamily:F.hand, fontSize:22}}>scroll, or click stickers</span>
        </div>
      </ScrapBox>
      <ScrapBox t={T} bg={T.accent2} rotate={2} style={{padding:'24px 28px', color:'#fff', position:'relative'}}>
        <Tape rotate={6} color={T.tape} w={80} style={{top:-12, right:20}}/>
        <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.16em', textTransform:'uppercase', opacity:0.95, color:'#fff'}}>FACT FILE</div>
        <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:24, marginTop:10, lineHeight:1.1, color:'#fff'}}>17 yrs old · self-taught · likes loud type & quiet music</div>
        <div style={{marginTop:18, fontFamily:F.hand, fontSize:24, color:'#fff'}}>est. 2009 ✺</div>
      </ScrapBox>
    </div>
  );
}

// ─── PROJECTS ───────────────────────────────────────────
function Projects({ T, F, projects }) {
  return (
    <div style={{margin:'0 32px 56px'}}>
      <div style={{display:'flex', alignItems:'baseline', gap:18, marginBottom: 28}}>
        <h2 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:72, margin:0, letterSpacing:'-0.04em'}}>WORK <span style={{color:T.accent2}}>↗</span></h2>
        <PeelSticker t={T} bg={T.ink} color={T.bg} rotate={4} fontSize={11}>04 things</PeelSticker>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 32}}>
        {projects.map((p,i) => <ProjectCard key={p.n} p={p} i={i} T={T} F={F}/>)}
      </div>
    </div>
  );
}

function ProjectCard({ p, i, T, F }) {
  const [flipped, setFlipped] = React.useState(false);
  const colors = [T.accent, T.bg, T.accent2, T.bg];
  const rotates = [-1.4, 1.4, -1.6, 1];
  const c = colors[i%4];
  const isAccent2 = c === T.accent2;
  return (
    <div style={{perspective:1400, position:'relative'}} onClick={()=>setFlipped(f=>!f)}>
      <div style={{
        position:'relative', transformStyle:'preserve-3d',
        transition:'transform .7s cubic-bezier(.4,.2,.2,1)',
        transform:`rotate(${rotates[i%4]}deg) ${flipped?'rotateY(180deg)':''}`,
      }}>
        {/* FRONT */}
        <ScrapBox t={T} bg={c} rotate={0} hoverable={false} style={{padding:'26px 28px', position:'relative', backfaceVisibility:'hidden', cursor:'pointer', color: isAccent2 ? '#fff' : T.ink}}>
          <Tape rotate={-3} color={T.tape} w={60} style={{top:-10, left:24}}/>
          <PeelSticker t={T} bg={T.ink} color={T.bg} rotate={6} fontSize={11} style={{position:'absolute', top:-14, right:18}}>{p.n}</PeelSticker>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 14}}>
            <div style={{fontSize:11, fontWeight:800, textTransform:'uppercase', letterSpacing:'0.1em', opacity:0.75}}>{p.kicker}</div>
            <div style={{fontFamily:F.hand, fontSize:28, color: c===T.bg ? T.accent : (isAccent2?'#fff':T.ink)}}>{p.stat}</div>
          </div>
          <h3 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:38, margin:'0 0 12px', lineHeight:1.05, letterSpacing:'-0.03em'}}>{p.name}</h3>
          <div style={{fontSize:14, lineHeight:1.5}}>{p.desc}</div>
          <div style={{display:'flex', gap:6, marginTop:16, flexWrap:'wrap'}}>
            {p.tags.map(tg=>(
              <span key={tg} style={{fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.08em', padding:'3px 8px', background: isAccent2?'rgba(255,255,255,.2)' : (c===T.bg ? T.ink : T.bg), color: isAccent2?'#fff':(c===T.bg ? T.bg : T.ink), border:`1.5px solid ${isAccent2?'#fff':T.ink}`}}>{tg}</span>
            ))}
          </div>
          <div style={{position:'absolute', bottom:10, right:14, fontFamily:F.hand, fontSize:14, opacity:0.6}}>↺ flip</div>
        </ScrapBox>
        {/* BACK */}
        <ScrapBox t={T} bg={T.ink} rotate={0} hoverable={false} style={{padding:'26px 28px', position:'absolute', top:0, left:0, right:0, height:'100%', backfaceVisibility:'hidden', transform:'rotateY(180deg)', color:T.bg, cursor:'pointer'}}>
          <div style={{fontFamily:F.hand, fontSize:32, color:T.accent, marginBottom:8}}>behind the scenes</div>
          <div style={{fontFamily:F.body, fontSize:14, lineHeight:1.6, color:T.bg}}>
            {p.name === 'Logic Engine' && 'Inspired by a textbook chapter on representations. Started as a single function, ended as a CLI you can pipe stuff through.'}
            {p.name === 'Style Lab' && 'Two CSS variable layers: theme + type. Independent, swappable, no JS recalc. The trick was scoping.'}
            {p.name === 'Paper Math' && 'Hand-set in InDesign, then risoprinted at home. The smell never washes out.'}
            {p.name === 'Tiny Compiler' && 'Read the book, wrote the parser, cried at the visitor pattern, finished by Sunday.'}
          </div>
          <div style={{position:'absolute', bottom:10, right:14, fontFamily:F.hand, fontSize:14, color:T.bg, opacity:0.6}}>↺ flip back</div>
        </ScrapBox>
      </div>
    </div>
  );
}

// ─── NUMBER LAB ─────────────────────────────────────────
function NumberLab({ T, F }) {
  const [val, setVal] = React.useState('255');
  const [bump, setBump] = React.useState(0);
  const inputRef = React.useRef(null);

  const num = parseInt(val,10);
  const ok = !isNaN(num) && isFinite(num);
  const rows = ok ? [
    { k:'BIN', v: num.toString(2), c: T.accent },
    { k:'OCT', v: num.toString(8), c: T.accent2 },
    { k:'HEX', v: num.toString(16).toUpperCase(), c: T.accent },
  ] : [];

  const onKey = (e) => {
    setBump(b => b+1);
    if (window.__sp_playSound) window.__sp_playSound('key');
  };

  return (
    <div style={{margin:'0 32px 56px'}}>
      <div style={{display:'flex', alignItems:'flex-end', gap:14, marginBottom:18}}>
        <PeelSticker t={T} bg={T.accent2} color="#fff" rotate={-4} fontSize={11}>LIVE TOOL</PeelSticker>
        <h2 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:72, margin:0, letterSpacing:'-0.04em'}}>NUMBER LAB</h2>
        <Doodle.Sparkle color={T.accent} size={26}/>
      </div>
      <ScrapBox t={T} bg={T.ink} rotate={-0.4} hoverable={false} style={{padding:0, color: T.bg, overflow:'hidden'}}>
        <Tape rotate={2} color={T.tape} w={140} style={{top:-12, left:'30%'}}/>
        <div style={{padding:'34px 38px'}}>
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 8}}>
            <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.18em', opacity:0.7}}>TYPE A NUMBER ↓</div>
            <div style={{fontFamily:F.hand, fontSize:22, color:T.accent}}>{ok ? 'looks good!' : 'try again'}</div>
          </div>
          <input ref={inputRef} value={val} onChange={e=>setVal(e.target.value)} onKeyDown={onKey}
            style={{width:'100%', border:'none', outline:'none', background:'transparent', color:T.bg,
              fontFamily:'"JetBrains Mono", monospace', fontSize: 96, padding: '8px 0',
              borderBottom:`3px solid ${T.bg}`,
              transform: `scale(${1 + (bump%2)*0.005})`,
              transition:'transform .08s',
            }}/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginTop: 26}}>
            {rows.map((r,i)=>(
              <div key={r.k}
                style={{padding:'18px 20px', background: r.c, color: T.ink, border:`2px solid ${T.bg}`, position:'relative',
                  animation: `sp-numbump 0.25s ease-out ${bump}`, transform:'translateY(0)',
                }} key2={`${r.k}-${bump}`}>
                <div style={{fontSize:10, fontWeight:800, letterSpacing:'0.18em'}}>{r.k}</div>
                <div key={`${r.k}-${bump}`} style={{fontFamily:'"JetBrains Mono", monospace', fontSize: 26, marginTop: 6, fontWeight: 700, wordBreak:'break-all',
                  animation: `sp-cellpulse .3s ease-out`}}>{r.v}</div>
              </div>
            ))}
          </div>
          <style>{`
            @keyframes sp-cellpulse { 0%{transform:scale(0.94); opacity:.5} 100%{transform:scale(1); opacity:1} }
          `}</style>
        </div>
      </ScrapBox>
    </div>
  );
}

// ─── SKILLS + NOW ───────────────────────────────────────
function SkillsNow({ T, F, K }) {
  return (
    <div style={{margin:'0 32px 56px', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 28}}>
      <ScrapBox t={T} bg={T.bg} rotate={-0.5} style={{padding:'28px 32px', position:'relative'}}>
        <Tape rotate={-5} color={T.tape} w={100} style={{top:-12, left:24}}/>
        <PeelSticker t={T} bg={T.accent} rotate={3} fontSize={11} style={{marginBottom:20}}>TOOLS I USE</PeelSticker>
        <div style={{display:'flex', flexWrap:'wrap', gap:10}}>
          {K.skills.map((s,i) => (
            <PeelSticker key={s.k} t={T} bg={s.lvl>=4 ? T.accent : T.bg} rotate={(s.k.length%5)-2} fontSize={13 + s.lvl} padding={'8px 14px'}>
              {s.k} <span style={{display:'inline-flex', gap:2, marginLeft:6, verticalAlign:'middle'}}>{Array.from({length:s.lvl}).map((_,n)=><span key={n} style={{width:5,height:5,background:T.ink,borderRadius:'50%',display:'inline-block'}}/>)}</span>
            </PeelSticker>
          ))}
        </div>
      </ScrapBox>
      <ScrapBox t={T} bg={T.accent} rotate={1} style={{padding:'28px 32px', position:'relative'}}>
        <Tape rotate={6} color={T.tape} w={80} style={{top:-12, right:24}}/>
        <PeelSticker t={T} bg={T.ink} color={T.bg} rotate={-3} fontSize={11} style={{marginBottom:20}}>NOW PLAYING</PeelSticker>
        {K.nowList.map((n,i)=>(
          <div key={i} style={{display:'flex', gap:12, padding:'10px 0', borderBottom: i<K.nowList.length-1 ? `1.5px dashed ${T.ink}66` : 'none', alignItems:'baseline'}}>
            <span style={{fontFamily:F.hand, fontSize:24, color:T.ink}}>{['♪','✦','▲','●'][i]}</span>
            <span style={{fontWeight:600, fontSize:15}}>{n}</span>
          </div>
        ))}
      </ScrapBox>
    </div>
  );
}

// ─── SPOTIFY + READING ──────────────────────────────────
function SpotifyReading({ T, F, K }) {
  const [progress, setProgress] = React.useState(K.spotify.progress);
  React.useEffect(() => {
    const i = setInterval(() => setProgress(p => (p > 0.99 ? 0 : p + 0.005)), 700);
    return () => clearInterval(i);
  }, []);
  return (
    <div style={{margin:'0 32px 56px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 28}}>
      <ScrapBox t={T} bg={T.ink} rotate={-1} style={{padding:'24px 28px', color:T.bg, position:'relative'}}>
        <Tape rotate={-3} color={T.tape} w={90} style={{top:-12, left:30}}/>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <PeelSticker t={T} bg={T.accent} rotate={-3} fontSize={10}>● LIVE</PeelSticker>
          <span style={{fontFamily:F.hand, fontSize:20, color:T.accent}}>spotify.fm/kaiwan</span>
        </div>
        <div style={{display:'flex', gap:18, alignItems:'center'}}>
          <div style={{width:96, height:96, background: T.accent, border:`2px solid ${T.bg}`, position:'relative', flexShrink:0}}>
            <div style={{position:'absolute', inset:8, border:`2px solid ${T.ink}`, borderRadius:'50%', background:`conic-gradient(${T.accent2} 0deg, ${T.bg} 360deg)`}}/>
            <div style={{position:'absolute', top:'50%', left:'50%', width:14, height:14, marginLeft:-7, marginTop:-7, borderRadius:'50%', background:T.ink, border:`2px solid ${T.bg}`}}/>
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:11, fontWeight:800, letterSpacing:'0.16em', opacity:0.6}}>NOW PLAYING ♪</div>
            <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:26, lineHeight:1.1, marginTop:4, letterSpacing:'-0.02em', color:T.bg}}>{K.spotify.song}</div>
            <div style={{fontFamily:F.hand, fontSize:20, color:T.accent, marginTop:2}}>{K.spotify.artist}</div>
            <div style={{marginTop:10, height:6, background:`${T.bg}33`, position:'relative'}}>
              <div style={{position:'absolute', inset:0, width:`${progress*100}%`, background:T.accent2}}/>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop:4, fontFamily:'"JetBrains Mono",monospace', fontSize:10, opacity:0.6}}>
              <span>{Math.floor(progress*3.4)}:{String(Math.floor(progress*204)%60).padStart(2,'0')}</span><span>3:24</span>
            </div>
          </div>
        </div>
      </ScrapBox>
      <ScrapBox t={T} bg={T.bg} rotate={1.5} style={{padding:'24px 28px', position:'relative'}}>
        <Tape rotate={4} color={T.tape} w={100} style={{top:-12, right:30}}/>
        <PeelSticker t={T} bg={T.accent2} color="#fff" rotate={-3} fontSize={11} style={{marginBottom:14}}>📖 READING</PeelSticker>
        {K.reading.map((b,i)=>(
          <div key={i} style={{display:'grid', gridTemplateColumns:'auto 1fr auto', gap:12, padding:'10px 0', borderBottom: i<K.reading.length-1 ? `1.5px dashed ${T.ink}33` : 'none', alignItems:'center'}}>
            <div style={{width:24, height:30, background: [T.accent, T.accent2, T.ink, T.bg][i%4], border:`1.5px solid ${T.ink}`, transform:`rotate(${(i%2?2:-2)}deg)`}}/>
            <div>
              <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:16, letterSpacing:'-0.01em', lineHeight:1.2}}>{b.title}</div>
              <div style={{fontSize:11, opacity:0.6}}>{b.author}</div>
            </div>
            <div style={{fontFamily:F.hand, fontSize:18, color: b.status==='now'?T.accent2:b.status==='soon'?T.accent:T.ink, opacity: b.status==='done'?0.4:1}}>
              {b.status === 'now' ? '◉ now' : b.status === 'soon' ? '○ next' : '✓ done'}
            </div>
          </div>
        ))}
      </ScrapBox>
    </div>
  );
}

// ─── MOODBOARD ──────────────────────────────────────────
function Moodboard({ T, F, K }) {
  return (
    <div style={{margin:'0 32px 56px'}}>
      <div style={{display:'flex', alignItems:'baseline', gap:14, marginBottom:24}}>
        <h2 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:72, margin:0, letterSpacing:'-0.04em'}}>MOODBOARD</h2>
        <PeelSticker t={T} bg={T.accent} rotate={-4} fontSize={11}>2026 INSPO</PeelSticker>
      </div>
      <div className="sp-mood" style={{position:'relative', height: 420, background:`${T.ink}06`, border:`2px dashed ${T.ink}55`, padding:20}}>
        {K.moodboard.map((m, i) => {
          const positions = [
            {l:'4%', t:'10%', r: -3, w: 220, h: 180},
            {l:'24%', t:'45%', r: 4, w: 180, h: 240},
            {l:'42%', t:'8%', r: -2, w: 240, h: 160},
            {l:'45%', t:'52%', r: 3, w: 200, h: 200},
            {l:'68%', t:'15%', r: -4, w: 180, h: 220},
            {l:'72%', t:'58%', r: 5, w: 220, h: 160},
          ];
          const p = positions[i] || positions[0];
          return (
            <div key={i} className="moodcard" style={{
              position:'absolute', left: p.l, top: p.t, width: p.w, height: p.h,
              background: '#fff', border: `2px solid ${T.ink}`, padding: 8, paddingBottom: 28,
              transform: `rotate(${p.r}deg)`,
              boxShadow: `5px 5px 0 0 ${T.ink}`,
              transition:'transform .25s, box-shadow .25s',
              cursor:'pointer',
            }} onMouseEnter={(e) => { e.currentTarget.style.transform = `rotate(${p.r/3}deg) translate(-2px,-3px) scale(1.04)`; e.currentTarget.style.zIndex=10; }}
               onMouseLeave={(e) => { e.currentTarget.style.transform = `rotate(${p.r}deg)`; e.currentTarget.style.zIndex=1; }}>
              <Tape rotate={(i%2?2:-2)*3} color={T.tape} w={50} style={{top:-10, left:'50%', marginLeft:-25}}/>
              <div style={{width:'100%', height:'100%', background:m.c, position:'relative', overflow:'hidden'}}>
                <div style={{position:'absolute', inset:0, backgroundImage:`repeating-linear-gradient(${i*30}deg, ${T.ink}33 0 4px, transparent 4px 12px)`}}/>
                <div style={{position:'absolute', bottom:8, left:10, fontFamily:F.display, fontWeight:F.dispWt, fontSize:38, color:'#fff', letterSpacing:'-0.04em', mixBlendMode:'difference'}}>{m.tag}</div>
              </div>
              <div style={{position:'absolute', bottom:6, left:10, right:10, fontFamily:F.hand, fontSize:14, opacity:0.7, color:T.ink}}>fig.{i+1} — {m.tag.toLowerCase()}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── WRITING ────────────────────────────────────────────
function Writing({ T, F, K }) {
  return (
    <div style={{margin:'0 32px 56px'}}>
      <div style={{display:'flex', alignItems:'baseline', gap:14, marginBottom: 24}}>
        <h2 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:72, margin:0, letterSpacing:'-0.04em'}}>NOTES</h2>
        <PeelSticker t={T} bg={T.accent} rotate={-3} fontSize={11}>RSS!</PeelSticker>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:16}}>
        {K.writing.map((w,i)=>(
          <ScrapBox key={i} t={T} bg={T.bg} rotate={i%2===0 ? -0.4 : 0.5} style={{padding:'18px 22px', display:'grid', gridTemplateColumns:'90px 1fr 60px 30px', gap:18, alignItems:'center'}}>
            <div style={{fontFamily:F.hand, fontSize:22, color:T.accent2}}>{w.date}</div>
            <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:20, letterSpacing:'-0.02em', lineHeight:1.15}}>{w.title}</div>
            <div style={{fontSize:12, fontWeight:700, opacity:0.6}}>{w.read}</div>
            <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:24, color:T.accent}}>↗</div>
          </ScrapBox>
        ))}
      </div>
    </div>
  );
}

// ─── GUESTBOOK ──────────────────────────────────────────
function Guestbook({ T, F, K }) {
  const [entries, setEntries] = React.useState(K.guestbook);
  const [name, setName] = React.useState('');
  const [note, setNote] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!name.trim() || !note.trim()) return;
    setEntries(es => [{ who: name, note, when: 'just now' }, ...es]);
    setName(''); setNote('');
    if (window.__sp_burstConfetti) {
      window.__sp_burstConfetti(window.innerWidth/2, 200, T.accent);
    }
    if (window.__sp_playSound) window.__sp_playSound('pop');
  };
  return (
    <div style={{margin:'0 32px 56px'}}>
      <div style={{display:'flex', alignItems:'baseline', gap:14, marginBottom: 24}}>
        <h2 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:72, margin:0, letterSpacing:'-0.04em'}}>GUESTBOOK</h2>
        <PeelSticker t={T} bg={T.accent2} color="#fff" rotate={4} fontSize={11}>say hi ♥</PeelSticker>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:28, alignItems:'start'}}>
        <ScrapBox t={T} bg={T.bg} rotate={-1} style={{padding:'24px 26px'}}>
          <Tape rotate={3} color={T.tape} w={90} style={{top:-12, left:30}}/>
          <form onSubmit={submit}>
            <div style={{fontFamily:F.hand, fontSize:22, color:T.accent2, marginBottom:6}}>your turn ↓</div>
            <input value={name} onChange={e=>setName(e.target.value)} placeholder="your name"
              style={{width:'100%', border:`2px solid ${T.ink}`, padding:'10px 12px', background:T.bg, color:T.ink, fontFamily:F.body, fontSize:14, marginBottom:10, outline:'none'}}/>
            <textarea value={note} onChange={e=>setNote(e.target.value)} placeholder="leave a note…" rows={3}
              style={{width:'100%', border:`2px solid ${T.ink}`, padding:'10px 12px', background:T.bg, color:T.ink, fontFamily:F.body, fontSize:14, outline:'none', resize:'vertical'}}/>
            <button type="submit" style={{
              marginTop:10, padding:'10px 18px', background:T.accent, color:T.ink,
              border:`2.5px solid ${T.ink}`, boxShadow:`4px 4px 0 0 ${T.ink}`,
              fontFamily:F.display, fontWeight:F.dispWt, fontSize:14, letterSpacing:'0.04em', textTransform:'uppercase', cursor:'pointer',
            }}>STICK IT ↗</button>
          </form>
        </ScrapBox>
        <div className="sp-guest-wall" style={{position:'relative', minHeight: 360}}>
          {entries.map((e, i) => {
            const colors = [T.accent, T.bg, T.accent2, '#fef3c7', T.tape];
            const bg = colors[i%colors.length];
            const rot = ((i*7)%5) - 2;
            const left = `${(i%3)*32}%`;
            const top = `${Math.floor(i/3)*150 + (i%2)*20}px`;
            return (
              <div key={i} style={{
                position:'absolute', left, top, width: '34%',
                background: bg, padding: '14px 16px', border:`2px solid ${T.ink}`,
                transform:`rotate(${rot}deg)`, boxShadow:`4px 4px 0 0 ${T.ink}`,
                color: bg===T.accent2?'#fff':T.ink,
              }}>
                <Tape rotate={(i%2?-3:3)} color={T.tape} w={50} style={{top:-10, left:'50%', marginLeft:-25}}/>
                <div style={{fontFamily:F.hand, fontSize:18, fontWeight:700}}>@{e.who}</div>
                <div style={{fontSize:13, marginTop:4, lineHeight:1.4}}>{e.note}</div>
                <div style={{fontSize:10, marginTop:8, opacity:0.6, letterSpacing:'0.08em', textTransform:'uppercase'}}>{e.when}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─── CONTACT ────────────────────────────────────────────
function Contact({ T, F, K }) {
  return (
    <div style={{padding:'80px 48px', background:T.ink, color:T.bg, position:'relative', overflow:'hidden', backgroundImage: PAPER_BG, backgroundBlendMode:'multiply'}}>
      <PeelSticker t={T} bg={T.accent} rotate={-12} fontSize={13} style={{position:'absolute', top:30, right:60}}>SAY HI</PeelSticker>
      <PeelSticker t={T} bg={T.accent2} color="#fff" rotate={6} fontSize={28} padding={'14px 22px'} shape="round" style={{position:'absolute', bottom:60, left:60}}>♥</PeelSticker>
      <Doodle.Spiral color={T.accent} size={80}/>
      <h2 style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:160, margin:0, letterSpacing:'-0.05em', lineHeight:0.88, color:T.bg}}>
        LET'S<br/>
        <span style={{color:T.accent}}>BUILD</span> SMTHN.
      </h2>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginTop: 50}}>
        {K.contacts.map((c, i)=>(
          <ScrapBox key={c.k} t={T} bg={T.bg} rotate={(i-1.5)*1.5} hoverable={false} style={{padding:'14px 18px', color:T.ink}}>
            <div style={{fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase', opacity:0.6}}>{c.k}</div>
            <div style={{fontFamily:F.display, fontWeight:F.dispWt, fontSize:22, marginTop:4, letterSpacing:'-0.02em'}}>{c.v}</div>
          </ScrapBox>
        ))}
      </div>
      <div style={{marginTop:60, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', opacity:0.5, display:'flex', justifyContent:'space-between'}}>
        <span>© KAIWAN — 2026</span><span>NO COOKIES · NO TRACKERS · YES STICKERS</span>
      </div>
    </div>
  );
}

window.StickerPro = StickerPro;