const { useState, useEffect, useRef, useMemo } = React;

/* ------------------------------------------------------------------ */
/*  TWEAKS                                                             */
/* ------------------------------------------------------------------ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gridStyle": "houses",
  "accentHue": 295,
  "headline": "Evidence is the new marketing.",
  "showDealColors": true
}/*EDITMODE-END*/;

const GRID_STYLES = ["floorplan", "keys", "dealbars", "squares"];

function useTweaks() {
  const [t, setT] = useState(TWEAK_DEFAULTS);
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setActive(true);
      if (d.type === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);
  const [active, setActive] = useState(false);
  const update = (patch) => {
    const next = { ...t, ...patch };
    setT(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };
  // apply accent hue live
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", `oklch(0.55 0.19 ${t.accentHue})`);
    document.documentElement.style.setProperty("--accent-ink", `oklch(0.42 0.19 ${t.accentHue})`);
    document.documentElement.style.setProperty("--accent-tint", `oklch(0.97 0.03 ${t.accentHue})`);
    document.documentElement.style.setProperty("--accent-tint-2", `oklch(0.93 0.06 ${t.accentHue})`);
    document.documentElement.style.setProperty("--accent-tint-3", `oklch(0.85 0.12 ${t.accentHue})`);
    document.documentElement.style.setProperty("--precon", `oklch(0.55 0.19 ${t.accentHue})`);
  }, [t.accentHue]);
  return [t, update, active];
}

/* ------------------------------------------------------------------ */
/*  MARK / WORDMARK                                                    */
/* ------------------------------------------------------------------ */
function Mark({ size = 22 }) {
  // House glyph — matches the small houses in the activity grid (HouseCell path)
  return (
    <svg width={size} height={size} viewBox="0 0 10 10" aria-hidden="true" style={{ display: "block", height: "40px", width: "40px" }}>
      <path d="M1 5 L5 1.3 L9 5 L9 9 L1 9 Z" fill="var(--ink)" />
      <rect x="4.2" y="6.2" width="1.6" height="2.8" fill="var(--paper)" opacity="0.9" />
    </svg>
  );
}

function Wordmark() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Mark size={22} />
      <span className="mono" style={{ fontWeight: 600, letterSpacing: "-0.01em", fontSize: 15 }}>Activus</span>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  NAV                                                                */
/* ------------------------------------------------------------------ */
function Nav({ onJoinWaitlist, locked }) {
  const linkCls = "mono nav-links " + (locked ? "nav-dim" : "nav-live");
  const btnCls = locked ? "nav-dim" : "nav-live";
  return (
    <nav className="nav-pad" style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "22px 40px",
      position: "sticky", top: 0, zIndex: 20,
      background: "rgba(250,247,242,0.82)",
      backdropFilter: "blur(10px)",
      borderBottom: "1px solid var(--line)",
    }}>
      <Wordmark />
      <div className={linkCls} style={{ display: "flex", gap: 28, fontSize: 13, color: "var(--ink-2)" }}>
        <a href="#how" style={nl} onClick={scrollToId("how")}>how it works</a>
        <a href="#profile" style={nl} onClick={scrollToId("profile")}>the profile</a>
        <a href="#agents" style={nl} onClick={scrollToId("agents")}>for agents</a>
        <a href="#faq" style={nl} onClick={scrollToId("faq")}>faq</a>
      </div>
      <div className={btnCls} style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <button onClick={onJoinWaitlist} style={btnPrimary}>join waitlist →</button>
      </div>
    </nav>
  );
}
const nl = { textDecoration: "none", color: "var(--ink-2)", cursor: "pointer" };
const scrollToId = (id) => (e) => {
  e.preventDefault();
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 20, behavior: "smooth" });
};
const btnPrimary = {
  background: "var(--accent)", color: "white", border: "none",
  padding: "10px 16px", borderRadius: 8, fontSize: 13, fontWeight: 500,
  cursor: "pointer", fontFamily: "JetBrains Mono, monospace",
  boxShadow: "0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, black)",
};
const btnGhost = {
  background: "transparent", color: "var(--ink)", border: "1px solid var(--line-2)",
  padding: "10px 16px", borderRadius: 8, fontSize: 13, fontWeight: 500,
  cursor: "pointer", fontFamily: "JetBrains Mono, monospace",
};

Object.assign(window, { useTweaks, Mark, Wordmark, Nav, btnPrimary, btnGhost, nl, GRID_STYLES });