/* CASE STUDIES — before/after metrics on each card */

function Cases() {
  const isMobile = useWindowWidth() < 768;
  const cases = [
    {
      tag: 'PDP REDESIGN',
      brand: 'Bloom Bodysuits',
      vertical: 'Activewear · IN',
      heading: 'Cracked the conversion ceiling at $1.8M MRR',
      detail: 'Rebuilt PDP, checkout flow & A/B testing infra. Shipped 9 winning variants in 60 days.',
      before: [{ label: 'CVR', v: '1.4%' }, { label: 'ROAS', v: '1.9×' }, { label: 'AOV', v: '$48' }],
      after:  [{ label: 'CVR', v: '4.2%', up: '+186%' }, { label: 'ROAS', v: '4.8×', up: '+152%' }, { label: 'AOV', v: '$74', up: '+54%' }],
      img: 'images/bloombodysuit.jpg',
    },
    {
      tag: 'GROWTH SYSTEM',
      brand: 'Mahina',
      vertical: 'Wellness · IN',
      heading: 'Built a full-funnel growth system from zero',
      detail: 'Paid media + CRO + lifecycle. Took blended CAC from $62 → $33 while doubling revenue.',
      before: [{ label: 'CAC', v: '$62' }, { label: 'CVR', v: '1.1%' }, { label: 'Rev/mo', v: '$240k' }],
      after:  [{ label: 'CAC', v: '$33', up: '−47%' }, { label: 'CVR', v: '3.6%', up: '+227%' }, { label: 'Rev/mo', v: '$510k', up: '+112%' }],
      img: 'images/mahina.jpg',
    },
  ];

  return (
    <section data-screen-label="05 Case studies" id="work" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <SectionHeader
          eyebrow="Selected work"
          title={<>Results we shipped. <span className="accent">No fluff, no decks.</span></>}
          lead="Every engagement starts and ends with the metrics that matter. Here are two recent ones — full case studies available on request."
          align="left"
        />

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
          {cases.map((c, i) => (
            <CaseCard key={c.brand} c={c} delay={i * 120} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCard({ c, delay }) {
  return (
    <Reveal delay={delay} className="card" style={{ overflow: 'hidden' }}>
      {/* Top: real client screenshot */}
      <div style={{ height: 220, overflow: 'hidden', position: 'relative', borderBottom: '1px solid var(--hairline-2)' }}>
        <img
          src={c.img}
          alt={c.brand}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }}
        />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to bottom, transparent 50%, rgba(10,15,12,.45) 100%)',
        }} />
        <div style={{
          position: 'absolute', bottom: 12, left: 16,
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'white',
          letterSpacing: '0.06em', textTransform: 'uppercase',
          background: 'rgba(0,0,0,.4)', backdropFilter: 'blur(8px)',
          padding: '4px 10px', borderRadius: 999,
        }}>{c.brand}</div>
      </div>

      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
          <span className="mono-label" style={{ color: 'var(--green-deep)' }}>{c.tag}</span>
          <span className="mono-label">{c.vertical}</span>
        </div>

        <h3 className="h3" style={{ fontSize: 22 }}>{c.heading}</h3>
        <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55 }}>{c.detail}</p>

        {/* Before / after */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 24px 1fr',
          alignItems: 'stretch', gap: 0,
          background: 'var(--bg)', border: '1px solid var(--hairline-2)', borderRadius: 14,
          padding: 16, marginTop: 6,
        }}>
          <div>
            <div className="mono-label" style={{ marginBottom: 10 }}>Before</div>
            {c.before.map((b, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i < c.before.length - 1 ? '1px dashed var(--hairline)' : 'none' }}>
                <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{b.label}</span>
                <span className="num" style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--muted)' }}>{b.v}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--green)' }}>
            <Icon.Arrow size={16} rotate={0} />
          </div>
          <div>
            <div className="mono-label" style={{ marginBottom: 10, color: 'var(--green-deep)' }}>After</div>
            {c.after.map((b, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, padding: '6px 0', borderBottom: i < c.after.length - 1 ? '1px dashed var(--hairline)' : 'none' }}>
                <span style={{ fontSize: 13, color: 'var(--ink)' }}>{b.label}</span>
                <span style={{ display: 'flex', gap: 6, alignItems: 'baseline' }}>
                  <span className="num" style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>{b.v}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--green)' }}>{b.up}</span>
                </span>
              </div>
            ))}
          </div>
        </div>

        <a href="https://wa.me/917982069421" target="_blank" rel="noopener noreferrer" className="ulink" style={{ alignSelf: 'flex-start', marginTop: 4, color: 'var(--green-deep)', fontWeight: 500, fontSize: 14 }}>
          Request full case study <Icon.Arrow size={13} />
        </a>
      </div>
    </Reveal>
  );
}

window.Cases = Cases;