function Urgency({ onClaim }) {
  return (
    <section className="urg">
      <style>{`
        .urg { padding: 72px var(--gutter); text-align: center; max-width: 760px; margin: 0 auto; }
        .urg h2 { max-width: 22ch; margin: 0 auto 18px; }
        .urg p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 0 auto 32px; max-width: 60ch; }
        .urg-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
        .urg .btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-text); padding: 15px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; transition: background 200ms cubic-bezier(0.2,0,0,1); }
        .urg .btn-secondary:hover { background: rgba(17,21,28,0.06); }
      `}</style>
      <h2>Why should I claim the starter now?</h2>
      <p>Because each batch is made in limited monthly releases, and spots can fill before the next restock. If your starter doesn't activate within 48 hours, we'll replace it at no cost. Claiming now means you can start the ~72-hour activation process right away instead of waiting.</p>
      <div className="urg-actions">
        <button className="btn" onClick={onClaim}>Get My Free Starter</button>
        <a className="btn-secondary" href="mailto:support@motherscountrystore.com">Contact Us</a>
      </div>
    </section>
  );
}
window.Urgency = Urgency;