// fleetpage.jsx — dedicated car-rental Fleet page (featured spotlight + sourcing grid)
function FleetPage({ onHome, onReserve }) {
  const hero = FLEET[0];
  return (
    <main className="fleet-page">
      <section className="fp-hero">
        <div className="fp-hero-bg" />
        <div className="container fp-hero-inner">
          <Reveal className="fp-hero-content">
            <div className="eyebrow"><span className="eyebrow-tick" />The Collection</div>
            <h1 className="fp-title">The Fleet</h1>
            <p className="fp-sub">
              Curated, not crowded. Every vehicle in the Chairman’s Reserve collection is hand-selected
              to make an entrance — chosen for presence, maintained to standard by Bally &amp; Co. Motors,
              and reserved for those who expect more than a rental.
            </p>
            <button className="text-link" onClick={onHome}>← Back to Chairman’s Reserve</button>
          </Reveal>
        </div>
      </section>

      <section className="section fp-feature">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <Eyebrow>Now Reserving</Eyebrow>
              <h2 className="section-title">In the Collection</h2>
            </div>
          </Reveal>
          <Reveal delay={80} className="fp-feature-card">
            <div className="fp-feature-media">
              {hero.images
                ? <CarCarousel images={hero.images} alt={hero.name} />
                : <PhotoPlaceholder ratio="16 / 11" tone="dark" />}
              <span className="vcard-cat">{hero.cat}</span>
            </div>
            <div className="fp-feature-body">
              <span className="fp-avail">Available now</span>
              <h3 className="fp-feature-name">{hero.name}</h3>
              <p className="fp-feature-line">{hero.line}</p>
              <ul className="fp-specs">
                <li><span>Class</span><strong>Luxury Coupe</strong></li>
                <li><span>Drivetrain</span><strong>AMG · 4MATIC</strong></li>
                <li><span>Seats</span><strong>5</strong></li>
                <li><span>Daily Rate</span><strong>On request</strong></li>
              </ul>
              <div className="fp-feature-foot">
                <GoldButton size="lg" onClick={() => scrollToInquiry("fleet-inquiry")}>Reserve This Vehicle</GoldButton>
                <OutlineButton size="lg" onClick={() => scrollToInquiry("fleet-inquiry")}>Inquire</OutlineButton>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section fp-segments">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <Eyebrow>Source on Request</Eyebrow>
              <h2 className="section-title">What We Source</h2>
              <p className="section-intro">
                Beyond what’s on the floor, we source to the occasion. Name the vehicle you have in mind
                and we’ll arrange it — vetted, detailed, and delivered to your door.
              </p>
            </div>
          </Reveal>
          <div className="fleet-grid grid-image">
            {FLEET_SEGMENTS.slice(0, 1).map((s, i) => (
              <Reveal key={s.name} delay={i * 60}>
                <article className="vcard vcard-img">
                  <div className="vcard-media">
                    <PhotoPlaceholder ratio="16 / 11" tone={s.tone} />
                    <span className="vcard-cat">{s.cat}</span>
                  </div>
                  <div className="vcard-body">
                    <h3 className="vcard-name">{s.name}</h3>
                    <p className="vcard-line">{s.line}</p>
                    <div className="vcard-foot">
                      <span className="vcard-price">{s.spec}</span>
                      <button className="vcard-reserve" onClick={() => scrollToInquiry("fleet-inquiry")}>Request<i /></button>
                    </div>
                  </div>
                </article>
              </Reveal>
            ))}
            <Reveal delay={60}>
              <article className="vcard fp-cta-card">
                <h3 className="vcard-name">Something specific in mind?</h3>
                <p className="vcard-line">If you can name it, we can likely source it.</p>
                <GoldButton size="md" type="outline" onClick={() => scrollToInquiry("fleet-inquiry")}>Tell Us What You Want</GoldButton>
              </article>
            </Reveal>
          </div>
        </div>
      </section>

      <InquiryForm
        id="fleet-inquiry"
        eyebrow="Fleet Inquiry"
        title="Reserve or Source a Vehicle"
        intro="Tell us which vehicle you have in mind — reserve what’s in the collection, or have us source the car for your occasion. A member of the Reserve will be in touch personally."
        interestLabel="Vehicle"
        interestPlaceholder="Select a vehicle…"
        interestOptions={[FLEET[0].name, "Source a Vehicle"]}
        docUploads={[
          { key: "license", label: "Driver’s License", hint: "PDF, JPG or PNG", icon: "id" },
          { key: "registration", label: "Registration", hint: "PDF, JPG or PNG", icon: "doc" },
        ]}
        datesLabel="Preferred Dates"
        datesPlaceholder="Select dates…"
        submitText="Request Reservation"
        sentTitle="Request Received"
        messagePlaceholder="Occasion, dates, the vehicle you have in mind, anything we should know…"
      />
    </main>
  );
}

Object.assign(window, { FleetPage });