/* global React */
const { useState: useAppState, useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0e4f8e",
  "paper": "#f3efe7",
  "brushIntensity": 0.07,
  "showRail": true,
  "heroImage": "massage"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live via CSS variables
  useAppEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--kw-blue", t.accent);
    root.style.setProperty("--kw-paper", t.paper);
    // Derive deeper accent
    root.style.setProperty("--kw-blue-deep", shade(t.accent, -0.25));
  }, [t.accent, t.paper]);

  // Reveal on scroll
  useAppEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="kw-app">
      <Nav />
      <main>
        <Hero brushIntensity={t.brushIntensity} heroImage={t.heroImage} showRail={t.showRail} />
        <Marquee />
        <Approach />
        <Philosophy />
        <Spotlight />
        <Team />
        <Locations />
        <Voices />
        <Booking />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand accent" subtitle="The one hot color in the system — used for accents, hover ink, and seals.">
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#0e4f8e", "#14110d", "#3a6b3a", "#7a3e8a", "#6b4b2b"]}
          />
        </TweakSection>
        <TweakSection title="Paper tone" subtitle="The page surface — warmer hanji or cleaner off-white.">
          <TweakColor
            value={t.paper}
            onChange={(v) => setTweak("paper", v)}
            options={["#f3efe7", "#f8f5ef", "#ffffff", "#ece5d6", "#1a1a1a"]}
          />
        </TweakSection>
        <TweakSection title="Brush watermark">
          <TweakSlider
            label="Intensity"
            min={0} max={0.25} step={0.01}
            value={t.brushIntensity}
            onChange={(v) => setTweak("brushIntensity", v)}
          />
        </TweakSection>
        <TweakSection title="Hero composition">
          <TweakToggle
            label="Vertical Hangul rail"
            value={t.showRail}
            onChange={(v) => setTweak("showRail", v)}
          />
          <TweakRadio
            label="Hero image"
            value={t.heroImage}
            onChange={(v) => setTweak("heroImage", v)}
            options={[
              { value: "massage", label: "Massage" },
              { value: "cupping", label: "Cupping" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function shade(hex, pct) {
  // simple shade — returns a darker / lighter hex
  const c = hex.replace("#", "");
  const num = parseInt(c.length === 3 ? c.split("").map((x) => x + x).join("") : c, 16);
  let r = (num >> 16) & 0xff;
  let g = (num >> 8) & 0xff;
  let b = num & 0xff;
  const f = (v) => Math.max(0, Math.min(255, Math.round(v + 255 * pct)));
  r = f(r); g = f(g); b = f(b);
  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
}

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