// Packet Bandit Lab — PMP Journey Screen (Enhanced)

const PMP_JOURNAL_ENTRIES = [
  {
    accent: '#f59e0b',
    date: 'Apr 5, 2026',
    title: 'Learning Is the Real Skill',
    href: '/pmp-learning-is-the-real-skill.html',
    body: <>The first big PMP takeaway that really landed had less to do with formulas and more to do with attention, memory, and building a study process that actually sticks.</>,
    quote: 'If the material feels flat, I need to study in a way that makes it matter.',
    delay: 0.05,
  },
  {
    accent: '#14b8a6',
    date: 'Apr 17, 2026',
    title: 'I Built a PMP Study Engine, Not Just a Notes Folder',
    href: '/pmp-study-engine.html',
    body: <>A private workspace that organizes study material, transcripts, practice questions, and a searchable concept graph — without publicly naming the exact sources behind it.</>,
    quote: 'I learn faster when the material is organized into a system I can question, compare, and revisit.',
    delay: 0.1,
  },
  {
    accent: '#8b5cf6',
    date: 'Apr 17, 2026',
    title: 'PMP Knowledge Graph',
    href: '/pmp-knowledge-graph.html',
    body: <>The graph is the part that made the project feel like a living system. In Obsidian it started looking less like notes and more like a neural network of connected ideas.</>,
    quote: 'The study material became much more useful once I could see it as a map instead of a pile.',
    delay: 0.15,
  },
];

const PMPScreen = ({ onNavigate }) => {
  const [heroVisible, setHeroVisible] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setHeroVisible(true), 80);
    return () => clearTimeout(t);
  }, []);

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

  const { displayed: cmdLine } = useTypewriter('open ~/pmp-journey.md --mode=study', 36, 300);

  const noteCard = (accent = '#f59e0b') => ({
    background: 'rgba(2,6,23,0.85)',
    border: '1px solid rgba(148,163,184,0.14)',
    borderLeft: `3px solid ${accent}`,
    borderRadius: '0.85rem',
    padding: '1.3rem',
    backdropFilter: 'blur(14px)',
    WebkitBackdropFilter: 'blur(14px)',
    boxShadow: '0 14px 40px rgba(0,0,0,0.3)',
  });

  return (
    <div style={{ position: 'relative', zIndex: 1, padding: '2.5rem 0 5rem' }}>

      {/* Nav */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '2.5rem', flexWrap: 'wrap' }}>
        <a href="#" onClick={e => { e.preventDefault(); onNavigate('home'); }}
          style={{
            color: '#38bdf8', textDecoration: 'none', fontSize: '0.78rem',
            padding: '0.3rem 0.7rem', border: '1px solid rgba(56,189,248,0.2)',
            borderRadius: '4px', background: 'rgba(56,189,248,0.05)',
            fontFamily: 'ui-monospace,monospace', display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
          }}>
          ← cd ..
        </a>
        <span style={{ fontFamily: 'ui-monospace,monospace', fontSize: '0.78rem', color: '#6b7280', display: 'flex', gap: '0.35rem', alignItems: 'center' }}>
          <span style={{ color: '#4ade80' }}>~</span>
          <span>/</span>
          <span style={{ color: '#f59e0b' }}>pmp-journey</span>
        </span>
      </div>

      {/* Terminal command */}
      <div style={{
        ...fadeUp(0),
        fontFamily: 'ui-monospace,monospace', fontSize: '0.78rem',
        background: 'rgba(2,6,23,0.8)', border: '1px solid rgba(245,158,11,0.2)',
        borderRadius: '0.5rem', padding: '0.65rem 1rem',
        marginBottom: '2.5rem', backdropFilter: 'blur(8px)',
        display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
      }}>
        <span style={{ color: '#4ade80' }}>$</span>
        <span style={{ color: '#e5e7eb' }}>{cmdLine}</span>
        <span style={{ color: '#f59e0b', animation: 'blink 1s step-end infinite' }}>█</span>
      </div>

      {/* Hero eyebrow + title */}
      <div style={{ ...fadeUp(0.05), marginBottom: '0.75rem' }}>
        <Badge color="amber">PMP Journey</Badge>
      </div>
      <h1 style={{
        ...fadeUp(0.1),
        fontSize: 'clamp(2rem,5vw,3.2rem)', fontWeight: 800, lineHeight: 1.1,
        background: 'linear-gradient(135deg,#f59e0b,#14b8a6)',
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
        margin: '0 0 1rem', fontFamily: 'system-ui,sans-serif',
      }}>
        Road to PMP Certification
      </h1>
      <p style={{ ...fadeUp(0.14), color: '#94a3b8', fontSize: '1rem', maxWidth: 540, margin: '0 0 2.5rem', lineHeight: 1.7 }}>
        Documenting the full journey — study methods, process notes, and milestone reflections on the path to passing the PMP exam by June 2026.
      </p>

      {/* Hero grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 0.9fr', gap: '1.5rem', marginBottom: '2rem' }}
        className="hero-grid">

        {/* Main card */}
        <RevealBlock delay={0}>
          <div style={noteCard('#f59e0b')}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.7rem', marginBottom: '1.25rem' }}>
              {[
                { label: 'Target Date', value: 'June 2026', valueColor: '#f59e0b' },
                { label: 'Status',      value: 'Active prep', valueColor: '#4ade80' },
                { label: 'Experience',  value: '36+ months PM', valueColor: '#e5e7eb' },
                { label: 'Education',   value: '4-yr degree', valueColor: '#e5e7eb' },
              ].map(g => (
                <div key={g.label} style={{
                  border: '1px solid rgba(148,163,184,0.12)', borderRadius: '0.65rem',
                  padding: '0.7rem 0.85rem', background: 'rgba(2,6,23,0.5)',
                }}>
                  <div style={{ fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#94a3b8', marginBottom: '0.3rem', fontFamily: 'ui-monospace,monospace' }}>
                    {g.label}
                  </div>
                  <div style={{ fontSize: '0.97rem', color: g.valueColor, fontWeight: 600 }}>{g.value}</div>
                </div>
              ))}
            </div>
            <p style={{ color: '#94a3b8', fontSize: '0.95rem', margin: 0, lineHeight: 1.7, fontFamily: 'Georgia,"Times New Roman",serif' }}>
              Documenting the full journey — study methods, process notes, and milestone reflections on the path to the exam.
            </p>
          </div>
        </RevealBlock>

        {/* Current focus */}
        <RevealBlock delay={0.08}>
          <div style={{ ...noteCard('#14b8a6'), height: '100%' }}>
            <SectionHeading>Current Focus</SectionHeading>
            <p style={{ color: '#94a3b8', fontSize: '0.95rem', margin: '0 0 1rem', lineHeight: 1.7, fontFamily: 'Georgia,"Times New Roman",serif' }}>
              Deep-diving into PMBOK 7, Agile/Hybrid frameworks, and Predictive project lifecycle approaches.
            </p>
            <div style={{
              padding: '0.85rem 1rem', borderRadius: '0.65rem',
              border: '1px solid rgba(20,184,166,0.25)', background: 'rgba(20,184,166,0.07)',
              marginBottom: '1rem',
            }}>
              <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: '0.68rem', color: '#6b7280', marginBottom: '0.4rem' }}>
                <span style={{ color: '#4ade80' }}>#</span> memory-hook
              </div>
              <p style={{ color: '#d1fae5', margin: 0, fontSize: '0.93rem', fontFamily: 'Georgia,"Times New Roman",serif', fontStyle: 'italic' }}>
                "Predictive = plan first, Agile = adapt first, Hybrid = both."
              </p>
            </div>
            <a href="/pmp-study-engine.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: '0.4rem',
              padding: '0.4rem 0.75rem', borderRadius: '999px',
              border: '1px solid rgba(20,184,166,0.3)', background: 'rgba(20,184,166,0.08)',
              color: '#5eead4', textDecoration: 'none', fontSize: '0.82rem',
              fontFamily: 'ui-monospace,monospace',
            }}>→ study-engine</a>
          </div>
        </RevealBlock>
      </div>

      {/* ECO domains bar */}
      <RevealBlock delay={0.12}>
        <div style={{
          background: 'rgba(2,6,23,0.8)', border: '1px solid rgba(245,158,11,0.15)',
          borderRadius: '0.85rem', padding: '1.3rem', marginBottom: '2rem',
          backdropFilter: 'blur(12px)',
        }}>
          <SectionHeading>ECO Domains</SectionHeading>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
            {[
              { name: 'People',              pct: 42, color: '#f59e0b' },
              { name: 'Process',             pct: 50, color: '#14b8a6' },
              { name: 'Business Environment', pct: 8,  color: '#8b5cf6' },
            ].map(d => (
              <div key={d.name}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', color: '#94a3b8', marginBottom: '0.35rem' }}>
                  <span style={{ fontFamily: 'ui-monospace,monospace', fontSize: '0.78rem' }}>{d.name}</span>
                  <strong style={{ color: d.color, fontFamily: 'ui-monospace,monospace' }}>{d.pct}%</strong>
                </div>
                <div style={{ background: 'rgba(148,163,184,0.08)', borderRadius: 4, height: 7, overflow: 'hidden' }}>
                  <div style={{
                    height: 7, borderRadius: 4, width: `${d.pct}%`,
                    background: `linear-gradient(90deg, ${d.color}, ${d.color}99)`,
                    boxShadow: `0 0 8px ${d.color}66`,
                    transition: 'width 1s cubic-bezier(0.16,1,0.3,1)',
                  }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </RevealBlock>

      {/* Two col — notes + principles */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: '1.35rem' }}
        className="two-col">

        {/* Journal notes */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.35rem' }}>

          {PMP_JOURNAL_ENTRIES.map(entry => {
            const lift = (el) => {
              el.style.transform = 'translateY(-3px)';
              el.style.boxShadow = `0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px ${entry.accent}33`;
            };
            const rest = (el) => {
              el.style.transform = 'translateY(0)';
              el.style.boxShadow = '0 14px 40px rgba(0,0,0,0.3)';
            };
            return (
            <RevealBlock key={entry.href} delay={entry.delay}>
              <a href={entry.href} style={{
                ...noteCard(entry.accent),
                display: 'block', textDecoration: 'none', color: 'inherit',
                transition: 'transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s',
              }}
                onMouseEnter={e => lift(e.currentTarget)}
                onMouseLeave={e => rest(e.currentTarget)}
                onFocus={e => lift(e.currentTarget)}
                onBlur={e => rest(e.currentTarget)}>
                <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: '0.65rem', color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.55rem' }}>
                  {entry.date}
                </div>
                <h2 style={{ fontSize: '1.2rem', margin: '0 0 0.75rem', color: '#e5e7eb', fontFamily: 'Georgia,"Times New Roman",serif', fontWeight: 700, lineHeight: 1.3 }}>
                  {entry.title}
                </h2>
                <p style={{ color: '#94a3b8', fontSize: '0.95rem', margin: '0 0 1rem', lineHeight: 1.75, fontFamily: 'Georgia,"Times New Roman",serif' }}>
                  {entry.body}
                </p>
                <div style={{
                  padding: '0.85rem 1rem', borderRadius: '0.65rem',
                  border: `1px solid ${entry.accent}3a`, background: `${entry.accent}12`,
                  marginBottom: '0.9rem',
                }}>
                  <div style={{ fontFamily: 'ui-monospace,monospace', fontSize: '0.65rem', color: '#6b7280', marginBottom: '0.35rem' }}>
                    <span style={{ color: '#4ade80' }}>#</span> core-idea
                  </div>
                  <span style={{ color: '#e5e7eb', fontSize: '0.93rem', fontFamily: 'Georgia,"Times New Roman",serif', fontStyle: 'italic' }}>
                    "{entry.quote}"
                  </span>
                </div>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
                  fontFamily: 'ui-monospace,monospace', fontSize: '0.78rem',
                  color: entry.accent, letterSpacing: '0.05em',
                }}>
                  read entry →
                </span>
              </a>
            </RevealBlock>
            );
          })}
        </div>

        {/* 12 Principles */}
        <RevealBlock delay={0.08}>
          <div style={{
            background: 'rgba(2,6,23,0.8)', border: '1px solid rgba(148,163,184,0.13)',
            borderRadius: '0.85rem', padding: '1.3rem',
            backdropFilter: 'blur(12px)',
          }}>
            <SectionHeading>12 Principles</SectionHeading>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.55rem' }}>
              {['Stewardship','Team','Stakeholders','Value','Systems','Leadership','Tailoring','Quality','Complexity','Risk','Adaptability','Change'].map((p, i) => {
                const colors = ['#f59e0b','#14b8a6','#8b5cf6','#38bdf8','#f97316','#4ade80','#f59e0b','#14b8a6','#8b5cf6','#38bdf8','#f97316','#4ade80'];
                return (
                  <div key={p} style={{
                    border: `1px solid ${colors[i]}22`,
                    borderRadius: '0.5rem',
                    padding: '0.5rem 0.45rem',
                    background: `${colors[i]}0a`,
                    fontSize: '0.7rem', color: '#94a3b8',
                    textAlign: 'center', lineHeight: 1.3,
                    fontFamily: 'ui-monospace,monospace',
                    transition: 'all 0.2s',
                  }}>
                    <div style={{ width: 5, height: 5, borderRadius: '50%', background: colors[i], margin: '0 auto 0.3rem', opacity: 0.8, boxShadow: `0 0 4px ${colors[i]}` }} />
                    {p}
                  </div>
                );
              })}
            </div>
          </div>
        </RevealBlock>
      </div>

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

Object.assign(window, { PMPScreen });