/* Hortman Clinics — main app + inline tweaks panel */
const { useState: aUseState, useEffect: aUseEffect, useRef: aUseRef } = React;

/* ============================================================
   Inline Tweaks panel — self-contained, no external import
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "jade",
  "display": "serif"
}/*EDITMODE-END*/;

function useTweaks(defaults) {
  const [values, setValues] = aUseState(defaults);
  const setTweak = (keyOrEdits, val) => {
    const edits = typeof keyOrEdits === "object" && keyOrEdits !== null
      ? keyOrEdits : { [keyOrEdits]: val };
    setValues((prev) => ({ ...prev, ...edits }));
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); } catch (e) {}
  };
  return [values, setTweak];
}

function TweaksPanel({ children }) {
  const [open, setOpen] = aUseState(false);
  aUseEffect(() => {
    const onMsg = (e) => {
      const t = e?.data?.type;
      if (t === "__activate_edit_mode") setOpen(true);
      else if (t === "__deactivate_edit_mode") setOpen(false);
    };
    window.addEventListener("message", onMsg);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (e) {}
    return () => window.removeEventListener("message", onMsg);
  }, []);
  const dismiss = () => {
    setOpen(false);
    try { window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*"); } catch (e) {}
  };
  if (!open) return null;
  return (
    <div style={{
      position: "fixed", right: 24, bottom: 96, zIndex: 200, width: 260,
      background: "var(--paper)", border: "1px solid var(--line)",
      boxShadow: "0 18px 50px rgba(24,34,31,0.18)",
      padding: 16, fontSize: 12
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <span className="label-mono">Tweaks</span>
        <button onClick={dismiss} style={{
          width: 22, height: 22, borderRadius: 11,
          border: "1px solid var(--line)", display: "grid", placeItems: "center"
        }}>✕</button>
      </div>
      {children}
    </div>
  );
}

function TweakRadio({ label, value, options, onChange }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 6 }}>{label}</div>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, 1fr)`, border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden" }}>
        {options.map(([k, lbl]) => (
          <button key={k} onClick={() => onChange(k)} style={{
            padding: "8px 4px",
            fontSize: 11,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            background: value === k ? "var(--ink)" : "transparent",
            color:      value === k ? "var(--paper)" : "var(--ink)"
          }}>{lbl}</button>
        ))}
      </div>
    </div>
  );
}

const PALETTES = {
  jade: {
    "--paper":"#F6F1E8","--paper-2":"#EDE6D7","--paper-3":"#E4DCC9",
    "--ink":"#18221F","--ink-2":"#3A4844","--muted":"#6E7872",
    "--jade":"#1F4A41","--jade-2":"#2C6A5C","--jade-soft":"#D6E0DB",
    "--bronze":"#A88248","--bronze-2":"#C39E68",
    "--line":"rgba(24, 34, 31, 0.12)","--line-2":"rgba(24, 34, 31, 0.06)"
  },
  midnight: {
    "--paper":"#F2EFE9","--paper-2":"#E5E0D5","--paper-3":"#D6D0C0",
    "--ink":"#0F1622","--ink-2":"#2E3645","--muted":"#666E7E",
    "--jade":"#1A3A66","--jade-2":"#27548A","--jade-soft":"#D9E0EE",
    "--bronze":"#B08653","--bronze-2":"#CCA277",
    "--line":"rgba(15, 22, 34, 0.12)","--line-2":"rgba(15, 22, 34, 0.06)"
  },
  stone: {
    "--paper":"#F4EFE7","--paper-2":"#E9E2D2","--paper-3":"#DFD6C2",
    "--ink":"#2A211A","--ink-2":"#4A3E33","--muted":"#7A6E62",
    "--jade":"#6E4E2E","--jade-2":"#8F6A45","--jade-soft":"#E8DDCB",
    "--bronze":"#9B7B4F","--bronze-2":"#BE9B6A",
    "--line":"rgba(42, 33, 26, 0.12)","--line-2":"rgba(42, 33, 26, 0.06)"
  }
};

function App() {
  const [bookOpen, setBookOpen]       = aUseState(false);
  const [bookPrefill, setBookPrefill] = aUseState(null);
  const [doctor, setDoctor]           = aUseState(null);
  const [consentOpen, setConsentOpen] = aUseState(false);
  const [openSpec, setOpenSpec]       = aUseState("aesthetics");
  const [lang, setLang]               = aUseState("EN");
  const [tweaks, setTweak]            = useTweaks(TWEAK_DEFAULTS);

  const openBook = (pre = null) => { setBookPrefill(pre); setBookOpen(true); };
  const openSpecialtyById = (id) => {
    setOpenSpec(id);
    setTimeout(() => {
      document.getElementById("specialties")?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 50);
  };

  /* Apply tweak palettes + display font */
  aUseEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[tweaks.palette] || PALETTES.jade;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty("--serif",
      tweaks.display === "sans"
        ? '"Manrope", system-ui, sans-serif'
        : '"Cormorant Garamond", "EB Garamond", Georgia, serif'
    );
  }, [tweaks.palette, tweaks.display]);

  const specialtyToId = (d) => {
    const t = d.specialty.toLowerCase();
    if (t.includes("plastic")) return "plastic";
    if (t.includes("derm")) return "dermatology";
    if (t.includes("hair")) return "hair";
    if (t.includes("dent")) return "dentistry";
    if (t.includes("wellness")) return "wellness";
    return "aesthetics";
  };

  return (
    <>
      <window.HC.TopBar
        onBook={() => openBook()}
        lang={lang}
        setLang={setLang}
        onOpenSpecialty={openSpecialtyById}
      />
      <main>
        <window.HC.Hero onBook={() => openBook()} />
        <window.HC.Specialties
          openId={openSpec}
          setOpenId={setOpenSpec}
          onBook={() => openBook({ specialty: openSpec })}
        />
        <window.HC.Journey />
        <window.HC.Doctors onSelect={setDoctor} />
        <window.HC.BeforeAfter onRequest={() => setConsentOpen(true)} />
        <window.HC.Reviews />
        <window.HC.Locations onBook={() => openBook()} />
        <window.HC.CTABand onBook={() => openBook()} />
      </main>
      <window.HC.Footer />
      <window.HC.Fab onBook={() => openBook()} />

      {bookOpen && (
        <window.HCModals.BookingModal
          onClose={() => setBookOpen(false)}
          prefill={bookPrefill}
        />
      )}
      {doctor && (
        <window.HCModals.DoctorModal
          doctor={doctor}
          onClose={() => setDoctor(null)}
          onBook={(d) => openBook({ specialty: specialtyToId(d), doctorId: d.id })}
        />
      )}
      {consentOpen && (
        <window.HCModals.ConsentModal onClose={() => setConsentOpen(false)} />
      )}

      <TweaksPanel>
        <TweakRadio
          label="Palette"
          value={tweaks.palette}
          options={[["jade", "Jade"], ["midnight", "Midnight"], ["stone", "Stone"]]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakRadio
          label="Display type"
          value={tweaks.display}
          options={[["serif", "Serif"], ["sans", "Sans"]]}
          onChange={(v) => setTweak("display", v)}
        />
      </TweaksPanel>
    </>
  );
}

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