/* global React, Icon, Header, Footer, SectionHead, BookingModal, ImageryNote, saveQuote, loadQuote */
const { useState: useHS } = React;
const HNS = window.BlackLuxuryLimoDesignSystem_3e0f4d;

function HomeBookingWidget({ onQuote }) {
  const { Input, Button } = HNS;
  const [tab, setTab] = useHS("Airport");
  const [pickup, setPickup] = useHS("YYZ — Pearson Intl (Terminal 1)");
  const [dropoff, setDropoff] = useHS("Downtown Toronto, ON");
  const [date, setDate] = useHS("Jun 24, 2026");
  const [time, setTime] = useHS("6:45 AM");
  const tabs = ["Airport", "Hourly", "Point to Point"];
  const submit = () => {
    saveQuote({ service: tab, pickup, dropoff, date, time });
    onQuote();
  };
  return (
    <div style={{
      width: "420px", maxWidth: "100%",
      background: "rgba(17,20,15,0.86)", backdropFilter: "blur(18px)",
      border: "1px solid var(--border-gold)", borderRadius: "var(--r-xl)",
      boxShadow: "var(--shadow-xl)", overflow: "hidden",
    }}>
      <div style={{ display: "flex", borderBottom: "1px solid var(--border-subtle)" }}>
        {tabs.map((t) => (
          <button key={t} onClick={() => setTab(t)} style={{
            flex: 1, padding: "15px 8px", background: "transparent", border: "none", cursor: "pointer",
            fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 600,
            letterSpacing: "0.08em", textTransform: "uppercase",
            color: tab === t ? "var(--gold-400)" : "var(--text-muted)",
            borderBottom: tab === t ? "2px solid var(--gold-500)" : "2px solid transparent",
            transition: "color var(--dur-base) var(--ease-out)",
          }}>{t}</button>
        ))}
      </div>
      <div style={{ padding: "22px", display: "flex", flexDirection: "column", gap: "14px" }}>
        <Input label="Pickup" icon={<Icon name="map-pin" size={16} />} value={pickup} onChange={(e) => setPickup(e.target.value)} />
        <Input label={tab === "Hourly" ? "Duration" : "Drop-off"} icon={<Icon name={tab === "Hourly" ? "clock" : "navigation"} size={16} />} value={dropoff} onChange={(e) => setDropoff(e.target.value)} />
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "12px" }}>
          <Input label="Date" icon={<Icon name="calendar" size={16} />} value={date} onChange={(e) => setDate(e.target.value)} />
          <Input label="Time" icon={<Icon name="clock" size={16} />} value={time} onChange={(e) => setTime(e.target.value)} />
        </div>
        <Button variant="primary" size="lg" block onClick={submit} iconRight={<Icon name="arrow-right" size={18} />}>Get Instant Quote</Button>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", color: "var(--text-muted)", fontSize: "12.5px" }}>
          <Icon name="shield-check" size={14} style={{ color: "var(--gold-500)" }} /> Free cancellation · No card required for quote
        </div>
      </div>
    </div>
  );
}

function HomeHero({ onQuote }) {
  const { Badge, RatingStars } = HNS;
  return (
    <section style={{ position: "relative", minHeight: "740px", display: "flex", alignItems: "center", overflow: "hidden" }}>
      <img src="assets/img/chauffeur-arrival.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(7,9,10,0.94) 0%, rgba(7,9,10,0.72) 42%, rgba(7,9,10,0.30) 100%)" }} />
      <div style={{ position: "absolute", inset: 0, background: "var(--grad-scrim-top)" }} />
      <div style={{ position: "relative", width: "100%", maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 40px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "48px", flexWrap: "wrap" }}>
        <div style={{ maxWidth: "560px", display: "flex", flexDirection: "column", gap: "24px" }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-400)" }}>Toronto · GTA · Airport &amp; Corporate</span>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "72px", lineHeight: 1.04, letterSpacing: "-0.01em", color: "var(--cream-50)", margin: 0 }}>Arrive in black.<br />Travel in quiet luxury.</h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "18px", lineHeight: 1.6, color: "var(--beige-200)", margin: 0, maxWidth: "480px" }}>Premium 24/7 black car &amp; airport limo service. Professional chauffeurs, immaculate SUVs and sedans, flight-tracked pickups — on time, every time.</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
            <Badge variant="gold" icon={<Icon name="clock" size={12} />}>24/7 Dispatch</Badge>
            <Badge variant="green" icon={<Icon name="shield-check" size={12} />}>Licensed &amp; Insured</Badge>
            <Badge variant="outline" icon={<Icon name="plane-takeoff" size={12} />}>Flight Tracked</Badge>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "14px", marginTop: "4px" }}>
            <RatingStars value={5} score="4.9" count="1,200+ five-star rides" />
          </div>

        </div>
        <HomeBookingWidget onQuote={onQuote} />
      </div>
    </section>
  );
}

function HomeServices() {
  const { ServiceCard } = HNS;
  const items = [
    { icon: "plane-takeoff", title: "Airport Transfers", description: "Flat-rate rides to YYZ Pearson & Billy Bishop. Flight-tracked with complimentary wait time and meet-and-greet at arrivals.", price: "$75", featured: true, href: "airport-limo.html" },
    { icon: "briefcase", title: "Corporate Chauffeur", description: "Executive black-car accounts with priority dispatch, vetted chauffeurs and consolidated monthly billing.", price: "$95", href: "services.html" },
    { icon: "gem", title: "Weddings & Events", description: "Red-carpet arrivals in pristine SUVs and stretch limousines. Decor, champagne service and a dedicated coordinator.", price: "$140", href: "services.html" },
    { icon: "clock", title: "Hourly Charter", description: "Keep a chauffeur on call for meetings, tours or a night out. As-directed service, billed by the hour.", price: "$90", href: "services.html" },
    { icon: "route", title: "Long-Distance", description: "Door-to-door comfort to Niagara, Muskoka, Ottawa, Montreal and cross-border. Fixed quotes, no surprises.", price: "$1.95/km", href: "services.html" },
    { icon: "crown", title: "Private Black Car", description: "Your own discreet chauffeur for VIP and private clients. NDA available, always punctual, always polished.", price: "Custom", href: "services.html" },
  ];
  return (
    <section id="services" style={{ padding: "110px 40px", background: "var(--bg-base)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "52px" }}>
        <SectionHead eyebrow="What We Drive" title="Service for every occasion" sub="From a 5 a.m. airport run to a wedding entrance — one fleet, one standard, available around the clock." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "22px" }}>
          {items.map((it) => (
            <a key={it.title} href={it.href} style={{ textDecoration: "none", display: "flex", flexDirection: "column", height: "100%" }}>
              <ServiceCard icon={<Icon name={it.icon} size={24} />} title={it.title} description={it.description} price={it.price} featured={it.featured} style={{ flex: 1 }} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeFleet() {
  const { Badge, Button } = HNS;
  const classes = [
    { name: "Executive Sedan", ex: "Cadillac · Mercedes E-Class", pax: 3, bags: 2, icon: "car-front", img: "assets/img/sedan-luggage.jpg" },
    { name: "Luxury SUV", ex: "Cadillac Escalade · Suburban", pax: 6, bags: 6, icon: "car", img: "assets/img/luxury-suv.jpg" },
    { name: "Premium Van", ex: "Mercedes Sprinter", pax: 11, bags: 12, icon: "bus", img: "assets/img/city-dusk.jpg" },
    { name: "Stretch Limousine", ex: "Lincoln · Chrysler 300", pax: 8, bags: 4, icon: "gem", img: "assets/img/night-city.jpg" },
  ];
  const [sel, setSel] = useHS(1);
  return (
    <section id="fleet" style={{ padding: "110px 40px", background: "var(--grad-ink)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "48px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "24px", flexWrap: "wrap" }}>
          <SectionHead align="start" eyebrow="The Fleet" title="Immaculate, every ride" sub="Late-model vehicles, professionally detailed before every trip and driven by uniformed chauffeurs." />
          <a href="fleet.html"><Button variant="outline" size="md" iconRight={<Icon name="arrow-right" size={16} />}>View full fleet</Button></a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: "28px", alignItems: "stretch" }}>
          <div style={{ position: "relative", borderRadius: "var(--r-xl)", overflow: "hidden", minHeight: "420px", border: "1px solid var(--border-subtle)" }}>
            <img src={classes[sel].img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "var(--grad-scrim-bottom)" }} />
            <div style={{ position: "absolute", left: "26px", bottom: "24px", right: "26px" }}>
              {sel >= 2 && <Badge variant="gold">Placeholder image</Badge>}
              <div style={{ fontFamily: "var(--font-display)", fontSize: "30px", color: "var(--cream-50)", marginTop: "12px" }}>{classes[sel].name}</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--beige-300)", marginTop: "4px" }}>{classes[sel].ex}</div>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
            {classes.map((c, i) => (
              <button key={c.name} onClick={() => setSel(i)} style={{
                display: "flex", alignItems: "center", gap: "18px", textAlign: "left",
                padding: "20px 22px", cursor: "pointer",
                background: i === sel ? "var(--grad-olive)" : "var(--surface-card)",
                border: `1px solid ${i === sel ? "var(--border-gold)" : "var(--border-subtle)"}`,
                borderRadius: "var(--r-lg)", flex: 1,
                transition: "border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)",
              }}>
                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "46px", height: "46px", borderRadius: "var(--r-md)", background: "rgba(204,166,78,0.10)", border: "1px solid var(--border-gold)", color: "var(--gold-400)", flexShrink: 0 }}>
                  <Icon name={c.icon} size={22} />
                </span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "19px", color: "var(--text-primary)" }}>{c.name}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", marginTop: "2px" }}>{c.ex}</div>
                </div>
                <div style={{ display: "flex", gap: "16px", fontFamily: "var(--font-mono)", fontSize: "13px", color: "var(--text-secondary)" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: "5px" }}><Icon name="user" size={13} style={{ color: "var(--gold-500)" }} />{c.pax}</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: "5px" }}><Icon name="luggage" size={13} style={{ color: "var(--gold-500)" }} />{c.bags}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeTrust() {
  const { Card, RatingStars } = HNS;
  const stats = [
    { n: "24/7", l: "Dispatch & support", icon: "clock" },
    { n: "50k+", l: "Rides completed", icon: "route" },
    { n: "4.9★", l: "Average rating", icon: "star" },
    { n: "99.2%", l: "On-time pickups", icon: "badge-check" },
  ];
  const reviews = [
    { q: "Driver was waiting at arrivals with a sign, tracked my delayed flight, and had water ready. This is how airport travel should feel.", a: "Daniel R.", r: "YYZ → Downtown" },
    { q: "We book Black Luxury for every executive visit. Spotless Escalades, discreet chauffeurs, billing handled monthly. Flawless.", a: "Priya M.", r: "Corporate account" },
    { q: "They made our wedding exit unforgettable — champagne, red carpet, and a chauffeur who thought of everything.", a: "The Okafors", r: "Wedding · Casa Loma" },
  ];
  return (
    <section id="reviews" style={{ padding: "110px 40px", background: "var(--bg-base)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "52px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "20px" }}>
          {stats.map((s) => (
            <div key={s.l} style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "26px", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--r-lg)" }}>
              <Icon name={s.icon} size={20} style={{ color: "var(--gold-500)" }} />
              <div style={{ fontFamily: "var(--font-display)", fontSize: "38px", color: "var(--gold-400)", lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", letterSpacing: "0.02em" }}>{s.l}</div>
            </div>
          ))}
        </div>
        <SectionHead eyebrow="What Riders Say" title="Trusted by Toronto's executives" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "22px" }}>
          {reviews.map((rv, i) => (
            <Card key={i} variant={i === 0 ? "gold" : "default"} padding="lg" style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
              <RatingStars value={5} size={15} />
              <p style={{ fontFamily: "var(--font-display)", fontSize: "19px", lineHeight: 1.5, color: "var(--text-primary)", margin: 0, letterSpacing: "-0.005em" }}>“{rv.q}”</p>
              <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: "12px", paddingTop: "8px", borderTop: "1px solid var(--border-subtle)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "38px", height: "38px", borderRadius: "50%", background: "var(--olive-700)", color: "var(--gold-400)", fontFamily: "var(--font-display)", fontSize: "15px" }}>{rv.a[0]}</span>
                <div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 600, color: "var(--text-primary)" }}>{rv.a}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "12px", color: "var(--text-muted)" }}>{rv.r}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  const [modal, setModal] = useHS(false);
  return (
    <div>
      <Header active="index.html" />
      <HomeHero onQuote={() => setModal(true)} />
      <AirportStrip />
      <HomeServices />
      <HomeFleet />
      <HomeTrust />
      <Footer />
      <BookingModal open={modal} onClose={() => setModal(false)} quote={loadQuote()} />
    </div>
  );
}
window.HomePage = HomePage;
