// components/ProjectModal.jsx — case-study overlay · v2 print style
function ProjectModal({ project, onClose }) {
  // close on Escape
  React.useEffect(() => {
    if (!project) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [project, onClose]);

  if (!project) return null;

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0,
      background: 'rgba(31,36,42,0.45)',
      zIndex: 1000,
      display: 'flex',
      alignItems: 'flex-start',
      justifyContent: 'center',
      padding: '60px 24px',
      overflowY: 'auto',
      animation: 'fade-in-up 280ms cubic-bezier(0,0,0.2,1) both',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: '#FFFFFF',
        border: '1px solid var(--c-border)',
        maxWidth: 980,
        width: '100%',
        boxShadow: 'var(--shadow-lg)',
        overflow: 'hidden',
        position: 'relative',
      }}>
        {/* Header bar */}
        <div style={{
          padding: '16px 28px',
          borderBottom: '1px solid var(--c-border)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 700, color: 'var(--ink-lilac)', letterSpacing: '-0.02em' }}>
              {project.number}
            </span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, color: 'var(--c-muted)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              Case study · TRK {project.number}
            </span>
          </div>
          <button onClick={onClose} style={{
            background: 'transparent',
            border: '1px solid var(--c-border)',
            color: 'var(--c-whisper)',
            padding: '8px 14px',
            fontFamily: 'var(--font-body)',
            fontSize: 11.5,
            fontWeight: 600,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            cursor: 'pointer',
          }}>
            ✕ Close
          </button>
        </div>

        {/* Hero */}
        <div className="case-pad" style={{ padding: '48px 56px 28px', position: 'relative' }}>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', color: 'var(--ink-lilac)', textTransform: 'uppercase', marginBottom: 14 }}>
            {project.venue}  ·  {project.year}
          </div>
          <h1 className="case-title" style={{
            fontFamily: 'var(--font-display)',
            fontSize: 50,
            fontWeight: 700,
            lineHeight: 1,
            letterSpacing: '-0.03em',
            color: 'var(--c-smoke)',
            marginBottom: 14,
          }}>
            {project.title}
          </h1>
          <div style={{
            fontFamily: 'var(--font-body)',
            fontSize: 20,
            color: 'var(--c-whisper)',
            lineHeight: 1.45,
            maxWidth: '36ch',
            marginBottom: 26,
          }}>
            {project.subtitle}
          </div>
          <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
            <Meta label="Role" value={project.role} />
            <Meta label="Duration" value={project.duration} />
            <Meta label="Tags" value={
              <span style={{ display: 'inline-flex', gap: 6, flexWrap: 'wrap' }}>
                {project.tags.map((t, i) => <Tag key={i} variant={t.variant}>{t.label}</Tag>)}
              </span>
            } />
          </div>
        </div>

        {/* Sections */}
        <div style={{ padding: '12px 56px 56px' }} className="prose-host case-pad">
          {project.sections.map((sec, i) => <CaseSection key={i} section={sec} />)}
        </div>

        {/* Footer */}
        <div style={{
          padding: '18px 28px',
          borderTop: '1px solid var(--c-border)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          background: 'var(--c-void)',
          fontFamily: 'var(--font-body)',
          fontSize: 11.5,
          fontWeight: 600,
          letterSpacing: '0.12em',
          color: 'var(--c-muted)',
          textTransform: 'uppercase',
        }}>
          <span>End of track {project.number}</span>
          <span>Press <span style={{ color: 'var(--c-whisper)' }}>ESC</span> to eject</span>
        </div>
      </div>
    </div>
  );
}

function Meta({ label, value }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--c-muted)', marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--c-cream)' }}>{value}</div>
    </div>
  );
}

function CaseSection({ section }) {
  if (section.kind === 'intro') {
    return (
      <div style={{ padding: '32px 0 20px', borderTop: '1px solid var(--c-border)', marginTop: 16 }}>
        <LinerLabel chip="var(--p-lilac)">{section.eyebrow}</LinerLabel>
        <p style={{ maxWidth: '64ch' }}>
          {section.body}
        </p>
      </div>
    );
  }
  if (section.kind === 'pillars') {
    return (
      <div style={{ padding: '32px 0 20px', borderTop: '1px solid var(--c-border)', marginTop: 16 }}>
        <LinerLabel chip="var(--p-lilac)">{section.eyebrow}</LinerLabel>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 24 }}>
          {section.title}
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 18 }}>
          {section.items.map((it, i) => (
            <div key={i} style={{ borderTop: '2px solid var(--c-smoke)', paddingTop: 14 }}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--ink-lilac)', textTransform: 'uppercase', marginBottom: 8 }}>
                {it.n} · {it.label}
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--c-cream)', lineHeight: 1.65 }}>
                {it.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (section.kind === 'todo') {
    return (
      <div style={{ padding: '32px 0 20px', borderTop: '1px solid var(--c-border)', marginTop: 16 }}>
        <LinerLabel chip="var(--p-lilac)">{section.eyebrow}</LinerLabel>
        <Todo>{section.prompt}</Todo>
      </div>
    );
  }
  if (section.kind === 'evidence') {
    return (
      <div style={{ padding: '32px 0 20px', borderTop: '1px solid var(--c-border)', marginTop: 16 }}>
        <LinerLabel chip="var(--p-lilac)">{section.eyebrow}</LinerLabel>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(3, section.slots.length)}, 1fr)`, gap: 16 }}>
          {section.slots.map((s) => (
            <EvidenceSlot key={s.id} id={s.id} caption={s.caption} aspect="4/3" />
          ))}
        </div>
      </div>
    );
  }
  if (section.kind === 'gallery') {
    return (
      <div style={{ padding: '32px 0 20px', borderTop: '1px solid var(--c-border)', marginTop: 16 }}>
        <LinerLabel chip="var(--p-lilac)">{section.eyebrow}</LinerLabel>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 6 }}>
          {section.title}
        </h3>
        <p style={{ fontSize: 13.5, color: 'var(--c-whisper)', maxWidth: '62ch', marginBottom: 24 }}>
          {section.sub}
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[1, 2, 3].map(i => (
            <div key={i} style={{
              aspectRatio: '4/3',
              background: 'rgba(185,163,227,0.15)',
              border: '1px solid var(--c-border)',
              position: 'relative',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <div style={{
                position: 'absolute', top: 8, left: 10,
                fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', color: 'var(--ink-lilac)', textTransform: 'uppercase', opacity: 0.7,
              }}>
                Plate 0{i}
              </div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, color: 'var(--ink-lilac)', opacity: 0.4, letterSpacing: '-0.03em',
              }}>
                0{i}
              </div>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 12, fontSize: 12.5, color: 'var(--c-muted)', lineHeight: 1.65 }}>
          Photography placeholders — final case study will carry workshop and bench photography.
        </p>
      </div>
    );
  }
  if (section.kind === 'reflection') {
    return (
      <div style={{ padding: '32px 0 20px', borderTop: '1px solid var(--c-border)', marginTop: 16 }}>
        <LinerLabel chip="var(--p-lilac)">{section.eyebrow}</LinerLabel>
        <Pullquote cite={section.cite}>{section.body}</Pullquote>
      </div>
    );
  }
  return null;
}

window.ProjectModal = ProjectModal;
window.CaseSection = CaseSection;
window.CaseMeta = Meta;