function Hero() {
  return (
    <section className="lmc-surface" style={{ position: 'relative', padding: '90px 0 110px', borderBottom: '2px solid var(--lmc-black)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' }}>
        <div>
          <span className="eyebrow">Cannabiz · since launch one</span>
          <h1 style={{ fontSize: 76, lineHeight: 0.95, fontWeight: 700, letterSpacing: '-0.03em', margin: '20px 0 18px' }}>
            Launch <span className="marker" style={{ fontSize: 88, display: 'inline-block', transform: 'rotate(-3deg)', margin: '0 6px' }}>your</span><br />
            cannabiz.
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--lmc-black)', maxWidth: 520, margin: '0 0 32px', fontWeight: 500 }}>
            Permits, storefront, capital, branding — handled. We move you from pitch deck to opening day in months, not years.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="#signup" className="btn-pop">Sign Up Now →</a>
            <a href="#process" className="btn-ghost">See how it works</a>
          </div>
          <div style={{ marginTop: 36, display: 'flex', gap: 28, fontSize: 13, fontWeight: 600, color: 'var(--lmc-black)' }}>
            <span>↳ 120+ launches</span>
            <span>↳ Sacramento · Bay · LA</span>
            <span>↳ Permit-first approach</span>
          </div>
        </div>
        <div style={{ position: 'relative', alignSelf: 'stretch', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <img src="../../assets/samples/sample-12-plant-frame.jpg" alt="" style={{
            width: '100%', maxWidth: 420, aspectRatio: 1, objectFit: 'cover',
            border: '3px solid var(--lmc-black)', borderRadius: 14,
            boxShadow: '10px 10px 0 var(--lmc-black)',
            transform: 'rotate(2deg)'
          }} />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;