/* eslint-disable */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "moss",
  "density": "comfortable",
  "showFAB": true,
  "heroVariant": "split"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeClinic, setActiveClinic] = useState(window.CLINICS[0]);
  const [bookingOpen, setBookingOpen] = useState(false);

  // Apply accent variants to CSS vars
  useEffect(() => {
    const root = document.documentElement;
    if (t.accent === "moss") {
      root.style.setProperty("--moss", "#2A4A3E");
      root.style.setProperty("--moss-deep", "#1A3329");
    } else if (t.accent === "ink") {
      root.style.setProperty("--moss", "#14201C");
      root.style.setProperty("--moss-deep", "#000000");
    } else if (t.accent === "terra") {
      root.style.setProperty("--moss", "#7A3F2E");
      root.style.setProperty("--moss-deep", "#5C2D20");
    } else if (t.accent === "indigo") {
      root.style.setProperty("--moss", "#2A3A5C");
      root.style.setProperty("--moss-deep", "#1A2540");
    }
  }, [t.accent]);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--container", t.density === "compact" ? "1180px" : t.density === "wide" ? "1380px" : "1280px");
  }, [t.density]);

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

  return (
    <div id="top">
      <window.Navbar onBook={onBook} activeClinic={activeClinic} tweaks={t} />
      <window.Hero activeClinic={activeClinic} setActiveClinic={setActiveClinic} onBook={onBook} tweaks={t} />
      <window.TrustStrip />
      <window.Pillars onBook={onBook} />
      <window.WhyRoze />
      <window.Founders />
      <window.ClinicsSection activeClinic={activeClinic} setActiveClinic={setActiveClinic} onBook={onBook} />
      <window.Faircare />
      <window.Reviews />
      <window.BookBand onBook={onBook} activeClinic={activeClinic} />
      <window.Footer />

      <window.BottomBar activeClinic={activeClinic} onBook={onBook} />
      {t.showFAB && (
        <a href={`https://wa.me/${activeClinic.whatsapp}`} target="_blank" rel="noopener" className="fab" aria-label={`WhatsApp ${activeClinic.name}`}>
          <window.Icon.WhatsApp size={24} />
        </a>
      )}

      {bookingOpen && <window.BookingModal activeClinic={activeClinic} onClose={() => setBookingOpen(false)} />}

      <TweaksPanel>
        <TweakSection label="Visual">
          <TweakRadio
            label="Accent palette"
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={["moss", "terra", "indigo", "ink"]}
          />
          <TweakSelect
            label="Density"
            value={t.density}
            onChange={v => setTweak("density", v)}
            options={["compact", "comfortable", "wide"]}
          />
        </TweakSection>
        <TweakSection label="Surface">
          <TweakToggle label="Floating WhatsApp" value={t.showFAB} onChange={v => setTweak("showFAB", v)} />
        </TweakSection>
        <TweakSection label="Active clinic">
          <TweakRadio
            label="Clinic"
            value={activeClinic.id}
            onChange={v => setActiveClinic(window.CLINICS.find(c => c.id === v))}
            options={["jumeirah", "difc", "greens"]}
          />
          <TweakButton label="Open booking modal" onClick={onBook} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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