/* ============================================================
   NEUROMED — Root app
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ink-teal",
  "displayFont": "Newsreader",
  "bodyFont": "Geist",
  "rounded": false
}/*EDITMODE-END*/;

const PALETTES = [
  ["#f4f1ec", "#0d1418", "#3d6f78"], // ink-teal
  ["#faf6ef", "#1a1612", "#b3543a"], // cream-rust
  ["#eef1ed", "#14241c", "#43755e"], // mint-forest
  ["#f6f5f1", "#0b1830", "#2a55c0"], // paper-cobalt
  ["#0d1418", "#ece9e1", "#6aa3a7"], // dark
];
const PALETTE_IDS = ["ink-teal", "cream-rust", "mint-forest", "paper-cobalt", "dark"];

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const [booking, setBooking] = React.useState({ open: false, step: 1, data: null, seq: 0 });
  const [patho, setPatho] = React.useState(null);
  const onBook = () => setBooking((b) => ({ open: true, step: 1, data: null, seq: b.seq + 1 }));
  const onContinue = (prefill) => setBooking((b) => ({ open: true, step: 2, data: prefill, seq: b.seq + 1 }));
  const closeBooking = () => setBooking((b) => ({ ...b, open: false }));

  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette);
    document.documentElement.style.setProperty("--display-font", `"${t.displayFont}", serif`);
    document.documentElement.style.setProperty("--body-font", `"${t.bodyFont}", sans-serif`);
    document.documentElement.style.setProperty("--radius", t.rounded ? "10px" : "2px");
  }, [t]);

  return (
    <>
      <Novedades />
      <Nav onBook={onBook} />
      <Hero onBook={onBook} />
      <TrackRecord />
      <Services onBook={onBook} />
      <Approach />
      <Patologias onOpen={setPatho} />
      <Quirofano />
      <Guardia />
      <Equipo />
      <Testimonio />
      <BookingInline onBook={onBook} onContinue={onContinue} />
      <FAQ />
      <CtaBand onBook={onBook} />
      <Footer />
      <BookingModal key={booking.seq} open={booking.open} initialStep={booking.step} initialData={booking.data} onClose={closeBooking} />
      <PatologiaModal id={patho} onClose={() => setPatho(null)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Paleta">
          <TweakColor
            label="Color system"
            value={PALETTES[PALETTE_IDS.indexOf(t.palette)]}
            options={PALETTES}
            onChange={(p) => setT("palette", PALETTE_IDS[PALETTES.findIndex(x => x[0] === p[0] && x[1] === p[1])])}
          />
        </TweakSection>
        <TweakSection title="Tipografía">
          <TweakSelect
            label="Display"
            value={t.displayFont}
            options={["Newsreader", "Instrument Serif", "Bricolage Grotesque", "Reckless Neue"]}
            onChange={(v) => setT("displayFont", v)}
          />
          <TweakSelect
            label="Body"
            value={t.bodyFont}
            options={["Geist", "Inter Tight", "DM Sans", "Söhne"]}
            onChange={(v) => setT("bodyFont", v)}
          />
        </TweakSection>
        <TweakSection title="Estilo">
          <TweakToggle label="Esquinas redondeadas" value={t.rounded} onChange={(v) => setT("rounded", v)} />
        </TweakSection>
        <TweakSection title="Acción">
          <TweakButton onClick={onBook}>Abrir flujo de turno</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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