// Work page — class-driven via styles.css

function WorkCard({ study }) {
  const content = CASE_STUDY_CONTENT[study.id];
  const url = CASE_STUDY_URLS[study.id];
  return (
    <a href={url} className="work-card">
      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <span className="work-card__index">{study.index}</span>
          <span className="work-card__time">{content.timeframe}</span>
          {content.locked && <span className="tag-nda">🔒 NDA</span>}
        </div>
        <h2 className="headline-card" style={{ margin: '0 0 4px' }}>{study.title}</h2>
        <div className="work-card__subtitle">{study.subtitle}</div>
        <p className="work-card__hook">{content.hook}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 12 }}>
          {study.tags.map((t) => (
            <span key={t} className="tag-mini tag-mini--soft">{t}</span>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
        <div style={{ aspectRatio: '748 / 644', width: '100%', border: '1px solid var(--border-soft)', overflow: 'hidden' }}>
          <img src={study.image} alt={study.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div className="work-card__cta">View case study →</div>
      </div>
    </a>
  );
}

function WorkMain({ spacer = true }) {
  return (
      <main className="work-main" style={{ flex: 1, maxWidth: 1440, width: '100%', margin: '0 auto', padding: '20px 40px 16px', display: 'flex', flexDirection: 'column', minHeight: 0, overflowY: 'auto' }}>
        <header className="work-header" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'end', marginBottom: 14 }}>
          <div>
            <Eyebrow color="orange">Work</Eyebrow>
            <h1 className="headline-xl" style={{ fontSize: 40, lineHeight: 1, letterSpacing: '-0.03em', margin: '10px 0 4px' }}>
              Selected case studies
            </h1>
          </div>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-mute)', textAlign: 'right', paddingBottom: 4 }}>
            <div>4 of 4 shown</div>
            <div style={{ marginTop: 3 }}>2020 — present</div>
          </div>
        </header>

        <div className="work-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridAutoRows: 'minmax(280px, auto)', gap: 12 }}>
          {CASE_STUDIES.map((s) => <WorkCard key={s.id} study={s} />)}
        </div>

        {spacer && <div aria-hidden="true" style={{ marginTop: 12, height: 16, flexShrink: 0 }} />}
      </main>
  );
}

function WorkPage() {
  return (
    <div className="page-shell">
      <TopNav active="Work" variant="compact" />
      <WorkMain />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { WorkPage, WorkMain, WorkCard });