// Variant B — Y2K Dreamwave
// Chrome + holographic + pearl gradients. Glossy, playful, hi-tech 2000s energy.
// SPA with tab navigation — no scrolling between sections.

// --- Mobile detection hook ---
function useIsMobile(breakpoint = 768) {
  const [mobile, setMobile] = React.useState(() => window.innerWidth <= breakpoint);
  React.useEffect(() => {
    const onResize = () => setMobile(window.innerWidth <= breakpoint);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [breakpoint]);
  return mobile;
}

// --- Floating Particles (CSS-only ambient sparkles) ---
function FloatingParticles() {
  const chars = ['✦', '✧', '⋆'];
  const colors = ['#ff9ec7', '#a99eff', '#9ed3ff', '#d4c5ff'];
  const particles = React.useMemo(() =>
    Array.from({ length: 10 }, (_, i) => ({
      char: chars[i % chars.length],
      color: colors[i % colors.length],
      size: 8 + Math.random() * 8,
      top: `${10 + Math.random() * 80}%`,
      left: i < 5 ? `${Math.random() * 15}%` : `${85 + Math.random() * 15}%`,
      dur: 5 + Math.random() * 5,
      delay: Math.random() * 4,
      opacity: 0.1 + Math.random() * 0.15,
    })), []);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
      {particles.map((p, i) => (
        <span key={i} style={{
          position: 'absolute', top: p.top, left: p.left,
          fontSize: p.size, color: p.color,
          '--p-opacity': p.opacity,
          opacity: p.opacity,
          animation: `particleDrift ${p.dur}s ease-in-out ${p.delay}s infinite`,
          pointerEvents: 'none',
        }}>{p.char}</span>
      ))}
    </div>
  );
}

// --- Typewriter title ---
function TypewriterTitle({ text, chromeGradient, isActive }) {
  const [charCount, setCharCount] = React.useState(0);
  const [cursorVisible, setCursorVisible] = React.useState(true);
  const [done, setDone] = React.useState(false);
  const timers = React.useRef([]);

  React.useEffect(() => {
    timers.current.forEach(id => clearTimeout(id));
    timers.current = [];
    setCharCount(0);
    setDone(false);
    setCursorVisible(true);

    let count = 0;
    const scheduleNext = () => {
      const delay = count === 0 ? 200 : 150;
      const id = setTimeout(() => {
        count++;
        setCharCount(count);
        if (count < text.length) {
          scheduleNext();
        } else {
          const cursorId = setTimeout(() => setCursorVisible(false), 400);
          const glowId = setTimeout(() => setDone(true), 800);
          timers.current.push(cursorId, glowId);
        }
      }, delay);
      timers.current.push(id);
    };
    scheduleNext();

    return () => {
      timers.current.forEach(id => clearTimeout(id));
      timers.current = [];
    };
  }, [isActive, text]);

  return (
    <h1 style={{
      fontFamily: '"Fraunces", serif', fontSize: 'clamp(80px, 14vw, 200px)', fontWeight: 400,
      lineHeight: 1.1, letterSpacing: -6, margin: '0 0 20px', paddingBottom: '0.1em',
      background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
      animation: done ? 'heroGlow 4s ease-in-out infinite' : 'none',
    }}>
      <span>{text.slice(0, charCount)}</span>
      {cursorVisible && (
        <span style={{
          WebkitTextFillColor: '#ff9ec7',
          animation: 'blink 1s step-end infinite',
          fontWeight: 300,
        }}>|</span>
      )}
    </h1>
  );
}

// --- CountUp number ---
function CountUp({ value, isActive }) {
  const match = String(value).match(/^(\d+)(.*)/);
  const target = match ? parseInt(match[1], 10) : 0;
  const suffix = match ? match[2] : value;
  const [current, setCurrent] = React.useState(0);

  React.useEffect(() => {
    if (!isActive) { setCurrent(0); return; }
    const duration = 1500;
    const start = performance.now();
    let raf;
    const step = (now) => {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setCurrent(Math.round(target * eased));
      if (progress < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [isActive, target]);

  return React.createElement(React.Fragment, null, current, suffix);
}

// --- MetricCard with hover ---
function MetricCard({ m, i, chromeGradient, isActive }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: '20px 16px', borderRadius: 20,
        background: 'var(--surface)', backdropFilter: 'blur(20px)',
        border: '1px solid var(--hairline)',
        boxShadow: hovered
          ? '0 8px 32px rgba(255,158,199,0.25), 0 0 0 1px rgba(255,158,199,0.3)'
          : '0 8px 32px rgba(0,0,0,0.2)',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'box-shadow 0.3s ease, transform 0.3s ease',
        animation: `cardFloat 6s ease-in-out ${i * 0.5}s infinite`,
        cursor: 'default',
      }}
    >
      <div style={{
        fontFamily: '"Fraunces", serif', fontSize: 36, fontWeight: 500,
        letterSpacing: -1, background: chromeGradient,
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', lineHeight: 1,
      }}>
        <CountUp value={m.value} isActive={isActive} />
      </div>
      <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 8, lineHeight: 1.4 }}>{m.label}</div>
    </div>
  );
}

// --- Mobile floating chat bubble + drawer ---
function MobileChatFAB({ isDark, chromeGradient }) {
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      {/* FAB button — below nav z-index when nav is present */}
      {!open && (
        <button onClick={() => setOpen(true)} style={{
          position: 'fixed', bottom: 24, right: 20, zIndex: 15,
          width: 56, height: 56, borderRadius: 28,
          background: chromeGradient,
          border: 'none', cursor: 'pointer',
          boxShadow: '0 6px 24px rgba(255,158,199,0.5)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22,
          animation: 'fabPulse 3s ease-in-out infinite',
        }}>
          <span style={{ lineHeight: 1 }}>💬</span>
        </button>
      )}

      {/* Chat drawer */}
      {open && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 60,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        }}>
          {/* Backdrop */}
          <div onClick={() => setOpen(false)} style={{
            position: 'absolute', inset: 0,
            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)',
          }} />

          {/* Drawer */}
          <div style={{
            position: 'relative', zIndex: 1,
            height: '80vh', maxHeight: 600,
            borderRadius: '20px 20px 0 0',
            overflow: 'hidden',
            animation: 'chatSlideUp 0.3s ease',
          }}>
            {/* Close button overlaid on top-right of chat header */}
            <button onClick={() => setOpen(false)} style={{
              position: 'absolute', top: 8, right: 12, zIndex: 2,
              background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)',
              border: 'none', cursor: 'pointer', borderRadius: 20,
              width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, color: isDark ? '#f8f0ff' : '#1a0f2e', lineHeight: 1,
            }}>×</button>

            {/* Chat fills the whole drawer */}
            <AIChat
              accent={isDark ? '#ff4f9e' : '#e84393'}
              bg={isDark ? '#14082a' : '#ffffff'}
              fg={isDark ? '#f8f0ff' : '#1a0f2e'}
              bubbleBg={isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}
              onAccent="#ffffff"
            />
          </div>
        </div>
      )}

      <style>{`
        @keyframes chatSlideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }
        @keyframes fabPulse {
          0%, 100% { box-shadow: 0 6px 24px rgba(255,158,199,0.5); }
          50% { box-shadow: 0 6px 32px rgba(255,158,199,0.7), 0 0 0 8px rgba(255,158,199,0.15); }
        }
      `}</style>
    </React.Fragment>
  );
}

function VariantB() {
  const P = window.PAULYN;
  const isMobile = useIsMobile();
  const [sparkleTrigger, setSparkleTrigger] = React.useState(0);
  const [activeTab, setActiveTab] = React.useState('home');
  const [transitioning, setTransitioning] = React.useState(false);
  const [visibleTab, setVisibleTab] = React.useState('home');
  const [isDark, setIsDark] = React.useState(true);

  React.useEffect(() => {
    const h = () => setSparkleTrigger(n => n + 1);
    window.addEventListener('paulyn-sparkle', h);
    return () => window.removeEventListener('paulyn-sparkle', h);
  }, []);

  React.useEffect(() => {
    const toggle = () => setIsDark(d => !d);
    window.addEventListener('paulyn-toggle-theme', toggle);
    return () => window.removeEventListener('paulyn-toggle-theme', toggle);
  }, []);

  React.useEffect(() => {
    document.body.style.background = isDark ? '#0a0514' : '#fdf6fa';
    document.documentElement.style.background = isDark ? '#0a0514' : '#fdf6fa';
  }, [isDark]);

  const navigateTo = React.useCallback((tab) => {
    if (tab === activeTab || transitioning) return;
    setTransitioning(true);
    setActiveTab(tab);
    setTimeout(() => {
      setVisibleTab(tab);
      setTransitioning(false);
    }, 300);
  }, [activeTab, transitioning]);

  React.useEffect(() => {
    window.__navigateTo = navigateTo;
    return () => { delete window.__navigateTo; };
  }, [navigateTo]);

  const darkTheme = {
    '--bg': '#0a0514', '--surface': 'rgba(255,255,255,0.04)', '--fg': '#f5f0ff', '--muted': '#b0a8cc',
    '--accent': '#ff9ec7', '--accent-2': '#a99eff', '--on-accent': '#0a0514',
    '--hairline': 'rgba(255,255,255,0.1)', '--chat-bg': 'rgba(255,255,255,0.05)', '--bubble-bg': 'rgba(255,255,255,0.08)',
  };
  const lightTheme = {
    '--bg': '#fdf6fa', '--surface': 'rgba(0,0,0,0.03)', '--fg': '#1a0f2e', '--muted': '#6b5e80',
    '--accent': '#e84393', '--accent-2': '#6c5ce7', '--on-accent': '#ffffff',
    '--hairline': 'rgba(0,0,0,0.1)', '--chat-bg': 'rgba(0,0,0,0.03)', '--bubble-bg': 'rgba(0,0,0,0.06)',
  };
  const theme = isDark ? darkTheme : lightTheme;

  const holoBg = isDark
    ? 'radial-gradient(ellipse at top left, rgba(255,158,199,0.15), transparent 50%), radial-gradient(ellipse at top right, rgba(169,158,255,0.15), transparent 50%), radial-gradient(ellipse at bottom, rgba(158,211,255,0.1), transparent 60%)'
    : 'radial-gradient(ellipse at top left, rgba(232,67,147,0.08), transparent 50%), radial-gradient(ellipse at top right, rgba(108,92,231,0.08), transparent 50%), radial-gradient(ellipse at bottom, rgba(158,211,255,0.06), transparent 60%)';

  const chromeGradient = 'linear-gradient(135deg, #ff9ec7 0%, #ffb8d9 20%, #fff5fb 35%, #d4c5ff 55%, #a99eff 80%, #9ed3ff 100%)';

  const tabs = [
    { id: 'home', label: 'home' },
    { id: 'game', label: 'game ✦' },
    { id: 'about', label: 'about' },
    { id: 'work', label: 'work' },
    { id: 'skills', label: 'skills' },
    { id: 'patent', label: 'patent' },
    { id: 'chat', label: 'chat' },
    { id: 'contact', label: 'contact' },
  ];

  return (
    <div className="variant-b" style={{ ...theme, background: 'var(--bg)', color: 'var(--fg)', fontFamily: '"Inter", system-ui, sans-serif', height: '100vh', display: 'flex', flexDirection: 'row', overflow: 'hidden', position: 'relative' }}>
      <SparkleTrail trigger={sparkleTrigger} />
      <div style={{ position: 'absolute', inset: 0, background: holoBg, pointerEvents: 'none', zIndex: 0 }} />

      {/* Sidebar nav — desktop */}
      {!isMobile && (
        <nav style={{
          position: 'relative', zIndex: 2, width: 200, flexShrink: 0,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          padding: '32px 0 32px 20px',
          borderRight: '1px solid var(--hairline)',
        }}>
          <div>
            <div onClick={() => navigateTo('home')} style={{ fontWeight: 700, fontSize: 15, letterSpacing: -0.3, cursor: 'pointer', marginBottom: 40, paddingRight: 16 }}>
              ♡ <span style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>paulyn.dev</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {tabs.map(t => (
                <span key={t.id} onClick={() => navigateTo(t.id)} style={{
                  padding: '9px 16px',
                  borderRadius: '12px 0 0 12px',
                  fontSize: 13,
                  fontWeight: activeTab === t.id ? 600 : 400,
                  cursor: 'pointer',
                  color: activeTab === t.id ? 'var(--on-accent)' : 'var(--muted)',
                  background: activeTab === t.id ? chromeGradient : 'transparent',
                  transition: 'all 0.2s ease',
                  letterSpacing: 0.2,
                }}>{t.id === 'home' ? '♡ home' : t.label}</span>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingRight: 16 }}>
            <button onClick={() => setIsDark(d => !d)}
              style={{ background: 'var(--surface)', border: '1px solid var(--hairline)', borderRadius: 20, padding: '6px 12px', cursor: 'pointer', fontSize: 12, color: 'var(--fg)', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 6 }}>
              {isDark ? '\u2600\uFE0F' : '\uD83C\uDF19'} {isDark ? 'light' : 'dark'}
            </button>
            <span style={{ fontSize: 10, color: 'var(--muted)', fontFamily: '"JetBrains Mono", monospace', letterSpacing: 1, opacity: 0.5 }}>
              ⌘K
            </span>
          </div>
        </nav>
      )}

      {/* Main content area */}
      <div style={{ position: 'relative', zIndex: 1, flex: 1, display: 'flex', flexDirection: 'column', height: '100%', minWidth: 0 }}>

        {/* Top nav — mobile */}
        {isMobile && (
          <nav style={{
            position: 'fixed', top: 0, left: 0, right: 0, zIndex: 20,
            display: 'flex', alignItems: 'center', gap: 4,
            padding: '10px 16px',
            background: isDark ? 'rgba(10,5,20,0.88)' : 'rgba(253,246,250,0.92)', backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
            borderBottom: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}`,
            overflowX: 'auto', WebkitOverflowScrolling: 'touch',
            scrollbarWidth: 'none',
          }}>
            {tabs.map(t => (
              <span key={t.id} onClick={() => navigateTo(t.id)} style={{
                padding: '7px 12px',
                borderRadius: 16,
                fontSize: 11,
                fontWeight: activeTab === t.id ? 600 : 500,
                cursor: 'pointer',
                whiteSpace: 'nowrap',
                color: activeTab === t.id ? 'var(--on-accent)' : 'var(--fg)',
                background: activeTab === t.id ? chromeGradient : 'transparent',
                transition: 'all 0.2s ease',
              }}>{t.id === 'home' ? '♡ home' : t.label}</span>
            ))}
            <span onClick={() => setIsDark(d => !d)} style={{
              padding: '7px 12px', borderRadius: 16, fontSize: 11, cursor: 'pointer', whiteSpace: 'nowrap',
              color: 'var(--fg)', background: 'var(--surface)', border: '1px solid var(--hairline)',
            }}>{isDark ? '\u2600\uFE0F' : '\uD83C\uDF19'}</span>
          </nav>
        )}

        {/* Tab content */}
        <div style={{ flex: 1, overflowY: 'auto', position: 'relative', paddingTop: isMobile ? 48 : 0 }}>
          <div key={visibleTab} className={`tab-content ${transitioning ? 'tab-exit' : 'tab-enter'}`}>

            {/* HOME */}
            {visibleTab === 'home' && (
              <section key={visibleTab} style={{ width: '100%', margin: '0 auto', padding: isMobile ? '24px 20px 32px' : '48px 60px 48px', position: 'relative', overflow: 'hidden' }}>
                <FloatingParticles />
                <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: isMobile ? 'center' : 'flex-start', textAlign: isMobile ? 'center' : 'left' }}>
                  {/* Status chip — consolidated badge + green dot */}
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: isMobile ? '6px 12px' : '7px 16px', borderRadius: 20, background: 'var(--surface)', backdropFilter: 'blur(20px)', border: '1px solid var(--hairline)', marginBottom: isMobile ? 14 : 18, fontSize: isMobile ? 10 : 11, animation: 'heroFadeUp 0.7s ease both' }}>
                    <span style={{ width: 8, height: 8, borderRadius: 4, background: '#6eff9e', boxShadow: '0 0 10px #6eff9e', animation: 'dotPulse 1.8s infinite' }} />
                    <span style={{ color: 'var(--fg)', fontWeight: 500 }}>lead full stack engineer</span>
                    <span style={{ color: 'var(--muted)' }}>· atlanta, ga</span>
                  </div>

                  {/* Typewriter title with inline chibi */}
                  <div style={{ marginBottom: isMobile ? 8 : 10, alignSelf: isMobile ? 'center' : 'flex-start' }}>
                    <TypewriterTitle text="paulyn" chromeGradient={chromeGradient} isActive={visibleTab} />
                  </div>

                  {/* Tagline */}
                  <div style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: isMobile ? 18 : 24, fontWeight: 400, color: 'var(--fg)', marginBottom: isMobile ? 12 : 16, animation: 'heroFadeUp 0.7s ease 1.4s both' }}>
                    <span style={{ opacity: 0.5 }}>~ </span>engineering things that <span style={{ color: 'var(--accent)' }}>sparkle</span><span style={{ opacity: 0.5 }}> ~</span>
                  </div>
                  {/* Description */}
                  <p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: 'var(--muted)', maxWidth: 560, margin: 0, marginBottom: isMobile ? 18 : 24, animation: 'heroFadeUp 0.7s ease 1.6s both' }}>
                    {P.tagline}
                  </p>
                  {/* CTA buttons */}
                  <div style={{ display: 'flex', gap: isMobile ? 8 : 10, justifyContent: isMobile ? 'center' : 'flex-start', flexWrap: 'wrap', marginBottom: isMobile ? 28 : 36, animation: 'heroFadeUp 0.7s ease 1.8s both' }}>
                    <span onClick={() => navigateTo('game')} style={{ padding: isMobile ? '11px 18px' : '12px 24px', borderRadius: 30, background: chromeGradient, color: '#1a0f2e', textDecoration: 'none', fontSize: isMobile ? 13 : 13, fontWeight: 600, boxShadow: '0 4px 20px rgba(255,158,199,0.4)', cursor: 'pointer' }}>play my game ✦</span>
                    <span onClick={() => navigateTo('about')} style={{ padding: isMobile ? '11px 18px' : '12px 24px', borderRadius: 30, border: '1px solid var(--hairline)', background: 'var(--surface)', backdropFilter: 'blur(10px)', color: 'var(--fg)', textDecoration: 'none', fontSize: isMobile ? 13 : 13, fontWeight: 500, cursor: 'pointer' }}>about me →</span>
                    <a href="uploads/Paulyn_Oh-resume.docx" download style={{ padding: isMobile ? '11px 18px' : '12px 24px', borderRadius: 30, border: '1px solid var(--hairline)', background: 'var(--surface)', backdropFilter: 'blur(10px)', color: 'var(--fg)', textDecoration: 'none', fontSize: isMobile ? 13 : 13, fontWeight: 500 }}>resume ↓</a>
                  </div>

                  {/* Metrics label */}
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12, animation: 'heroFadeUp 0.7s ease 1.9s both' }}>
                    ✦ by the numbers
                  </div>
                  {/* Metrics grid — full width */}
                  <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 12 : 14, width: '100%', animation: 'heroFadeUp 0.7s ease 2.0s both' }}>
                    {P.metrics.map((m, i) => (
                      <MetricCard key={i} m={m} i={i} chromeGradient={chromeGradient} isActive={visibleTab === 'home'} />
                    ))}
                  </div>
                </div>
              </section>
            )}

            {/* GAME */}
            {visibleTab === 'game' && (
              <section id="game" style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '20px 16px 40px' : '40px 40px 80px' }}>
                {/* Section header */}
                <div style={{ textAlign: 'center', marginBottom: isMobile ? 20 : 32 }}>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: isMobile ? 9 : 11, letterSpacing: isMobile ? 2 : 3, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8 }}>✦ press.start ✦</div>
                  <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: 'clamp(32px, 7vw, 88px)', fontWeight: 400, letterSpacing: -2, margin: '0 0 8px', lineHeight: 1.05, paddingBottom: '0.08em' }}>
                    pixel <em style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontStyle: 'italic' }}>paulyn</em> says hi <span style={{ color: 'var(--accent)' }}>♡</span>
                  </h2>
                  <p style={{ fontSize: isMobile ? 13 : 15, lineHeight: 1.65, color: 'var(--muted)', maxWidth: 540, margin: '0 auto' }}>
                    {isMobile ? 'catch ✦ sparkles, dodge ☕ coffee spills.' : 'a pixel version of me, and a little game to go with it. catch ✦ sparkles, dodge ☕ coffee spills.'}
                  </p>
                </div>

                {/* DIORAMA */}
                <div style={{
                  position: 'relative',
                  padding: isMobile ? 2 : 3,
                  borderRadius: isMobile ? 20 : 32,
                  background: chromeGradient,
                  boxShadow: isMobile ? '0 10px 40px rgba(255,158,199,0.2)' : '0 30px 90px rgba(255,158,199,0.3)',
                }}>
                  <div style={{
                    position: 'relative',
                    borderRadius: isMobile ? 18 : 29,
                    overflow: 'hidden',
                    background: 'radial-gradient(ellipse at 30% 100%, #3a1a5e 0%, #1a0828 50%, #0a0418 100%)',
                    minHeight: isMobile ? 'auto' : 'auto',
                  }}>
                    {/* Starfield background */}
                    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.6 }}>
                      {Array.from({ length: isMobile ? 20 : 40 }).map((_, i) => {
                        const size = Math.random() > 0.85 ? 3 : 2;
                        return (
                          <div key={i} style={{
                            position: 'absolute',
                            top: `${Math.random() * 100}%`,
                            left: `${Math.random() * 100}%`,
                            width: size, height: size,
                            background: i % 5 === 0 ? '#ff9ec7' : '#ffffff',
                            borderRadius: '50%',
                            boxShadow: `0 0 ${size * 2}px currentColor`,
                            color: i % 5 === 0 ? '#ff9ec7' : '#ffffff',
                            animation: `starTwinkle ${2 + Math.random() * 3}s ease-in-out ${Math.random() * 3}s infinite`,
                          }} />
                        );
                      })}
                    </div>

                    {/* Pixel grid ground */}
                    <div style={{
                      position: 'absolute',
                      bottom: 0, left: 0, right: 0,
                      height: isMobile ? 60 : 120,
                      background: 'linear-gradient(to top, rgba(255,158,199,0.08), transparent)',
                      backgroundImage: 'repeating-linear-gradient(90deg, rgba(255,158,199,0.1) 0, rgba(255,158,199,0.1) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(0deg, rgba(255,158,199,0.08) 0, rgba(255,158,199,0.08) 1px, transparent 1px, transparent 40px)',
                      maskImage: 'linear-gradient(to top, #000 0%, transparent 100%)',
                      WebkitMaskImage: 'linear-gradient(to top, #000 0%, transparent 100%)',
                    }} />

                    {/* Layout — stacked on mobile, side-by-side on desktop */}
                    <div style={{
                      position: 'relative',
                      display: isMobile ? 'flex' : 'grid',
                      flexDirection: 'column',
                      gridTemplateColumns: isMobile ? '1fr' : '220px 1fr',
                      gap: isMobile ? 16 : 24,
                      padding: isMobile ? '20px 12px 16px' : '32px 32px 0',
                      alignItems: isMobile ? 'center' : 'end',
                    }}>
                      {/* Chibi — hidden on mobile (already in hero title) */}
                      {!isMobile && (
                        <div style={{ position: 'relative', paddingBottom: 24 }}>
                          <div style={{
                            position: 'relative',
                            display: 'inline-block',
                            padding: '10px 16px',
                            borderRadius: 16,
                            background: '#fff',
                            color: '#1a0828',
                            fontFamily: '"JetBrains Mono", monospace',
                            fontSize: 12,
                            fontWeight: 600,
                            marginBottom: 12,
                            marginLeft: 40,
                            boxShadow: '0 4px 20px rgba(255,158,199,0.4)',
                            animation: 'bubbleFloat 3s ease-in-out infinite',
                          }}>
                            come play with me! →
                            <div style={{
                              position: 'absolute',
                              bottom: -6,
                              left: 20,
                              width: 12, height: 12,
                              background: '#fff',
                              transform: 'rotate(45deg)',
                            }} />
                          </div>

                          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
                            <PixelAvatar size={200} />
                            <div style={{
                              position: 'absolute',
                              bottom: 2,
                              left: '50%',
                              width: 120, height: 14,
                              transform: 'translateX(-50%)',
                              background: 'radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%)',
                              borderRadius: '50%',
                              filter: 'blur(4px)',
                              zIndex: -1,
                            }} />
                          </div>

                          <div style={{ position: 'absolute', top: 60, right: 10, fontSize: 20, color: '#ffd4a8', animation: 'sparkleFloat 4s ease-in-out infinite', filter: 'drop-shadow(0 0 8px #ffd4a8)' }}>✦</div>
                          <div style={{ position: 'absolute', top: 140, left: 0, fontSize: 14, color: '#ff9ec7', animation: 'sparkleFloat 3s ease-in-out 1s infinite', filter: 'drop-shadow(0 0 6px #ff9ec7)' }}>✦</div>
                          <div style={{ position: 'absolute', bottom: 80, right: 0, fontSize: 16, color: '#a99eff', animation: 'sparkleFloat 5s ease-in-out 0.5s infinite', filter: 'drop-shadow(0 0 8px #a99eff)' }}>✦</div>
                        </div>
                      )}
                      {isMobile && (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                          <div style={{ animation: 'chibiBob 3s ease-in-out infinite' }}>
                            <PixelAvatar size={56} />
                          </div>
                          <div style={{
                            padding: '8px 14px', borderRadius: 14,
                            background: '#fff', color: '#1a0828',
                            fontFamily: '"JetBrains Mono", monospace',
                            fontSize: 11, fontWeight: 600,
                            boxShadow: '0 4px 16px rgba(255,158,199,0.3)',
                          }}>
                            come play with me! -&gt;
                          </div>
                        </div>
                      )}

                      {/* CRT-framed game */}
                      <div style={{ paddingBottom: isMobile ? 12 : 32, width: '100%' }}>
                        <div style={{
                          display: 'inline-flex',
                          alignItems: 'center',
                          gap: 8,
                          padding: '6px 12px',
                          borderRadius: 20,
                          background: 'rgba(255,255,255,0.08)',
                          backdropFilter: 'blur(10px)',
                          border: '1px solid rgba(255,158,199,0.4)',
                          fontFamily: '"JetBrains Mono", monospace',
                          fontSize: isMobile ? 9 : 10,
                          letterSpacing: 1.5,
                          textTransform: 'uppercase',
                          color: 'var(--accent)',
                          marginBottom: isMobile ? 8 : 12,
                        }}>
                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff9ec7', boxShadow: '0 0 8px #ff9ec7', animation: 'pulse 1.5s ease-in-out infinite' }} />
                          sparkle hunt · v1.0
                        </div>

                        <div style={{
                          position: 'relative',
                          padding: isMobile ? 6 : 12,
                          borderRadius: isMobile ? 12 : 18,
                          background: 'linear-gradient(145deg, #2a1845, #1a0f2e 50%, #0a0418)',
                          boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.5), 0 10px 40px rgba(0,0,0,0.6)',
                          border: '1px solid rgba(255,158,199,0.2)',
                        }}>
                          {!isMobile && <div style={{
                            position: 'absolute',
                            top: 18, right: 18,
                            width: 8, height: 8,
                            borderRadius: '50%',
                            background: '#ff9ec7',
                            boxShadow: '0 0 12px #ff9ec7, inset 0 0 4px rgba(255,255,255,0.6)',
                            animation: 'pulse 2s ease-in-out infinite',
                          }} />}
                          <div style={{ borderRadius: isMobile ? 8 : 10, overflow: 'hidden', position: 'relative', width: '100%' }}>
                            <SparkleHunt accent="#ff9ec7" chromeGradient={chromeGradient} />
                            <div style={{
                              position: 'absolute',
                              inset: 0,
                              pointerEvents: 'none',
                              background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 3px)',
                              mixBlendMode: 'multiply',
                            }} />
                          </div>
                        </div>

                        <div style={{
                          marginTop: isMobile ? 8 : 12,
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          fontFamily: '"JetBrains Mono", monospace',
                          fontSize: isMobile ? 9 : 10,
                          color: 'var(--muted)',
                          letterSpacing: 1,
                        }}>
                          <span>{isMobile ? 'tap to move' : '← → arrows · a / d · tap'}</span>
                          <span style={{ color: 'var(--accent)' }}>gold ✦ = 5 pts</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <style>{`
                  @keyframes starTwinkle {
                    0%, 100% { opacity: 0.3; transform: scale(1); }
                    50% { opacity: 1; transform: scale(1.3); }
                  }
                  @keyframes bubbleFloat {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-4px); }
                  }
                  @keyframes sparkleFloat {
                    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
                    50% { transform: translateY(-8px) rotate(180deg); opacity: 1; }
                  }
                  @keyframes pulse {
                    0%, 100% { opacity: 1; }
                    50% { opacity: 0.4; }
                  }
                `}</style>
              </section>
            )}

            {/* ABOUT */}
            {visibleTab === 'about' && (
              <section id="about" style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '24px 16px 40px' : '40px 40px 60px' }}>
                {/* Bio + Terminal */}
                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 48, alignItems: 'center', marginBottom: isMobile ? 32 : 64 }}>
                  <div>
                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>✦ about.me</div>
                    <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 32 : 56, fontWeight: 400, letterSpacing: -2, margin: '0 0 24px', lineHeight: 1 }}>
                      hi, i'm <span style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontStyle: 'italic' }}>paulyn</span> ♡
                    </h2>
                    <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--muted)', marginBottom: 16 }}>
                      Lead Full Stack Engineer at T-Mobile. I architect Angular micro-frontends, Java Spring Boot microservices on MongoDB, and AI-augmented engineering workflows that actually ship to production.
                    </p>
                    <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--muted)' }}>
                      I bring AI into my daily workflow thoughtfully — using it as a teammate, not a shortcut — to move faster without cutting corners. Personal velocity: <strong style={{ color: 'var(--accent)' }}>3–5× ✦</strong>. Team delivery: <strong style={{ color: 'var(--accent)' }}>+25%</strong>.
                    </p>
                    <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                      {['Angular', 'React', 'Spring Boot', 'MongoDB', 'AWS', 'Azure', 'AI Workflows'].map(t => (
                        <span key={t} style={{ fontSize: 12, padding: '6px 14px', borderRadius: 14, background: 'var(--surface)', border: '1px solid var(--hairline)', color: 'var(--fg)' }}>{t}</span>
                      ))}
                    </div>
                  </div>
                  <div style={{ height: isMobile ? 280 : 420, padding: 4, borderRadius: 20, background: chromeGradient, boxShadow: '0 20px 60px rgba(255,158,199,0.25)' }}>
                    <Terminal prompt="paulyn ♡" accent={isDark ? '#ff9ec7' : '#e84393'} bg={isDark ? '#0a0514' : '#f5f0ff'} fg={isDark ? '#f5f0ff' : '#1a0f2e'} />
                  </div>
                </div>

                {/* Off-the-clock */}
                <div style={{ marginTop: 40 }}>
                  <div style={{ textAlign: 'center', marginBottom: 40 }}>
                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>✦ off the clock ✦</div>
                    <h3 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 28 : 44, fontWeight: 400, letterSpacing: -1.5, margin: '0 0 12px', lineHeight: 1.05 }}>
                      the <em style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>whole</em> engineer
                    </h3>
                    <p style={{ fontSize: 15, color: 'var(--muted)', maxWidth: 560, margin: '0 auto', lineHeight: 1.6 }}>
                      I'm more than my git log. The same drive, creativity, and taste show up in the things I do after hours — and they make me better at the day job, too.
                    </p>
                  </div>
                  <OffTheClock chromeGradient={chromeGradient} dark={true} />
                </div>

                {/* Architecture */}
                <div style={{ marginTop: 64 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: isMobile ? 24 : 48, alignItems: 'center' }}>
                    <div>
                      <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>✦ architecture.sys</div>
                      <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 28 : 44, fontWeight: 400, letterSpacing: -1.5, margin: '0 0 20px', lineHeight: 1.05 }}>
                        systems that scale,<br /><span style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontStyle: 'italic' }}>gracefully</span>.
                      </h2>
                      <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--muted)' }}>
                        Micro-frontend shell · NgRx + RxJS · Spring Boot orchestration · MongoDB · AWS & Azure · CI/CD standardized across teams. Built for 1K+ enterprise users and regulatory needs.
                      </p>
                    </div>
                    <div style={{ padding: 24, borderRadius: 20, background: 'var(--surface)', backdropFilter: 'blur(20px)', border: '1px solid var(--hairline)' }}>
                      <ArchitectureDiagram height={280} />
                    </div>
                  </div>
                </div>

                {/* Philosophy + Now */}
                <div style={{ marginTop: 64 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, alignItems: 'stretch' }}>
                    <div>
                      <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>✦ philosophy.ts</div>
                      <h3 style={{ fontFamily: '"Fraunces", serif', fontSize: 28, fontWeight: 400, letterSpacing: -0.8, margin: '0 0 16px', lineHeight: 1.1 }}>
                        how I think about <em style={{ color: 'var(--accent)' }}>AI as a teammate</em>
                      </h3>
                      <LiveCodeSnippet />
                    </div>
                    <div>
                      <NowWidget />
                    </div>
                  </div>
                </div>

                {/* Side Projects */}
                <div style={{ marginTop: 64 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
                    <div>
                      <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 32 : 56, fontWeight: 400, letterSpacing: -2, margin: 0, lineHeight: 1 }}>
                        made with <em style={{ color: 'var(--accent)' }}>love</em>, outside of hours ♡
                      </h2>
                    </div>
                    <p style={{ fontSize: 14, color: 'var(--muted)', maxWidth: 320, margin: 0, lineHeight: 1.5 }}>
                      the things I build when no one's asking — because I can't stop shipping.
                    </p>
                  </div>
                  <SideProjects />
                </div>

                {/* Testimonials */}
                <div style={{ marginTop: 64 }}>
                  <div style={{ textAlign: 'center', marginBottom: 32 }}>
                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>✦ kind.words</div>
                    <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 28 : 44, fontWeight: 400, letterSpacing: -1.5, margin: 0, fontStyle: 'italic' }}>
                      what people say
                    </h2>
                  </div>
                  <TestimonialCarousel />
                </div>
              </section>
            )}

            {/* WORK */}
            {visibleTab === 'work' && (
              <section id="work" style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '24px 16px 40px' : '40px 40px 60px' }}>
                <div style={{ textAlign: 'center', marginBottom: 48 }}>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>✦ experience.log ✦</div>
                  <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: 'clamp(48px, 7vw, 72px)', fontWeight: 400, letterSpacing: -2.5, margin: '0 0 12px', lineHeight: 1, background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
                    where I've worked
                  </h2>
                  <p style={{ fontSize: 15, color: 'var(--muted)', maxWidth: 520, margin: '0 auto', lineHeight: 1.6 }}>
                    {P.years} years of building things that matter — from self-checkout flows to enterprise platforms.
                  </p>
                </div>

                <div style={{ position: 'relative', maxWidth: 900, margin: '0 auto' }}>
                  <div style={{ position: 'absolute', left: isMobile ? 10 : 20, top: 8, bottom: 8, width: 2, background: 'linear-gradient(to bottom, var(--accent), var(--accent-2))', borderRadius: 1, opacity: 0.4 }} />
                  {P.experience.map((job, i) => (
                    <div key={i} style={{ position: 'relative', paddingLeft: isMobile ? 36 : 56, marginBottom: i < P.experience.length - 1 ? (isMobile ? 28 : 48) : 0 }}>
                      <div style={{
                        position: 'absolute', left: isMobile ? 2 : 12, top: 8,
                        width: 18, height: 18, borderRadius: '50%',
                        background: i === 0 ? chromeGradient : 'var(--surface)',
                        border: '2px solid var(--accent)',
                        boxShadow: i === 0 ? '0 0 16px rgba(255,158,199,0.5)' : 'none',
                      }} />
                      <div style={{
                        padding: isMobile ? 18 : 28, borderRadius: 20,
                        background: 'var(--surface)', backdropFilter: 'blur(20px)',
                        border: '1px solid var(--hairline)',
                        transition: 'box-shadow 0.3s ease',
                      }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
                          <div>
                            <h3 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 22 : 28, fontWeight: 400, letterSpacing: -0.8, margin: 0, lineHeight: 1.2 }}>
                              <span style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{job.company}</span>
                            </h3>
                            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg)', marginTop: 4 }}>{job.role}</div>
                          </div>
                          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: 'var(--muted)', textAlign: 'right', lineHeight: 1.5 }}>
                            {job.dates}<br />{job.location}
                          </div>
                        </div>
                        <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--muted)', margin: '0 0 16px' }}>{job.summary}</p>
                        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                          {job.bullets.map((b, j) => (
                            <li key={j} style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--muted)', paddingLeft: 20, position: 'relative' }}>
                              <span style={{ position: 'absolute', left: 0, top: 2, color: 'var(--accent)', fontSize: 10 }}>✦</span>
                              {b}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Education footer */}
                <div style={{ maxWidth: 900, margin: '36px auto 0', paddingLeft: isMobile ? 36 : 56, position: 'relative' }}>
                  <div style={{ position: 'absolute', left: isMobile ? 2 : 12, top: 10, width: 18, height: 18, borderRadius: '50%', background: 'var(--surface)', border: '2px solid var(--accent-2)' }} />
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '16px 24px', borderRadius: 16, background: 'var(--surface)', border: '1px solid var(--hairline)', flexWrap: 'wrap' }}>
                    <div style={{ fontSize: 20 }}>🎓</div>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg)' }}>{P.education.degree} · {P.education.school}</div>
                      <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{P.education.concentration} · {P.education.honors}</div>
                    </div>
                  </div>
                </div>
              </section>
            )}

            {/* SKILLS */}
            {visibleTab === 'skills' && (
              <section id="skills" style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '24px 16px 40px' : '40px 40px 40px', textAlign: 'center' }}>
                <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>✦ skills.map ✦</div>
                <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 40 : 72, fontWeight: 400, letterSpacing: -2.5, margin: '0 0 12px', lineHeight: 1, background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
                  my stack
                </h2>
                <p style={{ fontSize: 16, color: 'var(--muted)', marginBottom: 40 }}>{isMobile ? 'tap to explore' : 'hover for the full picture'} ♡</p>
                <div style={{ padding: 24, borderRadius: 24, background: 'var(--surface)', backdropFilter: 'blur(20px)', border: '1px solid var(--hairline)' }}>
                  <SkillsConstellation height={isMobile ? 300 : 500} />
                </div>
              </section>
            )}

            {/* PATENT */}
            {visibleTab === 'patent' && (
              <section id="patent" style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 40px 40px' }}>
                <div style={{ padding: 3, borderRadius: 28, background: chromeGradient, boxShadow: '0 20px 80px rgba(169,158,255,0.2)' }}>
                  <div style={{ padding: isMobile ? '24px 16px' : '48px', borderRadius: 25, background: '#0e0820' }}>
                    <div style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
                      <div style={{ textAlign: 'center', marginBottom: 32 }}>
                        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>✦ achievement.unlocked</div>
                        <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 48 : 96, fontWeight: 400, letterSpacing: isMobile ? -2 : -4, margin: '0 0 10px', lineHeight: 0.9, background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
                          rescue rover
                        </h2>
                        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12, color: 'var(--muted)', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', justifyContent: 'center' }}>
                          <a href="https://patents.google.com/patent/US12302448B2/en" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none', borderBottom: '1px dashed var(--accent)', cursor: 'pointer' }}>
                            US 12,302,448 ↗
                          </a>
                          <span style={{ opacity: 0.6 }}>· filed dec 30, 2021 · granted may 13, 2025</span>
                        </div>
                      </div>

                      <div style={{ maxWidth: 880, margin: '0 auto 36px', textAlign: 'center' }}>
                        <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', margin: '0 0 14px' }}>
                          My first patent — co-invented while <strong style={{ color: 'var(--fg)' }}>mentoring my first two interns</strong>. We took a "what if?" intern brainstorm all the way through invention disclosure, prior-art review, and USPTO claim drafting. Six inventors total, granted after 3+ years of prosecution. ✨
                        </p>
                        <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--muted)', margin: 0 }}>
                          <em style={{ color: 'var(--fg)' }}>Rescue system</em> — a coordinated swarm of <strong style={{ color: 'var(--fg)' }}>rover devices</strong> that locate people trapped in disasters, collapsed buildings, or remote terrain by triangulating <strong style={{ color: 'var(--fg)' }}>BLE iBeacon signals</strong> from their phones. Works <em>without any network connection</em>, coordinates a mesh between nearby victims' phones, and rotates which device broadcasts to extend the whole group's battery life.
                        </p>
                      </div>

                      <div style={{ borderRadius: 20, overflow: 'hidden', border: '1px solid var(--hairline)', marginBottom: 24 }}>
                        <PatentRover height={isMobile ? 200 : 380} />
                      </div>

                      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
                        {[
                          { t: 'Rover Swarm + Trilateration', d: 'Two+ rovers use RSSI from BLE to pinpoint a victim\'s phone in 3D space' },
                          { t: 'Round-Robin Power Conservation', d: 'Phones compare battery levels, rotate which one emits the beacon' },
                          { t: 'Offline Mesh Network', d: 'Phones form a peer mesh — no cell tower, no Wi-Fi required' },
                          { t: 'Autonomous + AI-Driven Rovers', d: 'ML-based obstacle avoidance, chemical & audio sensor fusion' },
                          { t: 'Impact-Triggered SOS', d: 'Accelerometer detects a fall or crash — app auto-opens with countdown' },
                          { t: 'IoT Telemetry Dashboard', d: 'Losant-backed MQTT pipeline streams rover data in real time' },
                        ].map(item => (
                          <div key={item.t} style={{ padding: '14px 16px', borderRadius: 12, background: 'var(--surface)', border: '1px solid var(--hairline)' }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg)', marginBottom: 4, lineHeight: 1.3 }}>{item.t}</div>
                            <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.5 }}>{item.d}</div>
                          </div>
                        ))}
                      </div>

                      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, alignItems: 'stretch' }}>
                        <div style={{ padding: '14px 18px', borderRadius: 14, background: 'var(--surface)', border: '1px solid var(--hairline)', fontSize: 13, color: 'var(--fg)', lineHeight: 1.6 }}>
                          ♡ <strong>behind the scenes:</strong> I mentored two interns end-to-end through USPTO filing — they're listed as co-inventors on the granted patent. Senior engineers <em>multiply</em>, they don't just ship.
                        </div>
                        <div style={{ padding: '14px 18px', borderRadius: 14, background: 'var(--surface)', border: '1px solid var(--hairline)', fontSize: 11, color: 'var(--muted)', fontFamily: '"JetBrains Mono", monospace', lineHeight: 1.7 }}>
                          classifications: H04W76/50 · G01S13/46 · G05D1/0088 · H04W4/90<br/>
                          stack: Android/Java · BLE iBeacon · MQTT · Particle.io Argon · Losant IoT
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            )}

            {/* CHAT */}
            {visibleTab === 'chat' && (
              <section id="chat" style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '20px 16px 40px' : '40px 40px 40px' }}>
                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 48, alignItems: 'start' }}>
                  <div>
                    <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: isMobile ? 9 : 11, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>✦ ai.bestie</div>
                    <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: isMobile ? 36 : 56, fontWeight: 400, letterSpacing: -2, margin: '0 0 16px', lineHeight: 1 }}>
                      chat with my<br /><span style={{ background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontStyle: 'italic' }}>ai twin</span> ♡
                    </h2>
                    <p style={{ fontSize: isMobile ? 14 : 15, lineHeight: 1.65, color: 'var(--muted)', marginBottom: 20 }}>
                      ask her anything about me — projects, stack, the patent. she knows. ✨
                    </p>
                    {!isMobile && React.createElement(React.Fragment, null,
                      React.createElement('h3', { style: { fontSize: 12, textTransform: 'uppercase', letterSpacing: 1.5, color: 'var(--muted)', margin: '0 0 12px' } }, '✦ also cool'),
                      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
                        P.achievements.slice(1).map((a, i) => (
                          <div key={i} style={{ padding: 14, borderRadius: 12, background: 'var(--surface)', border: '1px solid var(--hairline)' }}>
                            <div style={{ fontSize: 14, fontWeight: 500 }}>{a.title}</div>
                            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{a.subtitle}</div>
                          </div>
                        ))
                      )
                    )}
                  </div>
                  <div style={{ height: isMobile ? 400 : 520, padding: 3, borderRadius: isMobile ? 16 : 20, background: chromeGradient, boxShadow: '0 20px 60px rgba(169,158,255,0.2)' }}>
                    <AIChat
                      accent={isDark ? '#ff4f9e' : '#e84393'}
                      bg={isDark ? '#14082a' : '#ffffff'}
                      fg={isDark ? '#f8f0ff' : '#1a0f2e'}
                      bubbleBg={isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}
                      onAccent="#ffffff"
                    />
                  </div>
                  {isMobile && (
                    <details style={{ marginTop: 16 }}>
                      <summary style={{
                        fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                        textTransform: 'uppercase', letterSpacing: 1.5,
                        color: 'var(--muted)', cursor: 'pointer', padding: '8px 0',
                        listStyle: 'none',
                      }}>
                        tap to see more cool stuff
                      </summary>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
                        {P.achievements.slice(1).map((a, i) => (
                          <div key={i} style={{ padding: 14, borderRadius: 12, background: 'var(--surface)', border: '1px solid var(--hairline)' }}>
                            <div style={{ fontSize: 14, fontWeight: 500 }}>{a.title}</div>
                            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{a.subtitle}</div>
                          </div>
                        ))}
                      </div>
                    </details>
                  )}
                </div>
              </section>
            )}

            {/* CONTACT */}
            {visibleTab === 'contact' && (
              <section id="contact" style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '24px 20px 40px' : '40px 40px 40px' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: isMobile ? '50vh' : '60vh', textAlign: 'center' }}>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: isMobile ? 9 : 11, letterSpacing: isMobile ? 2 : 3, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>✦ let's build ✦</div>
                  <h2 style={{ fontFamily: '"Fraunces", serif', fontSize: 'clamp(48px, 12vw, 160px)', fontWeight: 400, letterSpacing: -3, margin: '0 0 24px', lineHeight: 0.9, background: chromeGradient, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
                    say hi ♡
                  </h2>
                  <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--muted)', maxWidth: 480, margin: '0 auto 32px', lineHeight: 1.65, padding: isMobile ? '0 8px' : 0 }}>
                    I'm always up for a good conversation about systems, AI, or anything that sparkles.
                  </p>
                  <div style={{ display: 'flex', gap: isMobile ? 8 : 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 40 }}>
                    <a href={`mailto:${P.email}`} style={{ padding: isMobile ? '14px 20px' : '16px 28px', borderRadius: 30, background: chromeGradient, color: '#1a0f2e', textDecoration: 'none', fontSize: isMobile ? 13 : 15, fontWeight: 600, boxShadow: '0 4px 20px rgba(255,158,199,0.4)' }}>{P.email}</a>
                    <a href={P.linkedinUrl} target="_blank" rel="noreferrer" style={{ padding: isMobile ? '14px 20px' : '16px 28px', borderRadius: 30, background: 'var(--surface)', border: '1px solid var(--hairline)', color: 'var(--fg)', textDecoration: 'none', fontSize: isMobile ? 13 : 15, fontWeight: 500 }}>LinkedIn →</a>
                    <a href={P.githubUrl} target="_blank" rel="noreferrer" style={{ padding: isMobile ? '14px 20px' : '16px 28px', borderRadius: 30, background: 'var(--surface)', border: '1px solid var(--hairline)', color: 'var(--fg)', textDecoration: 'none', fontSize: isMobile ? 13 : 15, fontWeight: 500 }}>GitHub →</a>
                    <a href="uploads/Paulyn_Oh-resume.docx" download style={{ padding: isMobile ? '14px 20px' : '16px 28px', borderRadius: 30, background: 'var(--surface)', border: '1px solid var(--hairline)', color: 'var(--fg)', textDecoration: 'none', fontSize: isMobile ? 13 : 15, fontWeight: 500 }}>resume ↓</a>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--muted)', fontFamily: '"JetBrains Mono", monospace', letterSpacing: 2 }}>
                    ✦ ♡ ✨ ★ ✧ ♡ ✦
                  </div>
                  <div style={{ marginTop: 12, fontSize: 10, color: 'var(--muted)', fontFamily: '"JetBrains Mono", monospace', opacity: 0.5 }}>
                    press ⌘K anywhere · try the konami code ↑↑↓↓←→←→ba
                  </div>
                </div>
              </section>
            )}

          </div>
        </div>
      </div>
      <CommandPalette />
      <KonamiEasterEgg />
    </div>
  );
}

window.VariantB = VariantB;