/* Patient app — wires everything together */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "A",
  "accent": "champagne"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [dockOn, setDockOn] = React.useState(false);

  // Accent toggle
  React.useEffect(() => {
    const root = document.documentElement;
    if (t.accent === "rose") {
      root.style.setProperty("--accent", "var(--rose)");
      root.style.setProperty("--accent-deep", "var(--rose-deep)");
    } else {
      root.style.setProperty("--accent", "var(--champagne)");
      root.style.setProperty("--accent-deep", "var(--champagne-deep)");
    }
  }, [t.accent]);

  // Dock ribbon — appears after scrolling past the hero
  React.useEffect(() => {
    const onScroll = () => {
      setDockOn(window.scrollY > window.innerHeight * 0.9);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body scroll when modal open
  React.useEffect(() => {
    document.body.style.overflow = modalOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [modalOpen]);

  const open = () => setModalOpen(true);
  const close = () => setModalOpen(false);

  return (
    <>
      <Header onOpenModal={open} />
      {t.hero === "B"
        ? <HeroB onOpenModal={open} />
        : <HeroA onOpenModal={open} />
      }
      <Science />
      <HowItWorks />
      <TheApp onOpenModal={open} />
      <Results />
      <Why360 />
      <Reels onOpenModal={open} />
      <PatientFAQ />
      <Footer onOpenModal={open} />

      {/* Sticky bottom dock CTA */}
      <button
        onClick={open}
        className={`dock ${dockOn ? "is-on" : ""}`}
        style={{ cursor: "pointer" }}
      >
        <span className="dock__pulse" />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
          Find your dentist
        </span>
        <span style={{
          background: "var(--accent)", color: "var(--ink)",
          padding: "8px 12px", borderRadius: 999,
          display: "inline-flex", alignItems: "center", gap: 6,
          fontSize: 11, fontFamily: "var(--font-mono)",
          letterSpacing: "0.16em", textTransform: "uppercase",
        }}>Start <I.Arrow /></span>
      </button>

      <FindDentistModal open={modalOpen} onClose={close} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Hero variant"
            value={t.hero}
            onChange={v => setTweak("hero", v)}
            options={[
              { value: "A", label: "A · Cinema" },
              { value: "B", label: "B · Cover" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakColor
            label="Accent metal"
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={[
              { value: "champagne", color: "#D4B07A", label: "Champagne gold" },
              { value: "rose", color: "#C9A58F", label: "Rose gold" },
            ]}
          />
          <TweakButton onClick={open}>Preview modal</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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