// Root app — assembles the profile link-hub and Tweaks panel.

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "itconnect",
  "headlineFont": "serif",
  "highlighter": true,
  "dotGrid": true
}/*EDITMODE-END*/;

const PALETTES = {
  itconnect: {
    "--paper": "#F2EDE4",
    "--paper-soft": "#EEE8DC",
    "--card": "#FDFBF6",
    "--card-hover": "#FFFEF9",
    "--ink": "#1F2A44",
    "--ink-soft": "#3A4560",
    "--ink-muted": "#6B7590",
    "--ink-faint": "#9AA2B5",
    "--border": "#E0D8C8",
    "--border-soft": "#EAE3D3",
    "--cobalt": "#3E5E92",
    "--cobalt-hover": "#2F4C7A",
    "--dark-navy": "#16203A",
  },
  cream: {
    "--paper": "#FAF7F1",
    "--paper-soft": "#F3EFE6",
    "--card": "#FFFDF7",
    "--card-hover": "#FFFEFA",
    "--ink": "#1F2430",
    "--ink-soft": "#3A4050",
    "--ink-muted": "#6B7080",
    "--ink-faint": "#9AA0B0",
    "--border": "#DDD5C9",
    "--border-soft": "#E8E0D2",
    "--cobalt": "#3E5E92",
    "--cobalt-hover": "#2F4C7A",
    "--dark-navy": "#1F2430",
  },
  warm: {
    "--paper": "#EDE4D4",
    "--paper-soft": "#E3D8C3",
    "--card": "#F7F1E3",
    "--card-hover": "#FBF6EB",
    "--ink": "#2A1F16",
    "--ink-soft": "#4A3A28",
    "--ink-muted": "#7A6A55",
    "--ink-faint": "#A89880",
    "--border": "#D4C4A8",
    "--border-soft": "#DDD0B8",
    "--cobalt": "#8B5E3C",
    "--cobalt-hover": "#6B4528",
    "--dark-navy": "#2A1F16",
  },
};

function App() {
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [state, setState] = React.useState(DEFAULTS);

  // Apply palette + toggles
  React.useEffect(() => {
    const root = document.documentElement;
    const palette = PALETTES[state.palette] || PALETTES.itconnect;
    Object.entries(palette).forEach(([k, v]) => root.style.setProperty(k, v));
    document.body.classList.toggle("no-grid", !state.dotGrid);
    document.body.classList.toggle("no-highlight", !state.highlighter);
    root.style.setProperty(
      "--serif",
      state.headlineFont === "sans"
        ? `"Pretendard Variable", sans-serif`
        : `"Noto Serif KR", "Pretendard Variable", serif`
    );
  }, [state]);

  // Reveal on scroll
  React.useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  // Edit-mode protocol for Tweaks toolbar toggle
  React.useEffect(() => {
    const onMessage = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setTweaksOpen(true);
      if (d.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMessage);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMessage);
  }, []);

  const update = (patch) => {
    setState(s => ({ ...s, ...patch }));
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
    } catch {}
  };

  return (
    <>
      <div className="shell">
        <BrandBar />

        <ProfileCard photoSrc="assets/choi-profile.png" />

        <div className="gap-20" />
        <PrimaryCTA
          href="https://itconnect.dev/contact"
          label="기업 교육·컨설팅 문의하기"
        />

        <ServicesBlock />
        <ContentBlock />
        <BookBlock />
        <BuildBlock />
        <CredentialsBlock />
        <SNSBlock />
        <BizCardBlock />

        <FinalCTA />
        <Footer />
      </div>

      <div className={`tweaks ${tweaksOpen ? "open" : ""}`}>
        <div className="tweaks__head">Tweaks</div>
        <div className="tweaks__row">
          <label htmlFor="tw-palette">팔레트</label>
          <select
            id="tw-palette"
            value={state.palette}
            onChange={(e) => update({ palette: e.target.value })}
          >
            <option value="itconnect">ITCONNECT (명함)</option>
            <option value="cream">Cream Paper</option>
            <option value="warm">Warm Tan</option>
          </select>
        </div>
        <div className="tweaks__row">
          <label htmlFor="tw-font">헤드라인 서체</label>
          <select
            id="tw-font"
            value={state.headlineFont}
            onChange={(e) => update({ headlineFont: e.target.value })}
          >
            <option value="serif">Noto Serif KR</option>
            <option value="sans">Pretendard</option>
          </select>
        </div>
        <div className="tweaks__row">
          <label htmlFor="tw-hl">하이라이터 옐로우</label>
          <input
            id="tw-hl"
            type="checkbox"
            checked={state.highlighter}
            onChange={(e) => update({ highlighter: e.target.checked })}
          />
        </div>
        <div className="tweaks__row">
          <label htmlFor="tw-grid">도트 그리드 배경</label>
          <input
            id="tw-grid"
            type="checkbox"
            checked={state.dotGrid}
            onChange={(e) => update({ dotGrid: e.target.checked })}
          />
        </div>
      </div>
    </>
  );
}

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