// Audience.jsx — "Who it's for" — trade-ticket style segment cards.
// Each card is a position the studio takes on: entry (spend), aim (CPL band),
// exit (leads / mo). Hairline-ruled rows, mono numbers, Powder accents.

const SEGMENTS = [
  {
    code: 'HC',
    name: 'Healthcare clinics',
    examples: 'Dental, derma, eye, IVF, polyclinics',
    entry: '₹50k – ₹2L / mo',
    aim:   '₹800 – ₹1,500',
    exit:  '120 – 320 / mo',
    note:  'Hyperlocal radius. One service line at a time.',
  },
  {
    code: 'RE',
    name: 'Real-estate brokers',
    examples: 'Independent brokers, channel partners',
    entry: '₹2L – ₹5L / mo',
    aim:   '₹2,000 – ₹4,000',
    exit:  '60 – 140 / mo',
    note:  'One project, one BHK, one price band.',
    highlight: true,
  },
  {
    code: 'EDU',
    name: 'Coaching & education',
    examples: 'NEET / JEE / banking coaching, upskilling',
    entry: '₹50k – ₹1.5L / mo',
    aim:   '₹500 – ₹900',
    exit:  '300 – 600 / mo',
    note:  'Batch-cycle aligned. We turn off between intakes.',
  },
  {
    code: 'B2B',
    name: 'B2B services & D2C',
    examples: 'CA firms, agencies, pre-Series A D2C',
    entry: '₹1L – ₹5L / mo',
    aim:   '₹2,500 – ₹4,500',
    exit:  '40 – 120 / mo',
    note:  'Long sales cycle. We score MQLs, not just submit.',
  },
];

const audStyles = {
  section: { padding: '96px 0', borderTop: '1px solid var(--border)' },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' },
  head: { display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 48 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500, marginBottom: 12 },
  h: {
    fontFamily: 'var(--font-display)', fontWeight: 400,
    fontSize: 'clamp(36px, 5vw, 60px)',
    lineHeight: 0.92, letterSpacing: '-0.015em',
    textTransform: 'uppercase', margin: 0, maxWidth: '14ch',
  },
  sub: {
    fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.55,
    color: 'var(--fg-muted)', maxWidth: '46ch', margin: 0,
    paddingBottom: 6,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 0,
    borderTop: '1px solid var(--ink-1000)',
  },
  card: (hl) => ({
    padding: '24px 22px 26px',
    background: hl ? 'var(--ink-1000)' : 'transparent',
    color: hl ? 'var(--ink-0)' : 'var(--fg)',
    borderRight: '1px solid var(--border)',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 380,
  }),
  ribbon: (hl) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 24,
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: hl ? 'rgba(246,242,231,0.55)' : 'var(--fg-muted)',
  }),
  code: (hl) => ({
    fontFamily: 'var(--font-mono)',
    fontWeight: 600,
    fontSize: 11,
    padding: '3px 8px',
    borderRadius: 'var(--r-sm)',
    background: hl ? 'var(--powder-500)' : 'var(--ink-1000)',
    color: hl ? 'var(--ink-0)' : 'var(--ink-0)',
    letterSpacing: '0.12em',
  }),
  name: (hl) => ({
    fontFamily: 'var(--font-sans)',
    fontWeight: 600,
    fontSize: 22,
    lineHeight: 1.18,
    margin: '0 0 6px',
    color: hl ? 'var(--ink-0)' : 'var(--ink-1000)',
  }),
  examples: (hl) => ({
    fontFamily: 'var(--font-sans)',
    fontSize: 13,
    lineHeight: 1.45,
    color: hl ? 'rgba(246,242,231,0.60)' : 'var(--fg-muted)',
    margin: '0 0 22px',
  }),
  rows: { display: 'flex', flexDirection: 'column', marginTop: 'auto' },
  row: (hl) => ({
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline',
    padding: '12px 0',
    borderTop: '1px solid ' + (hl ? 'rgba(246,242,231,0.12)' : 'var(--border)'),
  }),
  rowLabel: (hl) => ({
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: hl ? 'rgba(246,242,231,0.55)' : 'var(--fg-muted)',
    fontWeight: 500,
  }),
  rowVal: (hl) => ({
    fontFamily: 'var(--font-mono)',
    fontVariantNumeric: 'tabular-nums',
    fontSize: 14,
    color: hl ? 'var(--ink-0)' : 'var(--ink-1000)',
    fontWeight: 500,
  }),
  note: (hl) => ({
    fontFamily: 'var(--font-sans)',
    fontSize: 13,
    lineHeight: 1.45,
    color: hl ? 'rgba(246,242,231,0.65)' : 'var(--fg-muted)',
    marginTop: 18,
    paddingTop: 14,
    borderTop: '1px solid ' + (hl ? 'rgba(246,242,231,0.12)' : 'var(--border)'),
    textWrap: 'pretty',
  }),
};

function AudienceCard({ s, isLast }) {
  return (
    <div style={{
      ...audStyles.card(s.highlight),
      borderRight: isLast ? 'none' : audStyles.card(s.highlight).borderRight,
    }} data-audience-card>
      <div style={audStyles.ribbon(s.highlight)}>
        <span style={audStyles.code(s.highlight)}>{s.code}</span>
        <span>Position</span>
      </div>
      <h3 style={audStyles.name(s.highlight)}>{s.name}</h3>
      <p style={audStyles.examples(s.highlight)}>{s.examples}</p>
      <div style={audStyles.rows}>
        <div style={audStyles.row(s.highlight)}>
          <span style={audStyles.rowLabel(s.highlight)}>Entry · spend</span>
          <span style={audStyles.rowVal(s.highlight)}>{s.entry}</span>
        </div>
        <div style={audStyles.row(s.highlight)}>
          <span style={audStyles.rowLabel(s.highlight)}>Aim · CPL</span>
          <span style={audStyles.rowVal(s.highlight)}>{s.aim}</span>
        </div>
        <div style={audStyles.row(s.highlight)}>
          <span style={audStyles.rowLabel(s.highlight)}>Exit · leads</span>
          <span style={audStyles.rowVal(s.highlight)}>{s.exit}</span>
        </div>
        <p style={audStyles.note(s.highlight)}>{s.note}</p>
      </div>
    </div>
  );
}

function Audience() {
  return (
    <section id="audience" style={audStyles.section}>
      <div style={audStyles.container}>
        <div style={audStyles.head}>
          <div>
            <div style={audStyles.eyebrow}>02 · Positions we take</div>
            <h2 style={audStyles.h}>We don't take everyone. Here's who we trade for.</h2>
          </div>
          <p style={audStyles.sub}>
            Four segments, four floors. If your numbers don't fit one of these bands,
            we'll be honest and pass. Saves both of us six weeks.
          </p>
        </div>
        <div style={audStyles.grid}>
          {SEGMENTS.map((s, i) => (
            <AudienceCard key={s.code} s={s} isLast={i === SEGMENTS.length - 1}/>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Audience });