// seaair.jsx — combined Sea & Air division "Coming Soon" page (marine + air)
function SeaAirPage({ onHome, onReserve }) {
  return (
    <main className="marine seaair-page">
      <section className="marine-hero">
        <div className="marine-hero-bg" />
        <div className="container marine-hero-inner">
          <Reveal className="marine-hero-content">
            <div className="eyebrow"><span className="eyebrow-tick" />Sea &amp; Air Division</div>
            <h1 className="marine-title">Sea &amp; Air</h1>
            <p className="marine-sub">
              Beyond the road, the Reserve continues — private yachts, jets, helicopters, and air
              concierge services — all arranged through trusted partners and held to the same
              uncompromising standard.
            </p>
            <button className="text-link" onClick={onHome}>← Back to Chairman’s Reserve</button>
          </Reveal>
        </div>
      </section>

      <section className="section marine-preview">
        <div className="container">
          <Reveal>
            <div className="marine-preview-head">
              <Eyebrow align="center" style={{ justifyContent: "center" }}>First to the Marina</Eyebrow>
              <h2 className="section-title">By Sea</h2>
            </div>
          </Reveal>
          <Reveal delay={100} className="marine-boat">
            <div className="marine-boat-media">
              <figure className="seaair-shot air-feature">
                <img src="https://images.unsplash.com/photo-1562281302-809108fd533c?auto=format&fit=crop&w=1100&q=80" alt="Private yacht charter on open water" loading="lazy" />
                <figcaption className="seaair-shot-tag">By Sea</figcaption>
              </figure>
            </div>
            <div className="marine-boat-meta">
              <span className="marine-boat-ey">Reservation list open</span>
              <h3 className="marine-boat-name">Private Boat &amp; Yacht</h3>
              <p className="marine-boat-desc">
                Day charters, weekend escapes, and special occasions on the water. Join the
                reservation list and we’ll reach out the moment our marine collection is available
                to charter.
              </p>
              <GoldButton size="md" onClick={() => scrollToInquiry("seaair-inquiry")}>Join the Reservation List</GoldButton>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section marine-preview seaair-air-block">
        <div className="container">
          <Reveal>
            <div className="marine-preview-head">
              <Eyebrow align="center" style={{ justifyContent: "center" }}>First to the Tarmac</Eyebrow>
              <h2 className="section-title">By Air</h2>
            </div>
          </Reveal>
          <Reveal delay={100} className="marine-boat seaair-air-row">
            <div className="marine-boat-media">
              <figure className="seaair-shot air-feature">
                <img src="https://images.unsplash.com/photo-1540962351504-03099e0a754b?auto=format&fit=crop&w=1100&q=80" alt="Private jet with airstairs lowered on the tarmac" loading="lazy" />
                <figcaption className="seaair-shot-tag">By Air</figcaption>
              </figure>
            </div>
            <div className="marine-boat-meta">
              <span className="marine-boat-ey">Reservation list open</span>
              <h3 className="marine-boat-name">Private Jet &amp; Air Concierge</h3>
              <p className="marine-boat-desc">
                From a light jet for a quick hop to a heavy cabin for the long haul — plus helicopter
                transfers and on-the-ground coordination. Tell us where you’re headed and we’ll
                assemble the itinerary as our air concierge comes online.
              </p>
              <GoldButton size="md" onClick={() => scrollToInquiry("seaair-inquiry")}>Join the Reservation List</GoldButton>
            </div>
          </Reveal>
        </div>
      </section>

      <InquiryForm
        id="seaair-inquiry"
        eyebrow="Sea &amp; Air Inquiry"
        title="Inquire About Sea &amp; Air"
        intro="Tell us what you have in mind — on the water or in the sky — and a member of the Reserve will reach out personally as our collection comes online."
        divisions={["Sea", "Air"]}
        divisionLabel="Sea or Air"
        interestLabel="Interest"
        interestPlaceholder="Select a service…"
        interestOptions={["Day Charter", "Weekend Charter", "Private Jet Charter", "Helicopter Transfer", "Special Occasion", "Corporate / Group", "Not sure yet"]}
        datesLabel="Preferred Dates"
        datesPlaceholder="Select dates…"
        submitText="Request Information"
        sentTitle="Inquiry Received"
        messagePlaceholder="Destination, group size, occasion, anything we should know…"
      />
    </main>
  );
}

Object.assign(window, { SeaAirPage });