// app.jsx — assembles the page, manages booking modal + tweaks
const { useState: useAState, useEffect: useAEffect } = React;

const ACCENTS = {
  "#5C7355": { ink: "#41512F", second: "#E89F7C", name: "Sage" },
  "#E89F7C": { ink: "#B5603C", second: "#5C7355", name: "Peach" },
};
const PAPERS = {
  Cream: { bg: "#F4EFE3", paper: "#FCFAF3", card: "#EBE3D2", ink: "#2E2A22", soft: "#6E6656", line: "#E1D8C5" },
  Warm:  { bg: "#EFE7D6", paper: "#FAF5E9", card: "#E4DAC4", ink: "#2E2820", soft: "#6E6452", line: "#DACDB4" },
  Mist:  { bg: "#EEF0EA", paper: "#FBFCF8", card: "#E2E5DC", ink: "#272A23", soft: "#64685E", line: "#DCDFD4" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5C7355",
  "paper": "Cream",
  "headlineFont": "DM Sans",
  "heroLayout": "Split",
  "radius": 18
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booking, setBooking] = useAState({ open: false, service: null });
  const openBooking = (service) => setBooking({ open: true, service: typeof service === "string" ? service : null });

  useAEffect(() => {
    const r = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS["#5C7355"];
    const p = PAPERS[t.paper] || PAPERS.Cream;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-ink", a.ink);
    r.setProperty("--accent-2", a.second);
    r.setProperty("--bg", p.bg);
    r.setProperty("--paper", p.paper);
    r.setProperty("--card", p.card);
    r.setProperty("--ink", p.ink);
    r.setProperty("--ink-soft", p.soft);
    r.setProperty("--line", p.line);
    r.setProperty("--radius", t.radius + "px");
    r.setProperty("--font-display", `"${t.headlineFont}"`);
  }, [t.accent, t.paper, t.radius, t.headlineFont]);

  return (
    <React.Fragment>
      <Nav onBook={openBooking} />
      <main>
        <Hero onBook={openBooking} layout={t.heroLayout} />
        <TrustStrip />
        <Services onBook={openBooking} />
        <WhyUs />
        <HowItWorks onBook={openBooking} />
        <Gallery />
        <Testimonials />
      </main>
      <Footer onBook={openBooking} />

      <BookingModal open={booking.open} initialService={booking.service} onClose={() => setBooking({ open: false, service: null })} />

      {/* floating mobile book button */}
      <button className="btn btn-primary float-book" onClick={() => openBooking()} style={{
        position: "fixed", right: 18, bottom: 18, zIndex: 60, padding: "15px 24px", fontSize: 15.5,
        boxShadow: "0 16px 34px -12px var(--accent)",
      }}>Book a spot →</button>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} options={Object.keys(ACCENTS)} onChange={v => setTweak("accent", v)} />
        <TweakRadio label="Paper" value={t.paper} options={Object.keys(PAPERS)} onChange={v => setTweak("paper", v)} />
        <TweakSection label="Type" />
        <TweakSelect label="Headline font" value={t.headlineFont} options={["DM Sans", "Hanken Grotesk"]} onChange={v => setTweak("headlineFont", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.heroLayout} options={["Split", "Centered", "Editorial"]} onChange={v => setTweak("heroLayout", v)} />
        <TweakSlider label="Corner radius" value={t.radius} min={0} max={28} step={2} unit="px" onChange={v => setTweak("radius", v)} />
      </TweaksPanel>

      <style>{`
        .float-book{ display:none; }
        @media(max-width:900px){ .float-book{ display:inline-flex !important; } }
      `}</style>
    </React.Fragment>
  );
}

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