// Packet Bandit Lab — Home Screen (Enhanced)

// Full-bleed scene break between the hero and the card grid. Breaks out of
// the page's max-width container with `margin-inline: calc(50% - 50vw)`.
const MANIFESTO_LINES = [
  'show the work',
  'break things in public',
  'keep the receipts',
];

const ManifestoStrip = () => (
  <div className="manifesto-strip">
    <div className="manifesto-strip__rule" aria-hidden="true" />
    <p className="manifesto-strip__line">
      {MANIFESTO_LINES.map((line, i) => (
        <React.Fragment key={line}>
          <span className="manifesto-strip__word">{line}</span>
          {i < MANIFESTO_LINES.length - 1 && (
            <span className="manifesto-strip__sep" aria-hidden="true">·</span>
          )}
        </React.Fragment>
      ))}
    </p>
    <div className="manifesto-strip__rule" aria-hidden="true" />
  </div>
);

const HomeScreen = ({ onNavigate }) => {
  const [bootDone, setBootDone] = React.useState(false);
  const [showContent, setShowContent] = React.useState(false);
  const [scrollY, setScrollY] = React.useState(0);
  const [isCompact, setIsCompact] = React.useState(() => window.innerWidth <= 720);

  // Boot sequence
  React.useEffect(() => {
    const t1 = setTimeout(() => setBootDone(true), 200);
    const t2 = setTimeout(() => setShowContent(true), 600);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  // Parallax
  React.useEffect(() => {
    let rafId;
    const onScroll = () => {
      cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(() => setScrollY(window.scrollY));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(rafId); };
  }, []);

  // Responsive hero treatment for the mascot.
  React.useEffect(() => {
    const onResize = () => setIsCompact(window.innerWidth <= 720);
    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const { displayed: line1, done: d1 } = useTypewriter('packet-bandit --init lab', 45, 300);
  const { displayed: line2, done: d2 } = useTypewriter('Loading: cybersecurity · pmp · networking · tools', 30, 1200);
  const { displayed: line3 } = useTypewriter('Status: online · iterating in public_', 35, d2 ? 2400 : 99999);

  const fadeUp = (delay = 0) => ({
    opacity: bootDone ? 1 : 0,
    transform: bootDone ? 'translateY(0)' : 'translateY(28px)',
    transition: `opacity 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s, transform 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
  });

  return (
    <div>
      {/* ── HERO ── */}
      <section style={{
        minHeight: isCompact ? 'auto' : '100vh',
        display: 'flex',
        flexDirection: isCompact ? 'column' : 'row',
        alignItems: isCompact ? 'stretch' : 'center',
        position: 'relative',
        padding: isCompact ? '3.75rem 0 5.5rem' : '5rem 0 3rem',
      }}>
        {/* Mascot — parallax right side */}
        <div style={{
          position: isCompact ? 'relative' : 'absolute',
          right: isCompact ? 'auto' : '-5%',
          top: isCompact ? 'auto' : '50%',
          transform: isCompact ? `translateY(${scrollY * 0.025}px)` : `translateY(calc(-50% + ${scrollY * 0.12}px))`,
          width: isCompact ? 'min(72vw, 280px)' : 'clamp(260px, 38vw, 460px)',
          margin: isCompact ? '1.4rem auto 0' : 0,
          alignSelf: isCompact ? 'center' : 'auto',
          order: isCompact ? 2 : 'initial',
          opacity: bootDone ? (isCompact ? 0.86 : 0.92) : 0,
          transition: 'opacity 1.2s ease 0.4s',
          pointerEvents: 'auto', zIndex: 1,
        }}>
          <MascotScanner src="assets/packet-bandit-mascot.png" alt="Packet Bandit mascot" />
        </div>

        {/* Left: text stack */}
        <div style={{ flex: isCompact ? '0 1 auto' : '1 1 460px', zIndex: 2, display: 'flex', flexDirection: 'column', gap: '1.5rem', maxWidth: 600, order: isCompact ? 1 : 'initial' }}>

          {/* Terminal boot lines */}
          <div style={{ ...fadeUp(0), fontFamily: 'ui-monospace,monospace', fontSize: '0.8rem', lineHeight: 1.9,
            background: 'linear-gradient(135deg, rgba(2,6,23,0.85), rgba(2,6,23,0.7))',
            border: '1px solid rgba(74,222,128,0.22)',
            borderRadius: '0.6rem',
            padding: '0.85rem 1rem',
            backdropFilter: 'blur(10px)',
            position: 'relative', overflow: 'hidden',
            boxShadow: 'inset 0 0 30px rgba(74,222,128,0.04), 0 8px 24px rgba(0,0,0,0.3)',
          }}>
            <div style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'repeating-linear-gradient(0deg, transparent 0 2px, rgba(74,222,128,0.025) 2px 3px)',
            }} />
            <div style={{ position: 'relative' }}><span style={{ color: '#4ade80' }}>$</span> <span style={{ color: '#e5e7eb' }}>{line1}</span>{!d1 && <span style={{ color: '#f97316', animation: 'blink 1s step-end infinite' }}>█</span>}</div>
            {d1 && <div style={{ position: 'relative' }}><span style={{ color: '#9ca3af' }}>[INFO]</span> <span style={{ color: '#38bdf8' }}>{line2}</span>{!d2 && <span style={{ color: '#38bdf8', animation: 'blink 1s step-end infinite' }}>█</span>}</div>}
            {d2 && <div style={{ position: 'relative' }}><span style={{ color: '#9ca3af' }}>[SYS]</span>{'  '}<span style={{ color: '#f97316' }}>{line3}</span></div>}
          </div>

          {/* Big display title */}
          <h1 style={{
            ...fadeUp(0.15),
            fontSize: 'clamp(3rem, 7.4vw, 5.8rem)', fontWeight: 800,
            letterSpacing: '-0.035em', lineHeight: 0.98, margin: 0,
            position: 'relative',
          }}>
            <span style={{ color: '#e5e7eb', display: 'block' }}>Packet</span>
            <span style={{
              display: 'inline-block',
              background: 'linear-gradient(135deg, #f97316 0%, #ec4899 30%, #38bdf8 60%, #8b5cf6 100%)',
              backgroundSize: '200% 200%',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
              animation: 'shimmerGradient 6s ease-in-out infinite',
              position: 'relative',
            }}>Bandit</span>
            <span style={{ color: '#e5e7eb', display: 'block' }}>Lab</span>
            {/* gradient underline accent */}
            <span aria-hidden="true" style={{
              display: 'block',
              width: 'clamp(60px, 14vw, 120px)',
              height: '3px',
              marginTop: '1rem',
              background: 'linear-gradient(90deg, #f97316, #38bdf8, #8b5cf6)',
              borderRadius: '2px',
              boxShadow: '0 0 14px rgba(249,115,22,0.45)',
            }} />
            <style>{`
              @keyframes shimmerGradient {
                0%, 100% { background-position: 0% 50%; }
                50%      { background-position: 100% 50%; }
              }
            `}</style>
          </h1>

          {/* Subtitle */}
          <p style={{
            ...fadeUp(0.25),
            fontSize: 'clamp(0.97rem, 1.8vw, 1.15rem)',
            color: '#9ca3af', maxWidth: 480, margin: 0, lineHeight: 1.7,
            textWrap: 'pretty',
          }}>
            A public learning lab for PMP prep, cybersecurity writeups, networking labs,
            and whatever else seems worth building, testing, and documenting.
          </p>

          {/* CTAs */}
          <div style={{ ...fadeUp(0.3), display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
            <BtnPrimary onClick={() => onNavigate('writeups')}>Writeups →</BtnPrimary>
            <BtnSecondary onClick={() => onNavigate('pmp')}>PMP Journey</BtnSecondary>
          </div>

          {/* Status strip — tagline + live status */}
          <div style={{
            ...fadeUp(0.35),
            display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center',
          }}>
            <span style={{
              fontFamily: 'ui-monospace,monospace', fontSize: '0.7rem', letterSpacing: '0.18em',
              color: '#fb923c',
              border: '1px solid rgba(249,115,22,0.28)',
              background: 'linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.02))',
              borderRadius: '4px',
              padding: '0.28rem 0.7rem', display: 'inline-block',
              textTransform: 'uppercase',
            }}>
              your data · our treasure
            </span>
            <span style={{
              fontFamily: 'ui-monospace,monospace', fontSize: '0.68rem', letterSpacing: '0.14em',
              color: '#6ee7b7',
              border: '1px solid rgba(74,222,128,0.28)',
              background: 'rgba(74,222,128,0.06)',
              borderRadius: '4px',
              padding: '0.28rem 0.6rem',
              display: 'inline-flex', alignItems: 'center', gap: '0.4rem',
              textTransform: 'uppercase',
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%', background: '#22c55e',
                boxShadow: '0 0 8px rgba(34,197,94,0.9)',
                animation: 'pulse 2s ease-in-out infinite',
              }} />
              live
            </span>
          </div>
        </div>

        {/* Scroll hint */}
        <div style={{
          position: 'absolute', bottom: '2rem', left: '50%', transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.4rem',
          color: '#6b7280', fontSize: '0.7rem', letterSpacing: '0.1em', textTransform: 'uppercase',
          animation: 'scrollBob 2s ease-in-out infinite', opacity: showContent ? 1 : 0,
          transition: 'opacity 0.5s ease 1.5s',
        }}>
          <svg viewBox="0 0 24 24" fill="none" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
            style={{ width: 18, height: 18, stroke: '#6b7280' }}>
            <path d="M12 5v14M5 12l7 7 7-7"/>
          </svg>
          scroll
        </div>
      </section>

      {/* ── CONTENT ── */}
      <div style={{ position: 'relative', zIndex: 1, opacity: showContent ? 1 : 0, transition: 'opacity 0.6s ease 0.8s' }}>

        {/* Scene break — full-bleed manifesto strip, breaks the card-grid cadence */}
        <ManifestoStrip />

        <main style={{ display: 'grid', gridTemplateColumns: 'minmax(0,2fr) minmax(0,1.25fr)', gap: '1.75rem' }}
          className="main-grid">

          {/* LEFT COLUMN */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>

            <RevealBlock delay={0}>
              <TerminalCard title="~/about.md" accent="#4ade80">
                <SectionHeading>About</SectionHeading>
                <p style={{ margin: 0, fontSize: '0.97rem', color: '#cbd5e1', lineHeight: 1.75 }}>
                  This is a living learning lab for project management, cybersecurity, networking, small tools,
                  and writeups. Expect things to change, break, and get refactored often.
                </p>
              </TerminalCard>
            </RevealBlock>

            <RevealBlock delay={0.08}>
              <TerminalCard title="~/focus.md" accent="#f97316">
                <SectionHeading accent>Current focus</SectionHeading>
                <p style={{ fontSize: '0.97rem', color: '#cbd5e1', lineHeight: 1.75, margin: '0 0 0.75rem' }}>
                  The biggest goal right now is earning my PMP by{' '}
                  <span style={{ color: '#f59e0b', fontWeight: 600 }}>June 2026</span> while continuing to build
                  cybersecurity and networking skills in public.
                </p>
                <p style={{ fontSize: '0.97rem', color: '#cbd5e1', lineHeight: 1.75, margin: '0 0 0.75rem' }}>
                  New track:{' '}
                  <a href="#" onClick={e => { e.preventDefault(); onNavigate('writeups'); }}
                    style={{ color: '#38bdf8', textDecoration: 'none', borderBottom: '1px solid rgba(56,189,248,0.3)' }}>
                    TryHackMe Learning Rooms
                  </a>{' '}— beginner-friendly notes for concept-focused rooms.
                </p>
                <p style={{ fontSize: '0.97rem', color: '#cbd5e1', lineHeight: 1.75, margin: 0 }}>
                  New page:{' '}
                  <a href="#" onClick={e => { e.preventDefault(); onNavigate('pmp'); }}
                    style={{ color: '#38bdf8', textDecoration: 'none', borderBottom: '1px solid rgba(56,189,248,0.3)' }}>
                    PMP Journey
                  </a>{' '}— notes, reflections, and milestones from the road to the exam.
                </p>
              </TerminalCard>
            </RevealBlock>

            <RevealBlock delay={0.12}>
              <TerminalCard title="~/lab-notes.md" accent="#38bdf8">
                <SectionHeading>Lab notes</SectionHeading>
                <p style={{ fontSize: '0.8rem', color: '#9ca3af', margin: '0 0 0.75rem', fontFamily: 'ui-monospace,monospace' }}>
                  # recent and planned
                </p>
                <ul style={{ paddingLeft: 0, listStyle: 'none', fontSize: '0.95rem', color: '#cbd5e1', lineHeight: 1, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
                  {[
                    { text: 'PMP Journey — study reflections, process notes, and progress toward June 2026.', page: 'pmp', link: true },
                    { text: 'Bringing this site online and wiring it to a custom domain.', link: false },
                    { text: 'Experiments with static hosting + APIs + databases.', link: false },
                    { text: 'Networking, security, and home lab projects worth keeping.', link: false },
                    { text: 'TryHackMe writeups — room solutions with methodology breakdowns.', page: 'writeups', link: true },
                  ].map((item, i) => (
                    <li key={i} style={{ display: 'flex', gap: '0.6rem', alignItems: 'flex-start' }}>
                      <span style={{ color: '#f97316', fontFamily: 'ui-monospace,monospace', fontSize: '0.8rem', marginTop: '0.18rem', flexShrink: 0 }}>▸</span>
                      <span style={{ lineHeight: 1.65 }}>
                        {item.link
                          ? <a href="#" onClick={e => { e.preventDefault(); onNavigate(item.page); }}
                              style={{ color: '#38bdf8', textDecoration: 'none', borderBottom: '1px solid rgba(56,189,248,0.25)' }}>{item.text}</a>
                          : item.text}
                      </span>
                    </li>
                  ))}
                </ul>
              </TerminalCard>
            </RevealBlock>

            <RevealBlock delay={0.16}>
              <TerminalCard title="~/playground.md" accent="#8b5cf6">
                <SectionHeading>Playground</SectionHeading>
                <p style={{ fontSize: '0.97rem', color: '#cbd5e1', lineHeight: 1.75, margin: '0 0 0.75rem' }}>
                  Space reserved for small HTML/JS games, UI prototypes, and other interactive demos.
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '0.25rem' }}>
                  {[
                    { label: 'Play Snake', href: '/snake.html' },
                    { label: 'Deep Time', href: '/timeline.html' },
                    { label: 'The Inner Citadel', href: '/stoic.html' },
                  ].map(item => (
                    <a key={item.label} href={item.href}
                      style={{
                        display: 'inline-flex', alignItems: 'center', gap: '0.3rem',
                        fontFamily: 'ui-monospace,monospace', fontSize: '0.78rem',
                        color: '#8b5cf6', padding: '0.25rem 0.65rem',
                        background: 'rgba(139,92,246,0.1)', border: '1px solid rgba(139,92,246,0.25)',
                        borderRadius: '4px', textDecoration: 'none',
                      }}>
                      ./{item.label} →
                    </a>
                  ))}
                </div>
              </TerminalCard>
            </RevealBlock>
          </div>

          {/* RIGHT COLUMN */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>

            <RevealBlock delay={0.05}>
              <GlassCard glow>
                <SectionHeading>Status</SectionHeading>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e',
                    boxShadow: '0 0 10px rgba(34,197,94,0.9)', display: 'inline-block',
                    animation: 'pulse 2s ease-in-out infinite' }} />
                  <span style={{ fontFamily: 'ui-monospace,monospace', fontSize: '0.78rem', color: '#6ee7b7', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                    Online · early stage
                  </span>
                </div>
              </GlassCard>
            </RevealBlock>

            <RevealBlock delay={0.1}>
              <GlassCard>
                <SectionHeading>Focus areas</SectionHeading>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
                  {[
                    { t: 'PMP', c: 'amber' },
                    { t: 'Cybersecurity', c: 'orange' },
                    { t: 'Networking', c: 'green' },
                    { t: 'HTML/CSS/JS', c: 'blue' },
                    { t: 'Static frontend', c: 'purple' },
                    { t: 'APIs + DB', c: 'purple' },
                  ].map(b => <Badge key={b.t} color={b.c}>{b.t}</Badge>)}
                </div>
              </GlassCard>
            </RevealBlock>

            <RevealBlock delay={0.15}>
              <GlassCard>
                <SectionHeading>Quick nav</SectionHeading>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
                  <BtnPrimary onClick={() => onNavigate('writeups')} style={{ justifyContent: 'space-between', width: '100%' }}>
                    <span>TryHackMe Writeups</span><span>→</span>
                  </BtnPrimary>
                  <BtnSecondary onClick={() => onNavigate('pmp')} style={{ justifyContent: 'space-between', width: '100%' }}>
                    <span>PMP Journey</span><span>→</span>
                  </BtnSecondary>
                </div>
              </GlassCard>
            </RevealBlock>

            <RevealBlock delay={0.18}>
              <GlassCard>
                <TCPHandshakeLab />
              </GlassCard>
            </RevealBlock>

            {/* Stat card */}
            <RevealBlock delay={0.2}>
              <div style={{
                background: 'rgba(2,6,23,0.8)', border: '1px solid rgba(249,115,22,0.2)',
                borderRadius: '0.85rem', padding: '1.25rem', backdropFilter: 'blur(12px)',
              }}>
                <SectionHeading accent>By the numbers</SectionHeading>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
                  {[
                    { n: String(WRITEUPS.length), label: 'Writeups' },
                    { n: String(FILTERS.length - 1), label: 'Categories' },
                    { n: '36+', label: 'Months PM exp.' },
                    { n: '2026', label: 'PMP target' },
                  ].map(s => (
                    <div key={s.label} style={{
                      padding: '0.65rem 0.75rem',
                      background: 'rgba(15,23,42,0.5)', borderRadius: '0.5rem',
                      border: '1px solid rgba(148,163,184,0.1)',
                    }}>
                      <div style={{ fontSize: '1.5rem', fontWeight: 800, color: '#f97316', fontFamily: 'ui-monospace,monospace', lineHeight: 1 }}>{s.n}</div>
                      <div style={{ fontSize: '0.68rem', color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: '0.25rem', fontFamily: 'ui-monospace,monospace' }}>{s.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </RevealBlock>
          </div>
        </main>

        <PageFooter />
      </div>
    </div>
  );
};

Object.assign(window, { HomeScreen });