// portfolio/pages-work.jsx — Projects (text list), ProjectDetail, Blog (plain list), BlogPost

function BackLink({ label, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: 'none', border: 'none', cursor: 'pointer', padding: '0 0 32px',
      display: 'flex', alignItems: 'center', gap: '6px',
      fontFamily: "'JetBrains Mono', monospace", fontSize: '11px',
      color: '#444', transition: 'color .15s', letterSpacing: '0.04em',
    }}
    onMouseEnter={e => e.currentTarget.style.color = '#888'}
    onMouseLeave={e => e.currentTarget.style.color = '#444'}>
      ← {label}
    </button>
  );
}

function StatusBadge({ status }) {
  return <span className="tag-pill" style={{ fontSize: '9px', color: '#555' }}>{status}</span>;
}

// ── Projects — text list ───────────────────────────────────────────────────
function Projects({ navigate }) {
  const P = window.PORTFOLIO;
  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '780px' }}>
      <div style={{ marginBottom: '8px' }}>
        <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>Projects</span>
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#555', marginBottom: '48px' }}>Things I've built.</p>

      {P.projects.map(p => (
        <button key={p.id} className="proj-row" onClick={() => navigate(`/projects/${p.id}`)}
          style={{
            display: 'block', width: '100%', textAlign: 'left', background: 'transparent',
            border: 'none', borderBottom: '1px solid #1a1a1a', padding: '22px 0', cursor: 'pointer',
          }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
            <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '1.05rem', fontWeight: 600, color: '#ece9e4' }}>{p.name}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexShrink: 0, marginLeft: '16px' }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a' }}>{p.year}</span>
              <StatusBadge status={p.status} />
            </div>
          </div>
          <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#666', lineHeight: 1.55, marginBottom: '12px', maxWidth: '540px' }}>{p.tagline}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
            {p.stack.map(s => <span key={s} className="tag-pill">{s}</span>)}
          </div>
        </button>
      ))}
    </div>
  );
}

// ── Project Detail ─────────────────────────────────────────────────────────
function ProjectDetail({ id, navigate }) {
  const P = window.PORTFOLIO;
  const project = P.projects.find(p => p.id === id);

  if (!project) return (
    <div style={{ padding: '56px 48px' }}>
      <BackLink label="All Projects" onClick={() => navigate('/projects')} />
      <p style={{ color: '#555' }}>Project not found.</p>
    </div>
  );

  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '720px' }}>
      <BackLink label="All Projects" onClick={() => navigate('/projects')} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '6px' }}>
        <h1 style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>{project.name}</h1>
        <StatusBadge status={project.status} />
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#666', marginBottom: '40px' }}>{project.tagline}</p>

      {/* Meta */}
      <div style={{ display: 'flex', gap: '32px', marginBottom: '40px', paddingBottom: '32px', borderBottom: '1px solid #1a1a1a' }}>
        {[['Year', project.year], ['Category', project.category], ['Status', project.status]].map(([k, v]) => (
          <div key={k}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '9px', color: '#3a3a3a', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '6px' }}>{k}</div>
            <div style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#ece9e4' }}>{v}</div>
          </div>
        ))}
      </div>

      {/* Links — only shown if present */}
      {(project.github || project.live) && (
        <div style={{ display: 'flex', gap: '10px', marginBottom: '36px' }}>
          {project.github && (
            <a href={project.github} target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: '6px',
              fontFamily: "'JetBrains Mono', monospace", fontSize: '11px',
              color: '#888', border: '1px solid #222', borderRadius: '6px',
              padding: '7px 14px', textDecoration: 'none', transition: 'color .15s, border-color .15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.color = '#ece9e4'; e.currentTarget.style.borderColor = '#444'; }}
            onMouseLeave={e => { e.currentTarget.style.color = '#888'; e.currentTarget.style.borderColor = '#222'; }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
              </svg>
              GitHub
            </a>
          )}
          {project.live && (
            <a href={project.live} target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: '6px',
              fontFamily: "'JetBrains Mono', monospace", fontSize: '11px',
              color: '#ece9e4', background: '#1c1c1c', border: '1px solid #2a2a2a',
              borderRadius: '6px', padding: '7px 14px', textDecoration: 'none',
              transition: 'background .15s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = '#242424'}
            onMouseLeave={e => e.currentTarget.style.background = '#1c1c1c'}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                <polyline points="15 3 21 3 21 9" />
                <line x1="10" y1="14" x2="21" y2="3" />
              </svg>
              Live
            </a>
          )}
        </div>
      )}

      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '15px', color: '#888', lineHeight: 1.75, marginBottom: '36px' }}>{project.description}</p>

      {/* Stack */}
      <div style={{ marginBottom: '40px' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '12px' }}>Stack</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
          {project.stack.map(s => <span key={s} className="tag-pill" style={{ fontSize: '11px', padding: '4px 10px' }}>{s}</span>)}
        </div>
      </div>

      {/* More projects */}
      <div style={{ borderTop: '1px solid #1a1a1a', paddingTop: '36px' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '16px' }}>More Projects</div>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          {P.projects.filter(p => p.id !== id).slice(0, 3).map(p => (
            <button key={p.id} onClick={() => navigate(`/projects/${p.id}`)} style={{
              background: '#141414', border: '1px solid #202020', borderRadius: '7px',
              padding: '10px 14px', cursor: 'pointer', textAlign: 'left',
            }}>
              <div style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#ece9e4', marginBottom: '2px' }}>{p.name}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a' }}>{p.year}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Blog — plain list ──────────────────────────────────────────────────────
function Blog({ navigate }) {
  const P = window.PORTFOLIO;
  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '780px' }}>
      <div style={{ marginBottom: '8px' }}>
        <span style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4' }}>Things I Write</span>
      </div>
      <p style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#555', marginBottom: '48px' }}>
        Engineering, infrastructure, and life from Lagos.
      </p>

      {P.posts.map(p => (
        <button key={p.id} className="blog-row" onClick={() => navigate(`/blog/${p.id}`)}
          style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            width: '100%', textAlign: 'left', background: 'transparent',
            border: 'none', borderBottom: '1px solid #1a1a1a', padding: '14px 8px', cursor: 'pointer',
          }}>
          <span style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '14px', color: '#888' }}>{p.title}</span>
          <div style={{ display: 'flex', gap: '14px', alignItems: 'center', flexShrink: 0, marginLeft: '20px' }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a' }}>{p.tag}</span>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#2a2a2a' }}>{p.date}</span>
          </div>
        </button>
      ))}
    </div>
  );
}

// ── Blog Post ──────────────────────────────────────────────────────────────
function BlogPost({ id, navigate }) {
  const P = window.PORTFOLIO;
  const post = P.posts.find(p => p.id === id);

  if (!post) return (
    <div style={{ padding: '56px 48px' }}>
      <BackLink label="Blog" onClick={() => navigate('/blog')} />
      <p style={{ color: '#555' }}>Post not found.</p>
    </div>
  );

  return (
    <div className="page-enter" style={{ padding: '56px 48px', maxWidth: '680px' }}>
      <BackLink label="Blog" onClick={() => navigate('/blog')} />
      <div style={{ marginBottom: '8px' }}>
        <span className="tag-pill" style={{ fontSize: '10px' }}>{post.tag}</span>
      </div>
      <h1 style={{ fontFamily: "'Lora', Georgia, serif", fontSize: '2rem', fontWeight: 700, color: '#ece9e4', lineHeight: 1.2, marginBottom: '14px', marginTop: '12px' }}>{post.title}</h1>
      <div style={{ display: 'flex', gap: '16px', marginBottom: '44px' }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#444' }}>{post.date}</span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#333' }}>·</span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '11px', color: '#444' }}>{post.readTime} read</span>
      </div>

      <div style={{ borderTop: '1px solid #1a1a1a', paddingTop: '36px' }}>
        {(post.content || '').split('\n\n').map((para, i) => (
          <p key={i} style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '16px', color: '#999', lineHeight: 1.8, marginBottom: '24px' }}>
            {para}
          </p>
        ))}
      </div>

      <div style={{ borderTop: '1px solid #1a1a1a', paddingTop: '36px', marginTop: '12px' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#3a3a3a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: '16px' }}>More Posts</div>
        {P.posts.filter(p => p.id !== id).slice(0, 3).map(p => (
          <button key={p.id} className="blog-row" onClick={() => navigate(`/blog/${p.id}`)}
            style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              width: '100%', textAlign: 'left', background: 'transparent',
              border: 'none', borderBottom: '1px solid #1a1a1a', padding: '12px 8px', cursor: 'pointer',
            }}>
            <span style={{ fontFamily: "'DM Sans', system-ui, sans-serif", fontSize: '13px', color: '#888' }}>{p.title}</span>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '10px', color: '#333', flexShrink: 0, marginLeft: '16px' }}>{p.date}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Projects, ProjectDetail, Blog, BlogPost });