/* ============================================================
   PRESTIGE BIMMER — App router
   ============================================================ */

/* CTA band used on home + about */
function CTABand() {
  useRevealObserver();
  return (
    <section className="ctaband">
      <div className="wrap ctaband-inner card" data-reveal="scale">
        <div className="ctaband-glow" />
        <div className="ctaband-copy">
          <span className="kicker">Ready when you are</span>
          <h2 className="display-l">Your next BMW<br />is waiting.</h2>
        </div>
        <div className="ctaband-actions">
          <a href="#/inventory" className="btn btn-primary btn-lg">Browse the collection <Icon name="arrow" size={17} /></a>
          <a href="#/contact" className="btn btn-ghost btn-lg">Talk to a specialist</a>
        </div>
      </div>
    </section>
  );
}

function Home() {
  useRevealObserver();
  return (
    <main>
      <Hero />
      <Marquee />
      <FeaturedShowcase />
      <Banner />
      <Process />
      <CTABand />
    </main>
  );
}

function AboutPage() {
  return (
    <main className="page-pad-top">
      <AboutSection />
      <Process />
      <CTABand />
    </main>
  );
}

function ContactPage() {
  return (
    <main className="page-pad-top">
      <ContactSection />
    </main>
  );
}

function PageTransition({ routeKey, children }) {
  const [shown, setShown] = useState(routeKey);
  const [cls, setCls] = useState("pt-in");
  useEffect(() => {
    if (routeKey === shown) return;
    setShown(routeKey);
    setCls("pt-enter");
    const r = requestAnimationFrame(() => setCls("pt-in"));
    return () => cancelAnimationFrame(r);
  }, [routeKey]);
  return <div className={"page-transition " + cls} key={shown}>{children}</div>;
}

function App() {
  const route = useRoute();
  const isAdmin = route.name === "admin";

  let view;
  switch (route.name) {
    case "inventory": view = <InventoryPage />; break;
    case "vehicle":   view = <VehicleDetail id={route.id} />; break;
    case "about":     view = <AboutPage />; break;
    case "contact":   view = <ContactPage />; break;
    case "admin":     view = <AdminApp />; break;
    default:          view = <Home />; break;
  }

  return (
    <React.Fragment>
      {!isAdmin && <Nav route={route} />}
      <PageTransition routeKey={route.name + (route.id || "")}>{view}</PageTransition>
      {!isAdmin && <Footer />}
      <ScrollProgress />
      <TweaksController />
    </React.Fragment>
  );
}

/* ---------------- Tweaks ---------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#1f6dff", "#4d8bff", "#0a44c4", "#5fd0ff"],
  "displayFont": "Sora",
  "motion": "Cinematic"
}/*EDITMODE-END*/;

const ACCENTS = {
  "Electric": ["#1f6dff", "#4d8bff", "#0a44c4", "#5fd0ff"],
  "Estoril":  ["#2b59d6", "#5b81ff", "#12369c", "#7fb0ff"],
  "Voltage":  ["#5a4bff", "#897bff", "#3220c2", "#b0a6ff"],
  "Glacier":  ["#0fa6c4", "#37d2e6", "#0a6f86", "#7af0ff"],
};

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

function TweaksController() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement.style;
    const [b, bb, bd, cy] = t.accent;
    r.setProperty("--blue", b);
    r.setProperty("--blue-bright", bb);
    r.setProperty("--blue-deep", bd);
    r.setProperty("--cyan", cy);
    r.setProperty("--blue-glow", hexToRgba(b, 0.45));
    r.setProperty("--blue-soft", hexToRgba(b, 0.12));
    r.setProperty("--font-display", `'${t.displayFont}', system-ui, sans-serif`);
    document.documentElement.setAttribute("data-motion", t.motion.toLowerCase());
  }, [t]);

  const accentName = Object.keys(ACCENTS).find(k => ACCENTS[k][0] === t.accent[0]) || "Electric";

  return (
    <TweaksPanel>
      <TweakSection label="Brand accent" />
      <TweakColor label="Accent" value={t.accent}
        options={Object.values(ACCENTS)}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Typography" />
      <TweakRadio label="Font" value={t.displayFont}
        options={["Sora", "Space Grotesk", "Archivo"]}
        onChange={(v) => setTweak("displayFont", v)} />
      <TweakSection label="Motion" />
      <TweakRadio label="Intensity" value={t.motion}
        options={["Subtle", "Balanced", "Cinematic"]}
        onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

/* thin top scroll-progress bar */
function ScrollProgress() {
  const ref = useRef(null);
  useEffect(() => {
    const h = () => {
      const st = window.scrollY;
      const dh = document.documentElement.scrollHeight - window.innerHeight;
      const p = dh > 0 ? st / dh : 0;
      if (ref.current) ref.current.style.transform = `scaleX(${p})`;
    };
    h(); window.addEventListener("scroll", h, { passive: true });
    window.addEventListener("hashchange", h);
    return () => { window.removeEventListener("scroll", h); window.removeEventListener("hashchange", h); };
  }, []);
  return <div className="scroll-progress"><span ref={ref} /></div>;
}

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