// ============================================================
// WORK — index + case study
// ============================================================

function WorkScreen({ go }) {
  return (
    <div className="screen-enter" data-screen-label="Work">
      <section className="section" style={{ paddingBottom: 'var(--space-6)' }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">Selected work</span>
            <h1 className="page-title">A point of view, not a portfolio.</h1>
            <Lottie src="assets/lottie/draw-line.json" className="accent-line" height={18} style={{ marginTop: 'var(--space-4)' }} />
          </Reveal>
          <Reveal delay={60}>
            <p className="page-lead">
              Four engagements that show the pattern: clarify the decision, build the system underneath, and leave it running. Read for the judgement, not the deliverables.
            </p>
          </Reveal>
        </div>
      </section>
      <section style={{ paddingBottom: 'var(--space-9)' }}>
        <div className="container">
          <Reveal className="work-list" delay={100}>
            {WORK.map((w) => <WorkRow key={w.id} item={w} go={go} />)}
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function CaseStudy({ id, go }) {
  const item = WORK.find((w) => w.id === id) || WORK[0];
  const idx = WORK.findIndex((w) => w.id === item.id);
  const next = WORK[(idx + 1) % WORK.length];
  return (
    <div className="screen-enter" data-screen-label={`Case: ${item.title}`}>
      <div className="container">
        <div className="cs-head">
          <Reveal>
            <button className="btn btn-ghost cs-back" onClick={() => go('work')}>
              <Icon name="arrow-left" size={16} /> All work
            </button>
          </Reveal>
          <Reveal delay={40}>
            <span className="eyebrow">Case study</span>
            <h1>{item.title}</h1>
          </Reveal>
          <Reveal delay={80}>
            <p className="lead" style={{ maxWidth: '52ch', marginBottom: 'var(--space-6)' }}>{item.standfirst}</p>
          </Reveal>
          <Reveal delay={120}>
            <div className="cs-meta">
              <div className="m"><span className="k">Role</span><span className="v">{item.role}</span></div>
              <div className="m"><span className="k">Sector</span><span className="v">{item.sector}</span></div>
              <div className="m"><span className="k">Year</span><span className="v">{item.year}</span></div>
            </div>
          </Reveal>
        </div>

        <div className="stats">
          {item.stats.map((s, i) => (
            <Reveal key={i} className="stat" delay={i * 80}>
              <div className="figure">{s.figure}</div>
              <div className="label">{s.label}</div>
            </Reveal>
          ))}
        </div>

        {item.sections.map((sec, i) => (
          <div className="cs-body" key={i}>
            <div className="cs-section-label">{sec.label}</div>
            <Reveal className="cs-prose">
              <h3>{sec.heading}</h3>
              {sec.body.map((p, j) => <p key={j}>{p}</p>)}
              {i === item.sections.length - 1 && (
                <blockquote className="pullquote">"{item.quote}"</blockquote>
              )}
            </Reveal>
          </div>
        ))}

        <Reveal>
          <div className="next-link" onClick={() => go('case', next.id)}>
            <div>
              <span className="eyebrow" style={{ marginBottom: 12, display: 'block' }}>Next</span>
              <div className="nl-title">{next.title}</div>
            </div>
            <Icon name="arrow-right" size={28} />
          </div>
        </Reveal>
      </div>
    </div>
  );
}

Object.assign(window, { WorkScreen, CaseStudy });