const { useEffect, useMemo, useRef, useState } = React;

/* ---------- Tweaks (persisted) ---------- */
const TWEAKS = /*EDITMODE-BEGIN*/{
  "grainIntensity": 0.35
}/*EDITMODE-END*/;

/* ---------- Utilities ---------- */
function useReveal() {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } },
      { threshold: 0.15 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, shown];
}

function Reveal({ children, delay = 0, as: As = 'div', className = '', style = {} }) {
  const [ref, shown] = useReveal();
  return (
    <As
      ref={ref}
      className={className}
      style={{
        ...style,
        opacity: shown ? 1 : 0,
        transform: shown ? 'translateY(0)' : 'translateY(18px)',
        transition: `opacity 700ms ease ${delay}ms, transform 700ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
      }}
    >
      {children}
    </As>
  );
}

/* ---------- Grain overlay (SVG fractal noise) ---------- */
function Grain({ opacity = 0.35 }) {
  return (
    <svg
      aria-hidden="true"
      style={{
        position: 'fixed', inset: 0, width: '100%', height: '100%',
        pointerEvents: 'none', opacity, mixBlendMode: 'multiply', zIndex: 60
      }}
    >
      <filter id="n">
        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" />
        <feColorMatrix values="0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0.9 0" />
      </filter>
      <rect width="100%" height="100%" filter="url(#n)" />
    </svg>
  );
}

/* ---------- Top bar ---------- */
function TopBar({ birthday, onToggle, manualOn, setManualOn }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(26,22,19,0.92)', backdropFilter: 'blur(6px)',
      borderBottom: '1px solid rgba(243,230,196,0.12)',
      color: 'var(--cream)'
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 20
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {birthday ? <CandleLogo /> : (
            <div style={{
              width: 28, height: 28, borderRadius: 999, background: 'var(--mustard)',
              display: 'grid', placeItems: 'center', color: 'var(--ink)',
              fontFamily: 'Archivo Black, sans-serif', fontSize: 15, letterSpacing: -0.5
            }}>B</div>
          )}
          <div style={{ fontFamily: 'Archivo Black, sans-serif', fontSize: 15, letterSpacing: 1.2 }}>
            {birthday ? 'BETTER CALL BEN · B-DAY EDITION' : 'BETTER CALL BEN'}
          </div>
        </div>

        <nav style={{
          display: 'flex', gap: 22, marginLeft: 32,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, opacity: 0.85
        }}>
          <a href="#profile" style={navLinkStyle}>SYSTEM</a>
          <a href="#campaign" style={navLinkStyle}>CAMPAIGN</a>
          <a href="#terminal" style={navLinkStyle}>LOGS</a>
          <a href="#messages" style={navLinkStyle}>TEAM</a>
        </nav>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <ModeToggle birthday={birthday} manualOn={manualOn} setManualOn={setManualOn} onToggle={onToggle} />
          <a href="#hero" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 2,
            background: 'var(--brick)', color: 'var(--cream)',
            fontFamily: 'Archivo Black, sans-serif', fontSize: 12, letterSpacing: 1.2,
            textDecoration: 'none', border: '1px solid rgba(0,0,0,0.3)'
          }}>
            <PhoneGlyph /> CALL BEN
          </a>
        </div>
      </div>
    </header>
  );
}
const navLinkStyle = { color: 'inherit', textDecoration: 'none' };

function PhoneGlyph({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  );
}

function ModeToggle({ birthday, manualOn, setManualOn }) {
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={() => setManualOn(v => (v === null ? !birthday : !v))}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setManualOn(v => (v === null ? !birthday : !v)); }}
      style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '6px 10px', borderRadius: 2,
        border: '1px solid rgba(243,230,196,0.2)',
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
        cursor: 'pointer', userSelect: 'none',
        background: birthday ? 'rgba(245,197,24,0.08)' : 'transparent'
      }}
      title="Toggle mode"
    >
      <span style={{ opacity: birthday ? 0.5 : 1 }}>REG</span>
      <div style={{
        position: 'relative', width: 34, height: 18, borderRadius: 999,
        background: birthday ? 'var(--mustard)' : 'rgba(243,230,196,0.15)',
        transition: 'background 240ms'
      }}>
        <div style={{
          position: 'absolute', top: 2, left: birthday ? 18 : 2,
          width: 14, height: 14, borderRadius: '50%', background: 'var(--ink)',
          transition: 'left 240ms'
        }} />
      </div>
      <span style={{ opacity: birthday ? 1 : 0.5 }}>B-DAY</span>
    </div>
  );
}

/* ---------- Confetti burst (tasteful, short) ---------- */
function Confetti({ trigger }) {
  const [pieces, setPieces] = useState([]);
  useEffect(() => {
    if (trigger == null) return;
    const colors = ['#F5C518', '#B8362B', '#F3E6C4', '#1A1613'];
    const shapes = ['rect', 'rect', 'diamond', 'circle'];
    const next = Array.from({ length: 90 }, (_, i) => ({
      id: `${trigger}-${i}`,
      left: Math.random() * 100,
      delay: Math.random() * 300,
      duration: 2600 + Math.random() * 1400,
      rot: Math.random() * 360,
      rotSpeed: (Math.random() - 0.5) * 720,
      drift: (Math.random() - 0.5) * 220,
      size: 6 + Math.random() * 10,
      color: colors[i % colors.length],
      shape: shapes[i % shapes.length]
    }));
    setPieces(next);
    const t = setTimeout(() => setPieces([]), 4200);
    return () => clearTimeout(t);
  }, [trigger]);

  if (!pieces.length) return null;
  return (
    <div aria-hidden="true" style={{
      position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 80, overflow: 'hidden'
    }}>
      {pieces.map((p) => (
        <span key={p.id} style={{
          position: 'absolute', top: -20, left: `${p.left}%`,
          width: p.size, height: p.shape === 'circle' ? p.size : p.size * 1.4,
          background: p.color,
          borderRadius: p.shape === 'circle' ? '50%' : 1,
          transform: p.shape === 'diamond' ? 'rotate(45deg)' : undefined,
          animation: `bcb-fall ${p.duration}ms cubic-bezier(.2,.6,.4,1) ${p.delay}ms forwards`,
          '--drift': `${p.drift}px`,
          '--rot': `${p.rot}deg`,
          '--rotEnd': `${p.rot + p.rotSpeed}deg`
        }} />
      ))}
    </div>
  );
}

/* ---------- Birthday ribbon ---------- */
function BirthdayRibbon({ visible }) {
  return (
    <div style={{
      maxHeight: visible ? 44 : 0,
      overflow: 'hidden', transition: 'max-height 400ms ease',
      background: 'var(--mustard)', color: 'var(--ink)',
      borderBottom: '1px solid rgba(0,0,0,0.2)'
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '12px 28px',
        display: 'flex', alignItems: 'center', gap: 16,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 1
      }}>
        <span style={{
          padding: '2px 8px', background: 'var(--ink)', color: 'var(--mustard)',
          fontFamily: 'Archivo Black, sans-serif', letterSpacing: 1.5
        }}>APR · 23</span>
        <span style={{ fontFamily: 'Archivo Black, sans-serif', letterSpacing: 1.5 }}>
          SPECIAL EDITION — HAPPY BIRTHDAY, BEN.
        </span>
        <span style={{ marginLeft: 'auto', opacity: 0.7 }}>v3.5 LTS · build 0423</span>
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ birthday }) {
  return (
    <section id="hero" style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--ink)', color: 'var(--cream)'
    }}>
      {birthday && <Bunting />}
      {/* Image */}
      <div style={{ position: 'relative', width: '100%', aspectRatio: '1536/1024', maxHeight: '88vh' }}>
        <img
          src="assets/poster-arms-crossed.png"
          alt="Better Call Ben — desert billboard"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%' }}
        />
        {/* Gradient for legibility */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(26,22,19,0.05) 0%, rgba(26,22,19,0.15) 40%, rgba(26,22,19,0.85) 100%)'
        }} />
        {/* Corner marks */}
        <CornerMark pos="tl" label={birthday ? 'BIRTHDAY · 01 ♥' : 'CAMPAIGN · 04'} />
        <CornerMark pos="tr" label={birthday ? 'APR 23 · SPECIAL EDITION' : 'ALWAYS ON AIR'} />
        <CornerMark pos="bl" label="FRAME 01 / 04" />
        <CornerMark pos="br" label={birthday ? 'v3.6 · BDAY PATCH' : 'v3.5 LTS'} />



        {/* Kicker ribbon — bottom-left, avoids the baked-in billboard text */}
        <div style={{ position: 'absolute', left: 40, bottom: 80, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 1.5,
            padding: '6px 10px', border: '1px solid rgba(243,230,196,0.35)',
            background: 'rgba(26,22,19,0.55)', color: 'var(--cream)'
          }}>{birthday ? 'B-DAY BROADCAST · ON AIR' : 'NOW BROADCASTING · ROUTE 66'}</span>
        </div>
      </div>

      {/* Title block below */}
      <div style={{
        position: 'relative', maxWidth: 1320, margin: '0 auto',
        padding: '40px 28px 56px', display: 'grid',
        gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'end'
      }}>
        <div>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 12,
            letterSpacing: 2, opacity: 0.65, marginBottom: 14
          }}>
            — A PUBLIC SERVICE ANNOUNCEMENT —
          </div>
          <h1 style={{
            fontFamily: 'Archivo Black, sans-serif',
            fontSize: 'clamp(64px, 9vw, 148px)',
            lineHeight: 0.88, letterSpacing: -2, margin: 0,
            textTransform: 'uppercase'
          }}>
            <span style={{ display: 'block', color: 'var(--cream)' }}>Better Call</span>
            <span style={{
              display: 'block', color: 'var(--mustard)',
              WebkitTextStroke: '2px var(--ink)',
              textShadow: '6px 6px 0 var(--brick)',
              position: 'relative'
            }}>
              Ben.
                      {/* Birthday cake — centered, glowing */}
        {birthday && (
          <>
            <div aria-hidden="true" style={{
              position: 'absolute', left: '50%', top: '6%', width: 420, height: 420,
              transform: 'translateX(-50%)',
              background: 'radial-gradient(closest-side, rgba(245,197,24,0.35), rgba(245,197,24,0) 70%)',
              animation: 'bcb-glow-pulse 2.4s ease-in-out infinite', pointerEvents: 'none', mixBlendMode: 'screen'
            }} />
            <div aria-hidden="true" style={{
              position: 'absolute', left: '67%', top: '8%',
              transform: 'translateX(-50%)', zIndex: 3,
              filter: 'drop-shadow(0 8px 20px rgba(0,0,0,0.5))'
            }}>
              <svg width="220" height="240" viewBox="0 0 220 240">
                {/* Plate */}
                <ellipse cx="110" cy="222" rx="92" ry="8" fill="rgba(0,0,0,0.4)" />
                <ellipse cx="110" cy="218" rx="90" ry="7" fill="#F3E6C4" stroke="#1A1613" strokeWidth="1.5" />
                {/* Bottom tier */}
                <rect x="28" y="150" width="164" height="65" fill="#F3E6C4" stroke="#1A1613" strokeWidth="2" />
                {/* Bottom frosting drip */}
                <path d="M 28 150
                         Q 40 162, 52 150
                         Q 64 164, 76 150
                         Q 88 162, 100 150
                         Q 112 164, 124 150
                         Q 136 162, 148 150
                         Q 160 164, 172 150
                         Q 184 162, 192 150"
                      fill="#B8362B" stroke="#1A1613" strokeWidth="1.5" strokeLinejoin="round" />
                {/* Dots on bottom tier */}
                <circle cx="60" cy="188" r="3" fill="#B8362B" />
                <circle cx="110" cy="192" r="3" fill="#B8362B" />
                <circle cx="160" cy="188" r="3" fill="#B8362B" />
                {/* Top tier */}
                <rect x="56" y="92" width="108" height="58" fill="#F3E6C4" stroke="#1A1613" strokeWidth="2" />
                {/* Top frosting drip */}
                <path d="M 56 92
                         Q 68 104, 80 92
                         Q 92 106, 104 92
                         Q 116 104, 128 92
                         Q 140 106, 152 92
                         Q 160 102, 164 92"
                      fill="#B8362B" stroke="#1A1613" strokeWidth="1.5" strokeLinejoin="round" />
                {/* Cherries on top tier */}
                <circle cx="80" cy="128" r="3.5" fill="#B8362B" />
                <circle cx="140" cy="128" r="3.5" fill="#B8362B" />
                {/* Candle */}
                <rect x="100" y="50" width="20" height="46" fill="#F3E6C4" stroke="#1A1613" strokeWidth="1.8" />
                {/* Candle stripes */}
                <line x1="100" y1="62" x2="120" y2="62" stroke="#B8362B" strokeWidth="2" />
                <line x1="100" y1="76" x2="120" y2="76" stroke="#B8362B" strokeWidth="2" />
                <line x1="100" y1="90" x2="120" y2="90" stroke="#B8362B" strokeWidth="2" />
                {/* Wick */}
                <line x1="110" y1="50" x2="110" y2="42" stroke="#1A1613" strokeWidth="1.5" />
                {/* Flame — animated */}
                <ellipse cx="110" cy="30" rx="7" ry="14" fill="#F5C518">
                  <animate attributeName="ry" values="14;17;12;15;14" dur="1.3s" repeatCount="indefinite" />
                  <animate attributeName="fill" values="#F5C518;#FFE27A;#F5C518" dur="1.3s" repeatCount="indefinite" />
                </ellipse>
                <ellipse cx="110" cy="26" rx="3" ry="7" fill="#FFF3B0" opacity="0.85">
                  <animate attributeName="ry" values="7;9;6;8;7" dur="1.3s" repeatCount="indefinite" />
                </ellipse>
              </svg>
            </div>
            <BirthdaySticker />
            <Sparkles />
          </>
        )}
            </span>
          </h1>
        </div>

        <div style={{
          borderLeft: '1px solid rgba(243,230,196,0.2)', paddingLeft: 24,
          display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 420
        }}>
          <p style={{
            fontFamily: 'Bebas Neue, Impact, sans-serif', fontSize: 28,
            letterSpacing: 1, lineHeight: 1.1, margin: 0
          }}>
            When it matters, don't debug alone.<br/>
            <span style={{ color: 'var(--mustard)' }}>Fast. Reliable. Already replied.</span>
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a href="#messages" style={btnPrimary}><PhoneGlyph size={14} /> ESCALATE TO BEN</a>
            <a href="#profile" style={btnGhost}>SEE SYSTEM SPECS</a>
          </div>
          <div style={{
            marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
            opacity: 0.6, letterSpacing: 1
          }}>
            {birthday
              ? 'BDAY/ON · 1-800-CALL-BEN · 24/7 · (today we allow slack)'
              : '1-800-CALL-BEN · 24/7 SUPPORT · NO WEEKENDS OFF'}
          </div>
        </div>
      </div>
    </section>
  );
}

const btnPrimary = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  padding: '14px 20px', background: 'var(--mustard)', color: 'var(--ink)',
  fontFamily: 'Archivo Black, sans-serif', letterSpacing: 1.5, fontSize: 13,
  textDecoration: 'none', border: '1px solid rgba(0,0,0,0.4)',
  boxShadow: '4px 4px 0 var(--brick)'
};
const btnGhost = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  padding: '14px 20px', background: 'transparent', color: 'var(--cream)',
  fontFamily: 'Archivo Black, sans-serif', letterSpacing: 1.5, fontSize: 13,
  textDecoration: 'none', border: '1px solid rgba(243,230,196,0.35)'
};

function CornerMark({ pos, label }) {
  const base = {
    position: 'absolute', padding: '6px 10px',
    background: 'rgba(26,22,19,0.7)', color: 'var(--cream)',
    fontFamily: 'IBM Plex Mono, monospace', fontSize: 10, letterSpacing: 1.5,
    border: '1px solid rgba(243,230,196,0.2)'
  };
  const map = {
    tl: { top: 20, left: 20 },
    tr: { top: 20, right: 20 },
    bl: { bottom: 20, left: 20 },
    br: { bottom: 20, right: 20 }
  };
  return <div style={{ ...base, ...map[pos] }}>{label}</div>;
}

/* ---------- Scene Reel (cinematic strip) ---------- */
const SCENES = [
  { src: 'assets/scene-big-billboard.png', caption: 'SCENE 01 · Mile 214, westbound.' },
  { src: 'assets/scene-walking-road.png',  caption: 'SCENE 02 · "Already ahead."' },
  { src: 'assets/scene-pointing.png',      caption: 'SCENE 03 · Ben, reviewing his own billboard.' },
  { src: 'assets/scene-car-sunset.png',    caption: 'SCENE 04 · The motel lot. 7:41 PM.' },
  { src: 'assets/scene-laptop-night.png',  caption: 'SCENE 05 · "Still working."' }
];

function SceneReel({ birthday }) {
  return (
    <section id="scenes" style={{
      background: 'var(--ink-2)', color: 'var(--cream)',
      padding: '90px 28px 80px', borderTop: '1px solid rgba(243,230,196,0.08)'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 20, flexWrap: 'wrap' }}>
            <div>
              <SectionEyebrow num="0X" label="SCENE REEL" />
              <h2 style={h2Style}>Selected frames.<br/><span style={{color:'var(--mustard)'}}>Unretouched.</span></h2>
            </div>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 1.5,
              opacity: 0.7, maxWidth: 360, textAlign: 'right'
            }}>
              {birthday
                ? 'B-DAY DIRECTOR’S CUT · 04.23 · this one’s for Ben'
                : 'DIRECTOR’S CUT · archive 04/26 · scroll to view'}
            </div>
          </div>
        </Reveal>

        <div style={{
          marginTop: 36,
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gap: 14
        }}>
          {SCENES.map((s, i) => {
            // Layout: big + tall + wide + tall + wide
            const spans = [
              { col: 'span 4', row: 'span 2' }, // big
              { col: 'span 2', row: 'span 1' },
              { col: 'span 2', row: 'span 1' },
              { col: 'span 3', row: 'span 1' },
              { col: 'span 3', row: 'span 1' }
            ][i];
            return (
              <Reveal key={i} delay={i * 60} style={{ gridColumn: spans.col, gridRow: spans.row }}>
                <figure style={{
                  margin: 0, position: 'relative', overflow: 'hidden',
                  background: '#000', height: '100%', minHeight: 220,
                  border: '1px solid rgba(243,230,196,0.12)'
                }}>
                  <img src={s.src} alt={s.caption}
                       style={{
                         width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                         transition: 'transform 500ms ease, filter 500ms ease',
                         filter: 'saturate(1.02)'
                       }}
                       onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; }}
                       onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
                  />
                  <div style={{
                    position: 'absolute', left: 0, right: 0, bottom: 0,
                    padding: '24px 14px 12px',
                    background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.75))',
                    fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
                    letterSpacing: 1.5, color: 'var(--cream)'
                  }}>{s.caption}</div>
                </figure>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Phrase strip (marquee) ---------- */
const PHRASES_REG = [
  'STABLE IN PRODUCTION',
  'CALM UNDER PRESSURE',
  'UNBLOCKS THE TEAM',
  'HELPS FIRST · ASKS QUESTIONS FIRST',
  'LEADS WITHOUT LOUD',
  'ALREADY ON IT',
  'THE TEAM IS BETTER WHEN BEN IS ON',
  'NO UPDATES REQUIRED',
  'PATIENT WITH PEOPLE · RUTHLESS WITH BUGS',
  'FAST · RELIABLE · ALREADY REPLIED',
  'MENTOR · TEAMMATE · ENGINEER',
  'DEADLINE TIGHT? GOOD. BEN’S AHEAD.'
];
const PHRASES_BDAY = [
  'HAPPY BIRTHDAY, BEN',
  '+1 YEAR · BACKWARDS COMPATIBLE',
  'STABLE IN PRODUCTION',
  'HAPPY BIRTHDAY, BEN',
  'NO MIGRATION NEEDED',
  'CAKE COMPILED · NO ERRORS',
  'HAPPY BIRTHDAY, BEN',
  'DEPLOYMENT PAUSED · IT’S HIS DAY'
];

function PhraseStrip({ birthday }) {
  const base = birthday ? PHRASES_BDAY : PHRASES_REG;
  const row = [...base, ...base];
  return (
    <section aria-label="slogans" style={{
      background: 'var(--mustard)', color: 'var(--ink)',
      borderTop: '4px solid var(--ink)', borderBottom: '4px solid var(--ink)',
      overflow: 'hidden', position: 'relative'
    }}>
      <div style={{
        display: 'flex', gap: 48, padding: '18px 0',
        whiteSpace: 'nowrap', animation: 'bcb-marquee 42s linear infinite',
        fontFamily: 'Archivo Black, sans-serif', fontSize: 22, letterSpacing: 2
      }}>
        {row.map((p, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 48 }}>
            {p}
            <span aria-hidden="true" style={{
              display: 'inline-block', width: 10, height: 10, background: 'var(--brick)',
              transform: 'rotate(45deg)'
            }} />
          </span>
        ))}
      </div>
    </section>
  );
}

/* ---------- System profile ---------- */
function Profile({ birthday }) {
  const [bumped, setBumped] = useState(false);
  return (
    <section id="profile" style={{
      background: 'var(--ink)', color: 'var(--cream)',
      padding: '100px 28px'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <SectionEyebrow num="01" label="SYSTEM PROFILE" />
          <h2 style={h2Style}>Production-ready human.<br/><span style={{color:'var(--mustard)'}}>Long-term support included.</span></h2>
        </Reveal>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32,
          marginTop: 48, alignItems: 'stretch'
        }}>
          {/* Spec sheet */}
          <Reveal delay={80}>
            <div style={{
              background: 'var(--cream)', color: 'var(--ink)',
              padding: 28, border: '1px solid rgba(0,0,0,0.25)',
              boxShadow: '10px 10px 0 var(--brick)',
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 14
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                borderBottom: '1px dashed rgba(0,0,0,0.3)', paddingBottom: 14, marginBottom: 18
              }}>
                <div style={{ fontFamily: 'Archivo Black, sans-serif', fontSize: 18, letterSpacing: 1.5 }}>
                  BEN · SPEC SHEET
                </div>
                <div style={{
                  padding: '4px 8px', background: 'var(--ink)', color: 'var(--mustard)',
                  fontFamily: 'Archivo Black, sans-serif', fontSize: 11, letterSpacing: 1.5
                }}>CERT · LTS</div>
              </div>

              <SpecRow k="Version" v={
                <button onClick={() => setBumped(true)}
                        style={{
                          background: 'transparent', border: '1px dashed rgba(0,0,0,0.4)',
                          padding: '2px 8px', fontFamily: 'inherit', fontSize: 13, cursor: 'pointer'
                        }}
                        title="Update?">
                  {bumped ? 'Ben 3.5 LTS · update ignored ✓' : 'Ben 3.5 LTS'}
                </button>
              }/>
              <SpecRow k="Status" v={<span><Dot c="#2E7D32"/> Always online</span>} />
              <SpecRow k="Team role" v="Lead · player-coach" />
              <SpecRow k="Last update" v="Not required" />
              <SpecRow k="Response time" v="suspiciously fast (p50: 47s)" />
              <SpecRow k="1:1 cadence" v="weekly · never skipped" />
              <SpecRow k="Unblocks / week" v="enough that we lost count" />
              <SpecRow k="Uptime (rolling)" v="99.997%" />
              <SpecRow k="Deploys this qtr" v="12 · rollbacks: 0" />
              <SpecRow k="Patience" v="∞ (unbounded)" />
              <SpecRow k="Mentorship" v="compiles other engineers" />
              <SpecRow k="License" v="Ben LTS · renew never" last />
            </div>
          </Reveal>

          {/* Badges + pull-quote */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <Reveal delay={140}>
              <div style={{
                padding: 24, border: '1px solid rgba(243,230,196,0.2)',
                background: 'rgba(243,230,196,0.04)'
              }}>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 2,
                  opacity: 0.7, marginBottom: 10
                }}>CERTIFICATIONS</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  {['VERIFIED','APPROVED','PRODUCTION READY','NO UPDATE REQUIRED','BEN CERTIFIED','LTS','ALWAYS SHIPPING'].map((b) => (
                    <Badge key={b}>{b}</Badge>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={220}>
              <div style={{
                padding: 28, background: 'var(--mustard)', color: 'var(--ink)',
                position: 'relative', border: '1px solid rgba(0,0,0,0.3)'
              }}>
                <div style={{
                  position: 'absolute', top: -12, left: 20,
                  background: 'var(--ink)', color: 'var(--mustard)',
                  fontFamily: 'Archivo Black, sans-serif', fontSize: 11, letterSpacing: 2,
                  padding: '4px 10px'
                }}>FIELD TEST</div>
                <p style={{
                  margin: 0, fontFamily: 'Bebas Neue, Impact, sans-serif',
                  fontSize: 30, lineHeight: 1.08, letterSpacing: 0.6
                }}>
                  "Ben cares. About the code,<br/>
                  but mostly about the people who write it."
                </p>
                <div style={{
                  marginTop: 14, fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 1
                }}>— the team, unanimously</div>
              </div>
            </Reveal>

            {birthday && (
              <Reveal delay={280}>
                <div style={{
                  padding: 20, background: 'var(--brick)', color: 'var(--cream)',
                  position: 'relative', overflow: 'hidden',
                  border: '1px solid rgba(0,0,0,0.3)'
                }}>
                  <div style={{
                    position: 'absolute', top: -12, right: 20,
                    background: 'var(--mustard)', color: 'var(--ink)',
                    fontFamily: 'Archivo Black, sans-serif', fontSize: 11, letterSpacing: 2,
                    padding: '4px 10px'
                  }}>BDAY PATCH · 04.23</div>
                  <div style={{
                    fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 2,
                    opacity: 0.85, marginBottom: 8
                  }}>CAKE COUNTER</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                    <span style={{
                      fontFamily: 'Archivo Black, sans-serif', fontSize: 64, lineHeight: 1,
                      color: 'var(--mustard)', letterSpacing: -2,
                      textShadow: '4px 4px 0 var(--ink)'
                    }}>+1</span>
                    <span style={{
                      fontFamily: 'Bebas Neue, Impact, sans-serif', fontSize: 20, letterSpacing: 1
                    }}>YEAR · BACKWARDS COMPATIBLE · NO MIGRATION</span>
                  </div>
                  <div style={{
                    marginTop: 10, fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 1
                  }}>changelog: +1 candle, 0 breaking changes</div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function SpecRow({ k, v, last }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '170px 1fr', gap: 12,
      padding: '10px 0',
      borderBottom: last ? 'none' : '1px dashed rgba(0,0,0,0.15)'
    }}>
      <div style={{ opacity: 0.6, textTransform: 'uppercase', letterSpacing: 1.5, fontSize: 11 }}>{k}</div>
      <div>{v}</div>
    </div>
  );
}
function Dot({ c }) {
  return <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: c, marginRight: 8, verticalAlign: 'middle' }} />;
}
function Badge({ children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 10px', border: '1px solid var(--mustard)',
      color: 'var(--mustard)', fontFamily: 'Archivo Black, sans-serif',
      fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase'
    }}>
      <span style={{ width: 6, height: 6, background: 'var(--mustard)', display: 'inline-block', transform: 'rotate(45deg)' }} />
      {children}
    </span>
  );
}

const h2Style = {
  fontFamily: 'Archivo Black, sans-serif',
  fontSize: 'clamp(36px, 5vw, 72px)',
  letterSpacing: -1, lineHeight: 0.96, margin: '18px 0 0',
  textTransform: 'uppercase'
};

function SectionEyebrow({ num, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 2, opacity: 0.7
    }}>
      <span style={{
        padding: '3px 8px', background: 'var(--mustard)', color: 'var(--ink)',
        fontFamily: 'Archivo Black, sans-serif'
      }}>§ {num}</span>
      {label}
    </div>
  );
}

/* ---------- Campaign poster gallery ---------- */
function Campaign() {
  const posters = [
    { src: 'assets/poster-bugs-deployments.png', tag: 'BILLBOARD · RT 66', title: 'ROADSIDE CUT', note: 'Alternate horizon.' },
    { src: 'assets/hero-billboard-alt.png', tag: 'PRINT · RISO', title: 'THE CLASSIC', note: 'Incidents. Deployments.' },
    { src: 'assets/hero-billboard-desert.png', tag: 'PRINT · 24×36', title: 'FIELD EDITION', note: 'Ben !! · distribution: internal.' },
    { src: 'assets/poster-arms-crossed.png', tag: 'TESTED · APPROVED', title: 'DESERT SPOT', note: 'The one that ran.' }
  ];
  return (
    <section id="campaign" style={{
      background: 'var(--cream)', color: 'var(--ink)', padding: '100px 28px'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <div>
              <SectionEyebrow num="02" label="CAMPAIGN GALLERY" />
              <h2 style={{ ...h2Style, color: 'var(--ink)' }}>Around town.<br/><span style={{color:'var(--brick)'}}>Four frames from the route.</span></h2>
            </div>
            <p style={{
              maxWidth: 420, margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 15,
              lineHeight: 1.55, opacity: 0.75
            }}>
              Four panels from the campaign. Shot on the road, printed at the shop, taped up wherever
              an engineer might need them.
            </p>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: 18, marginTop: 48
        }}>
          {posters.map((p, i) => {
            const spans = [
              { grid: 'span 7', rotate: -0.6 },
              { grid: 'span 5', rotate: 0.8 },
              { grid: 'span 5', rotate: -0.4 },
              { grid: 'span 7', rotate: 0.6 }
            ];
            const s = spans[i];
            return (
              <Reveal key={i} delay={i * 80} style={{ gridColumn: s.grid }}>
                <figure style={{
                  margin: 0, background: 'var(--ink)',
                  padding: 12, transform: `rotate(${s.rotate}deg)`,
                  boxShadow: '8px 8px 0 rgba(0,0,0,0.15)'
                }}>
                  <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '1536/1024' }}>
                    <img src={p.src} alt={p.title}
                         style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                                  filter: 'contrast(1.02) saturate(1.02)' }} />
                    {i === 3 && (
                      <div style={{
                        position: 'absolute', top: 14, right: -40, transform: 'rotate(18deg)',
                        padding: '6px 50px', background: 'var(--brick)', color: 'var(--cream)',
                        fontFamily: 'Archivo Black, sans-serif', fontSize: 11, letterSpacing: 2
                      }}>BEN APPROVED</div>
                    )}
                  </div>
                  <figcaption style={{
                    color: 'var(--cream)', padding: '12px 6px 4px',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 1.5
                  }}>
                    <span>{p.tag}</span>
                    <span style={{ opacity: 0.7 }}>{p.note}</span>
                  </figcaption>
                </figure>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Terminal / inside jokes ---------- */
const TERMINAL_SCRIPT = [
  { t: 'cmd', s: 'ben --status' },
  { t: 'ok',  s: 'OK. Already handled.' },
  { t: 'cmd', s: 'whoami' },
  { t: 'out', s: 'ben · senior engineer · permanent adult' },
  { t: 'cmd', s: 'tail -n 4 /var/log/oncall.log' },
  { t: 'out', s: '02:14:03  PAGE  db-primary lag spike' },
  { t: 'out', s: '02:14:41  ACK   ben  “already on it”' },
  { t: 'out', s: '02:16:09  FIX   1-line PR, rollback-safe' },
  { t: 'out', s: '02:17:44  RESOLVED  went back to sleep' },
  { t: 'cmd', s: 'uptime' },
  { t: 'ok',  s: '9,372 days · 4 incidents · 0 panics' },
  { t: 'ok',  s: 'type anything below →' }
];

const TERMINAL_RESPONSES = {
  help: [
    { t: 'out', s: 'available: status, uptime, coffee, update, deploy, ' },
    { t: 'out', s: '           thanks, fine, happy-birthday, clear' }
  ],
  status: [{ t: 'ok', s: 'OK. Already handled.' }],
  uptime: [{ t: 'ok', s: '9,372 days · 0 panics · coffee: nominal' }],
  coffee: [
    { t: 'out', s: 'brewing...' },
    { t: 'ok',  s: 'done. black. no sugar. ready.' }
  ],
  update: [{ t: 'err', s: 'Refused. Current version is production-ready.' }],
  deploy: [
    { t: 'out', s: 'checking main...' },
    { t: 'out', s: 'running tests...' },
    { t: 'ok',  s: 'shipped. it’s fine.' }
  ],
  thanks: [{ t: 'out', s: '“don’t mention it. (seriously, don’t.)”' }],
  fine: [{ t: 'out', s: 'that’s fine.' }],
  'happy-birthday': [
    { t: 'ok', s: '\uD83C\uDF82  happy birthday, ben. no alerts today.' }
  ]
};

function Terminal() {
  const [typedCount, setTypedCount] = useState(0);
  const [extras, setExtras] = useState([]); // user-entered lines
  const [input, setInput] = useState('');
  const [interactive, setInteractive] = useState(false);
  const [focused, setFocused] = useState(false);
  const scrollRef = useRef(null);

  // Sequential reveal of scripted lines
  useEffect(() => {
    if (typedCount >= TERMINAL_SCRIPT.length) { setInteractive(true); return; }
    const line = TERMINAL_SCRIPT[typedCount];
    const delay = line.t === 'cmd' ? 420 : line.t === 'ok' ? 260 : 160;
    const id = setTimeout(() => setTypedCount(c => c + 1), delay);
    return () => clearTimeout(id);
  }, [typedCount]);

  // Start when scrolled into view
  const [started, setStarted] = useState(false);
  const rootRef = useRef(null);
  useEffect(() => {
    if (!rootRef.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) { setStarted(true); io.disconnect(); }
    }, { threshold: 0.25 });
    io.observe(rootRef.current);
    return () => io.disconnect();
  }, [started]);

  // Kick the first line only after scrolled in
  useEffect(() => {
    if (started && typedCount === 0) setTypedCount(1);
  }, [started, typedCount]);

  // Auto-scroll terminal as new lines appear
  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [typedCount, extras]);

  function runCommand(raw) {
    const cmd = raw.trim().toLowerCase();
    if (!cmd) return;
    const newLines = [{ t: 'cmd', s: raw }];
    if (cmd === 'clear') { setExtras([]); return; }
    const resp = TERMINAL_RESPONSES[cmd];
    if (resp) newLines.push(...resp);
    else newLines.push({ t: 'out', s: `command not found: ${raw}. try 'help'.` });
    setExtras(e => [...e, ...newLines]);
  }

  function submit(e) {
    e.preventDefault();
    runCommand(input);
    setInput('');
  }

  const visible = TERMINAL_SCRIPT.slice(0, typedCount);
  const activeIsCmd = typedCount > 0 && TERMINAL_SCRIPT[typedCount - 1]?.t === 'cmd';

  return (
    <section id="terminal" ref={rootRef} style={{
      background: 'var(--ink-2)', color: 'var(--cream)', padding: '100px 28px'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.9fr 1.3fr', gap: 40, alignItems: 'start' }}>
        <Reveal>
          <SectionEyebrow num="03" label="ENGINEERING LOG" />
          <h2 style={h2Style}>Last update: <span style={{color:'var(--mustard)'}}>skipped.</span></h2>
          <p style={{
            marginTop: 16, maxWidth: 440,
            fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6, opacity: 0.8
          }}>
            Notes from the on-call channel, trimmed for length.
            Commands run themselves. You can type at the prompt — try <code style={{ color: 'var(--mustard)' }}>help</code>.
          </p>

          {/* Metric tiles */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 26
          }}>
            <MetricTile k="UPTIME" v="99.997%" sub="rolling 90d" />
            <MetricTile k="DEPLOYS" v="12" sub="this quarter" accent="mustard" />
            <MetricTile k="ROLLBACKS" v="0" sub="since forever" />
            <MetricTile k="P50 REPLY" v="47s" sub="slack · on-call" accent="mustard" />
            <MetricTile k="INCIDENTS" v="4" sub="career · zero panics" />
            <MetricTile k="COFFEE" v="☕" sub="nominal" accent="brick" />
          </div>

          <div style={{
            marginTop: 22, padding: '14px 16px',
            border: '1px dashed rgba(243,230,196,0.25)',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, lineHeight: 1.9, opacity: 0.85
          }}>
            <div style={{ color: 'var(--mustard)', letterSpacing: 2, fontSize: 10, marginBottom: 4 }}>PRINCIPLES</div>
            <div>→ Works in production</div>
            <div>→ Incident? Already handled</div>
            <div>→ Consistency beats cleverness</div>
            <div>→ Calm is a feature</div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div style={{
            background: '#0E0B09', border: '1px solid rgba(243,230,196,0.12)',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 13, lineHeight: 1.7,
            boxShadow: '10px 10px 0 var(--brick)'
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '10px 14px', borderBottom: '1px solid rgba(243,230,196,0.1)',
              fontSize: 11, letterSpacing: 1.5, opacity: 0.8
            }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E65A4F' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#F5C518' }} />
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#5BA86B' }} />
              <span style={{ marginLeft: 12 }}>ben@production ~ %</span>
              <span style={{ marginLeft: 'auto', opacity: 0.6 }}>utf-8 · no-weekends</span>
            </div>
            <div ref={scrollRef} style={{
              padding: '18px 18px 14px',
              height: 420, overflowY: 'auto',
              scrollbarWidth: 'thin', scrollbarColor: 'rgba(243,230,196,0.2) transparent'
            }}>
              {visible.map((l, i) => {
                const isLast = i === visible.length - 1;
                return (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                    {l.t === 'cmd' && <span style={{ color: 'var(--mustard)' }}>$</span>}
                    {l.t === 'out' && <span style={{ color: 'rgba(243,230,196,0.5)' }}>·</span>}
                    {l.t === 'ok'  && <span style={{ color: '#7DCC8E' }}>✓</span>}
                    {l.t === 'err' && <span style={{ color: '#E5826B' }}>!</span>}
                    <span style={{
                      color: l.t === 'cmd' ? 'var(--cream)' :
                             l.t === 'ok' ? '#BFE3C6' :
                             l.t === 'err' ? '#F0B59E' :
                             'rgba(243,230,196,0.85)',
                      whiteSpace: 'pre-wrap'
                    }}>
                      {l.s}
                      {isLast && !interactive && activeIsCmd && <span className="bcb-caret" style={{ color: 'var(--mustard)' }}>▌</span>}
                    </span>
                  </div>
                );
              })}

              {extras.map((l, i) => (
                <div key={`x${i}`} style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                  {l.t === 'cmd' && <span style={{ color: 'var(--mustard)' }}>$</span>}
                  {l.t === 'out' && <span style={{ color: 'rgba(243,230,196,0.5)' }}>·</span>}
                  {l.t === 'ok'  && <span style={{ color: '#7DCC8E' }}>✓</span>}
                  {l.t === 'err' && <span style={{ color: '#E5826B' }}>!</span>}
                  <span style={{
                    color: l.t === 'cmd' ? 'var(--cream)' :
                           l.t === 'ok' ? '#BFE3C6' :
                           l.t === 'err' ? '#F0B59E' :
                           'rgba(243,230,196,0.85)'
                  }}>{l.s}</span>
                </div>
              ))}

              {interactive && (
                <>
                  <div style={{
                    marginTop: 14, paddingTop: 12,
                    borderTop: '1px dashed rgba(243,230,196,0.18)',
                    display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
                    fontSize: 11, letterSpacing: 1.5
                  }}>
                    <span style={{ color: 'var(--mustard)', fontFamily: 'Archivo Black, sans-serif' }}>TRY →</span>
                    {['help', 'coffee', 'deploy', 'happy-birthday', 'thanks'].map((cmd) => (
                      <button key={cmd} onClick={() => runCommand(cmd)}
                              style={{
                                padding: '3px 9px',
                                background: 'rgba(245,197,24,0.1)',
                                color: 'var(--mustard)',
                                border: '1px solid rgba(245,197,24,0.4)',
                                fontFamily: 'inherit', fontSize: 11, cursor: 'pointer',
                                letterSpacing: 1
                              }}>{cmd}</button>
                    ))}
                  </div>
                  <form onSubmit={submit} style={{
                    display: 'flex', gap: 10, alignItems: 'baseline',
                    marginTop: 12, padding: '10px 12px',
                    background: 'rgba(245,197,24,0.06)',
                    border: '1px solid rgba(245,197,24,0.35)',
                    position: 'relative'
                  }}>
                    <span style={{ color: 'var(--mustard)', fontFamily: 'Archivo Black, sans-serif', fontSize: 11, letterSpacing: 2 }}>YOU</span>
                    <span style={{ color: 'var(--mustard)' }}>$</span>
                    <input
                      autoFocus
                      value={input}
                      onChange={(e) => setInput(e.target.value)}
                      onFocus={() => setFocused(true)}
                      onBlur={() => setFocused(false)}
                      placeholder="type a command and hit enter…"
                      spellCheck={false}
                      style={{
                        flex: 1, background: 'transparent', border: 'none',
                        color: 'var(--cream)', fontFamily: 'inherit', fontSize: 13,
                        outline: 'none', caretColor: 'var(--mustard)'
                      }}
                    />
                    {!focused && !input && (
                      <span className="bcb-caret" style={{
                        position: 'absolute', left: 88, top: '50%', transform: 'translateY(-50%)',
                        color: 'var(--mustard)', pointerEvents: 'none'
                      }}>▌</span>
                    )}
                    <span style={{
                      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10, letterSpacing: 1.5,
                      color: 'rgba(243,230,196,0.5)', marginLeft: 'auto'
                    }}>↵ enter</span>
                  </form>
                </>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function MetricTile({ k, v, sub, accent }) {
  const bg = accent === 'mustard' ? 'var(--mustard)'
           : accent === 'brick'   ? 'var(--brick)'
           : 'rgba(243,230,196,0.04)';
  const fg = accent === 'mustard' ? 'var(--ink)'
           : accent === 'brick'   ? 'var(--cream)'
           : 'var(--cream)';
  return (
    <div style={{
      padding: '14px 16px', background: bg, color: fg,
      border: accent ? '1px solid rgba(0,0,0,0.25)' : '1px solid rgba(243,230,196,0.12)'
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10, letterSpacing: 2,
        opacity: accent ? 0.75 : 0.6
      }}>{k}</div>
      <div style={{
        fontFamily: 'Archivo Black, sans-serif', fontSize: 28, lineHeight: 1,
        marginTop: 4, letterSpacing: -0.5
      }}>{v}</div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10, letterSpacing: 1,
        opacity: accent ? 0.75 : 0.5, marginTop: 4
      }}>{sub}</div>
    </div>
  );
}

/* ---------- Team Photo (behind the fix) ---------- */
function TeamPhoto({ birthday }) {
  return (
    <section id="team" style={{
      background: 'var(--ink)', color: 'var(--cream)',
      padding: '90px 28px 0', position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 36 }}>
            <div>
              <SectionEyebrow num="04" label="THE TEAM" />
              <h2 style={h2Style}>The team <span style={{color:'var(--mustard)'}}>behind the fix.</span></h2>
              <p style={{
                marginTop: 16, maxWidth: 520,
                fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.6, opacity: 0.82
              }}>
                Ben is the kind of lead you want on every day — hard ones and easy ones. He notices when
                you’re off, remembers the small stuff, and quietly makes the whole team feel like someone’s
                got their back. That’s the part that doesn’t show up in the changelog.
              </p>
            </div>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 1.5,
              opacity: 0.7, maxWidth: 260, textAlign: 'right'
            }}>
              {birthday ? 'TEAM PHOTO · BDAY EDITION · 04.23' : 'GROUP PORTRAIT · CAMPAIGN 04'}
            </div>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <figure style={{
            position: 'relative', margin: 0,
            border: '1px solid rgba(243,230,196,0.15)',
            background: '#000'
          }}>
            <img src="assets/team-behind-the-fix.png" alt="Ben and the team"
                 style={{ width: '100%', display: 'block' }} />

            {/* Credit strip */}
            <figcaption style={{
              position: 'absolute', left: 0, right: 0, bottom: 0,
              padding: '22px 24px 18px',
              background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.8))',
              display: 'flex', justifyContent: 'space-between', alignItems: 'end',
              gap: 20, flexWrap: 'wrap'
            }}>
              <div style={{
                fontFamily: 'Bebas Neue, Impact, sans-serif',
                fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1, letterSpacing: 0.5
              }}>
                Five people. One team.
              </div>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 1.5, opacity: 0.8
              }}>
                LEFT → RIGHT · NAMES WITHHELD FOR OPS REASONS
              </div>
            </figcaption>
          </figure>
        </Reveal>

        {/* Trio of soft-skill callouts */}
      </div>
    </section>
  );
}

function TraitCard({ kicker, title, body }) {
  return (
    <div style={{
      padding: '22px 22px 20px',
      background: 'var(--cream)', color: 'var(--ink)',
      border: '1px solid rgba(0,0,0,0.2)',
      boxShadow: '6px 6px 0 var(--brick)'
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10, letterSpacing: 2,
        opacity: 0.65, marginBottom: 8
      }}>{kicker}</div>
      <div style={{
        fontFamily: 'Archivo Black, sans-serif', fontSize: 22, letterSpacing: -0.2,
        lineHeight: 1.05, marginBottom: 10
      }}>{title}</div>
      <p style={{
        margin: 0, fontFamily: 'Inter, sans-serif', fontSize: 14, lineHeight: 1.55, opacity: 0.85
      }}>{body}</p>
    </div>
  );
}

/* ---------- Messages ---------- */
const MESSAGES = [
  { text: "Ben is the only person I trust to deploy on a Friday. He's also the only one who'll tell me, kindly, that we don't need to.", name: "Maya R.", role: "Backend · Payments", badge: "PRODUCTION READY" },
  { text: "He walked me through my first on-call without making me feel like I didn't know what I was doing. I learned more in that hour than the last three months.", name: "Priya M.", role: "Frontend", badge: "MENTOR" },
  { text: "Every 1:1 ends with me having a shorter to-do list and more confidence. I don't know how he does that.", name: "Dani O.", role: "Platform", badge: "BEN CERTIFIED" },
  { text: "When I was stuck, he didn't give me the answer. He asked two questions and I found it. That's the Ben method.", name: "Sana K.", role: "Infra", badge: "UNBLOCKS" },
  { text: "The calmest pager I've ever heard. The warmest Slack DM when you're having a bad week.", name: "Leo F.", role: "Mobile", badge: "LTS" },
  { text: "He remembered my kid's name the second time we met. He also remembered my PR from six weeks ago. Both meant a lot.", name: "Tomás V.", role: "Growth", badge: "HUMAN-READABLE" },
  { text: "Ben's code reviews are short and kind. You never feel dumb, you just feel like you learned something.", name: "Noa B.", role: "Design Eng", badge: "APPROVED" },
  { text: "Showed up on vacation to answer a question nobody asked him. It was the right question, for a teammate who needed it.", name: "Iris P.", role: "Data", badge: "TEAMMATE" },
  { text: "Stability in human form. He's the reason this team stays this team.", name: "Kwame A.", role: "SRE", badge: "TEAM LEAD" }
];

function Messages({ birthday }) {
  return (
    <section id="messages" style={{
      background: birthday ? 'var(--mustard)' : 'var(--cream)',
      color: 'var(--ink)',
      padding: '110px 28px',
      position: 'relative',
      transition: 'background 400ms'
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <SectionEyebrow num="05" label={birthday ? 'THE CARD · SPECIAL EDITION' : 'THE CARD THEY PASSED AROUND'} />
          <h2 style={{ ...h2Style, color: 'var(--ink)' }}>
            {birthday ? 'The days you made better.' : 'The small stuff. It adds up. It always has.'}
          </h2>
        </Reveal>

        {/* Featured quote */}
        <Reveal delay={120}>
          <figure style={{
            margin: '40px 0 48px',
            background: birthday ? 'var(--ink)' : 'var(--ink)',
            color: 'var(--cream)',
            padding: '44px 48px',
            border: '1px solid rgba(0,0,0,0.4)',
            boxShadow: '10px 10px 0 var(--brick)',
            position: 'relative'
          }}>
            <div style={{
              position: 'absolute', top: -14, left: 28,
              background: birthday ? 'var(--mustard)' : 'var(--brick)',
              color: birthday ? 'var(--ink)' : 'var(--cream)',
              padding: '6px 12px', fontFamily: 'Archivo Black, sans-serif',
              fontSize: 11, letterSpacing: 2
            }}>FEATURED TESTIMONY</div>
            <blockquote style={{
              margin: 0, fontFamily: 'Bebas Neue, Impact, sans-serif',
              fontSize: 'clamp(28px, 3.4vw, 48px)', lineHeight: 1.08, letterSpacing: 0.5
            }}>
              "Other leads ship <span style={{color:'var(--mustard)'}}>features</span>.
              Ben ships <span style={{color:'var(--mustard)'}}>engineers</span> —
              calmer, sharper, and more willing to ask for help than they were six months ago."
            </blockquote>
            <figcaption style={{
              marginTop: 18, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 12, letterSpacing: 1.5, opacity: 0.85
            }}>— Jules A. · Staff Engineer · on record</figcaption>
          </figure>
        </Reveal>

        <Moments />

        {birthday && (
          <Reveal delay={120}>
            <div style={{
              marginTop: 36, padding: '20px 24px',
              background: 'var(--ink)', color: 'var(--cream)',
              display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap',
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 1.5
            }}>
              <span style={{ background: 'var(--mustard)', color: 'var(--ink)', padding: '4px 8px',
                             fontFamily: 'Archivo Black, sans-serif', letterSpacing: 2 }}>HBD · 04.23</span>
              The team signed the card. Then they asked if they could merge it without a review.
              Answer was, predictably, "fine, but leave a comment."
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}

/* ---------- Moments timeline ---------- */
const WISHES = [
  { msg: "Happy birthday, Ben! 🎂 Another year of being the calmest person in every room.", sig: "— Maya", style: "script",    ink: "#1B3A6B", rot: -2.3, col: 1, row: 1 },
  { msg: "MAZAL TOV !! 🍾🥂", sig: "— Dani", style: "block", ink: "#B8362B", rot: 1.4, col: 2, row: 1, big: true },
  { msg: "Be happy. Be loud. Eat the cake. 🍰", sig: "— Sana", style: "marker",   ink: "#2B5F3A", rot: -1.1, col: 3, row: 1 },
  { msg: "all love, always 💛", sig: "— Leo",      style: "script", ink: "#1A1613", rot: 2.8, col: 4, row: 1 },

  { msg: "HBD!! Thanks for being you. 🥳", sig: "— Priya",   style: "block",  ink: "#7A1F6A", rot: 0.9, col: 1, row: 2 },
  { msg: "same ↑ but louder ↑↑", sig: "— Tomás",          style: "marker", ink: "#0E4A3C", rot: -2.1, col: 2, row: 2, arrow: "up" },
  { msg: "Wishing you quiet weekends and loud laughs. ☕", sig: "— Noa", style: "script",    ink: "#1B3A6B", rot: 1.7, col: 3, row: 2 },
  { msg: "+1 ☝️ and an extra slice from me", sig: "— Iris",  style: "marker", ink: "#B8362B", rot: -1.8, col: 4, row: 2 },

  { msg: "Happy birthday boss 🎉  (don't tell anyone I said boss)", sig: "— Kwame", style: "block", ink: "#1A1613", rot: 2.2, col: 1, row: 3 },
  { msg: "חג שמח, ברכות ואיחולים 🎈", sig: "— Ron",                       style: "script", ink: "#7A1F6A", rot: -2.6, col: 2, row: 3 },
  { msg: "Stay kind. Stay you. That's it. That's the card. 💫", sig: "— Jules", style: "marker", ink: "#0E4A3C", rot: 1.3, col: 3, row: 3, big: true },
  { msg: "HAPPY BDAY!! 🎂🎂🎂", sig: "— the whole crew", style: "block", ink: "#B8362B", rot: -0.9, col: 4, row: 3 }
];

function Moments() {
  return (
    <div style={{ position: 'relative', padding: '20px 8px 40px' }}>
      {/* Card eyebrow */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 2,
        color: 'var(--ink)', opacity: 0.7, flexWrap: 'wrap'
      }}>
        <span>PASSED AROUND THE OFFICE · DO NOT RETURN · KEEP IT FOREVER</span>
        <span style={{ flex: 1, height: 1, background: 'currentColor', opacity: 0.3 }} />
        <span>04 · 23</span>
      </div>

      {/* The card */}
      <div style={{
        position: 'relative',
        background: '#F7ECD1',
        backgroundImage: 'radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1.2px)',
        backgroundSize: '18px 18px',
        border: '1px solid rgba(0,0,0,0.25)',
        boxShadow: '14px 14px 0 var(--brick), 0 0 0 8px #EFDFB8 inset',
        padding: '48px 44px 56px',
        transform: 'rotate(-0.6deg)'
      }}>
        {/* Coffee ring */}
        <div aria-hidden="true" style={{
          position: 'absolute', left: -20, top: 40,
          width: 110, height: 110, borderRadius: '50%',
          border: '6px solid rgba(120, 70, 30, 0.22)',
          boxShadow: 'inset 0 0 0 3px rgba(120,70,30,0.08)',
          transform: 'rotate(14deg)', pointerEvents: 'none'
        }} />
        {/* Pushpin top */}
        <div aria-hidden="true" style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          width: 24, height: 24, borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 35%, #E5826B, #8F2A22 70%)',
          boxShadow: '2px 3px 4px rgba(0,0,0,0.35), inset -2px -2px 3px rgba(0,0,0,0.3)'
        }} />

        {/* Title strip inside the card */}
        <div style={{
          textAlign: 'center', marginBottom: 28,
          transform: 'rotate(0.4deg)'
        }}>
          <div style={{
            fontFamily: 'Caveat, "Comic Sans MS", cursive',
            fontSize: 'clamp(44px, 5.5vw, 78px)',
            lineHeight: 1, color: '#1A1613'
          }}>
            Happy Birthday, Ben!
          </div>
          <div style={{
            marginTop: 8, fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, color: '#1A1613', opacity: 0.65
          }}>
            — pass it on, sign it, don't skip —
          </div>
        </div>

        {/* Notes grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: '22px 18px'
        }}>
          {WISHES.map((w, i) => (
            <Reveal key={i} delay={i * 45}>
              <Note w={w} />
            </Reveal>
          ))}
        </div>

        {/* Doodles & arrows */}
        <svg aria-hidden="true" viewBox="0 0 800 60" style={{
          display: 'block', width: '100%', marginTop: 28, opacity: 0.7
        }}>
          <path d="M 30 30 Q 200 5, 380 30 T 770 30" stroke="#1A1613" strokeWidth="1.3" fill="none" strokeDasharray="0" />
          <path d="M 770 30 l -10 -5 l 0 10 z" fill="#1A1613" />
          <text x="400" y="18" textAnchor="middle"
                fontFamily="Caveat, cursive" fontSize="18" fill="#B8362B">
            ← same as everyone above ^
          </text>
        </svg>

        {/* Footer sign-off */}
        <div style={{
          marginTop: 14, textAlign: 'center',
          fontFamily: 'Caveat, "Comic Sans MS", cursive',
          fontSize: 24, color: '#1A1613', transform: 'rotate(-0.3deg)'
        }}>
          …and many, many more. 💛
        </div>

        {/* Pushpin bottom */}
        <div aria-hidden="true" style={{
          position: 'absolute', bottom: -14, right: 56,
          width: 22, height: 22, borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 35%, #F5C518, #8A6A08 70%)',
          boxShadow: '2px 3px 4px rgba(0,0,0,0.35), inset -2px -2px 3px rgba(0,0,0,0.3)'
        }} />
      </div>

      {/* Tape strip caption */}
      <div style={{
        marginTop: 28, textAlign: 'center',
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 1.5,
        color: 'var(--ink)', opacity: 0.75
      }}>
        — signed by a few of the humans lucky enough to know you.
      </div>
    </div>
  );
}

function Note({ w }) {
  const fontMap = {
    script: 'Caveat, "Comic Sans MS", cursive',
    marker: 'Permanent Marker, "Comic Sans MS", cursive',
    block:  'Archivo Black, sans-serif'
  };
  const sizeMap = {
    script: w.big ? 26 : 21,
    marker: w.big ? 22 : 18,
    block:  w.big ? 18 : 15
  };
  return (
    <div style={{
      transform: `rotate(${w.rot}deg)`,
      color: w.ink,
      fontFamily: fontMap[w.style],
      fontSize: sizeMap[w.style],
      lineHeight: 1.25,
      padding: '6px 4px',
      letterSpacing: w.style === 'block' ? 0.3 : 0
    }}>
      <div style={{ whiteSpace: 'pre-wrap' }}>{w.msg}</div>
      <div style={{
        marginTop: 6,
        fontFamily: 'Caveat, "Comic Sans MS", cursive',
        fontSize: 18, opacity: 0.85
      }}>{w.sig}</div>
    </div>
  );
}

function MessageCard({ m, dark }) {
  return (
    <article style={{
      background: 'var(--cream)', border: '1px solid rgba(0,0,0,0.2)',
      padding: '22px 22px 18px', position: 'relative',
      boxShadow: dark ? '6px 6px 0 rgba(26,22,19,0.85)' : '6px 6px 0 rgba(0,0,0,0.1)',
      transition: 'transform 220ms ease, box-shadow 220ms ease'
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-2px,-2px)'; e.currentTarget.style.boxShadow = '10px 10px 0 rgba(26,22,19,0.85)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'translate(0,0)'; e.currentTarget.style.boxShadow = dark ? '6px 6px 0 rgba(26,22,19,0.85)' : '6px 6px 0 rgba(0,0,0,0.1)'; }}
    >
      <div style={{
        display: 'inline-block', padding: '3px 8px',
        background: 'var(--ink)', color: 'var(--mustard)',
        fontFamily: 'Archivo Black, sans-serif', fontSize: 10, letterSpacing: 1.8
      }}>{m.badge}</div>
      <p style={{
        margin: '14px 0 18px', fontFamily: 'Inter, sans-serif',
        fontSize: 15, lineHeight: 1.55, color: 'var(--ink)'
      }}>"{m.text}"</p>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        borderTop: '1px dashed rgba(0,0,0,0.2)', paddingTop: 12
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'var(--brick)', color: 'var(--cream)',
          display: 'grid', placeItems: 'center',
          fontFamily: 'Archivo Black, sans-serif', fontSize: 11
        }}>{m.name[0]}</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontFamily: 'Archivo Black, sans-serif', fontSize: 12, letterSpacing: 1 }}>{m.name.toUpperCase()}</span>
          <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5, opacity: 0.6, letterSpacing: 1 }}>{m.role}</span>
        </div>
      </div>
    </article>
  );
}

/* ---------- Emotional close ---------- */
function Close({ birthday }) {
  return (
    <section style={{
      background: 'var(--ink)', color: 'var(--cream)', padding: '140px 28px',
      position: 'relative', overflow: 'hidden'
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, opacity: 0.05, pointerEvents: 'none',
        background: 'radial-gradient(1200px 400px at 50% 20%, var(--mustard), transparent 60%)'
      }} />
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, letterSpacing: 3,
            opacity: 0.6, marginBottom: 22
          }}>— OFF THE RECORD —</div>
        </Reveal>
        <Reveal delay={80}>
          <p style={{
            fontFamily: 'Bebas Neue, Impact, sans-serif',
            fontSize: 'clamp(32px, 4.6vw, 64px)', lineHeight: 1.08, letterSpacing: 0.6,
            margin: 0
          }}>
            Not my first day knowing Ben.<br/>
            But always the one who makes it <span style={{color:'var(--mustard)'}}>easier for the rest of us</span>.
          </p>
        </Reveal>
        <Reveal delay={180}>
          <p style={{
            marginTop: 28, maxWidth: 640, marginInline: 'auto',
            fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65, opacity: 0.85
          }}>
            A rare mix of sharp mind and soft heart. The kind of person you measure a team by —
            and the kind of friend you measure a year by. <em>Better because of Ben.</em>
          </p>
        </Reveal>
        {birthday && (
          <Reveal delay={260}>
            <div style={{
              marginTop: 40, display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 8
            }}>
              <div style={{
                fontFamily: 'Archivo Black, sans-serif',
                fontSize: 'clamp(28px, 3.4vw, 44px)', letterSpacing: -0.5,
                color: 'var(--mustard)'
              }}>HAPPY BIRTHDAY, BEN.</div>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 2, opacity: 0.7
              }}>— signed, the team · 04/23</div>
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer({ birthday }) {
  return (
    <footer style={{
      background: 'var(--brick)', color: 'var(--cream)',
      padding: '60px 28px 40px', borderTop: '6px solid var(--ink)'
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 30, alignItems: 'start'
      }}>
        <div>
          <div style={{
            fontFamily: 'Archivo Black, sans-serif',
            fontSize: 'clamp(32px, 4vw, 56px)', lineHeight: 0.95, letterSpacing: -1
          }}>
            WHEN IT MATTERS,<br/>
            <span style={{ color: 'var(--mustard)' }}>BETTER CALL BEN.</span>
          </div>
        </div>
        <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 13, lineHeight: 2 }}>
          <div style={{ opacity: 0.6, letterSpacing: 2, marginBottom: 6, fontSize: 11 }}>HOTLINE</div>
          <div>1-800-CALL-BEN</div>
          <div>(555) 010-BEN</div>
          <div style={{ opacity: 0.8 }}>24/7 SUPPORT · NO WEEKENDS OFF</div>
        </div>
        <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 13, lineHeight: 2 }}>
          <div style={{ opacity: 0.6, letterSpacing: 2, marginBottom: 6, fontSize: 11 }}>COLOPHON</div>
          <div>Campaign · {birthday ? 'v3.6 · BDAY PATCH' : 'v3.5 LTS'}</div>
          <div>Typeset in Archivo + Bebas + Plex</div>
          <div style={{ opacity: 0.8 }}>Not affiliated with any law firm.</div>
        </div>
      </div>
      <div style={{
        maxWidth: 1320, margin: '36px auto 0',
        paddingTop: 18, borderTop: '1px dashed rgba(243,230,196,0.3)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: 1.5, opacity: 0.8
      }}>
        <span>© {new Date().getFullYear()} · THE TEAM · INTERNAL EDITION</span>
        <span>PRINTED ON THE INTERNET · DO NOT LITIGATE</span>
      </div>
    </footer>
  );
}

/* ---------- Root ---------- */
function Site() {
  const autoBirthday = useMemo(() => {
    const d = new Date();
    return d.getMonth() === 3 && d.getDate() === 23; // April 23
  }, []);

  // manualOn: null = follow auto; true/false = override
  const [manualOn, setManualOn] = useState(null);
  const birthday = manualOn === null ? autoBirthday : manualOn;

  // Confetti trigger: bumps each time we enter birthday mode
  const [confettiKey, setConfettiKey] = useState(null);
  const prevBday = useRef(birthday);
  useEffect(() => {
    if (birthday && !prevBday.current) setConfettiKey(Date.now());
    prevBday.current = birthday;
  }, [birthday]);
  // Also fire once on first load if birthday is on
  useEffect(() => { if (birthday) setConfettiKey(Date.now()); /* eslint-disable-next-line */ }, []);

  // Edit-mode protocol
  const [editOn, setEditOn] = useState(false);
  const [tweaks, setTweaks] = useState(TWEAKS);
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || !d.type) return;
      if (d.type === '__activate_edit_mode') setEditOn(true);
      if (d.type === '__deactivate_edit_mode') setEditOn(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);
  function updateTweak(k, v) {
    setTweaks((t) => ({ ...t, [k]: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  }

  return (
    <div style={{ background: 'var(--ink)', color: 'var(--cream)', minHeight: '100vh' }}>
      <TopBar birthday={birthday} manualOn={manualOn} setManualOn={setManualOn} />
      <BirthdayRibbon visible={birthday} />
      <Hero birthday={birthday} />
      <PhraseStrip birthday={birthday} />
      <SceneReel birthday={birthday} />
      <Profile birthday={birthday} />
      <Campaign />
      <Terminal />
      <TeamPhoto birthday={birthday} />
      <Messages birthday={birthday} />
      <Close birthday={birthday} />
      <Footer birthday={birthday} />
      <Grain opacity={Number(tweaks.grainIntensity) || 0.35} />
      <Confetti trigger={confettiKey} />
      {birthday && <BirthdayLayer />}

      {editOn && (
        <TweaksPanel tweaks={tweaks} setTweak={updateTweak}
                     birthday={birthday} manualOn={manualOn} setManualOn={setManualOn} />
      )}
    </div>
  );
}

function TweaksPanel({ tweaks, setTweak, birthday, manualOn, setManualOn }) {
  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 90,
      width: 280, background: 'var(--ink)', color: 'var(--cream)',
      border: '1px solid rgba(243,230,196,0.25)',
      boxShadow: '8px 8px 0 var(--brick)',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 12
    }}>
      <div style={{
        padding: '10px 14px', background: 'var(--mustard)', color: 'var(--ink)',
        fontFamily: 'Archivo Black, sans-serif', letterSpacing: 2, fontSize: 12,
        display: 'flex', justifyContent: 'space-between'
      }}>
        <span>TWEAKS</span>
        <span style={{ opacity: 0.7 }}>v3.5 LTS</span>
      </div>
      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ opacity: 0.7, marginBottom: 6, letterSpacing: 1.5 }}>MODE</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[['auto', null, 'AUTO'], ['reg', false, 'REG'], ['bday', true, 'B-DAY']].map(([k, v, label]) => (
              <button key={k}
                      onClick={() => setManualOn(v)}
                      style={{
                        flex: 1, padding: '6px 4px',
                        background: (manualOn === v) ? 'var(--mustard)' : 'transparent',
                        color: (manualOn === v) ? 'var(--ink)' : 'var(--cream)',
                        border: '1px solid rgba(243,230,196,0.3)',
                        fontFamily: 'Archivo Black, sans-serif', fontSize: 10, letterSpacing: 1.5,
                        cursor: 'pointer'
                      }}>{label}</button>
            ))}
          </div>
        </div>
        <div>
          <div style={{ opacity: 0.7, marginBottom: 6, letterSpacing: 1.5 }}>
            GRAIN · {Number(tweaks.grainIntensity).toFixed(2)}
          </div>
          <input type="range" min="0" max="0.8" step="0.05"
                 value={tweaks.grainIntensity}
                 onChange={(e) => setTweak('grainIntensity', Number(e.target.value))}
                 style={{ width: '100%' }} />
        </div>
        <div>
          <div style={{ opacity: 0.55, fontSize: 10, letterSpacing: 1 }}>
            CURRENT: {birthday ? 'BIRTHDAY' : 'REGULAR'} · APR 23 AUTO-TRIGGER
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Mount ---------- */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Site />);