/* burp.agency homepage — Case studies preview (typographic, no thumbnails) */

const CASES = [
  { slug: 'memfault',   client: 'MEMFAULT',   kind: 'WORDS · SEO', headline: 'Gave an embedded-software team a content engine, not just a blog.', stat: '+3.4×', statLabel: 'organic traffic in 90 days' },
  { slug: 'coderabbit', client: 'CODERABBIT', kind: 'SHAPE · ADS', headline: 'Ad creative that talks to developers, not at them.',                  stat: '+62%',  statLabel: 'qualified ad clicks'         },
  { slug: 'zenduty',    client: 'ZENDUTY',    kind: 'WORDS · SEO', headline: 'SRE-grade content that ranks and gets shared by the audience.',        stat: '+88%',  statLabel: 'YoY blog sessions'           },
];

const CaseRow = ({ c, i }) => {
  const [ref, style] = useReveal({ delay: i * 80 });
  return (
    <a ref={ref}
       href={`work/${c.slug}.html`}
       style={{
         ...style,
         display: 'block', padding: '40px 0',
         borderBottom: '1px solid var(--color-warm-gray)',
         color: 'inherit', textDecoration: 'none',
         transition: `${style.transition}, background .2s ease`,
       }}
       onMouseEnter={e => e.currentTarget.style.background = 'var(--color-pale-orange)'}
       onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
      <div className="case-row-grid" style={{
        display: 'grid',
        gridTemplateColumns: '160px 1fr 200px auto',
        gap: 32, alignItems: 'baseline',
      }}>
        <div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--color-orange)', marginBottom: 6,
          }}>{c.kind}</div>
          <div style={{
            fontFamily: 'Georgia, serif', fontSize: 22,
            letterSpacing: '-0.018em', color: 'var(--color-ink)',
            lineHeight: 1.1,
          }}>{c.client}</div>
        </div>

        <div style={{
          fontFamily: 'Georgia, serif', fontStyle: 'italic',
          fontSize: 'clamp(20px, 2vw, 26px)',
          lineHeight: 1.3,
          color: 'var(--color-ink)',
          maxWidth: '38ch',
        }}>{c.headline}</div>

        <div>
          <div style={{
            fontFamily: 'Georgia, serif', fontWeight: 400,
            fontSize: 'clamp(32px, 3.4vw, 48px)',
            letterSpacing: '-0.02em', lineHeight: 1,
            color: 'var(--color-orange)',
          }}>{c.stat}</div>
          <div style={{
            marginTop: 6,
            fontFamily: 'Inter, sans-serif', fontSize: 12,
            color: 'var(--color-mid-gray)', letterSpacing: 0,
          }}>{c.statLabel}</div>
        </div>

        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
          color: 'var(--color-ink)', whiteSpace: 'nowrap',
        }}>Read  →</div>
      </div>
    </a>
  );
};

const CaseStudies = () => {
  return (
    <section data-screen-label="Case studies" id="work"
             style={{
               background: '#fff',
               borderTop: '1px solid var(--color-warm-gray)',
               paddingTop: 120, paddingBottom: 120,
             }}>
      <Container>
        <Reveal><Label>SELECTED WORK</Label></Reveal>
        <Reveal delay={120}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto',
            gap: 32, alignItems: 'flex-end',
            marginTop: 24, marginBottom: 56,
          }}>
            <h2 style={{
              fontFamily: 'Georgia, serif', fontWeight: 400,
              fontSize: 'clamp(40px, 5vw, 72px)',
              letterSpacing: '-0.018em', lineHeight: 1.05,
              color: 'var(--color-ink)', margin: 0,
              maxWidth: '14ch',
            }}>A handful of receipts.</h2>
            <Btn variant="ghost" href="work.html">All work  →</Btn>
          </div>
        </Reveal>

        <div style={{ borderTop: '1px solid var(--color-warm-gray)' }}>
          {CASES.map((c, i) => <CaseRow key={c.slug} c={c} i={i} />)}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { CaseStudies });