// app.jsx — Havfrue.no placeholder root

const { useState: useS, useEffect: useE, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "basePalette": "ocean",
  "displayFont": "Cormorant Garamond",
  "showDomainCard": true,
  "grain": 0.22,
  "autoMorph": false
}/*EDITMODE-END*/;

const BASE_PALETTES = {
  ocean: { bg: "#07182a", fg: "#f3e7d2", accent: "#e98e6b", label: "Ocean (default)" },
  midnight: { bg: "#04060f", fg: "#e7e2d2", accent: "#7fb6d4", label: "Midnight" },
  pearl: { bg: "#ede4d2", fg: "#1a2230", accent: "#c87a5a", label: "Pearl" },
  emerald: { bg: "#082b25", fg: "#e9dfc5", accent: "#d6b46a", label: "Emerald" },
  coral: { bg: "#2a1018", fg: "#f6e3d4", accent: "#e8704f", label: "Coral" },
};

const DISPLAY_FONTS = {
  "Cormorant Garamond": '"Cormorant Garamond", serif',
  "Italiana": '"Italiana", serif',
  "Bodoni Moda": '"Bodoni Moda", serif',
  "Playfair Display": '"Playfair Display", serif',
  "DM Serif Display": '"DM Serif Display", serif',
  "Newsreader": '"Newsreader", serif',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [brand, setBrand] = useS(BRANDS[0]);

  // apply base palette + font to :root
  useE(() => {
    const p = BASE_PALETTES[t.basePalette] || BASE_PALETTES.ocean;
    const r = document.documentElement.style;
    r.setProperty("--bg", p.bg);
    r.setProperty("--fg", p.fg);
    r.setProperty("--accent", p.accent);
    r.setProperty("--display-font", DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS["Cormorant Garamond"]);
    r.setProperty("--grain-opacity", String(t.grain));
  }, [t.basePalette, t.displayFont, t.grain]);

  // auto-morph through brands
  useE(() => {
    if (!t.autoMorph) return;
    const i = setInterval(() => {
      setBrand((b) => {
        const idx = BRANDS.findIndex((x) => x.id === b.id);
        return BRANDS[(idx + 1) % BRANDS.length];
      });
    }, 3500);
    return () => clearInterval(i);
  }, [t.autoMorph]);

  useReveal();

  // smooth scroll for jump links
  useE(() => {
    const handler = (e) => {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      const el = document.getElementById(id);
      if (el) {
        e.preventDefault();
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);

  return (
    <React.Fragment>
      <div className="for-sale">
        <span className="dot"></span>
        <span>Domene til salgs</span>
      </div>

      <nav className="nav-jump">
        <a href="#muligheter">Muligheter</a>
        <a href="#etymologi">Etymologi</a>
        <a href="#verdi">Verdi</a>
        <a href="#kontakt" className="cta">Gi et tilbud</a>
      </nav>

      <Hero />
      <Morpher brand={brand} onChange={setBrand} />
      <Etymology />
      <Value />
      <Contact />
      <PageFooter />

      {t.showDomainCard && (
        <div className="domain-card">
          <span className="label">Domene</span>
          <span className="val">havfrue.no</span>
          <span className="sep"></span>
          <span className="label">Status</span>
          <span className="val" style={{ color: "var(--accent)" }}>Til salgs</span>
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Grunnpalett" />
        <TweakSelect
          label="Tema"
          value={t.basePalette}
          options={Object.keys(BASE_PALETTES).map((k) => ({ value: k, label: BASE_PALETTES[k].label }))}
          onChange={(v) => setTweak("basePalette", v)}
        />
        <TweakSection label="Typografi" />
        <TweakSelect
          label="Display-font"
          value={t.displayFont}
          options={Object.keys(DISPLAY_FONTS)}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <TweakSection label="Effekter" />
        <TweakSlider label="Filmkorn" value={t.grain} min={0} max={0.6} step={0.02} onChange={(v) => setTweak("grain", v)} />
        <TweakToggle label="Auto-morph" value={t.autoMorph} onChange={(v) => setTweak("autoMorph", v)} />
        <TweakToggle label="Domene-kort (hjørne)" value={t.showDomainCard} onChange={(v) => setTweak("showDomainCard", v)} />
        <TweakSection label="Hopp til brand" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 6 }}>
          {BRANDS.map((b) => (
            <button
              key={b.id}
              onClick={() => setBrand(b)}
              style={{
                appearance: "none",
                border: brand.id === b.id ? `1px solid ${b.swatch}` : "1px solid rgba(0,0,0,.1)",
                background: brand.id === b.id ? b.swatch : "rgba(0,0,0,.04)",
                color: brand.id === b.id ? "#fff" : "#29261b",
                padding: "6px 4px",
                borderRadius: 6,
                fontSize: 10,
                fontFamily: "inherit",
                cursor: "default",
                letterSpacing: ".02em",
              }}
            >
              {b.label}
            </button>
          ))}
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

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