// chauffeur.jsx — Chauffeur Service page: limousines & luxury Sprinters, driven
const { useState: useChfState, useEffect: useChfEffect } = React;

function ChfCarousel({ images, alt }) {
  const [i, setI] = useChfState(0);
  const [paused, setPaused] = useChfState(false);
  useChfEffect(() => {
    if (paused || images.length < 2) return;
    const t = setInterval(() => setI(x => (x + 1) % images.length), 3600);
    return () => clearInterval(t);
  }, [paused, images.length]);
  const go = (n) => setI((n + images.length) % images.length);
  const Chevron = ({ d }) => (
    <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
  );
  return (
    <div className="chf-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="chf-carousel-imgs">
        {images.map((src, k) => (
          <img key={src} className={`chf-car-img ${k === i ? "is-active" : ""}`} src={src} alt={alt} loading="eager" />
        ))}
      </div>
      <button className="carousel-arrow ca-prev" onClick={() => go(i - 1)} aria-label="Previous photo"><Chevron d="M15 6l-6 6 6 6" /></button>
      <button className="carousel-arrow ca-next" onClick={() => go(i + 1)} aria-label="Next photo"><Chevron d="M9 6l6 6-6 6" /></button>
      <div className="carousel-dots">
        {images.map((_, k) => (
          <button key={k} className={`cdot ${k === i ? "is-active" : ""}`} onClick={() => setI(k)} aria-label={`Photo ${k + 1}`} />
        ))}
      </div>
    </div>
  );
}

function Chauffeur({ onHome, onReserve }) {
  const tones = ["dark", "emerald", "chrome", "dark"];
  return (
    <main className="chauffeur-page">
      <section className="chf-hero">
        <div className="chf-hero-bg" />
        <div className="container chf-hero-inner">
          <Reveal className="chf-hero-content">
            <div className="eyebrow"><span className="eyebrow-tick" />Chauffeur Service</div>
            <h1 className="chf-page-title">Arrive in the <em>Back Seat.</em></h1>
            <p className="chf-page-sub">
              Private limousines and luxury Sprinters, driven by a professional. Every hour includes
              your driver, fuel, and unlimited stops — so the only thing on your mind is the occasion.
            </p>
            <button className="text-link" onClick={onHome}>← Back to Chairman’s Reserve</button>
          </Reveal>
        </div>
      </section>

      <section className="section chf-collection">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <Eyebrow>The Chauffeured Collection</Eyebrow>
              <h2 className="section-title">Four Ways to Be Driven</h2>
            </div>
          </Reveal>
          <div className="chf-rows">
            {CHAUFFEUR.map((v, i) => (
              <Reveal key={v.name} delay={i * 60} className={`chf-row ${i % 2 ? "is-flip" : ""}`}>
                <div className="chf-row-media">
                  {v.images ? (
                    <ChfCarousel images={v.images} alt={v.name} />
                  ) : (
                    <PhotoPlaceholder label={v.name} ratio="4 / 3" tone={tones[i % tones.length]} />
                  )}
                  <span className="chf-row-seats">{v.seats}</span>
                </div>
                <div className="chf-row-body">
                  <span className="chf-row-cat">{v.cat}</span>
                  <h3 className="chf-row-name">{v.name}</h3>
                  <p className="chf-row-line">{v.line}</p>
                  <p className="chf-row-desc">{v.desc}</p>
                  <ul className="chf-feats">
                    {v.features.map((f) => (
                      <li key={f}>
                        <span className="chf-tick">
                          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 6.5" /></svg>
                        </span>
                        {f}
                      </li>
                    ))}
                  </ul>
                  <div className="chf-row-foot">
                    <span className="chf-rate">
                      <span className="chf-rate-amt">$$$ <em>/ hr</em></span>
                      <span className="chf-rate-note">Driver · fuel · unlimited stops included</span>
                    </span>
                    <GoldButton size="md" onClick={() => scrollToInquiry("chauffeur-inquiry")}>Reserve</GoldButton>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <InquiryForm
        id="chauffeur-inquiry"
        eyebrow="Chauffeur Inquiry"
        title="Book a Chauffeur"
        intro="Tell us where you’re headed and how long you’ll need us. A member of the Reserve will confirm your driver and the particulars personally."
        interestLabel="Vehicle"
        interestPlaceholder="Select a vehicle…"
        interestOptions={[...CHAUFFEUR.map((v) => v.name), "Not sure yet"]}
        datesLabel="Date Needed"
        datesPlaceholder="Select a date…"
        dateMode="single"
        submitText="Request Booking"
        sentTitle="Booking Requested"
        messagePlaceholder="Pickup location, hours needed, number of guests, occasion…"
      />
    </main>
  );
}

Object.assign(window, { Chauffeur });