// casestudy.jsx - full case-study page + prev/next navigation
function CSSection({ children, bg = '#fff', narrow = true }) {
  return (
    <section style={{ background: bg, padding: 'clamp(44px,6vw,72px) clamp(18px,4vw,40px)' }}>
      <div style={{ maxWidth: narrow ? 760 : 1180, margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function CaseStudy({ p, go, onContact }) {
  if (!p) return null;
  const dark = p.mode === 'dark';
  const meta = [p.role, p.org].filter(Boolean).join(' · ');
  const idx = PROJECTS.findIndex(x => x.id === p.id);
  const prev = PROJECTS[(idx - 1 + PROJECTS.length) % PROJECTS.length];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  return (
    <div style={{ background: '#fff' }}>
      {/* Hero */}
      <section style={{ background: dark ? 'var(--surface-tile-1)' : 'var(--canvas-parchment)',
        padding: 'clamp(40px,6vw,72px) clamp(18px,4vw,40px) clamp(48px,7vw,80px)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <button onClick={() => go('/work')} className="t-caption" style={{ background: 'none', border: 0,
            cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 0',
            color: dark ? 'var(--primary-on-dark)' : 'var(--primary)' }}>
            <Icon name="arrowL" size={15} color={dark ? 'var(--primary-on-dark)' : 'var(--primary)'} /> All work</button>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(28px,5vw,64px)',
            alignItems: 'center', marginTop: 22 }} className="tile-grid">
            <Reveal>
              <Eyebrow dark={dark}>{p.year}{meta ? ' · ' + meta : ''}</Eyebrow>
              <h1 style={{ margin: '12px 0 0', color: dark ? '#fff' : 'var(--ink)', fontFamily: 'var(--font-display)',
                fontWeight: 600, fontSize: 'clamp(38px,5.4vw,68px)', lineHeight: 1.0, letterSpacing: '-0.03em', textWrap: 'balance' }}>{p.name}</h1>
              <p className="t-lead" style={{ color: dark ? '#fff' : 'var(--ink)', margin: '16px 0 0', maxWidth: 480, textWrap: 'pretty' }}>{p.tagline}</p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 20 }}>
                {p.tags.map(t => <TagChip key={t} dark={dark} accent>{t}</TagChip>)}
              </div>
              {p.links.length > 0 && (
                <div style={{ display: 'flex', gap: 16, marginTop: 24, flexWrap: 'wrap' }}>
                  {p.links.map(l => (
                    <a key={l.url} href={l.url} target="_blank" rel="noreferrer" className="t-body"
                      style={{ color: dark ? 'var(--primary-on-dark)' : 'var(--primary)', textDecoration: 'none',
                        display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <Icon name="github" size={16} color={dark ? 'var(--primary-on-dark)' : 'var(--primary)'} /> {l.label} <Icon name="arrowUR" size={14} color={dark ? 'var(--primary-on-dark)' : 'var(--primary)'} /></a>
                  ))}
                </div>
              )}
            </Reveal>
            <Reveal delay={90}>
              <RenderFrame p={p} ratio="4 / 3" />
            </Reveal>
          </div>
          {p.results && p.results.length > 0 && (
            <Reveal delay={120}>
              <div style={{ marginTop: 'clamp(36px,5vw,56px)', paddingTop: 28,
                borderTop: `1px solid ${dark ? 'rgba(255,255,255,0.16)' : 'var(--hairline)'}` }}>
                <Stats results={p.results} dark={dark} gap={'clamp(28px,5vw,64px)'} />
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* Overview + tech */}
      <CSSection>
        <Reveal>
          <Eyebrow>Overview</Eyebrow>
          <p style={{ color: 'var(--ink)', margin: '14px 0 0', fontFamily: 'var(--font-display)',
            fontSize: 'clamp(22px,2.6vw,30px)', lineHeight: 1.32, letterSpacing: '-0.01em', fontWeight: 400, textWrap: 'pretty' }}>{p.summary}</p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 26 }}>
            {p.tech.map(t => <span key={t} className="t-caption" style={{ color: 'var(--ink-muted-80)',
              background: 'var(--canvas-parchment)', border: '1px solid var(--hairline)', borderRadius: 9999, padding: '7px 14px' }}>{t}</span>)}
          </div>
        </Reveal>
      </CSSection>

      {/* Problem */}
      {p.problem && (
        <CSSection bg="var(--canvas-parchment)">
          <Reveal>
            <Eyebrow>The problem</Eyebrow>
            <p className="t-body" style={{ color: 'var(--ink)', margin: '14px 0 0', fontSize: 19, lineHeight: 1.55, textWrap: 'pretty' }}>{p.problem}</p>
          </Reveal>
        </CSSection>
      )}

      {/* What I did */}
      {p.did && p.did.length > 0 && (
        <CSSection>
          <Reveal><Eyebrow>What I did</Eyebrow></Reveal>
          <div style={{ marginTop: 16 }}>
            {p.did.map((d, i) => (
              <Reveal key={i} delay={Math.min(i * 50, 200)}>
                <div style={{ display: 'flex', gap: 20, padding: '20px 0',
                  borderTop: '1px solid var(--divider-soft)' }}>
                  <span className="t-tagline" style={{ color: 'var(--primary)', flex: '0 0 auto',
                    fontVariantNumeric: 'tabular-nums', width: 34 }}>{String(i + 1).padStart(2, '0')}</span>
                  <p className="t-body" style={{ color: 'var(--ink)', margin: 0, fontSize: 17.5, lineHeight: 1.5, textWrap: 'pretty' }}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </CSSection>
      )}

      {/* Gallery / artifacts */}
      {p.gallery && p.gallery.length > 0 ? (
        <section style={{ background: 'var(--canvas-parchment)', padding: 'clamp(48px,7vw,80px) clamp(18px,4vw,40px)' }}>
          <div style={{ maxWidth: 1180, margin: '0 auto' }}>
            <Reveal><Eyebrow>Gallery</Eyebrow></Reveal>
            <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20, alignItems: 'start' }}>
              {p.gallery.map((item, i) => (
                <Reveal key={i} delay={Math.min(i * 60, 240)} style={{ gridColumn: item.span ? '1 / -1' : 'auto' }}>
                  <MediaItem item={item} />
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      ) : !p.image ? (
        <section style={{ background: 'var(--canvas-parchment)', padding: 'clamp(48px,7vw,80px) clamp(18px,4vw,40px)' }}>
          <div style={{ maxWidth: 980, margin: '0 auto' }}>
            <Reveal>
              <RenderFrame p={p} ratio="16 / 9" />
              <p className="t-caption" style={{ color: 'var(--ink-muted-48)', marginTop: 14, textAlign: 'center' }}>
                {p.media} (final visuals coming soon).</p>
            </Reveal>
          </div>
        </section>
      ) : null}

      {/* Status / honesty note */}
      {p.status && (
        <CSSection>
          <Reveal>
            <div style={{ borderLeft: '2px solid var(--primary)', paddingLeft: 22 }}>
              <Eyebrow>Status</Eyebrow>
              <p className="t-body" style={{ color: 'var(--ink)', margin: '10px 0 0', fontSize: 18, lineHeight: 1.5, textWrap: 'pretty' }}>{p.status}</p>
            </div>
          </Reveal>
        </CSSection>
      )}

      {/* CTA */}
      <CSSection narrow={false}>
        <Reveal>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', paddingBottom: 12 }}>
            {p.links.map(l => <Pill key={l.url} as="a" href={l.url}>{l.label} <Icon name="arrowUR" size={15} color="#fff" /></Pill>)}
            <Pill variant="ghost" onClick={onContact}>Get in touch</Pill>
          </div>
        </Reveal>
      </CSSection>

      {/* Prev / next */}
      <section style={{ background: '#fff', borderTop: '1px solid var(--hairline)',
        padding: 'clamp(28px,4vw,44px) clamp(18px,4vw,40px) clamp(56px,7vw,80px)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }} className="tile-grid">
          {[['Previous', prev, 'arrowL'], ['Next', next, 'arrowR']].map(([k, proj, ic], i) => (
            <button key={k} onClick={() => go('/work/' + proj.id)} style={{ textAlign: i ? 'right' : 'left',
              background: 'none', border: '1px solid var(--hairline)', borderRadius: 18, padding: '22px 24px',
              cursor: 'pointer', fontFamily: 'var(--font-text)', display: 'flex', alignItems: 'center',
              gap: 16, flexDirection: i ? 'row-reverse' : 'row', justifyContent: 'space-between' }}>
              <div style={{ minWidth: 0 }}>
                <Eyebrow>{k}</Eyebrow>
                <div className="t-tagline" style={{ color: 'var(--ink)', marginTop: 6, whiteSpace: 'nowrap',
                  overflow: 'hidden', textOverflow: 'ellipsis' }}>{proj.name}</div>
              </div>
              <Icon name={ic} size={20} color="var(--ink-muted-48)" />
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CaseStudy });