// home.jsx — Home page

function Nav({ t, locale, onLocale, onNav, transparent, onBookOpen }) {
  return (
    <header className={`nav ${transparent ? "nav-trans" : ""}`}>
      <div className="nav-inner">
        <a className="nav-brand" onClick={() => onNav("home")}>
          <Wordmark height={14} />
          <span className="nav-brand-sub">Rent A Car · Dubai</span>
        </a>
        <nav className="nav-links">
          <a onClick={() => onNav("home")}>{t.nav.fleet}</a>
          <a>{t.nav.services}</a>
          <a>{t.nav.about}</a>
          <a>{t.nav.contact}</a>
        </nav>
        <div className="nav-right">
          <button className="nav-lang" onClick={onLocale} title={t.locale.switchTo}>
            <span>{locale === "en" ? "EN" : "ع"}</span>
            <span className="nav-lang-sep">/</span>
            <span className="dim">{locale === "en" ? "ع" : "EN"}</span>
          </button>
          <a className="nav-wa" href="https://wa.me/971545265555" target="_blank" rel="noopener">
            <Icon.Whatsapp size={14} />
            <span>{t.cta.whatsapp}</span>
          </a>
          <Btn variant="solid" onClick={onBookOpen}>{t.cta.book}</Btn>
        </div>
      </div>
    </header>
  );
}

function Hero({ t, heroMode, featured, onOpenCar, onBookOpen }) {
  const [scroll, setScroll] = React.useState(0);
  React.useEffect(() => {
    if (heroMode !== "parallax") return;
    const onScroll = () => setScroll(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [heroMode]);

  const parY = heroMode === "parallax" ? Math.min(scroll * 0.25, 220) : 0;
  const parZ = heroMode === "parallax" ? 1 + Math.min(scroll * 0.0003, 0.08) : 1;

  return (
    <section className="hero">
      <div className="hero-bg">
        <div
          className="hero-img"
          style={{
            backgroundImage: `url(${featured.image})`,
            transform: `translateY(${parY}px) scale(${parZ})`,
          }}
        />
        <div className="hero-vignette" />
        <div className="hero-grid" />
      </div>

      <div className="hero-top">
        <Kicker>{t.hero.kicker}</Kicker>
        <div className="hero-loc">
          <Icon.Pin size={12} /> Dubai · UAE
        </div>
      </div>

      <div className="hero-headline">
        <h1>
          <span className="hl-line">{t.hero.title[0]}</span>
          <span className="hl-line hl-italic">{t.hero.title[1]}</span>
          <span className="hl-line">{t.hero.title[2]}</span>
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-ctas">
          <Btn variant="solid" iconRight={<Icon.Arrow size={12} />} onClick={onBookOpen}>{t.cta.book}</Btn>
          <a className="btn btn-ghost" href="https://wa.me/971545265555" target="_blank" rel="noopener">
            <Icon.Whatsapp size={14} />
            <span>{t.cta.whatsapp}</span>
          </a>
        </div>
      </div>

      {/* Featured release strip */}
      <div className="hero-feature" onClick={() => onOpenCar(featured.id)}>
        <div className="hf-left">
          <span className="hf-kicker">
            <span className="kicker-dot live" />
            {t.hero.featured_label}
          </span>
          <div className="hf-name">
            <span className="hf-make">{featured.make}</span>
            <span className="hf-model hl-italic">{featured.model}</span>
          </div>
        </div>
        <div className="hf-specs">
          <div><span className="hf-k">Engine</span><span className="hf-v">{featured.engine}</span></div>
          <div><span className="hf-k">Power</span><span className="hf-v">{featured.power}</span></div>
          <div><span className="hf-k">0–100</span><span className="hf-v">{featured.accel}</span></div>
          <div><span className="hf-k">{t.fleet.from}</span><span className="hf-v hf-rate">{featured.daily}<small>/{t.fleet.day}</small></span></div>
        </div>
        <div className="hf-cta">
          <span>{t.cta.view}</span>
          <Icon.Arrow size={14} />
        </div>
      </div>
    </section>
  );
}

function TrustStrip({ t }) {
  return (
    <section className="trust">
      {t.trust.map((it, i) => (
        <div key={i} className="trust-item">
          <span className="trust-k">{it.k}</span>
          <h3 className="trust-h">{it.label}</h3>
          <p className="trust-b">{it.body}</p>
        </div>
      ))}
    </section>
  );
}

function FleetSection({ t, locale, onOpenCar }) {
  const [filter, setFilter] = React.useState("all");
  const filtered = window.FLEET.filter(c => {
    if (filter === "all") return true;
    if (filter === "long") return true; // demo: all available for long-term
    if (filter === "convertible") return /convert/i.test(c.body);
    return c.bodyKey === filter;
  });

  return (
    <section className="fleet" id="fleet">
      <div className="fleet-head">
        <div>
          <Kicker>{t.fleet.sub}</Kicker>
          <h2 className="section-h">
            <span>{t.fleet.title.split(" ")[0]}</span>
            <span className="hl-italic"> {t.fleet.title.split(" ").slice(1).join(" ")}</span>
          </h2>
        </div>
        <div className="fleet-filters">
          {t.fleet.filters.map((f, i) => {
            const key = t.fleet.filterKeys[i];
            return (
              <button
                key={key}
                className={`chip ${filter === key ? "chip-on" : ""}`}
                onClick={() => setFilter(key)}
              >
                {f}
              </button>
            );
          })}
        </div>
      </div>

      <div className="fleet-grid">
        {filtered.map((c, i) => (
          <CarCard key={c.id} car={c} t={t} onOpen={() => onOpenCar(c.id)} idx={i} />
        ))}
      </div>

      <div className="fleet-foot">
        <button className="link-arrow" onClick={() => {}}>
          <span>{t.fleet.view_all}</span>
          <Icon.Arrow size={14} />
        </button>
      </div>
    </section>
  );
}

function CarCard({ car, t, onOpen, idx }) {
  return (
    <article className={`car ${!car.available ? "car-out" : ""} ${idx === 0 ? "car-big" : ""}`}
      onClick={car.available ? onOpen : undefined}>
      <div className="car-media">
        <img src={car.image} alt={`${car.make} ${car.model}`} loading="lazy" />
        <div className="car-media-grad" />
        {!car.available && (
          <div className="car-badge">{t.fleet.sold_out}</div>
        )}
        {car.featured && car.available && idx === 0 && (
          <div className="car-badge car-badge-live"><span className="kicker-dot live" />Featured</div>
        )}
      </div>
      <div className="car-meta">
        <div className="car-name">
          <span className="car-make">{car.make}</span>
          <span className="car-model hl-italic">{car.model}</span>
        </div>
        <div className="car-row">
          <span className="car-spec">{car.body}</span>
          <span className="car-dot">·</span>
          <span className="car-spec">{car.power}</span>
          <span className="car-dot">·</span>
          <span className="car-spec">{car.accel} 0–100</span>
        </div>
        <div className="car-rate">
          <span className="car-from">{t.fleet.from}</span>
          <span className="car-price">{car.daily}</span>
          <span className="car-day">/ {t.fleet.day}</span>
        </div>
      </div>
    </article>
  );
}

function PromoBlock({ t, showPromo }) {
  if (!showPromo) return null;
  return (
    <section className="promo">
      <div className="promo-inner">
        <div className="promo-text">
          <Kicker>{t.promo.kicker}</Kicker>
          <h3 className="promo-h">
            <span className="hl-italic">{t.promo.title}</span>
          </h3>
          <p>{t.promo.sub}</p>
          <button className="link-arrow"><span>{t.promo.cta}</span><Icon.Arrow size={14} /></button>
        </div>
        <div className="promo-rule" />
        <div className="promo-meta">
          <div><span className="hf-k">Window</span><span className="hf-v">Fri 26 Jun – Sun 28 Jun</span></div>
          <div><span className="hf-k">Delivery</span><span className="hf-v">AED 0 in Dubai</span></div>
          <div><span className="hf-k">Detail</span><span className="hf-v">Complimentary</span></div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection({ t }) {
  return (
    <section className="services">
      <div className="services-head">
        <Kicker>04 services</Kicker>
        <h2 className="section-h">
          {t.services.title.split(" ").slice(0, -1).join(" ")}{" "}
          <span className="hl-italic">{t.services.title.split(" ").slice(-1)[0]}</span>
        </h2>
      </div>
      <div className="services-grid">
        {t.services.items.map((s, i) => (
          <div key={i} className="service">
            <span className="service-k">0{i + 1}</span>
            <h3>{s.t}</h3>
            <p>{s.b}</p>
            <span className="service-arrow"><Icon.Arrow size={14} /></span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Footer({ t, locale }) {
  return (
    <footer className="foot">
      <div className="foot-top">
        <div className="foot-brand">
          <Wordmark height={18} />
          <p>Luxury & exotic car rental.<br />Al Quoz Industrial Area 3, Dubai.</p>
        </div>
        <div className="foot-cols">
          <div className="foot-col">
            <h4>{t.footer.cols.fleet}</h4>
            <ul><li>Supercars</li><li>Convertibles</li><li>Luxury SUV</li><li>Sport</li><li>Long term</li></ul>
          </div>
          <div className="foot-col">
            <h4>{t.footer.cols.services}</h4>
            <ul><li>Delivery</li><li>Airport pickup</li><li>Chauffeur</li><li>Photoshoot</li></ul>
          </div>
          <div className="foot-col">
            <h4>{t.footer.cols.company}</h4>
            <ul><li>About</li><li>How it works</li><li>Insurance</li><li>Press</li></ul>
          </div>
          <div className="foot-col">
            <h4>{t.footer.cols.contact}</h4>
            <ul>
              <li><a href="tel:+971545265555">+971 54 526 5555</a></li>
              <li><a href="https://wa.me/971545265555">WhatsApp</a></li>
              <li><a href="https://t.me/paddockrentacar">Telegram</a></li>
              <li className="dim">Email · on request</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="foot-mid">
        <div className="foot-addr">
          {t.footer.address_lines.map((l, i) => (
            <div key={i} className={i === 0 ? "" : "dim"}>{l}</div>
          ))}
        </div>
        <div className="foot-hours">
          <Icon.Clock size={12} />
          <span>{t.footer.hours}</span>
          <span className="dim">·</span>
          <span className="dim">{t.footer.hours_garage}</span>
        </div>
        <div className="foot-langs">{t.footer.languages}</div>
      </div>

      <div className="foot-bot">
        <span>{t.footer.legal}</span>
        <span className="dim">Demo prototype · v1</span>
      </div>
    </footer>
  );
}

function MobileCta({ t, onBookOpen }) {
  return (
    <div className="mob-cta">
      <a className="mob-wa" href="https://wa.me/971545265555">
        <Icon.Whatsapp size={16} /><span>{t.cta.whatsapp}</span>
      </a>
      <button className="mob-book" onClick={onBookOpen}>
        <span>{t.cta.book}</span><Icon.Arrow size={12} />
      </button>
    </div>
  );
}

Object.assign(window, { Nav, Hero, TrustStrip, FleetSection, CarCard, PromoBlock, ServicesSection, Footer, MobileCta });