/* Superior Car Rental — Home + Fleet screens */
const { useState, useEffect, useMemo, useRef } = React;

/* =========================
   NAV
   ========================= */
const Nav = ({ route, navigate, light = false }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll); onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "fleet", label: "Fleet" },
    { id: "brands", label: "Brands" },
    { id: "chauffeur", label: "Chauffeur" },
    { id: "how", label: "How it Works" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className={`nav ${scrolled?"scrolled":""} ${light?"light":""}`} data-screen-label="nav">
      <a onClick={() => navigate({ name: "home" })} style={{cursor:"pointer"}}>
        <SuperiorWordmark light={light} height={26} />
      </a>
      <div className="nav-links">
        {links.map(l => (
          <a key={l.id} onClick={() => navigate({ name: l.id })}
             className={route.name === l.id ? "active" : ""}
             style={{cursor:"pointer"}}>{l.label}</a>
        ))}
      </div>
      <div className="nav-right">
        <div className="lang-pill">
          <span className="active">EN</span>
          <span style={{opacity:0.4}}>AR</span>
          <span style={{opacity:0.4}}>RU</span>
          <span style={{opacity:0.4}}>中</span>
        </div>
        <Button kind="ghost" size="sm" className={light?"dark":""} onClick={() => window.open("tel:+971567671411")}>
          <Icon.Phone className="icon-sm"/> +971 56 767 1411
        </Button>
        <Button kind="primary" size="sm" onClick={() => navigate({ name: "fleet" })}>Reserve</Button>
      </div>
    </nav>
  );
};

/* =========================
   HERO (home)
   ========================= */
const Hero = ({ navigate }) => {
  return (
    <section className="hero" data-screen-label="hero">
      <div className="hero-media">
        <img src="assets/car-rolls-royce-cullinan-mansory.webp" alt="Featured Rolls-Royce Cullinan"/>
      </div>
      <div className="hero-content">
        <Eyebrow gold>Since 2019 · Dubai · Al Quoz 3</Eyebrow>
        <h1 className="hero-title" style={{marginTop: 22}}>
          Dubai's luxury cars,<br/><span className="serif-it" style={{color:"var(--accent)"}}>delivered.</span>
        </h1>
        <p style={{maxWidth: 540, marginTop: 24, color: "var(--muted-2)", fontSize: 17}}>
          120+ supercars, sedans and SUVs. Free delivery to your hotel, residence or DXB. Self-drive or with a licensed chauffeur — 24/7 by WhatsApp.
        </p>
        <div className="hero-ctas">
          <Button kind="primary" size="lg" onClick={() => navigate({ name: "fleet" })}>
            Browse fleet <Icon.Arrow/>
          </Button>
          <Button kind="whatsapp" size="lg" onClick={() => window.open(waLink("Hi Superior Rental, I'd like to rent a car."))}>
            <Icon.Whatsapp/> Reserve on WhatsApp
          </Button>
        </div>
        <div className="hero-meta">
          <div>
            <div className="eyebrow">Featured today</div>
            <div className="meta-val">Rolls-Royce Cullinan Mansory · 2024</div>
          </div>
          <div>
            <div className="eyebrow">From</div>
            <div className="meta-val"><Aed/>4,800<span style={{color:"var(--muted-2)",fontFamily:"var(--font-mono)",fontSize:11,marginLeft:6}}>/ day · indicative</span></div>
          </div>
          <div>
            <div className="eyebrow">Pickup</div>
            <div className="meta-val">DXB · Hotel · Residence</div>
          </div>
        </div>
      </div>
      <div className="hero-strip">
        <div className="hero-strip-items">
          <span><Icon.Truck className="icon-sm"/> <b>Free delivery</b> in Dubai & UAE</span>
          <span><Icon.Clock className="icon-sm"/> <b>24/7</b> support</span>
          <span><Icon.Shield className="icon-sm"/> <b>Fully insured</b> &amp; licensed</span>
          <span><Icon.Sparkle className="icon-sm"/> <b>Licensed chauffeurs</b> EN / AR</span>
        </div>
        <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",letterSpacing:"0.1em"}}>
          120+ FLEET · 30+ BRANDS
        </div>
      </div>
    </section>
  );
};

/* =========================
   CATEGORY NAV
   ========================= */
const CategoryStrip = ({ navigate, cats }) => {
  const counts = useMemo(() => {
    const o = { all: SCR_DATA.FLEET.length };
    SCR_DATA.FLEET.forEach(c => { o[c.cat] = (o[c.cat]||0)+1; });
    return o;
  }, []);
  return (
    <section className="section section-noir" data-screen-label="categories">
      <div className="shell-wide">
        <div className="section-head">
          <div>
            <Eyebrow gold>02 / Browse by body</Eyebrow>
            <h2 style={{marginTop: 18}}>Pick your <span className="serif-it">silhouette</span>.</h2>
          </div>
          <div className="section-head-actions">
            <Button kind="ghost" onClick={() => navigate({name:"fleet"})}>See all fleet <Icon.Arrow/></Button>
          </div>
        </div>
        <div className="cat-grid">
          {cats.map(c => (
            <div key={c.id} className="cat-card" onClick={() => navigate({name:"fleet", cat: c.id})}>
              <img src={c.image} alt={c.label}/>
              <div className="cat-card-label">
                <div className="name">{c.label}</div>
                <div className="count">{counts[c.id]||0} cars</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* =========================
   FEATURED FLEET (home)
   ========================= */
const CarCard = ({ car, onClick, light = false }) => (
  <div className={`car-card ${light?"light":""}`} onClick={onClick}>
    <div className="car-card-media">
      <img src={car.image} alt={`${car.make} ${car.model}`}/>
      <div className="car-card-badge">{car.cat}</div>
      <div className="car-card-fav" onClick={(e) => { e.stopPropagation(); }}><Icon.Heart className="icon-sm"/></div>
    </div>
    <div className="car-card-body">
      <div>
        <div className="car-card-make">{car.make}</div>
        <div className="car-card-head">
          <div className="car-card-name">{car.model}</div>
          <div className="car-card-year">{car.year}</div>
        </div>
      </div>
      <div className="car-card-specs">
        <div><Icon.Seats className="icon-sm"/> {car.seats}</div>
        <div><Icon.Doors className="icon-sm"/> {car.doors}</div>
        <div><Icon.Trans className="icon-sm"/> {car.transmission.split(" ")[0]}</div>
        <div><Icon.Speed className="icon-sm"/> {car.power}</div>
      </div>
      <div className="car-card-price">
        <div className="car-card-price-val">
          <div>
            <div style={{fontFamily:"var(--font-mono)",fontSize:10,color:"var(--muted-2)",letterSpacing:"0.15em",textTransform:"uppercase",marginBottom:2}}>from</div>
            <div className="row" style={{gap:4,alignItems:"baseline"}}>
              <span className="ccy"><Aed/></span>
              <span className="amt">{SCR_DATA.formatAED(car.fromRate)}</span>
              <span className="per">/ day</span>
            </div>
          </div>
        </div>
        <div className="car-card-cta">View <Icon.Arrow className="icon-sm"/></div>
      </div>
    </div>
  </div>
);

const FeaturedFleet = ({ navigate, cars }) => (
  <section className="section section-ink" data-screen-label="featured">
    <div className="shell-wide">
      <div className="section-head">
        <div>
          <Eyebrow gold>03 / Just arrived</Eyebrow>
          <h2 style={{marginTop:18}}>The cars our <span className="serif-it">clients ask for.</span></h2>
        </div>
        <div className="section-head-actions">
          <Button kind="ghost" onClick={() => navigate({name:"fleet"})}>All 120+ cars <Icon.Arrow/></Button>
        </div>
      </div>
      <div className="fleet-grid">
        {cars.filter(c => c.featured).slice(0, 6).map(c => (
          <CarCard key={c.id} car={c} onClick={() => navigate({name:"car", id: c.id})}/>
        ))}
      </div>
    </div>
  </section>
);

/* =========================
   EDITORIAL PULL + IMAGE
   ========================= */
const EditorialBlock = () => (
  <section className="section section-light" data-screen-label="editorial">
    <div className="shell-wide">
      <div style={{display:"grid",gridTemplateColumns:"1.1fr 1fr",gap:60,alignItems:"center"}}>
        <div>
          <Eyebrow>04 / The Superior promise</Eyebrow>
          <div className="pull" style={{color:"var(--ink-paper)",marginTop:24}}>
            "Your car, ready when you are.<br/>
            Delivered to your hotel.<br/>
            Picked up when you're done.<br/>
            <span className="accent">No counter. No paperwork. No queue.</span>"
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:32,marginTop:48}}>
            <div>
              <div style={{fontFamily:"var(--font-display)",fontSize:38,fontWeight:500,color:"var(--ink-paper)",letterSpacing:"-0.03em"}}>120+</div>
              <div className="eyebrow" style={{color:"var(--muted)",marginTop:6}}>Cars in fleet</div>
            </div>
            <div>
              <div style={{fontFamily:"var(--font-display)",fontSize:38,fontWeight:500,color:"var(--ink-paper)",letterSpacing:"-0.03em"}}>24<span style={{fontSize:24,color:"var(--muted)"}}>/7</span></div>
              <div className="eyebrow" style={{color:"var(--muted)",marginTop:6}}>WhatsApp support</div>
            </div>
            <div>
              <div style={{fontFamily:"var(--font-display)",fontSize:38,fontWeight:500,color:"var(--ink-paper)",letterSpacing:"-0.03em"}}>2019</div>
              <div className="eyebrow" style={{color:"var(--muted)",marginTop:6}}>Trading since</div>
            </div>
          </div>
        </div>
        <div style={{aspectRatio:"4/5",overflow:"hidden",borderRadius:4,background:"#000"}}>
          <img src="assets/car-mclaren-750s-spider.webp" alt="McLaren 750S delivery"
               style={{width:"100%",height:"100%",objectFit:"cover"}}/>
        </div>
      </div>
    </div>
  </section>
);

/* =========================
   CHAUFFEUR PROMO BLOCK
   ========================= */
const ChauffeurPromo = ({ navigate }) => (
  <section className="section section-noir" style={{paddingTop:0}} data-screen-label="chauffeur-promo">
    <div className="shell-wide">
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:0,border:"1px solid var(--line-2)",borderRadius:4,overflow:"hidden"}}>
        <div style={{padding:"56px 56px 56px",display:"flex",flexDirection:"column",justifyContent:"space-between",gap:32,minHeight:520}}>
          <div>
            <Eyebrow gold>05 / A second service</Eyebrow>
            <h2 style={{marginTop:18,fontSize:"clamp(34px,3.6vw,52px)"}}>
              Don't want to drive?<br/>
              <span className="serif-it">We'll send a chauffeur.</span>
            </h2>
            <p style={{color:"var(--muted-2)",marginTop:20,fontSize:16,maxWidth:480,lineHeight:1.6}}>
              Airport transfers, corporate, weddings, private tours. English &amp; Arabic licensed chauffeurs, vehicles sanitized daily. Driver included. No deposit.
            </p>
          </div>
          <div style={{display:"flex",gap:24,flexWrap:"wrap"}}>
            <div>
              <div className="eyebrow">Phantom · One way</div>
              <div style={{fontFamily:"var(--font-display)",fontSize:32,fontWeight:500,marginTop:6}}><Aed/>1,200</div>
            </div>
            <div>
              <div className="eyebrow">S680 · 5 hours</div>
              <div style={{fontFamily:"var(--font-display)",fontSize:32,fontWeight:500,marginTop:6}}><Aed/>2,600</div>
            </div>
            <div>
              <div className="eyebrow">Cullinan · 10h</div>
              <div style={{fontFamily:"var(--font-display)",fontSize:32,fontWeight:500,marginTop:6}}><Aed/>6,800</div>
            </div>
          </div>
          <div style={{display:"flex",gap:10,flexWrap:"wrap"}}>
            <Button kind="primary" onClick={() => navigate({name:"chauffeur"})}>Rent with driver <Icon.Arrow/></Button>
            <Button kind="ghost" onClick={() => window.open(waLink("Hi Superior, I'd like a chauffeur enquiry."))}>
              <Icon.Whatsapp className="icon-sm"/> Enquire
            </Button>
          </div>
        </div>
        <div style={{position:"relative",minHeight:520,overflow:"hidden"}}>
          <img src="assets/car-mercedes-s680-maybach.webp" alt="Maybach S680"
               style={{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover"}}/>
          <div style={{position:"absolute",bottom:24,left:24,right:24,padding:18,background:"rgba(10,12,15,0.75)",backdropFilter:"blur(10px)",border:"1px solid var(--line-2)",borderRadius:4}}>
            <div className="eyebrow gold" style={{color:"var(--accent)"}}>Featured chauffeur car</div>
            <div style={{fontFamily:"var(--font-display)",fontSize:20,fontWeight:600,marginTop:4,letterSpacing:"-0.02em"}}>Mercedes-Maybach S680</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* =========================
   TRUST STRIP
   ========================= */
const TrustStrip = () => (
  <section style={{background:"var(--ink)",padding:"0 var(--pad-x)"}} data-screen-label="trust">
    <div className="shell-wide" style={{padding:0}}>
      <div className="trust-strip">
        <div className="trust-cell">
          <div className="lab">Fleet</div>
          <div className="num">120<span className="unit">+ cars</span></div>
        </div>
        <div className="trust-cell">
          <div className="lab">Brands</div>
          <div className="num">30<span className="unit">+ marques</span></div>
        </div>
        <div className="trust-cell">
          <div className="lab">Delivery</div>
          <div className="num">Free<span className="unit"> · UAE-wide</span></div>
        </div>
        <div className="trust-cell">
          <div className="lab">Support</div>
          <div className="num">24<span className="unit">/7 WhatsApp</span></div>
        </div>
        <div className="trust-cell">
          <div className="lab">Established</div>
          <div className="num">2019<span className="unit"> · Al Quoz 3</span></div>
        </div>
      </div>
    </div>
  </section>
);

/* =========================
   FOOTER
   ========================= */
const Footer = ({ navigate }) => (
  <footer className="foot" data-screen-label="footer">
    <div className="foot-grid">
      <div>
        <SuperiorWordmark height={28}/>
        <p style={{marginTop:20,maxWidth:320,lineHeight:1.6}}>
          Superior Car Rental LLC — Dubai's boutique luxury self-drive and chauffeur service. Independent rental company; not affiliated with any vehicle manufacturer.
        </p>
        <div style={{marginTop:24,display:"flex",gap:8,flexDirection:"column"}}>
          <a href="tel:+971567671411" style={{display:"flex",alignItems:"center",gap:8,color:"var(--paper)"}}>
            <Icon.Phone className="icon-sm"/> +971 56 767 1411
          </a>
          <a href={waLink("Hi Superior Rental")} style={{display:"flex",alignItems:"center",gap:8,color:"var(--paper)"}}>
            <Icon.Whatsapp className="icon-sm"/> WhatsApp
          </a>
          <div style={{display:"flex",alignItems:"flex-start",gap:8}}>
            <Icon.Pin className="icon-sm" style={{marginTop:3}}/>
            <span>Warehouse 89, 17A Street<br/>Al Quoz 3, Dubai · UAE</span>
          </div>
        </div>
      </div>
      <div>
        <h4>Fleet</h4>
        <ul>
          {SCR_DATA.CATEGORIES.map(c => <li key={c.id}><a onClick={() => navigate({name:"fleet",cat:c.id})} style={{cursor:"pointer"}}>{c.label}</a></li>)}
        </ul>
      </div>
      <div>
        <h4>Brands</h4>
        <ul>
          {SCR_DATA.BRANDS.slice(0, 8).map(b => <li key={b}><a style={{cursor:"pointer"}}>{b}</a></li>)}
        </ul>
      </div>
      <div>
        <h4>Service</h4>
        <ul>
          <li><a onClick={() => navigate({name:"chauffeur"})} style={{cursor:"pointer"}}>Rent with Driver</a></li>
          <li><a onClick={() => navigate({name:"how"})} style={{cursor:"pointer"}}>How it Works</a></li>
          <li><a style={{cursor:"pointer"}}>Requirements</a></li>
          <li><a style={{cursor:"pointer"}}>Blog</a></li>
          <li><a style={{cursor:"pointer"}}>Dubai Car Rental Stats</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a onClick={() => navigate({name:"about"})} style={{cursor:"pointer"}}>About</a></li>
          <li><a onClick={() => navigate({name:"contact"})} style={{cursor:"pointer"}}>Contact</a></li>
          <li><a style={{cursor:"pointer"}}>Privacy</a></li>
          <li><a href="https://www.instagram.com/superiorrental/" target="_blank" rel="noreferrer">Instagram</a></li>
          <li><a href="https://www.facebook.com/superiorrentaldubai/" target="_blank" rel="noreferrer">Facebook</a></li>
        </ul>
      </div>
    </div>
    <div className="foot-bottom">
      <div>© 2026 SUPERIOR CAR RENTAL LLC · DUBAI</div>
      <div>EN · AR · RU · 中文 — coming soon</div>
    </div>
  </footer>
);

/* =========================
   HOME PAGE
   ========================= */
const HomeScreen = ({ navigate }) => (
  <>
    <Hero navigate={navigate}/>
    <TrustStrip/>
    <CategoryStrip navigate={navigate} cats={SCR_DATA.CATEGORIES}/>
    <FeaturedFleet navigate={navigate} cars={SCR_DATA.FLEET}/>
    <EditorialBlock/>
    <ChauffeurPromo navigate={navigate}/>
  </>
);

Object.assign(window, { Nav, Hero, CarCard, FeaturedFleet, CategoryStrip, EditorialBlock, ChauffeurPromo, TrustStrip, Footer, HomeScreen });