// Biolite — main app

function App() {
  const [route, setRoute] = useState({ page: "home" });
  const [booking, setBooking] = useState(false);
  const [bookingTreatment, setBookingTreatment] = useState(null);
  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "accent": "gold",
    "density": "editorial",
    "showStickyRail": true
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(tweakDefaults);

  // Apply tweaks via CSS vars
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accent === "gold") {
      root.style.setProperty("--brand-grad", "linear-gradient(180deg, #FCEDC9 0%, #EAC175 100%)");
      root.style.setProperty("--brand-grad-h", "linear-gradient(90deg, #FCEDC9 0%, #EAC175 100%)");
      root.style.setProperty("--gold-1", "#FCEDC9");
      root.style.setProperty("--gold-2", "#EAC175");
      root.style.setProperty("--gold-deep", "#B79766");
    } else if (tweaks.accent === "moss") {
      root.style.setProperty("--brand-grad", "linear-gradient(180deg, #9DBDB1 0%, #2C463F 100%)");
      root.style.setProperty("--brand-grad-h", "linear-gradient(90deg, #9DBDB1 0%, #2C463F 100%)");
      root.style.setProperty("--gold-1", "#D6E1D9");
      root.style.setProperty("--gold-2", "#6B8278");
      root.style.setProperty("--gold-deep", "#2C463F");
    } else if (tweaks.accent === "rose") {
      root.style.setProperty("--brand-grad", "linear-gradient(180deg, #F0CDB9 0%, #B07A60 100%)");
      root.style.setProperty("--brand-grad-h", "linear-gradient(90deg, #F0CDB9 0%, #B07A60 100%)");
      root.style.setProperty("--gold-1", "#F0CDB9");
      root.style.setProperty("--gold-2", "#C68E72");
      root.style.setProperty("--gold-deep", "#9C6549");
    } else if (tweaks.accent === "ink") {
      root.style.setProperty("--brand-grad", "linear-gradient(180deg, #5C6F69 0%, #1B2724 100%)");
      root.style.setProperty("--brand-grad-h", "linear-gradient(90deg, #5C6F69 0%, #1B2724 100%)");
      root.style.setProperty("--gold-1", "#5C6F69");
      root.style.setProperty("--gold-2", "#2E3B36");
      root.style.setProperty("--gold-deep", "#3F524C");
    }
  }, [tweaks.accent]);

  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.density === "editorial") {
      root.style.setProperty("--gutter", "32px");
    } else if (tweaks.density === "compact") {
      root.style.setProperty("--gutter", "24px");
    } else if (tweaks.density === "spacious") {
      root.style.setProperty("--gutter", "48px");
    }
  }, [tweaks.density]);

  // Reset scroll on route change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route.page, route.id]);

  const openBooking = () => setBooking(true);
  const closeBooking = () => { setBooking(false); setBookingTreatment(null); };

  let screen = null;
  if (route.page === "home") screen = <HomeScreen setRoute={setRoute} openBooking={openBooking} />;
  else if (route.page === "treatments") screen = <TreatmentsScreen route={route} setRoute={setRoute} openBooking={openBooking} />;
  else if (route.page === "treatment") screen = <TreatmentDetailScreen route={route} setRoute={setRoute} openBooking={openBooking} setBookingTreatment={setBookingTreatment} />;
  else if (route.page === "doctors") screen = <DoctorsScreen setRoute={setRoute} openBooking={openBooking} />;
  else if (route.page === "wellness") screen = <WellnessScreen setRoute={setRoute} openBooking={openBooking} />;
  else if (route.page === "about") screen = <AboutScreen setRoute={setRoute} openBooking={openBooking} />;
  else if (route.page === "ba") screen = <BeforeAfterScreen setRoute={setRoute} openBooking={openBooking} />;
  else if (route.page === "contact") screen = <ContactScreen openBooking={openBooking} />;

  return (
    <div className="page" data-screen-label={"Biolite · " + route.page}>
      <Nav route={route} setRoute={setRoute} openBooking={openBooking} />
      {screen}
      <Footer setRoute={setRoute} openBooking={openBooking} />
      {tweaks.showStickyRail && <BookRail openBooking={openBooking} />}
      <BookingModal open={booking} onClose={closeBooking} preselectedTreatment={bookingTreatment} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <TweakRadio
            label="Accent palette"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "gold", label: "Gold (brand)" },
              { value: "moss", label: "Moss" },
              { value: "rose", label: "Rose" },
              { value: "ink", label: "Mono ink" },
            ]}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "editorial", label: "Editorial" },
              { value: "spacious", label: "Spacious" },
            ]}
          />
          <TweakToggle
            label="Mobile sticky book-rail"
            value={tweaks.showStickyRail}
            onChange={(v) => setTweak("showStickyRail", v)}
          />
        </TweakSection>
        <TweakSection label="Try a flow">
          <TweakButton label="Open booking modal" onClick={() => { setBookingTreatment(null); openBooking(); }} />
          <TweakButton label="Jump to Morpheus8 treatment" onClick={() => setRoute({ page: "treatment", id: "morpheus8" })} />
          <TweakButton label="Jump to wellness pathway" onClick={() => setRoute({ page: "wellness" })} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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