// pages/WorkPage.jsx + CaseStudyPage.jsx
function WorkPage({ setPage }) {
  return (
    <React.Fragment>
      <section className="section" style={{ paddingTop: 100 }}>
        <Reveal className="sec-eyebrow">Work</Reveal>
        <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: 'clamp(56px, 8vw, 96px)' }}>Selected builds,<br/>recent first.</Reveal>
        <Reveal delay={160} className="sec-lede" style={{ marginTop: 28 }}>
          A small sample of sites built in the last two years across <strong>Swansea, Llanelli, and the Gower</strong>. Each project includes photography shot on location — click through for detail.
        </Reveal>
      </section>
      <section className="section">
        <WorkTiles setPage={setPage} />
      </section>
      <CTABand setPage={setPage} />
    </React.Fragment>
  );
}

function CaseStudyPage({ id, setPage }) {
  const cs = WORK_DATA.find(w => w.id === id) || WORK_DATA[0];
  return (
    <React.Fragment>
      <section className="section" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <Reveal className="sec-eyebrow">{cs.cat} · {cs.year}</Reveal>
        <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: 'clamp(56px, 8vw, 96px)' }}>{cs.title}</Reveal>
        <Reveal delay={160} className="sec-lede" style={{ marginTop: 28 }}>{cs.summary}</Reveal>
      </section>
      <section className="section" style={{ padding: '0 64px 56px' }}>
        <Reveal className="img-slot" style={{ aspectRatio: '2.2 / 1' }}>
          <img src={cs.img} alt={cs.title} />
          <div className="img-label">IMG · {cs.id.toUpperCase()}-HERO</div>
        </Reveal>
      </section>
      <section className="section">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
          <Reveal>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 18 }}>Brief</div>
            <p style={{ fontSize: 16, lineHeight: 1.75, color: 'var(--fg2)' }}>{cs.summary} The existing site was a free-template setup that didn't fit what they actually did day-to-day, and none of the photography was their own.</p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginTop: 32, marginBottom: 18 }}>Deliverables</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Full site design & build', 'Half-day photo session on location', 'Training handover', 'Monthly care plan'].map(x => (
                <li key={x} style={{ display: 'flex', gap: 12, fontSize: 15, color: 'var(--fg1)' }}>
                  <span style={{ color: 'var(--alp-jade)' }}>✓</span>{x}
                </li>
              ))}
            </ul>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 18 }}>Outcome</div>
            <blockquote style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 28, lineHeight: 1.3, color: 'var(--fg1)', margin: 0, textWrap: 'pretty' }}>
              &ldquo;Looked like an actual business the day it went live. Worth every penny.&rdquo;
            </blockquote>
            <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg2)' }}>— Client, {cs.title}</div>
          </Reveal>
        </div>
      </section>
      <section className="section well">
        <Reveal className="sec-eyebrow">More work</Reveal>
        <div style={{ marginTop: 32 }}>
          <WorkTiles setPage={setPage} limit={3} />
        </div>
      </section>
      <CTABand setPage={setPage} />
    </React.Fragment>
  );
}

window.WorkPage = WorkPage;
window.CaseStudyPage = CaseStudyPage;