function WhatYouGet({ onClaim }) {
  const items = [
    '288-year-old dehydrated sourdough starter (creates full, active starter)',
    'Complete 48-hour activation guide with photos',
    'Beginner-friendly and foolproof first loaf recipe',
    'Feeding and maintenance schedule',
    'Troubleshooting guide for common questions',
  ];
  return (
    <section className="get">
      <style>{`
        .get { padding: 80px var(--gutter); display: flex; justify-content: center; }
        .get-card { max-width: 560px; width: 100%; background: var(--color-bg-cream); border: 1px solid var(--color-line); padding: 36px 32px; box-shadow: 0 2px 4px rgba(17,21,28,0.06), 0 12px 32px rgba(17,21,28,0.08); }
        @media (min-width: 720px) { .get-card { padding: 48px 56px; } }
        .get h2 { text-align: center; max-width: 22ch; margin: 0 auto 14px; font-size: clamp(24px, 3vw, 32px); }
        .get p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); text-align: center; margin: 0 auto 28px; max-width: 50ch; }
        .get ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; }
        .get ul li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; }
        .get ul li svg { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
        .price-row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; }
        .price-row.total { border-top: 1px solid var(--color-line-soft); }
        .price-row.now { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-bottom: 22px; font-family: var(--font-display); font-weight: 500; }
        .strike { text-decoration: line-through; color: var(--color-text-soft); }
        .free { color: var(--color-primary); font-weight: 600; }
        .fineprint { font-size: 12px; color: var(--color-text-muted); text-align: center; margin-top: 12px; }
      `}</style>
      <div className="get-card">
        <h2>What do I get when I claim the free sourdough starter?</h2>
        <p>You'll receive a 288-year-old dehydrated sourdough culture plus a step-by-step activation guide, a beginner-friendly first loaf recipe, a feeding schedule, and troubleshooting help. Everything is designed for first-timers.</p>
        <ul>
          {items.map(it => (<li key={it}><Icon name="check" size={18} /><span>{it}</span></li>))}
        </ul>
        <div className="price-row total"><span>Total Value</span><span className="strike">$47</span></div>
        <div className="price-row now"><span>Your Price Today</span><span className="free">$0</span></div>
        <button className="btn btn-block" onClick={onClaim}>Get My Free Starter</button>
        <div className="fineprint">Just pay $4.95 for shipping</div>
      </div>
    </section>
  );
}
window.WhatYouGet = WhatYouGet;