// CaseStudyGrid.jsx — filterable case-study cards

const STUDIES = [
  { id: 1, name: 'Arora Dental', city: 'Pune', industry: 'Healthcare',  channels: ['Meta', 'Google'], cpl: '₹1,180', leads: 214, roas: '5.8×', headline: 'From ₹4,200 CPL to ₹1,180 in six weeks — without raising spend.' },
  { id: 2, name: 'Krishna Realty',city: 'Hyderabad',industry: 'Real-estate',channels:['Meta'],     cpl: '₹2,450', leads: 86,  roas: '7.1×', headline: 'Sold ₹18 Cr of inventory from a ₹6 L Meta budget.' },
  { id: 3, name: 'Mindkraft',   city: 'Bengaluru',industry:'Coaching',  channels: ['Google'],     cpl: '₹620',  leads: 412, roas: '3.9×', headline: 'Filled four batches in two cities, two months running.' },
  { id: 4, name: 'Patel & Co.', city: 'Surat',   industry:'B2B services',channels:['Google'],     cpl: '₹3,820', leads: 47,  roas: '6.4×', headline: 'B2B leads at 1/4 the cost of the previous agency.' },
  { id: 5, name: 'Nivasa Homes',city: 'Mumbai',  industry:'Real-estate',channels:['Meta','Google'],cpl:'₹3,140', leads: 128, roas: '4.7×', headline: 'A 25-km Mumbai radius beat a pan-India campaign on every metric.' },
  { id: 6, name: 'Skinkraft Clinic',city:'Delhi',industry:'Healthcare',  channels:['Meta'],       cpl: '₹980',  leads: 322, roas: '5.2×', headline: 'Three derma packages, three creative hooks, one winning combination.' },
];

const FILTERS = ['All', 'Healthcare', 'Real-estate', 'Coaching', 'B2B services'];

const csStyles = {
  section: { padding: '96px 0' },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' },
  header: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 36 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 },
  h: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 0.92, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: '8px 0 0', maxWidth: '20ch' },
  filters: { display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 },
  chip: (active) => ({
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    padding: '7px 14px', borderRadius: 999, cursor: 'pointer',
    background: active ? 'var(--ink-1000)' : 'transparent',
    color: active ? 'var(--ink-0)' : 'var(--fg)',
    border: '1px solid ' + (active ? 'var(--ink-1000)' : 'var(--border)'),
    transition: 'all 120ms var(--ease-out)',
  }),
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },
  card: {
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border)',
    borderRadius: 'var(--r-md)',
    padding: '24px 26px',
    transition: 'all 180ms var(--ease-out)',
    cursor: 'pointer',
  },
  cardTop: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 },
  brand: { display: 'flex', alignItems: 'center', gap: 12 },
  avatar: {
    width: 32, height: 32, background: 'var(--ink-1000)', color: 'var(--ink-0)',
    borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontSize: 14,
  },
  name: { fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500 },
  meta: { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)', marginTop: 1 },
  headline: { fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 20, lineHeight: 1.3, margin: '4px 0 18px', textWrap: 'balance' },
  stats: { display: 'flex', gap: 28, paddingTop: 14, borderTop: '1px solid var(--border)' },
  statLabel: { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
  statValue: (color) => ({ fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 18, color: color || 'var(--fg)' }),
  pill: { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '4px 10px', borderRadius: 999, background: 'var(--vault-100)', color: 'var(--vault-700)', fontWeight: 500 },
};

function CaseCard({ s }) {
  const [hover, setHover] = React.useState(false);
  const initial = s.name[0];
  return (
    <article
      style={{...csStyles.card, ...(hover ? {boxShadow: 'var(--shadow-md)', transform: 'translateY(-1px)'} : {})}}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div style={csStyles.cardTop}>
        <div style={csStyles.brand}>
          <div style={csStyles.avatar}>{initial}</div>
          <div>
            <div style={csStyles.name}>{s.name}, {s.city}</div>
            <div style={csStyles.meta}>{s.industry} · {s.channels.join(' + ')}</div>
          </div>
        </div>
        <span style={csStyles.pill}>Profitable</span>
      </div>
      <h3 style={csStyles.headline}>{s.headline}</h3>
      <div style={csStyles.stats}>
        <div>
          <div style={csStyles.statLabel}>CPL</div>
          <div style={csStyles.statValue()}>{s.cpl}</div>
        </div>
        <div>
          <div style={csStyles.statLabel}>Leads / mo</div>
          <div style={csStyles.statValue()}>{s.leads}</div>
        </div>
        <div>
          <div style={csStyles.statLabel}>ROAS</div>
          <div style={csStyles.statValue('var(--powder-500)')}>{s.roas}</div>
        </div>
      </div>
    </article>
  );
}

function CaseStudyGrid() {
  const [filter, setFilter] = React.useState('All');
  const visible = filter === 'All' ? STUDIES : STUDIES.filter(s => s.industry === filter);
  return (
    <section id="work" style={csStyles.section}>
      <div style={csStyles.container}>
        <div style={csStyles.header}>
          <div>
            <div style={csStyles.eyebrow}>04 · Work</div>
            <h2 style={csStyles.h}>Six SMBs. Six different floors. All beating their benchmark.</h2>
          </div>
        </div>
        <div style={csStyles.filters}>
          {FILTERS.map(f => (
            <button key={f} style={csStyles.chip(filter === f)} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div style={csStyles.grid}>
          {visible.map(s => <CaseCard key={s.id} s={s}/>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CaseStudyGrid });