// ============================================================
// pra.veen.in — redesign · 3 variations · tweakable
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "arcade",
  "palette": ["#1a6aff", "#e83040", "#f0a830", "#30d060"],
  "accent": "#f0a830",
  "fontPair": "vt323-plex",
  "density": "regular",
  "dark": true
} /*EDITMODE-END*/;

// ── palettes ────────────────────────────────────────────────
const PALETTES = [
["#1a6aff", "#e83040", "#f0a830", "#30d060"], // original SMPTE-leaning
["#ff3d7f", "#3df0c8", "#ffd166", "#7c5cff"], // arcade neon
["#fb5607", "#ffbe0b", "#3a86ff", "#8338ec"], // playful primaries
["#06d6a0", "#ef476f", "#ffd166", "#118ab2"], // soft poppy
["#ff006e", "#fb5607", "#ffbe0b", "#8338ec"] // hot pop
];

const ACCENTS = ["#f0a830", "#ff3d7f", "#3df0c8", "#7c5cff", "#06d6a0", "#fb5607"];

const FONT_PAIRS = {
  "vt323-plex": { display: "'VT323', monospace", body: "'IBM Plex Mono', monospace", name: "VT323 + Plex" },
  "grotesk-mono": { display: "'Space Grotesk', sans-serif", body: "'JetBrains Mono', monospace", name: "Grotesk + JBMono" },
  "fraunces-dm": { display: "'Fraunces', serif", body: "'DM Sans', sans-serif", name: "Fraunces + DM" },
  "instrument-plex": { display: "'Instrument Serif', serif", body: "'IBM Plex Mono', monospace", name: "Instrument + Plex" }
};

// ── helpers ─────────────────────────────────────────────────
function useClock() {
  const [t, setT] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return t;
}

function useReveal() {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {if (e.isIntersecting) setVis(true);}, { threshold: 0.12 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, vis];
}

function Reveal({ children, delay = 0, style, ...rest }) {
  const [ref, vis] = useReveal();
  return (
    <div ref={ref} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? 'translateY(0)' : 'translateY(28px)',
      transition: `opacity .9s ease ${delay}s, transform .9s ease ${delay}s`,
      ...style
    }} {...rest}>{children}</div>);

}

const fmtClock = (d) => `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;

// ── shared data ─────────────────────────────────────────────
const PROJECTS = [
{ tag: "Intelligence", name: "FlowSense", desc: "Real-time options intelligence dashboard. Futures premium, OI dynamics, gap classification, false breakout detection, institutional trap mechanics.", stack: ["Python", "Flask", "SocketIO"] },
{ tag: "Pattern Engine", name: "Kaptrax", desc: "Analog engine over 10 years of Nifty data. 204K rows, cosine similarity + FastDTW, context-filtered by VIX regime, time bucket, and expiry week.", stack: ["Python", "SQLite", "NumPy", "DTW"] },
{ tag: "OI Analysis", name: "OI Bot", desc: "Fetches Nifty option chains every 5 minutes. Computes OI changes across 3 timeframes with Claude-powered institutional flow analysis and WhatsApp alerts.", stack: ["Flask", "APScheduler", "Claude", "Twilio"] },
{ tag: "Training", name: "Scalp Simulator", desc: "Interactive training environment for options scalping. Black-Scholes ATM synthesis, scoring engine mapped to the Option Buyer's Field Manual.", stack: ["Flask", "JS", "Black-Scholes"] },
{ tag: "Paper Trading", name: "Paper Plane", desc: "Complete paper trading app for derivatives. Live option chains, simulated order book, P&L tracking, position sizing, and a journaling layer — practice the entire flow without risking capital.", stack: ["Flask", "JS", "WebSockets", "SQLite"] }];


const FREQS = [
{ icon: "🤖", label: "AI / LLMs /\nTransformers" },
{ icon: "📚", label: "Reading" },
{ icon: "📜", label: "History &\nEconomics" },
{ icon: "🏍️", label: "Motorcycles" },
{ icon: "🎬", label: "Cinema" },
{ icon: "🌍", label: "Geopolitics &\nDefense Tech" }];


// ============================================================
// VARIANT A — WORKSHOP (refined retro, closest to original)
// ============================================================
function VariantWorkshop({ t }) {
  const clock = useClock();
  const palette = t.palette;
  const accent = t.accent;
  const isDark = t.dark;
  const density = t.density;
  const pad = density === 'compact' ? 70 : density === 'comfy' ? 140 : 100;

  const bg = isDark ? '#080810' : '#f5f3ec';
  const surface = isDark ? '#0e0e1a' : '#ffffff';
  const surfaceRaised = isDark ? '#131320' : '#fbf9f4';
  const text = isDark ? '#d8d8e0' : '#1a1a26';
  const textDim = isDark ? '#6a6a80' : '#75727f';
  const textMuted = isDark ? '#333348' : '#bcb9c4';
  const borderC = isDark ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.08)';

  return (
    <div style={{
      background: bg, color: text, minHeight: '100vh',
      fontFamily: t._font.body, position: 'relative', overflow: 'hidden'
    }}>
      {/* ambient glows */}
      <div style={{ position: 'fixed', bottom: -200, left: '50%', transform: 'translateX(-50%)', width: '140vw', height: 500,
        background: `radial-gradient(ellipse at center, ${palette[0]}26 0%, transparent 70%)`, pointerEvents: 'none', zIndex: 0 }} />
      <div style={{ position: 'fixed', top: '30%', right: -200, width: 500, height: 500,
        background: `radial-gradient(circle, ${palette[1]}1a 0%, transparent 70%)`, pointerEvents: 'none', zIndex: 0 }} />

      {/* tube light */}
      <div style={{ position: 'fixed', top: 0, left: '50%', transform: 'translateX(-50%)',
        width: 'min(600px,80vw)', height: 3, background: accent,
        boxShadow: `0 0 15px ${accent}80, 0 0 40px ${accent}60, 0 0 80px ${accent}33`,
        zIndex: 10001, borderRadius: '0 0 50% 50%' }} />

      {/* PS symbols */}
      <div style={{ position: 'fixed', left: 24, top: '50%', transform: 'translateY(-50%)', display: 'flex', flexDirection: 'column', gap: 16, zIndex: 100 }}>
        {['△', '○', '✕', '□'].map((s, i) =>
        <div key={i} style={{ fontSize: 24, opacity: .7, color: palette[i % palette.length], textShadow: `0 0 12px ${palette[i % palette.length]}80`, userSelect: 'none' }}>{s}</div>
        )}
      </div>

      <Nav t={t} text={text} textDim={textDim} accent={accent} red={palette[1]} surface={bg} />

      <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 24px', position: 'relative', zIndex: 1 }}>
        {/* HERO */}
        <section style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '70px 0 40px' }}>
          {/* monitor stack — now wrapped around the real workspace photo */}
          <div style={{ width: '100%', maxWidth: 700, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{
              position: 'relative', width: '100%', background: '#1a1a1a',
              borderRadius: 14, overflow: 'hidden',
              border: '4px solid #2a2a2a',
              boxShadow: '0 10px 40px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.4)'
            }}>
              <div style={{ position: 'absolute', top: 10, right: 14, display: 'flex', alignItems: 'center', gap: 6, zIndex: 5 }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: accent, boxShadow: `0 0 8px ${accent}`, animation: 'pulse 2s ease-in-out infinite' }} />
                <span style={{ fontFamily: "'VT323', monospace", fontSize: 12, color: '#fff', letterSpacing: 2, opacity: .9 }}>CH-00 // STUDIO</span>
              </div>
              <img src="assets/workspace.png" alt="Praveen's workspace" style={{ display: 'block', width: '100%', height: 'auto', filter: 'saturate(1.05) contrast(1.02)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 35%, rgba(0,0,0,.18) 100%)', pointerEvents: 'none', zIndex: 3 }} />
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,.18) 1px, rgba(0,0,0,.18) 2px)', pointerEvents: 'none', zIndex: 4 }} />
              <div className="smpte" style={{ height: 6, position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 5 }}>
                <span /><span /><span /><span /><span /><span /><span />
              </div>
            </div>
            <div style={{ width: 60, height: 8, background: isDark ? '#2a2a2a' : '#d8d4c8', borderRadius: '0 0 4px 4px', marginTop: -2 }} />
          </div>

          <div style={{ fontFamily: t._font.display, fontSize: 28, color: palette[3], textShadow: `0 0 8px ${palette[3]}80`, letterSpacing: 4, margin: '20px 0 8px' }}>
            {fmtClock(clock)}
          </div>

          <div style={{ textAlign: 'center', marginTop: 32 }}>
            <h1 style={{ fontFamily: t._font.display, fontSize: 'clamp(3rem,8vw,6rem)', letterSpacing: 4, lineHeight: 1, color: text }}>
              PRAVEEN <span style={{ color: palette[1], textShadow: `0 0 30px ${palette[1]}80` }}>P. PALA</span>
            </h1>
            <div style={{ fontFamily: t._font.body, fontSize: 12, letterSpacing: 4, color: textDim, marginTop: 12, textTransform: 'uppercase' }}>
              <span style={{ color: accent }}>Praveen P. Pala</span>
            </div>
          </div>

          <div style={{ width: '100%', maxWidth: 700, height: 2, marginTop: 48,
            background: `linear-gradient(90deg, transparent, ${accent}33, ${accent}, ${accent}33, transparent)` }} />
        </section>

        {/* ABOUT */}
        <Reveal>
          <section id="about" style={{ padding: `${pad}px 0` }}>
            <SecLabel t={t} color={palette[0]}>CH:01 // About</SecLabel>
            <SecTitle t={t} text={text}>Built for<br />Hostile Terrain.</SecTitle>
            <p style={bodyStyle(textDim, text)}>
              I build tools for financial markets. Intelligence systems that read
              option chains in real time, pattern engines that scan ten years of price data,
              flow detectors that try to figure out what the institutions are up to.
              If there's a dashboard involved, I probably built that too.
            </p>
            <p style={{ ...bodyStyle(textDim, text), marginTop: 14 }}>
              Been at this since I was a kid making Geocities pages in school.
              Visitor counters, cursor trails, the whole thing. The internet's changed
              a lot since then but the itch to build stuff hasn't. Now I just point it
              at markets instead of guestbooks.
            </p>
          </section>
        </Reveal>

        {/* PROJECTS — pegboard */}
        <Reveal>
          <section id="projects" style={{ padding: `${pad}px 0` }}>
            <SecLabel t={t} color={palette[0]}>CH:02 // Projects</SecLabel>
            <SecTitle t={t} text={text}>Transmissions</SecTitle>
            <div style={{
              position: 'relative', marginTop: 48, padding: 32,
              background: isDark ?
              'radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px)' :
              'radial-gradient(circle, rgba(0,0,0,.05) 1px, transparent 1px)',
              backgroundSize: '24px 24px', border: `1px solid ${borderC}`, borderRadius: 6
            }}>
              <div className="m-stack-1" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                {PROJECTS.map((p, i) =>
                <PegCard key={i} p={p} t={t} palette={palette} surfaceRaised={surfaceRaised} text={text} textDim={textDim} textMuted={textMuted} borderC={borderC} delay={i * 0.1} />
                )}
              </div>
            </div>
          </section>
        </Reveal>

        {/* FREQS */}
        <Reveal>
          <section id="freq" style={{ padding: `${pad}px 0` }}>
            <SecLabel t={t} color={palette[0]}>CH:03 // Frequencies</SecLabel>
            <SecTitle t={t} text={text}>Off The Radar</SecTitle>
            <p style={{ ...bodyStyle(textDim, text), marginBottom: 32 }}>
              When I'm not reading OI tables or arguing with price action, you'll find me scanning these frequencies.
            </p>
            <div className="m-stack-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
              {FREQS.map((f, i) =>
              <Gadget key={i} f={f} t={t} palette={palette} surface={surface} textDim={textDim} borderC={borderC} />
              )}
            </div>
          </section>
        </Reveal>

        {/* CONTACT */}
        <Reveal>
          <section id="contact" style={{ padding: `${pad}px 0` }}>
            <SecLabel t={t} color={palette[0]}>CH:04 // Contact</SecLabel>
            <SecTitle t={t} text={text}>Open Channel</SecTitle>
            <p style={bodyStyle(textDim, text)}>Building in public. Trading in private.</p>
            <Terminal t={t} palette={palette} surface={surface} textDim={textDim} borderC={borderC} />
          </section>
        </Reveal>

        <footer style={{ padding: '40px 0', textAlign: 'center' }}>
          <div className="smpte" style={{ height: 4, marginBottom: 24 }}>
            <span /><span /><span /><span /><span /><span /><span />
          </div>
          <div style={{ fontFamily: t._font.body, fontSize: 10, color: textMuted, letterSpacing: 2, textTransform: 'uppercase' }}>
            © 2026 Praveen P. Pala &nbsp;<span style={{ color: palette[1] }}>●——●</span>&nbsp; Builder
          </div>
        </footer>
      </div>
    </div>);

}

// ── workshop sub-components ─────────────────────────────────
function CRT({ aspect, palette, accent, wide, idx }) {
  // Static SMPTE bars, NO signal-lost overlay, NO flicker animation.
  // Small static "ON AIR" lamp + label only.
  return (
    <div style={{
      flex: wide ? 'unset' : 1, width: wide ? '100%' : 'auto', aspectRatio: aspect,
      background: '#1a1a1a', borderRadius: 10, overflow: 'hidden', position: 'relative',
      boxShadow: '0 4px 30px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.4)',
      border: '3px solid #2a2a2a'
    }}>
      <div className="smpte" style={{ position: 'absolute', inset: 0, height: '100%' }}>
        <span /><span /><span /><span /><span /><span /><span />
      </div>
      {/* small lamp */}
      <div style={{ position: 'absolute', top: 8, right: 10, display: 'flex', alignItems: 'center', gap: 6, zIndex: 3 }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: accent, boxShadow: `0 0 8px ${accent}`, animation: 'pulse 2s ease-in-out infinite' }} />
        <span style={{ fontFamily: "'VT323', monospace", fontSize: 11, color: '#fff', letterSpacing: 2, opacity: .85 }}>CH-{String(idx + 1).padStart(2, '0')}</span>
      </div>
      {/* CRT glass gradient */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 40%, rgba(0,0,0,.15) 100%)', pointerEvents: 'none', zIndex: 4 }} />
      {/* scanlines */}
      <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,.15) 1px, rgba(0,0,0,.15) 2px)', pointerEvents: 'none', zIndex: 5 }} />
    </div>);

}

function SecLabel({ t, color, children }) {
  return (
    <div style={{
      fontFamily: t._font.display, fontSize: 16, letterSpacing: 6, textTransform: 'uppercase',
      color, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 12
    }}>
      <span style={{ fontSize: 10, animation: 'blink 1.2s step-end infinite' }}>▋</span>
      {children}
    </div>);

}

function SecTitle({ t, text, children }) {
  return (
    <h2 style={{
      fontFamily: t._font.display, fontSize: 'clamp(2rem,5vw,3.2rem)', letterSpacing: 2,
      marginBottom: 20, lineHeight: 1.15, color: text
    }}>{children}</h2>);

}

function bodyStyle(textDim, text) {
  return { fontSize: 15, lineHeight: 1.8, color: textDim, maxWidth: 580 };
}

function PegCard({ p, t, palette, surfaceRaised, text, textDim, textMuted, borderC, delay }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          background: surfaceRaised, border: `1px solid ${hover ? palette[0] : borderC}`, borderRadius: 4, overflow: 'hidden',
          position: 'relative', transition: 'all .3s', transform: hover ? 'translateY(-2px)' : 'translateY(0)',
          cursor: 'default'
        }}>
        <div style={{ position: 'absolute', top: 10, right: 12, width: 8, height: 8, borderRadius: '50%',
          background: 'rgba(0,0,0,.5)', border: '1px solid rgba(255,255,255,.08)', zIndex: 2 }} />
        <div className="smpte" style={{ height: 6 }}><span /><span /><span /><span /><span /><span /><span /></div>
        <div style={{ padding: '22px 20px 20px' }}>
          <div style={{ fontFamily: t._font.display, fontSize: 14, letterSpacing: 3, textTransform: 'uppercase', color: palette[1], marginBottom: 6 }}>{p.tag}</div>
          <h3 style={{ fontFamily: t._font.body, fontSize: 16, fontWeight: 600, marginBottom: 8, color: text }}>{p.name}</h3>
          <p style={{ fontSize: 12.5, lineHeight: 1.65, color: textDim }}>{p.desc}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 14 }}>
            {p.stack.map((s, i) =>
            <span key={i} style={{ fontFamily: t._font.body, fontSize: 9, letterSpacing: 1, textTransform: 'uppercase',
              color: textMuted, padding: '3px 7px', border: `1px solid ${borderC}`, borderRadius: 2 }}>{s}</span>
            )}
          </div>
        </div>
      </div>
    </Reveal>);

}

function Gadget({ f, t, palette, surface, textDim, borderC }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      background: surface, border: `1px solid ${hover ? palette[2] + '80' : borderC}`, borderRadius: 4,
      padding: '24px 16px', textAlign: 'center', position: 'relative', overflow: 'hidden', transition: 'border-color .3s'
    }}>
      <div style={{ fontSize: 28, marginBottom: 10 }}>{f.icon}</div>
      <div style={{ fontFamily: t._font.display, fontSize: 14, letterSpacing: 3, textTransform: 'uppercase', color: textDim, whiteSpace: 'pre-line' }}>{f.label}</div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2,
        background: `linear-gradient(90deg, ${palette[0]}, ${palette[1]})`, opacity: hover ? 1 : 0, transition: 'opacity .3s' }} />
    </div>);

}

function Terminal({ t, palette, surface, textDim, borderC }) {
  return (
    <div style={{ background: surface, border: `1px solid ${borderC}`, borderRadius: 6, overflow: 'hidden', marginTop: 40 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 16px', background: 'rgba(0,0,0,.3)', borderBottom: `1px solid ${borderC}` }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: palette[1] }} />
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: palette[2] }} />
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: palette[3] }} />
        <span style={{ fontFamily: t._font.body, fontSize: 10, color: '#888', letterSpacing: 1, marginLeft: 8 }}>praveen ~ %</span>
      </div>
      <div style={{ padding: 24, fontFamily: t._font.body, fontSize: 13, lineHeight: 2, color: textDim }}>
        <span style={{ color: palette[3] }}>$</span> cat contact.txt<br /><br />
        email → <a href="mailto:pr@veen.in" style={{ color: palette[0], textDecoration: 'none', borderBottom: '1px solid transparent' }}
        onMouseEnter={(e) => e.currentTarget.style.borderColor = palette[0]} onMouseLeave={(e) => e.currentTarget.style.borderColor = 'transparent'}>pr@veen.in</a><br /><br />
        <span style={{ color: palette[3] }}>$</span>{' '}
        <span style={{ display: 'inline-block', width: 8, height: 14, background: palette[3], verticalAlign: 'text-bottom', animation: 'blink 1s step-end infinite' }} />
      </div>
    </div>);

}

function Nav({ t, text, textDim, accent, red, surface }) {
  return (
    <nav style={{
      position: 'fixed', top: 8, left: '50%', transform: 'translateX(-50%)', zIndex: 10002,
      display: 'flex', alignItems: 'center', gap: 32, padding: '10px 24px',
      background: surface === '#080810' ? 'rgba(8,8,16,.85)' : 'rgba(245,243,236,.85)',
      backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
      border: '1px solid rgba(255,255,255,.04)', borderRadius: 6
    }}>
      <a href="#" style={{ fontFamily: t._font.display, fontSize: 22, color: text, textDecoration: 'none', letterSpacing: 2 }}>
        PRAVEEN<span style={{ color: red }}>.</span>P<span style={{ color: red }}>.</span>PALA
      </a>
      <ul style={{ display: 'flex', gap: 20, listStyle: 'none' }}>
        {['about', 'projects', 'freq', 'contact'].map((s) =>
        <li key={s}><a href={`#${s}`} style={{
            fontFamily: t._font.body, fontSize: 10, letterSpacing: 2, textTransform: 'uppercase',
            color: textDim, textDecoration: 'none', transition: 'color .2s'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = accent}
          onMouseLeave={(e) => e.currentTarget.style.color = textDim}>{s}</a></li>
        )}
      </ul>
    </nav>);

}

// ============================================================
// VARIANT B — ARCADE (chunky color blocks, playful)
// ============================================================
function VariantArcade({ t }) {
  const clock = useClock();
  const palette = t.palette;
  const accent = t.accent;
  const isDark = t.dark;
  const density = t.density;
  const gap = density === 'compact' ? 16 : density === 'comfy' ? 36 : 24;

  const bg = isDark ? '#0a0a14' : '#fff6e8';
  const text = isDark ? '#f8f6ff' : '#0a0a14';
  const textDim = isDark ? '#9999b4' : '#5a5870';
  const cardBorder = isDark ? '#1a1a2e' : '#0a0a14';

  return (
    <div style={{
      background: bg, color: text, minHeight: '100vh',
      fontFamily: t._font.body, position: 'relative', overflow: 'hidden'
    }}>
      {/* checkerboard ambient */}
      <div style={{ position: 'fixed', inset: 0,
        backgroundImage: `repeating-linear-gradient(0deg, ${isDark ? '#ffffff' : '#000000'}03 0 1px, transparent 1px 40px),
                          repeating-linear-gradient(90deg, ${isDark ? '#ffffff' : '#000000'}03 0 1px, transparent 1px 40px)`,
        pointerEvents: 'none', zIndex: 0 }} />

      {/* sticker bg blobs */}
      <div style={{ position: 'fixed', top: '18%', right: '8%', width: 160, height: 160, borderRadius: '50%',
        background: palette[0], opacity: .18, filter: 'blur(2px)', zIndex: 0, animation: 'wiggle 6s ease-in-out infinite' }} />
      <div style={{ position: 'fixed', bottom: '12%', left: '6%', width: 220, height: 220,
        background: palette[2], opacity: .16, filter: 'blur(4px)', zIndex: 0,
        clipPath: 'polygon(50% 0,80% 20%,100% 50%,80% 80%,50% 100%,20% 80%,0 50%,20% 20%)',
        animation: 'spin360 40s linear infinite' }} />

      <NavArcade t={t} text={text} bg={bg} palette={palette} accent={accent} cardBorder={cardBorder} />

      {/* ticker */}
      <div style={{
        position: 'fixed', top: 64, left: 0, right: 0, height: 32, overflow: 'hidden',
        background: palette[0], color: bg, borderTop: `2px solid ${cardBorder}`, borderBottom: `2px solid ${cardBorder}`,
        display: 'flex', alignItems: 'center', zIndex: 9998,
        fontFamily: t._font.display, fontSize: 18, letterSpacing: 3
      }}>
        <div style={{ display: 'flex', gap: 48, paddingLeft: 48, whiteSpace: 'nowrap', animation: 'ticker 30s linear infinite' }}>
          {Array.from({ length: 2 }).map((_, k) =>
          <React.Fragment key={k}>
              <span>★ NOW BUILDING</span><span>● FLOWSENSE LIVE</span><span>▲ NIFTY @ {fmtClock(clock)}</span>
              <span>◆ OPTIONS DESK OPEN</span><span>✕ TRADING IN PRIVATE</span><span>★ pr@veen.in</span>
              <span>● BUILDING IN PUBLIC</span>
            </React.Fragment>
          )}
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '120px 24px 60px', position: 'relative', zIndex: 1 }}>
        {/* HERO — playful sticker layout */}
        <section style={{ position: 'relative', padding: `${gap * 2}px 0 ${gap * 3}px` }}>
          <div className="m-stack-1" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: gap * 1.5, alignItems: 'center' }}>
            <div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999,
                background: palette[3], color: bg, fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 2,
                border: `2px solid ${cardBorder}`, boxShadow: `4px 4px 0 ${cardBorder}`, marginBottom: 24
              }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: bg, animation: 'pulse 1.5s ease-in-out infinite' }} />
                BUILDER · ONLINE
              </div>
              <h1 style={{ fontFamily: t._font.display, fontSize: 'clamp(3.4rem,8vw,7rem)', lineHeight: .95, letterSpacing: -2, color: text }}>
                Praveen<br />
                <span style={{
                  background: `linear-gradient(90deg, ${palette[0]}, ${palette[1]}, ${palette[2]})`,
                  WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                  backgroundSize: '200% 100%', animation: 'shimmer 6s linear infinite'
                }}>P. Pala.</span>
              </h1>
              <p style={{ fontSize: 18, lineHeight: 1.5, color: textDim, marginTop: 24, maxWidth: 520 }}>
                Builder of <strong style={{ color: text }}>tools for financial markets</strong> — pattern engines,
                option-chain readers, and real-time dashboards. Geocities kid, all grown up.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                <BigChip color={palette[0]} bg={bg} cardBorder={cardBorder} href="#projects" t={t}>See the work ↓</BigChip>
                <BigChip color={accent} bg={bg} cardBorder={cardBorder} href="mailto:pr@veen.in" t={t}>pr@veen.in ↗</BigChip>
              </div>
            </div>

            {/* workspace photo as the hero sticker */}
            <div style={{
              position: 'relative', borderRadius: 16, overflow: 'hidden',
              border: `2px solid ${cardBorder}`, boxShadow: `8px 8px 0 ${cardBorder}`,
              transform: 'rotate(-1.2deg)'
            }}>
              <img src="assets/workspace.png" alt="Praveen's workspace" style={{ display: 'block', width: '100%', height: 'auto' }} />
              <div style={{
                position: 'absolute', top: 12, left: 12,
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px', background: palette[3], color: bg,
                border: `2px solid ${cardBorder}`, borderRadius: 999,
                fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 2
              }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: bg, animation: 'pulse 1.5s ease-in-out infinite' }} />
                LIVE FROM THE DESK
              </div>
              <div style={{
                position: 'absolute', bottom: 12, right: 12,
                padding: '4px 10px', background: bg, color: palette[1],
                border: `2px solid ${cardBorder}`, borderRadius: 6,
                fontFamily: t._font.display, fontSize: 18, letterSpacing: 2
              }}>{fmtClock(clock)}</div>
              <div className="smpte" style={{ height: 8, position: 'absolute', left: 0, right: 0, bottom: 0 }}>
                <span /><span /><span /><span /><span /><span /><span />
              </div>
            </div>
          </div>
        </section>

        {/* ABOUT — bold split */}
        <Reveal>
          <section id="about" className="m-stack-1" style={{ padding: `${gap * 2}px 0`, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: gap }}>
            <div style={{
              writingMode: 'vertical-rl', transform: 'rotate(180deg)',
              fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 6,
              color: palette[1], paddingBottom: 8
            }}>CH.01 — ABOUT</div>
            <div>
              <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(2.5rem,6vw,5rem)', lineHeight: 1, letterSpacing: -1, color: text }}>
                Built for <span style={{ background: palette[2], color: bg, padding: '0 12px', borderRadius: 8, display: 'inline-block', transform: 'rotate(-1deg)' }}>hostile</span> terrain.
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: textDim, marginTop: 24, maxWidth: 680 }}>
                I build tools for financial markets. Intelligence systems that read option chains in real time, pattern
                engines that scan ten years of price data, flow detectors that try to figure out what the institutions
                are up to. If there's a dashboard involved, I probably built that too.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: textDim, marginTop: 16, maxWidth: 680 }}>
                Been at this since I was a kid making Geocities pages in school — visitor counters, cursor trails,
                the whole thing. The internet's changed, the itch to build hasn't. Now I point it at markets instead of guestbooks.
              </p>
            </div>
          </section>
        </Reveal>

        {/* PROJECTS — sticker cards */}
        <Reveal>
          <section id="projects" style={{ padding: `${gap * 2}px 0` }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: gap }}>
              <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(2.5rem,6vw,5rem)', lineHeight: 1, letterSpacing: -1, color: text }}>
                Transmissions.
              </h2>
              <div style={{ fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 3, color: palette[1] }}>CH.02</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px,1fr))', gap }}>
              {PROJECTS.map((p, i) =>
              <StickerCard key={i} p={p} t={t} palette={palette} bg={bg} text={text} textDim={textDim} cardBorder={cardBorder} idx={i} delay={i * 0.08} />
              )}
            </div>
          </section>
        </Reveal>

        {/* FREQS — playful chips */}
        <Reveal>
          <section id="freq" style={{ padding: `${gap * 2}px 0` }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: gap }}>
              <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(2.5rem,6vw,5rem)', lineHeight: 1, letterSpacing: -1, color: text }}>
                Off the radar.
              </h2>
              <div style={{ fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 3, color: palette[1] }}>CH.03</div>
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: textDim, marginBottom: gap, maxWidth: 520 }}>
              When I'm not reading OI tables or arguing with price action.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {FREQS.map((f, i) =>
              <FreqChip key={i} f={f} t={t} bg={palette[i % palette.length]} cardBorder={cardBorder} pageBg={bg} />
              )}
            </div>
          </section>
        </Reveal>

        {/* CONTACT */}
        <Reveal>
          <section id="contact" style={{ padding: `${gap * 2}px 0` }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: gap }}>
              <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(2.5rem,6vw,5rem)', lineHeight: 1, letterSpacing: -1, color: text }}>
                Open channel.
              </h2>
              <div style={{ fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 3, color: palette[1] }}>CH.04</div>
            </div>
            <p style={{ fontSize: 17, color: textDim, marginBottom: 24 }}>Building in public. Trading in private.</p>
            <a href="mailto:pr@veen.in" style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, padding: '18px 28px',
              background: palette[1], color: bg, border: `2px solid ${cardBorder}`, boxShadow: `6px 6px 0 ${cardBorder}`,
              borderRadius: 14, fontFamily: t._font.display, fontSize: 28, letterSpacing: 1, textDecoration: 'none',
              transition: 'transform .15s'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translate(-2px,-2px)';e.currentTarget.style.boxShadow = `8px 8px 0 ${cardBorder}`;}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'translate(0,0)';e.currentTarget.style.boxShadow = `6px 6px 0 ${cardBorder}`;}}>
              pr@veen.in →
            </a>
          </section>
        </Reveal>

        <footer style={{ padding: '48px 0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `2px solid ${cardBorder}`, marginTop: gap * 2 }}>
          <div style={{ fontFamily: t._font.body, fontSize: 11, color: textDim, letterSpacing: 2 }}>© 2026 · PRAVEEN P. PALA</div>
          <div className="smpte" style={{ height: 8, width: 120, borderRadius: 4, overflow: 'hidden', border: `1px solid ${cardBorder}` }}>
            <span /><span /><span /><span /><span /><span /><span />
          </div>
        </footer>
      </div>
    </div>);

}

function NavArcade({ t, text, bg, palette, accent, cardBorder }) {
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9999,
      background: bg, borderBottom: `2px solid ${cardBorder}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 24px', height: 64
    }}>
      <a href="#" style={{
        fontFamily: t._font.display, fontSize: 24, color: text, textDecoration: 'none', letterSpacing: 1,
        display: 'inline-flex', alignItems: 'center', gap: 8
      }}>
        <span style={{ display: 'inline-block', width: 14, height: 14, background: palette[1], borderRadius: 3, border: `2px solid ${cardBorder}`, transform: 'rotate(-8deg)' }} />
        praveen<span style={{ color: palette[1] }}>.</span>p<span style={{ color: palette[1] }}>.</span>pala
      </a>
      <ul style={{ display: 'flex', gap: 6, listStyle: 'none', alignItems: 'center' }}>
        {['about', 'projects', 'freq', 'contact'].map((s, i) =>
        <li key={s}><a href={`#${s}`} style={{
            fontFamily: t._font.body, fontSize: 11, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase',
            color: text, textDecoration: 'none', padding: '8px 14px', borderRadius: 999,
            transition: 'all .15s'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.background = palette[i % palette.length];e.currentTarget.style.color = bg;}}
          onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = text;}}>{s}</a></li>
        )}
      </ul>
    </nav>);

}

function Tile({ bg, cardBorder, rot, children, style }) {
  return (
    <div style={{
      background: bg, border: `2px solid ${cardBorder}`, borderRadius: 12, padding: 14,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transform: `rotate(${rot}deg)`, boxShadow: `4px 4px 0 ${cardBorder}`,
      position: 'relative', overflow: 'hidden', ...style
    }}>{children}</div>);

}

function BigChip({ color, bg, cardBorder, children, href, t }) {
  return (
    <a href={href} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 22px',
      background: color, color: bg, border: `2px solid ${cardBorder}`, borderRadius: 999,
      boxShadow: `4px 4px 0 ${cardBorder}`, fontFamily: t._font.body, fontSize: 14, fontWeight: 700, letterSpacing: 1,
      textDecoration: 'none', transition: 'transform .15s'
    }}
    onMouseEnter={(e) => {e.currentTarget.style.transform = 'translate(-2px,-2px)';e.currentTarget.style.boxShadow = `6px 6px 0 ${cardBorder}`;}}
    onMouseLeave={(e) => {e.currentTarget.style.transform = 'translate(0,0)';e.currentTarget.style.boxShadow = `4px 4px 0 ${cardBorder}`;}}>
      {children}
    </a>);

}

function StickerCard({ p, t, palette, bg, text, textDim, cardBorder, idx, delay }) {
  const [hover, setHover] = React.useState(false);
  const tilt = idx % 2 === 0 ? -1 : 1;
  const cardBg = idx % 4 === 0 ? palette[0] : idx % 4 === 1 ? palette[2] : idx % 4 === 2 ? palette[3] : palette[1];
  return (
    <Reveal delay={delay}>
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: cardBg, color: bg, padding: '20px', borderRadius: 16,
        border: `2px solid ${cardBorder}`, boxShadow: `6px 6px 0 ${cardBorder}`,
        transform: hover ? 'translate(-3px,-3px) rotate(0deg)' : `translate(0,0) rotate(${tilt}deg)`,
        boxShadow: hover ? `9px 9px 0 ${cardBorder}` : `6px 6px 0 ${cardBorder}`,
        transition: 'transform .2s, box-shadow .2s', position: 'relative', overflow: 'hidden',
        cursor: 'default'
      }}>
        <div className="smpte" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, opacity: .8 }}>
          <span /><span /><span /><span /><span /><span /><span />
        </div>
        <div style={{
          fontFamily: t._font.body, fontSize: 10, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase',
          color: bg, opacity: .75, marginTop: 8, marginBottom: 6
        }}>{p.tag}</div>
        <h3 style={{ fontFamily: t._font.display, fontSize: 36, lineHeight: 1, letterSpacing: -1, marginBottom: 10 }}>{p.name}</h3>
        <p style={{ fontFamily: t._font.body, fontSize: 13, lineHeight: 1.55, opacity: .85 }}>{p.desc}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
          {p.stack.map((s, i) =>
          <span key={i} style={{
            fontFamily: t._font.body, fontSize: 9, letterSpacing: 1, fontWeight: 700, textTransform: 'uppercase',
            color: cardBg, background: bg, padding: '3px 8px', borderRadius: 999
          }}>{s}</span>
          )}
        </div>
      </div>
    </Reveal>);

}

function FreqChip({ f, t, bg, cardBorder, pageBg }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 18px',
      background: bg, color: pageBg, borderRadius: 999, border: `2px solid ${cardBorder}`,
      boxShadow: `3px 3px 0 ${cardBorder}`, fontFamily: t._font.body, fontSize: 13, fontWeight: 700,
      letterSpacing: 1, transition: 'transform .15s',
      transform: hover ? 'translate(-2px,-2px) rotate(-2deg)' : 'rotate(0deg)'
    }}>
      <span style={{ fontSize: 18 }}>{f.icon}</span>
      <span style={{ whiteSpace: 'nowrap' }}>{f.label.replace(/\n/g, ' ')}</span>
    </div>);

}

// ============================================================
// VARIANT C — ZINE (editorial, asymmetric, big type)
// ============================================================
function VariantZine({ t }) {
  const clock = useClock();
  const palette = t.palette;
  const accent = t.accent;
  const isDark = t.dark;
  const density = t.density;
  const gap = density === 'compact' ? 60 : density === 'comfy' ? 140 : 100;

  const bg = isDark ? '#0e0d12' : '#efe9dc';
  const paper = isDark ? '#1a1820' : '#f7f2e6';
  const text = isDark ? '#ece4d4' : '#1a1820';
  const textDim = isDark ? '#857d6f' : '#5c5648';
  const rule = isDark ? '#3a342c' : '#1a1820';

  return (
    <div style={{
      background: bg, color: text, minHeight: '100vh',
      fontFamily: t._font.body, position: 'relative', overflow: 'hidden'
    }}>
      {/* paper grain */}
      <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0, opacity: isDark ? .04 : .08,
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.7'/></svg>")` }} />

      <NavZine t={t} text={text} textDim={textDim} bg={bg} accent={accent} rule={rule} />

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '120px 32px 60px', position: 'relative', zIndex: 1 }}>
        {/* MASTHEAD */}
        <div className="m-masthead" style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'baseline',
          gap: 24, borderBottom: `2px solid ${rule}`, paddingBottom: 14, marginBottom: 24
        }}>
          <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: textDim }}>
            Vol. XXVI · No. 11
          </div>
          <div style={{ textAlign: 'center', fontFamily: t._font.display, fontSize: 14, letterSpacing: 8, color: text, textTransform: 'uppercase' }}>
            The Pala Quarterly
          </div>
          <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: textDim }}>
            {fmtClock(clock)} IST
          </div>
        </div>

        {/* HERO — editorial */}
        <section style={{ paddingBottom: gap }}>
          <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 4, color: palette[1], textTransform: 'uppercase', marginBottom: 18 }}>
            ◆ Field Dispatch · Praveen P. Pala
          </div>
          <h1 style={{
            fontFamily: t._font.display, fontSize: 'clamp(4rem,12vw,11rem)', lineHeight: .88, letterSpacing: -3, color: text,
            fontWeight: 800
          }}>
            Praveen<br />
            <em style={{
              fontStyle: 'italic', color: palette[0],
              display: 'inline-block', transform: 'translateX(2vw)'
            }}>P.&nbsp;Pala</em>
            <span style={{ color: palette[1] }}>.</span>
          </h1>

          <div className="m-stack-1" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, marginTop: 48 }}>
            <div>
              <p style={{
                fontFamily: t._font.display, fontSize: 'clamp(1.4rem,2.2vw,1.9rem)', lineHeight: 1.3,
                color: text, fontStyle: t.fontPair === 'vt323-plex' ? 'normal' : 'italic'
              }}>
                "If there's a dashboard involved, I probably built that too."
              </p>
              <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 48, height: 2, background: palette[1] }} />
                <span style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, color: textDim, textTransform: 'uppercase' }}>The Builder · Geocities Era</span>
              </div>
            </div>
            <div style={{ background: paper, padding: 0, borderLeft: `3px solid ${palette[2]}`, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'relative' }}>
                <img src="assets/workspace.png" alt="Praveen's workspace" style={{ display: 'block', width: '100%', height: 'auto', filter: isDark ? 'brightness(.92) contrast(1.05)' : 'contrast(1.02)' }} />
                <div className="smpte" style={{ height: 6, position: 'absolute', left: 0, right: 0, bottom: 0 }}>
                  <span /><span /><span /><span /><span /><span /><span />
                </div>
              </div>
              <div style={{ padding: 16 }}>
                <div style={{ fontFamily: t._font.body, fontSize: 10, letterSpacing: 3, color: palette[1], textTransform: 'uppercase', marginBottom: 6 }}><em style={{ fontStyle: 'italic', textTransform: 'none' }}>Fig. 01</em> — The bridge</div>
                <p style={{ fontFamily: t._font.body, fontSize: 13, color: textDim, lineHeight: 1.55 }}>
                  Two CRTs, one real screen, mechanical keys, plants, and a small army of figurines watching me trade.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* ABOUT — multi-column editorial */}
        <Reveal>
          <section id="about" style={{ paddingBottom: gap, borderTop: `2px solid ${rule}`, paddingTop: 48 }}>
            <div className="m-stack-1" style={{ display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 48, alignItems: 'start' }}>
              <div>
                <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, color: palette[1], textTransform: 'uppercase', marginBottom: 8 }}>Section I</div>
                <div style={{ fontFamily: t._font.display, fontSize: 48, lineHeight: .9, color: text, letterSpacing: -1 }}>About<br />the<br />builder.</div>
              </div>
              <div style={{ columns: 2, columnGap: 32 }}>
                <p style={{ fontFamily: t._font.body, fontSize: 15, lineHeight: 1.65, color: text, marginBottom: 14 }}>
                  <span style={{
                    fontFamily: t._font.display, fontSize: 60, lineHeight: .85, float: 'left',
                    color: palette[1], paddingRight: 10, paddingTop: 6
                  }}>I</span>build tools for financial markets. Intelligence systems that read option chains in real
                  time, pattern engines that scan ten years of price data, flow detectors that try to figure out what
                  the institutions are up to. If there's a dashboard involved, I probably built that too.
                </p>
                <p style={{ fontFamily: t._font.body, fontSize: 15, lineHeight: 1.65, color: textDim, marginBottom: 14 }}>
                  Been at this since I was a kid making Geocities pages in school. Visitor counters, cursor trails,
                  the whole thing. The internet's changed a lot since then but the itch to build stuff hasn't.
                </p>
                <p style={{ fontFamily: t._font.body, fontSize: 15, lineHeight: 1.65, color: textDim }}>
                  Now I just point it at markets instead of guestbooks.
                </p>
              </div>
            </div>
          </section>
        </Reveal>

        {/* PROJECTS — index list */}
        <Reveal>
          <section id="projects" style={{ paddingBottom: gap, borderTop: `2px solid ${rule}`, paddingTop: 48 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
              <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(2.4rem,5vw,4rem)', lineHeight: 1, color: text, letterSpacing: -1 }}>Transmissions, an index.</h2>
              <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, color: palette[1], textTransform: 'uppercase' }}>Section II</div>
            </div>
            <div>
              {PROJECTS.map((p, i) =>
              <ZineRow key={i} p={p} t={t} palette={palette} text={text} textDim={textDim} rule={rule} idx={i} delay={i * 0.08} />
              )}
            </div>
          </section>
        </Reveal>

        {/* FREQS — sidebar list */}
        <Reveal>
          <section id="freq" style={{ paddingBottom: gap, borderTop: `2px solid ${rule}`, paddingTop: 48 }}>
            <div className="m-stack-1" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 48 }}>
              <div>
                <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, color: palette[1], textTransform: 'uppercase', marginBottom: 8 }}>Section III</div>
                <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(2rem,4vw,3rem)', lineHeight: .95, color: text, letterSpacing: -1 }}>Frequencies received.</h2>
                <p style={{ fontFamily: t._font.body, fontSize: 13, color: textDim, lineHeight: 1.6, marginTop: 14 }}>
                  When not reading OI tables or arguing with price action.
                </p>
              </div>
              <div>
                {FREQS.map((f, i) =>
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '30px 60px 1fr', gap: 16, alignItems: 'center',
                  padding: '14px 0', borderBottom: i < FREQS.length - 1 ? `1px dashed ${rule}` : 'none'
                }}>
                    <span style={{ fontFamily: t._font.body, fontSize: 11, color: textDim, fontVariantNumeric: 'tabular-nums' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ fontSize: 22 }}>{f.icon}</span>
                    <span style={{ fontFamily: t._font.display, fontSize: 20, color: text, letterSpacing: -.3 }}>
                      {f.label.replace(/\n/g, ' ')}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </section>
        </Reveal>

        {/* CONTACT */}
        <Reveal>
          <section id="contact" style={{ paddingBottom: gap, borderTop: `2px solid ${rule}`, paddingTop: 48 }}>
            <div className="m-stack-1" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 48, alignItems: 'end' }}>
              <div>
                <div style={{ fontFamily: t._font.body, fontSize: 11, letterSpacing: 3, color: palette[1], textTransform: 'uppercase', marginBottom: 8 }}>Section IV — Correspond</div>
                <h2 style={{ fontFamily: t._font.display, fontSize: 'clamp(3rem,6vw,5rem)', lineHeight: .95, color: text, letterSpacing: -1 }}>Open channel.</h2>
                <p style={{ fontFamily: t._font.body, fontSize: 14, color: textDim, marginTop: 14 }}>Building in public · trading in private.</p>
              </div>
              <a href="mailto:pr@veen.in" style={{
                fontFamily: t._font.display, fontSize: 'clamp(2rem,5vw,3.6rem)', color: text, textDecoration: 'none',
                borderBottom: `3px solid ${palette[1]}`, paddingBottom: 6, transition: 'color .2s',
                justifySelf: 'end'
              }}
              onMouseEnter={(e) => {e.currentTarget.style.color = palette[1];}}
              onMouseLeave={(e) => {e.currentTarget.style.color = text;}}>
                pr@veen.in →
              </a>
            </div>
          </section>
        </Reveal>

        <footer style={{ borderTop: `2px solid ${rule}`, paddingTop: 24, paddingBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontFamily: t._font.body, fontSize: 10, color: textDim, letterSpacing: 3, textTransform: 'uppercase' }}>
            Printed & served from 127.0.0.1 · © 2026 Praveen P. Pala
          </div>
          <div className="smpte" style={{ height: 6, width: 140 }}>
            <span /><span /><span /><span /><span /><span /><span />
          </div>
        </footer>
      </div>
    </div>);

}

function NavZine({ t, text, textDim, bg, accent, rule }) {
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 9999,
      background: `${bg}ee`, backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
      borderBottom: `1px solid ${rule}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '16px 32px'
    }}>
      <a href="#" style={{ fontFamily: t._font.display, fontSize: 20, color: text, textDecoration: 'none', letterSpacing: 1, fontStyle: 'italic' }}>
        Praveen<span style={{ color: accent }}>·</span>P<span style={{ color: accent }}>·</span>Pala
      </a>
      <ul style={{ display: 'flex', gap: 24, listStyle: 'none' }}>
        {[['about', 'I'], ['projects', 'II'], ['freq', 'III'], ['contact', 'IV']].map(([s, n]) =>
        <li key={s}>
            <a href={`#${s}`} style={{
            fontFamily: t._font.body, fontSize: 11, fontWeight: 500, letterSpacing: 2, textTransform: 'uppercase',
            color: textDim, textDecoration: 'none', display: 'inline-flex', alignItems: 'baseline', gap: 6
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = text}
          onMouseLeave={(e) => e.currentTarget.style.color = textDim}>
              <span style={{ fontFamily: t._font.display, fontSize: 10, color: accent }}>{n}.</span>{s}
            </a>
          </li>
        )}
      </ul>
    </nav>);

}

function ZineRow({ p, t, palette, text, textDim, rule, idx, delay }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        className="m-row-stack"
        style={{
          display: 'grid', gridTemplateColumns: '60px 1fr 1.4fr 200px', gap: 24, alignItems: 'baseline',
          padding: '24px 0', borderBottom: `1px solid ${rule}`, position: 'relative',
          transition: 'background .2s', cursor: 'default'
        }}>
        <span style={{ fontFamily: t._font.body, fontSize: 13, color: textDim, fontVariantNumeric: 'tabular-nums', letterSpacing: 2 }}>
          {String(idx + 1).padStart(2, '0')}.
        </span>
        <h3 style={{
          fontFamily: t._font.display, fontSize: 'clamp(1.6rem,2.4vw,2.4rem)', lineHeight: 1, color: hover ? palette[1] : text,
          letterSpacing: -.5, transition: 'color .2s'
        }}>{p.name}<span style={{ color: palette[1], fontStyle: 'italic', fontSize: '.6em', marginLeft: 8 }}>{p.tag.toLowerCase()}</span></h3>
        <p style={{ fontFamily: t._font.body, fontSize: 14, lineHeight: 1.55, color: textDim }}>{p.desc}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, justifyContent: 'flex-end' }}>
          {p.stack.map((s, i) =>
          <span key={i} style={{
            fontFamily: t._font.body, fontSize: 9, letterSpacing: 1.5, fontWeight: 500, textTransform: 'uppercase',
            color: hover ? palette[0] : textDim, transition: 'color .2s'
          }}>{s}{i < p.stack.length - 1 ? ' ·' : ''}</span>
          )}
        </div>
      </div>
    </Reveal>);

}

// ============================================================
// ROOT — variant switcher + tweaks panel
// ============================================================
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // resolve font pair lazily (don't store object in tweaks JSON)
  const _font = FONT_PAIRS[t.fontPair] || FONT_PAIRS["vt323-plex"];
  const tx = { ...t, _font };

  // sync scanline overlay class on body
  React.useEffect(() => {
    document.body.classList.toggle('scanlines', t.dark);
    document.body.classList.toggle('scanlines-light', !t.dark);
  }, [t.dark]);

  let view;
  if (t.variant === 'arcade') view = <VariantArcade t={tx} />;else
  if (t.variant === 'zine') view = <VariantZine t={tx} />;else
  view = <VariantWorkshop t={tx} />;

  return (
    <>
      {view}
      <button
        onClick={() => setTweak('dark', !t.dark)}
        aria-label={t.dark ? 'Switch to light mode' : 'Switch to dark mode'}
        title={t.dark ? 'Switch to light mode' : 'Switch to dark mode'}
        style={{
          position: 'fixed', left: 16, bottom: 16, zIndex: 99999,
          width: 44, height: 44, borderRadius: 999,
          background: t.dark ? 'rgba(255,255,255,.08)' : 'rgba(0,0,0,.06)',
          color: t.dark ? '#f0e8d0' : '#1a1820',
          border: `1px solid ${t.dark ? 'rgba(255,255,255,.18)' : 'rgba(0,0,0,.15)'}`,
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, transition: 'transform .2s, background .2s',
          boxShadow: t.dark ? '0 4px 16px rgba(0,0,0,.4)' : '0 4px 16px rgba(0,0,0,.08)',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.08) rotate(-12deg)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1) rotate(0deg)'; }}>
        {t.dark ? '☀️' : '🌙'}
      </button>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Variation" />
        <TweakRadio
          label="Layout"
          value={t.variant}
          options={[
          { value: 'workshop', label: 'Workshop' },
          { value: 'arcade', label: 'Arcade' },
          { value: 'zine', label: 'Zine' }]
          }
          onChange={(v) => setTweak('variant', v)} />
        

        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakColor
          label="Palette"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)} />
        
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENTS}
          onChange={(v) => setTweak('accent', v)} />
        

        <TweakSection label="Type" />
        <TweakSelect
          label="Font pairing"
          value={t.fontPair}
          options={Object.entries(FONT_PAIRS).map(([k, v]) => ({ value: k, label: v.name }))}
          onChange={(v) => setTweak('fontPair', v)} />
        

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);