const { Button, IconButton, Badge, Card, Icon, MediaFrame, ProductCard, SectionHeading, StatGrid, FeatureCard, Timeline, FAQ, CTASection } = window.FriendsCarsDesignSystem_f69f0e;

/* ---------- shared ---------- */

function Shell({ children, tight, style }) {
  return <section style={{ padding: `0 var(--gutter) ${tight ? "var(--section-y-tight)" : "var(--section-y)"}`, maxWidth: "var(--page-max)", margin: "0 auto", width: "100%", display: "grid", gap: "var(--space-12)", ...style }}>{children}</section>;
}

function CarCard({ car, onOpen, style }) {
  const store = window.useStore();
  const specs = [{ icon: "fuel", label: car.fuel }, { icon: "gauge", label: car.gearbox }, { icon: "user", label: car.seats + " seats" }];
  return (
    <div className="fc-carcard" style={style} data-reveal>
      <ProductCard marque={car.marque} name={car.name} image={car.img || undefined} badge={car.badge}
        price={window.rupees(car.price) + " / day"} specs={specs} onClick={() => onOpen(car)}
        className={car.pos ? "fc-pos" : ""} style={car.pos ? { "--fc-pos": car.pos } : undefined} />
      <div className="fc-carcard-acts">
        <IconButton icon="heart" label={"Save " + car.name} variant="glass" size="sm"
          onClick={(e) => { e.stopPropagation(); store.toggle("wish", car.id); }}
          style={store.has("wish", car.id) ? { color: "var(--accent-hover)", borderColor: "var(--border-strong)" } : undefined} />
        <IconButton icon="arrow-left-right" label={"Compare " + car.name} variant="glass" size="sm"
          onClick={(e) => { e.stopPropagation(); store.toggle("compare", car.id); }}
          style={store.has("compare", car.id) ? { color: "var(--accent-hover)", borderColor: "var(--border-strong)" } : undefined} />
      </div>
    </div>
  );
}

function Rail({ children, label }) {
  const ref = React.useRef(null);
  return (
    <div className="fc-rail-wrap">
      <div className="fc-rail" ref={ref} role="list" aria-label={label}>{children}</div>
      <div className="fc-rail-nav">
        <IconButton icon="arrow-left" label="Scroll left" variant="glass" onClick={() => window.railScroll(ref.current, -1)} />
        <IconButton icon="arrow-right" label="Scroll right" variant="glass" onClick={() => window.railScroll(ref.current, 1)} />
      </div>
    </div>
  );
}

function Heading({ eyebrow, title, body, action }) {
  return (
    <div className="fc-heading" data-reveal>
      <SectionHeading eyebrow={eyebrow} title={title} body={body} />
      {action || null}
    </div>
  );
}

/* ---------- home sections ---------- */

function StatsBand() {
  const [r1, cars] = window.useCountUp(window.BIZ.cars);
  const [r2, cust] = window.useCountUp(window.BIZ.customers);
  const [r3, yrs] = window.useCountUp(new Date().getFullYear() - window.BIZ.since);
  const items = [
    { ref: r1, value: cars + "+", label: "Cars on the fleet", note: "Across eleven marques" },
    { ref: r2, value: cust + "+", label: "Customers driven", note: "Since " + window.BIZ.since },
    { ref: r3, value: yrs + " yrs", label: "On the road", note: "Family run, " + window.BIZ.city },
    { value: "24 / 7", label: "Two lines, always open", note: "Owners answer" }
  ];
  return (
    <Shell tight style={{ paddingTop: "var(--space-24)" }}>
      <div className="fc-stats" data-reveal>
        {items.map((s) => (
          <div key={s.label} className="fc-stat" ref={s.ref || null}>
            <span className="fc-stat-v">{s.value}</span>
            <span className="fc-stat-l">{s.label}</span>
            <span className="fc-stat-n">{s.note}</span>
          </div>
        ))}
      </div>
    </Shell>
  );
}

function FleetPicks({ onOpen, onNavigate }) {
  const picks = ["gle", "thar", "crysta", "creta-new", "520d", "sonet", "baleno"].map((id) => window.FLEET.find((c) => c.id === id));
  return (
    <Shell tight>
      <Heading eyebrow="The fleet" title="The ones that leave the yard first." body="Seven of the twenty-seven models on the list. Rates are per day, all inclusive of the car."
        action={<Button variant="ghost" iconRight="arrow-right" onClick={() => onNavigate("Fleet")}>See all 27</Button>} />
      <Rail label="Popular cars">
        {picks.map((c) => <CarCard key={c.id} car={c} onOpen={onOpen} />)}
      </Rail>
    </Shell>
  );
}

function CategoryExplorer({ onOpen }) {
  const [cat, setCat] = React.useState(window.CATEGORIES[0].id);
  const active = window.CATEGORIES.find((c) => c.id === cat);
  const cars = window.FLEET.filter((c) => c.cat === cat);
  return (
    <Shell tight>
      <Heading eyebrow="By category" title="Pick the shape of the trip." body={active.note} />
      <div className="fc-tabs" data-reveal role="tablist" aria-label="Vehicle categories">
        {window.CATEGORIES.map((c) => (
          <button key={c.id} role="tab" aria-selected={c.id === cat} className="fc-tab" data-on={c.id === cat ? "1" : "0"} onClick={() => setCat(c.id)}>
            {c.label}<em>{window.FLEET.filter((x) => x.cat === c.id).length}</em>
          </button>
        ))}
      </div>
      <Rail label={active.label + " cars"}>
        {cars.map((c) => <CarCard key={c.id} car={c} onOpen={onOpen} />)}
      </Rail>
    </Shell>
  );
}

function MarqueGrid({ onNavigate }) {
  return (
    <Shell tight>
      <Heading eyebrow="Marques" title="Eleven badges on the keyring." body="From a Maruti Suzuki Baleno for the week to a Mercedes-Benz GLE for the weekend." />
      <div className="fc-marques">
        {window.MARQUES.map((m) => (
          <button key={m.name} className="fc-marque" data-reveal onClick={() => onNavigate("Fleet")}>
            <MediaFrame src={m.img || undefined} alt={m.name} ratio="4 / 5" radius="var(--radius-lg)" scrim
              className="fc-pos" style={{ "--fc-pos": m.pos || "center 55%", height: "100%" }} />
            <span className="fc-marque-body">
              <strong>{m.name}</strong>
              <em>{m.count} {m.count === 1 ? "model" : "models"}</em>
            </span>
            <span className="fc-marque-go"><Icon name="arrow-right" size={18} /></span>
          </button>
        ))}
      </div>
    </Shell>
  );
}

function WhyUs() {
  return (
    <Shell tight>
      <Heading eyebrow="Why book with us" title="The small things, done properly." />
      <div className="fc-why">
        {window.WHY.map((w, i) => (
          <div key={w.title} data-reveal style={{ transitionDelay: i * 60 + "ms" }}>
            <FeatureCard icon={w.icon} index={"0" + (i + 1)} title={w.title} body={w.body} />
          </div>
        ))}
      </div>
    </Shell>
  );
}

function FeaturedCar({ onOpen }) {
  const car = window.FLEET.find((c) => c.id === "gle");
  return (
    <Shell tight>
      <div className="fc-featured" data-reveal>
        <MediaFrame src={car.img} alt={car.name} ratio="21 / 9" radius="var(--radius-hero)" scrim
          className="fc-pos fc-featured-img" style={{ "--fc-pos": "center 58%" }} />
        <div className="fc-featured-copy">
          <Badge tone="accent" icon="sparkles">Flagship of the fleet</Badge>
          <h3>The one you book for the weekend that matters.</h3>
          <p>Diesel, automatic, five seats and a boot that swallows a wedding's worth of luggage. Delivered to your door in {window.BIZ.city}.</p>
          <div className="fc-featured-specs">
            <span><Icon name="fuel" size={15} color="var(--accent)" /> {car.fuel}</span>
            <span><Icon name="gauge" size={15} color="var(--accent)" /> {car.gearbox}</span>
            <span><Icon name="user" size={15} color="var(--accent)" /> {car.seats} seats</span>
            <span><Icon name="shield-check" size={15} color="var(--accent)" /> Roadside assistance</span>
          </div>
          <div className="fc-featured-foot">
            <span className="fc-hero-rate">{window.rupees(car.price)} <em>/ day</em></span>
            <Button variant="floating" size="lg" iconRight="arrow-right" onClick={() => onOpen(car)}>Reserve the GLE</Button>
          </div>
        </div>
      </div>
    </Shell>
  );
}

function HowItWorks() {
  return (
    <Shell tight>
      <div className="fc-how">
        <Heading eyebrow="How it works" title="Three steps, ten minutes." body="No forms you have to print, no counter to queue at." />
        <div data-reveal><Timeline items={window.STEPS} /></div>
      </div>
    </Shell>
  );
}

function Reviews() {
  return (
    <Shell tight>
      <Card variant="glass" padding="var(--space-16)" radius="var(--radius-hero)" glow style={{ display: "grid", gap: "var(--space-8)", justifyItems: "center", textAlign: "center" }}>
        <div data-reveal style={{ display: "grid", gap: "var(--space-4)", justifyItems: "center" }}>
          <span className="fc-eyebrow">Reviews</span>
          <h3 style={{ fontSize: "var(--fs-section)", letterSpacing: "var(--ls-section)", fontWeight: "var(--fw-semibold)", lineHeight: "var(--lh-heading)", maxWidth: "18ch" }}>Sixty thousand customers, and every word of it public.</h3>
          <p style={{ color: "var(--text-secondary)", maxWidth: "var(--measure-lead)", fontSize: "var(--fs-lead)", fontWeight: "var(--fw-light)" }}>We do not write our own testimonials. Read what people who have driven our cars said on Google, then decide.</p>
          <Button variant="secondary" size="lg" iconRight="arrow-right" as="a" href={window.BIZ.reviews}>Read the reviews on Google</Button>
        </div>
      </Card>
    </Shell>
  );
}

function FaqBlock() {
  return (
    <Shell tight>
      <div className="fc-faq">
        <Heading eyebrow="Questions" title="Asked before every booking." />
        <div data-reveal><FAQ items={window.FAQ_ITEMS} defaultOpen={0} /></div>
      </div>
    </Shell>
  );
}

function ClosingCTA({ onBook }) {
  return (
    <Shell>
      <div data-reveal>
        <CTASection eyebrow="Ready when you are" title="Tell us the dates. We will have the car outside." body={"Book online, or call " + window.BIZ.phone1 + " and " + window.BIZ.phone2 + " — one of us always picks up."}
          primaryCta="Book a car" secondaryCta={"Call " + window.BIZ.phone1} onPrimary={onBook} onSecondary={() => { window.location.href = "tel:" + window.BIZ.tel1; }} />
      </div>
    </Shell>
  );
}

Object.assign(window, { Shell, CarCard, Rail, Heading, StatsBand, FleetPicks, CategoryExplorer, MarqueGrid, WhyUs, FeaturedCar, HowItWorks, Reviews, FaqBlock, ClosingCTA });