// Hero
function Hero({ onQuoteClick }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <image-slot
          id="hero-photo"
          shape="rect"
          placeholder="Drop a cinematic jet-on-tarmac shot — golden hour, low angle"
        ></image-slot>
      </div>

      <div className="hero-content">
        <div className="hero-tagline">
          <span className="line"></span>
          <span className="eyebrow"><span className="dot"></span>Pilot-led private aviation · est. 2026</span>
        </div>

        <h1 className="display">
          Elevate <em>every</em><br/>
          journey.
        </h1>

        <div style={{ marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap" }}>
          <button className="btn btn-primary" onClick={onQuoteClick}>
            Request a Quote <Icons.Arrow />
          </button>
          <a href="#fleet" className="btn" onClick={(e) => { e.preventDefault(); document.getElementById("fleet")?.scrollIntoView({ behavior: "smooth" }); }}>
            Browse Fleet
          </a>
        </div>

        <div className="hero-meta">
          <div className="meta-item">
            <span className="label">Network</span>
            <span className="value">Established operator relationships</span>
          </div>
          <div className="meta-item">
            <span className="label">Coverage</span>
            <span className="value">Worldwide · 170+ countries</span>
          </div>
          <div className="meta-item">
            <span className="label">Response</span>
            <span className="value tabular">under 15 minutes</span>
          </div>
          <div className="meta-item">
            <span className="label">Operations</span>
            <span className="value">24 / 7 / 365</span>
          </div>
        </div>
      </div>

      <div className="scroll-indicator">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

window.Hero = Hero;