// ============ App shell — route state, Tweaks, mount ============

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "teal",
  "fontPair": "manrope-source-serif",
  "density": "comfortable"
}/*EDITMODE-END*/;

const PALETTES = {
  teal: {
    name: "Brand teal",
    swatch: ["#008B8C", "#98B9A8", "#005F66"],
    "--teal": "#008B8C",
    "--teal-deep": "#005F66",
    "--teal-soft": "#D6EAE7",
    "--sage": "#98B9A8",
    "--sage-soft": "#E7EFE9",
    "--focus": "#008B8C",
  },
  sage: {
    name: "Sage forward",
    swatch: ["#5A8F7B", "#98B9A8", "#37624F"],
    "--teal": "#5A8F7B",
    "--teal-deep": "#37624F",
    "--teal-soft": "#E2EBE5",
    "--sage": "#98B9A8",
    "--sage-soft": "#EDF2EE",
    "--focus": "#5A8F7B",
  },
  porcelain: {
    name: "Quiet porcelain",
    swatch: ["#3A5460", "#B5C0BD", "#1F3A47"],
    "--teal": "#3A5460",
    "--teal-deep": "#1F3A47",
    "--teal-soft": "#E3EAEE",
    "--sage": "#B5C0BD",
    "--sage-soft": "#EEF1F0",
    "--focus": "#3A5460",
  },
};

const FONT_PAIRS = {
  "manrope-source-serif": {
    name: "Manrope + Source Serif",
    "--sans": '"Manrope", system-ui, sans-serif',
    "--serif": '"Source Serif 4", Georgia, serif',
  },
  "manrope-newsreader": {
    name: "Manrope + Newsreader",
    "--sans": '"Manrope", system-ui, sans-serif',
    "--serif": '"Newsreader", Georgia, serif',
  },
  "ibmplex-fraunces": {
    name: "IBM Plex + Fraunces",
    "--sans": '"IBM Plex Sans", system-ui, sans-serif',
    "--serif": '"Fraunces", Georgia, serif',
  },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState({ name: "home" });
  const [bookOpen, setBookOpen] = React.useState(false);

  // Apply palette / font tweaks
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.teal;
    const f = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS["manrope-source-serif"];
    const root = document.documentElement;
    Object.entries(p).forEach(([k, v]) => { if (k.startsWith("--")) root.style.setProperty(k, v); });
    Object.entries(f).forEach(([k, v]) => { if (k.startsWith("--")) root.style.setProperty(k, v); });
    document.body.classList.toggle("density-compact", tweaks.density === "compact");
  }, [tweaks.palette, tweaks.fontPair, tweaks.density]);

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

  const onBook = () => setBookOpen(true);

  return (
    <>
      <TrustBar />
      <Navbar route={route} setRoute={setRoute} onBook={onBook} />

      {route.name === "home" && <HomeScreen setRoute={setRoute} onBook={onBook} />}
      {route.name === "specialties" && <SpecialtiesScreen setRoute={setRoute} onBook={onBook} />}
      {route.name === "treatment" && <TreatmentScreen setRoute={setRoute} onBook={onBook} />}
      {route.name === "doctors" && <DoctorsScreen setRoute={setRoute} />}
      {route.name === "doctor" && <DoctorProfileScreen setRoute={setRoute} onBook={onBook} id={route.id} />}
      {route.name === "about" && <AboutScreen setRoute={setRoute} onBook={onBook} />}
      {route.name === "contact" && <ContactScreen onBook={onBook} />}

      <Footer setRoute={setRoute} />
      <FAB onBook={onBook} />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            label="Direction"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "teal", label: "Teal" },
              { value: "sage", label: "Sage" },
              { value: "porcelain", label: "Slate" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakSelect
            label="Type pair"
            value={tweaks.fontPair}
            onChange={(v) => setTweak("fontPair", v)}
            options={Object.entries(FONT_PAIRS).map(([value, p]) => ({ value, label: p.name }))}
          />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="Spacing"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfortable", label: "Roomy" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Demo helpers">
          <TweakButton label="Open booking flow" onClick={() => setBookOpen(true)} />
          <TweakButton label="Jump: treatment journey" onClick={() => setRoute({ name: "treatment", id: "fue-hair-transplant" })} secondary />
          <TweakButton label="Jump: visiting doctor" onClick={() => setRoute({ name: "doctor", id: "ken-arashiro" })} secondary />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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