function Hero({ onClaim }) {
  const heroBg = (window.__resources && window.__resources.heroArtisan) || '/assets/photos/hero-artisan.webp';
  return (
    <section className="hero" style={{ backgroundImage: `url('${heroBg}')` }}>
      <style>{`
        .hero { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; padding: 80px var(--gutter); background-size: cover; background-position: center; }
        @media (min-width: 768px) { .hero { min-height: 560px; } }
        .hero-card { background: rgba(243, 239, 229, 0.94); border: 1px solid rgba(17,21,28,0.1); padding: 32px 28px; max-width: 560px; text-align: center; backdrop-filter: blur(6px); }
        @media (min-width: 768px) { .hero-card { padding: 44px 48px; } }
        .hero h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin-bottom: 14px; }
        .hero p { font-size: 14px; line-height: 1.6; color: var(--color-text); margin: 0 0 22px; max-width: 48ch; margin-inline: auto; }
        .hero p .em { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; transition: color 200ms cubic-bezier(0.2,0,0,1); }
        .hero p .em:hover { color: var(--color-primary-dark); }
      `}</style>
      <div className="hero-card">
        <h1>Why Are We Giving Away $20 LIVE Sourdough Starters For Free?</h1>
        <p>
          Good Question. Here's The Honest Answer: We'd Rather 100 People Try Our Heritage Yeast & Tell Their Friends Than Spend $5,000 On Facebook Ads Hoping Strangers Might Care. <a className="em" href="#" onClick={(e)=>{e.preventDefault();onClaim();}}>Fair Trade? Claim Your Free Starter Here →</a>
        </p>
        <button className="btn" onClick={onClaim}>Get My Free Starter</button>
      </div>
    </section>
  );
}
window.Hero = Hero;