const Hero = ({ onBook }) => {
  return (
    <section id="top" className="hero">
      <div className="hero-bg">
        <div className="hero-grid"></div>
        <div className="hero-glow"></div>
        <div className="hero-particles" aria-hidden>
          <span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span>
        </div>
      </div>

      <div className="container hero-inner">
        <div className="hero-left">
          <div className="eyebrow">Los Angeles · Malibu → Newport Beach</div>
          <h1 className="hero-title">
            Premium <span className="gold-text">car wash</span>,<br/>
            delivered to your door.
          </h1>
          <p className="hero-sub">
            Prestige Auto Spa Mobile brings 15 years of professional auto
            care to your home, office, or preferred location — for everything
            from daily drivers to Teslas, Ferraris, and Rolls Royces.
          </p>

          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onBook}>
              Get a quote &amp; book <Icon name="arrow" size={14}/>
            </button>
            <a className="btn btn-ghost" href="#services" onClick={(e)=>{e.preventDefault(); document.getElementById('services').scrollIntoView({behavior:'smooth'});}}>
              View services
            </a>
          </div>

          <ul className="hero-trust">
            <li><Icon name="truck" size={16}/> Mobile service</li>
            <li><Icon name="shield" size={16}/> Secure card payments</li>
            <li><Icon name="clock" size={16}/> Fast online booking</li>
            <li><Icon name="sparkle" size={16}/> Professional auto care</li>
          </ul>
        </div>

        <div className="hero-right">
          <div className="hero-card">
            <div className="gold-corner tl"></div>
            <div className="gold-corner tr"></div>
            <div className="gold-corner bl"></div>
            <div className="gold-corner br"></div>

            <div className="hero-card-img ph ph-img">
              [ HERO IMAGE — luxury vehicle being detailed at sunset ]
            </div>

            <div className="hero-card-meta">
              <div className="hero-stat">
                <span className="serif gold-text">15</span>
                <span className="mono">Years experience</span>
              </div>
              <div className="hero-stat-divider"></div>
              <div className="hero-stat">
                <span className="serif gold-text">2,400+</span>
                <span className="mono">Vehicles detailed</span>
              </div>
              <div className="hero-stat-divider"></div>
              <div className="hero-stat">
                <span className="serif gold-text">4.9</span>
                <span className="mono">Avg. rating</span>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div className="hero-marquee">
        <div className="hero-marquee-track">
          {Array(2).fill(0).map((_,i) => (
            <div key={i} className="hero-marquee-group">
              <span>★ Tesla certified</span>
              <span>· Ceramic coating</span>
              <span>· Paint correction</span>
              <span>· Interior deep clean</span>
              <span>· Wax &amp; polish</span>
              <span>· Eco-friendly products</span>
              <span>· Mobile to you</span>
              <span>· Pay by card, Zelle, Cash App, Venmo, PayPal</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;