// PricingCard.jsx — the engagement model. Two tiers, hairline-divided.

const TIERS = [
  {
    name: 'Studio Retainer',
    sub: 'For SMBs spending ₹1–5 L / month.',
    price: '₹45,000',
    cadence: 'per month · flat',
    inclusions: [
      'Up to ₹5 L ad spend managed',
      'Meta + Google · search, social, PMax',
      'Weekly numbers email · every Monday',
      'Creative refresh every 2 weeks',
      'Direct WhatsApp line to the strategist',
      'No long-term contract. 30-day rolling.',
    ],
    cta: 'Book a fit call',
    highlight: false,
  },
  {
    name: 'Performance Pact',
    sub: 'For SMBs serious about scaling past ₹5 L / month.',
    price: '₹30,000',
    cadence: 'base + 10% of qualified-lead value',
    inclusions: [
      'No cap on ad spend',
      'Dedicated strategist + media buyer',
      'Custom dashboard, live CPL by campaign',
      'Quarterly strategy off-site (Mumbai or Pune)',
      'First-look on new channels (TikTok, LinkedIn)',
      "Skin in the game — we earn when you do.",
    ],
    cta: 'Apply for a pact',
    highlight: true,
  },
];

const prStyles = {
  section: { padding: '96px 0', background: 'var(--ink-50)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500, marginBottom: 8 },
  h: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 0.92, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: '0 0 16px', maxWidth: '20ch' },
  sub: { fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.5, color: 'var(--fg-muted)', maxWidth: '54ch', marginBottom: 40 },
  grid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 },
  card: (hl) => ({
    background: hl ? 'var(--ink-1000)' : 'var(--bg-elevated)',
    color: hl ? 'var(--ink-0)' : 'var(--fg)',
    border: '1px solid ' + (hl ? 'var(--ink-1000)' : 'var(--border)'),
    borderRadius: 'var(--r-md)',
    padding: '32px 32px 28px',
    display: 'flex',
    flexDirection: 'column',
  }),
  name: (hl) => ({ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.005em', marginBottom: 6, color: hl ? 'var(--ink-0)' : 'var(--ink-1000)' }),
  tier_sub: (hl) => ({ fontFamily: 'var(--font-sans)', fontSize: 14, color: hl ? 'rgba(246,242,231,0.65)' : 'var(--fg-muted)', marginBottom: 24 }),
  price: { fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums', fontSize: 44, letterSpacing: '-0.02em', lineHeight: 1 },
  cadence: (hl) => ({ fontFamily: 'var(--font-mono)', fontSize: 12, color: hl ? 'rgba(246,242,231,0.65)' : 'var(--fg-muted)', marginTop: 6 }),
  ul: { listStyle: 'none', padding: 0, margin: '24px 0', flex: 1 },
  li: (hl) => ({ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, padding: '10px 0', borderTop: '1px solid ' + (hl ? 'rgba(246,242,231,0.12)' : 'var(--border)'), display: 'flex', alignItems: 'flex-start', gap: 10 }),
  check: { color: 'var(--powder-500)', marginTop: 2, flexShrink: 0 },
  btn: (hl) => ({
    fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 14,
    padding: '13px 18px', border: 'none', borderRadius: 'var(--r-md)',
    cursor: 'pointer',
    background: hl ? 'var(--powder-500)' : 'var(--ink-1000)',
    color: 'var(--ink-0)',
    width: '100%',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
  }),
};

function PricingCard({ onBook }) {
  return (
    <section id="pricing" style={prStyles.section}>
      <div style={prStyles.container}>
        <div style={prStyles.eyebrow}>08 · Engagement</div>
        <h2 style={prStyles.h}>Two ways to deploy your powder.</h2>
        <p style={prStyles.sub}>
          We don't sell hours. We sell a CPL floor and the discipline to hold it. Pick
          the model that matches your spend.
        </p>
        <div style={prStyles.grid}>
          {TIERS.map(t => (
            <div key={t.name} style={prStyles.card(t.highlight)}>
              <h3 style={prStyles.name(t.highlight)}>{t.name}</h3>
              <p style={prStyles.tier_sub(t.highlight)}>{t.sub}</p>
              <div style={prStyles.price}>{t.price}</div>
              <div style={prStyles.cadence(t.highlight)}>{t.cadence}</div>
              <ul style={prStyles.ul}>
                {t.inclusions.map((i, idx) => (
                  <li key={idx} style={prStyles.li(t.highlight)}>
                    <span style={prStyles.check}>→</span>
                    <span>{i}</span>
                  </li>
                ))}
              </ul>
              <button style={prStyles.btn(t.highlight)} onClick={onBook}>
                <Mark size={12} color={t.highlight ? 'var(--ink-0)' : 'var(--powder-500)'}/> {t.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PricingCard });