// app.jsx — wires up Tweaks panel and applies values via CSS vars + body attrs.
// Loaded last. Picks which page component to render based on `window.__PAGE`.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandRed": "#C0392B",
  "darkSurface": "navy",
  "heroVariant": "photo",
  "displayFont": "Barlow",
  "density": "open"
}/*EDITMODE-END*/;

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

  // Apply tweaks to root CSS vars and body data-attrs
  useEffect(() => {
    const r = document.documentElement;
    // Brand red and its hover variant
    r.style.setProperty("--red", t.brandRed);
    r.style.setProperty("--red-dark", shade(t.brandRed, -0.18));
    r.style.setProperty("--red-deep", shade(t.brandRed, -0.45));
    r.style.setProperty("--red-soft", hexToRgba(t.brandRed, 0.08));

    // Display font
    const map = {
      "Barlow":  '"Barlow", "Inter", system-ui, sans-serif',
      "Inter":   '"Inter", system-ui, sans-serif',
      "NeueHaas":'"Space Grotesk", "Inter", system-ui, sans-serif',
    };
    r.style.setProperty("--f-display", map[t.displayFont] || map.Barlow);

    document.body.dataset.surface  = t.darkSurface;
    document.body.dataset.density  = t.density;
  }, [t]);

  // Apply dark surface var directly
  useEffect(() => {
    const r = document.documentElement;
    const surfaceMap = { navy: "#1A2744", charcoal: "#2C3E50", ink: "#0B0F1A" };
    // override the .surface-dark color via a CSS rule on body
    const styleId = "__surface-override";
    let s = document.getElementById(styleId);
    if (!s) {
      s = document.createElement("style");
      s.id = styleId;
      document.head.appendChild(s);
    }
    s.textContent = `.surface-dark { background: ${surfaceMap[t.darkSurface] || surfaceMap.navy}; }`;
  }, [t.darkSurface]);

  const PAGE_MAP = {
    home:     window.Homepage,
    product:  window.ProductPage,
    services: window.ServicesPage,
    about:    window.AboutPage,
    industry: window.IndustryPage,
    contact:  window.ContactPage,
    faq:      window.FaqPage,
  };
  const Page = PAGE_MAP[window.__PAGE] || window.Homepage;

  return (
    <>
      <Page tweaks={t}/>
      {window.VercelAnalytics && <window.VercelAnalytics />}
      <TweaksPanel>
        <TweakSection label="Brand"/>
        <TweakColor label="Primary red" value={t.brandRed}
          options={["#C0392B", "#B0271B", "#D14535", "#9A1F11"]}
          onChange={(v) => setTweak("brandRed", v)}/>
        <TweakRadio label="Dark surface" value={t.darkSurface}
          options={[
            { label: "Navy", value: "navy" },
            { label: "Charcoal", value: "charcoal" },
            { label: "Ink", value: "ink" },
          ]}
          onChange={(v) => setTweak("darkSurface", v)}/>

        <TweakSection label="Typography"/>
        <TweakRadio label="Display font" value={t.displayFont}
          options={[
            { label: "Barlow",  value: "Barlow" },
            { label: "Inter",   value: "Inter" },
            { label: "Grotesk", value: "NeueHaas" },
          ]}
          onChange={(v) => setTweak("displayFont", v)}/>

        <TweakSection label="Layout"/>
        <TweakSelect label="Hero variant" value={t.heroVariant}
          options={[
            { label: "Split — copy + photo", value: "split" },
            { label: "Photo full-bleed",      value: "photo" },
            { label: "Engineering diagram",   value: "diagram" },
            { label: "Asymmetric — wordmark", value: "asymmetric" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}/>
        <TweakRadio label="Density" value={t.density}
          options={[
            { label: "Open",  value: "open" },
            { label: "Dense", value: "dense" },
          ]}
          onChange={(v) => setTweak("density", v)}/>
      </TweaksPanel>
    </>
  );
}

/* ─── color helpers ─────────────────────────────────────────────────── */
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const v = h.length === 3 ? h.split("").map(c => c + c).join("") : h;
  const n = parseInt(v, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
function hexToRgba(hex, a) {
  const [r, g, b] = hexToRgb(hex);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function shade(hex, amt) {
  // amt: -1 → black, +1 → white
  const [r, g, b] = hexToRgb(hex);
  const t = amt < 0 ? 0 : 255;
  const p = Math.abs(amt);
  const mix = (c) => Math.round((t - c) * p + c);
  return `#${[mix(r), mix(g), mix(b)].map(v => v.toString(16).padStart(2, "0")).join("")}`;
}

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