// fleet.jsx — the collection (filter chips + vehicle cards)
const { useState: useFleetState, useEffect: useFleetEffect } = React;

function CarCarousel({ images, alt }) {
  const [i, setI] = useFleetState(0);
  const [paused, setPaused] = useFleetState(false);
  useFleetEffect(() => {
    if (paused || images.length < 2) return;
    const t = setInterval(() => setI(x => (x + 1) % images.length), 3200);
    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="vcard-3d vcard-carstage"
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="carousel-imgs">
        {images.map((src, k) => (
          <img key={src} className={`vcard-car ${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 VehicleCard({ v, idx, style, onReserve }) {
  const price = typeof v.price === "number" ? `from $${v.price.toLocaleString()}/day` : "Pricing TBD";
  if (style === "editorial") {
    return (
      <article className="vcard vcard-ed" style={{ animationDelay: `${idx * 70}ms` }}>
        <div className="vcard-ed-media">
          <PhotoPlaceholder ratio="16 / 9" tone="emerald" />
          <span className="vcard-ed-cat">{v.cat}</span>
          <span className="vcard-ed-index">{String(idx + 1).padStart(2, "0")}</span>
        </div>
        <div className="vcard-ed-body">
          <h3 className="vcard-name">{v.name}</h3>
          <p className="vcard-line">{v.line}</p>
          <div className="vcard-ed-foot">
            <span className="vcard-price">{price}</span>
            <button className="vcard-reserve" onClick={() => onReserve(v.name)}>Reserve<i /></button>
          </div>
        </div>
      </article>
    );
  }
  return (
    <article className="vcard vcard-img" style={{ animationDelay: `${idx * 70}ms` }}>
      <div className="vcard-media">
        {v.images ? (
          <CarCarousel images={v.images} alt={v.name} />
        ) : (
          <PhotoPlaceholder ratio="16 / 11" tone="dark" />
        )}
        <span className="vcard-cat">{v.cat}</span>
      </div>
      <div className="vcard-body">
        <h3 className="vcard-name">{v.name}</h3>
        <p className="vcard-line">{v.line}</p>
        <div className="vcard-foot">
          <span className="vcard-price">{price}</span>
          <button className="vcard-reserve" onClick={() => onReserve(v.name)}>Reserve<i /></button>
        </div>
      </div>
    </article>
  );
}

function Fleet({ cardStyle = "image", onReserve }) {
  const [filter, setFilter] = useFleetState("All");
  const shown = filter === "All" ? FLEET : FLEET.filter(v => v.cat === filter);
  return (
    <section className="section fleet" id="fleet">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <Eyebrow>The Collection</Eyebrow>
            <h2 className="section-title">The Fleet</h2>
            <p className="section-intro">
              We don’t measure ourselves by how many keys hang on the wall. Every vehicle in the
              Chairman’s Reserve collection is hand-selected to make an entrance — and earn a second look.
            </p>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <div className="filters">
            {CATEGORIES.map((c) => (
              <button key={c} className={`chip ${filter === c ? "is-active" : ""}`} onClick={() => setFilter(c)}>
                {c}
              </button>
            ))}
          </div>
        </Reveal>

        <div className={`fleet-grid grid-${cardStyle}`} key={filter}>
          {shown.map((v, i) => (
            <VehicleCard key={v.name} v={v} idx={i} style={cardStyle} onReserve={onReserve} />
          ))}
        </div>

        <Reveal delay={60}>
          <p className="fleet-closing">
            Don’t see it? <span>We source on request.</span> Tell us what you have in mind.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Fleet, CarCarousel, VehicleCard });