const { Navbar, Footer, Button, Icon } = window.FriendsCarsDesignSystem_f69f0e;

const LINKS = ["Home", "Fleet", "Why us", "Contact"];
const Logo = ({ h, mark }) => <img className="fc-logo" src={mark ? "assets/brand/friends-car-mark.png" : "assets/brand/friends-car-logo.png"} alt="Friends Car — self-drive car rental in Mumbai" width={mark ? 700 : 900} height={mark ? 177 : 284} style={{ height: h, width: "auto" }} />;

function MobileNav({ links, active, onNavigate, onBook }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const pick = (fn) => { setOpen(false); requestAnimationFrame(fn); };
  return (
    <React.Fragment>
      <button className="fc-burger" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} onClick={() => setOpen(!open)}>
        <Icon name={open ? "x" : "menu"} size={20} />
      </button>
      <div className="fc-mobar">
        <button className="fc-mobar-brand" onClick={() => pick(() => onNavigate("Home"))} aria-label="Friends Car — home"><Logo h={30} mark /></button>
        <button className="fc-mobar-call" onClick={() => pick(() => onBook(null))}>Book</button>
      </div>
      <div className="fc-drawer" data-open={open ? "1" : "0"} role="dialog" aria-modal="true" aria-label="Menu" aria-hidden={open ? "false" : "true"}>
        <nav className="fc-drawer-links">
          {links.map((l) => (
            <button key={l} className="fc-drawer-link" data-on={active === l ? "1" : "0"} onClick={() => pick(() => onNavigate(l))}>
              <span>{l}</span><Icon name="arrow-right" size={16} />
            </button>
          ))}
        </nav>
        <div className="fc-drawer-foot">
          <Button variant="primary" size="lg" fullWidth iconRight="arrow-right" onClick={() => pick(() => onBook(null))}>Book a car</Button>
          <div className="fc-drawer-calls">
            <a href={"tel:" + window.BIZ.tel1}><Icon name="phone" size={15} />{window.BIZ.phone1}</a>
            <a href={"tel:" + window.BIZ.tel2}><Icon name="phone" size={15} />{window.BIZ.phone2}</a>
          </div>
        </div>
      </div>
      <span className="fc-drawer-scrim" data-open={open ? "1" : "0"} onClick={() => setOpen(false)} aria-hidden="true"></span>
    </React.Fragment>
  );
}

function App() {
  const [route, setRoute] = React.useState("Home");
  const [car, setCar] = React.useState(null);

  const go = (r, c) => { setRoute(r); if (c !== undefined) setCar(c); window.scrollTo({ top: 0, behavior: "instant" }); };

  const navigate = (link) => {
    if (link === "Why us" || link === "Contact") {
      if (route !== "Home") go("Home");
      requestAnimationFrame(() => {
        const el = document.querySelector(link === "Why us" ? ".fc-why" : "footer");
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 120, behavior: "smooth" });
      });
      return;
    }
    go(link);
  };

  const openCar = (c) => go("Vehicle", c);
  const book = (c) => go("Booking", c || null);

  return (
    <React.Fragment>
      <div className="fc-navdesk">
        <Navbar brand={<Logo h={38} mark />} links={LINKS} active={LINKS.indexOf(route) > -1 ? route : "Fleet"} onNavigate={navigate} cta="Book now" onCta={() => book(null)} sticky style={{ background: "rgba(2,12,15,.58)" }} />
      </div>
      <MobileNav links={LINKS} active={LINKS.indexOf(route) > -1 ? route : "Fleet"} onNavigate={navigate} onBook={book} />
      <main>
        {route === "Home" ? <window.HomeScreen onOpen={openCar} onNavigate={navigate} onBook={book} /> : null}
        {route === "Fleet" ? <window.FleetScreen onOpen={openCar} onBook={book} /> : null}
        {route === "Vehicle" ? <window.VehicleScreen car={car} onBack={() => go("Fleet")} onBook={book} onOpen={openCar} /> : null}
        {route === "Booking" ? <window.BookingScreen car={car} onOpen={openCar} onNavigate={navigate} /> : null}
      </main>
      <Footer brand={<Logo h={46} />}
        tagline={"Self-drive cars in " + window.BIZ.city + " since " + window.BIZ.since + ". " + window.BIZ.phone1 + " · " + window.BIZ.phone2 + "."}
        columns={[
          { title: "Fleet", links: ["Premium", "MUV", "7 seater", "Sedan", "Hatchback"] },
          { title: "Booked most", links: ["Mercedes-Benz GLE", "Mahindra Thar", "Toyota Innova Crysta", "Hyundai Creta", "Maruti Suzuki Baleno"] },
          { title: "Company", links: ["How it works", "Why book with us", "Questions", "Reviews on Google"] },
          { title: "Contact", links: [window.BIZ.phone1, window.BIZ.phone2, window.BIZ.city] }
        ]}
        social={["instagram", "facebook", "youtube"]}
        legal={"© " + new Date().getFullYear() + " " + window.BIZ.name + ". Self-drive rentals, " + window.BIZ.city + "."} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);