// app.jsx — composes the page and wires Tweaks (accent / type / hero / density).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c9a55a",
  "type": "editorial",
  "hero": "editorial",
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ["#c9a55a", "#0a0a0a", "#f4efe6"],   // classic gold
  ["#e0c285", "#0a0a0a", "#f4efe6"],   // champagne
  ["#b87333", "#0a0a0a", "#f4efe6"],   // copper
  ["#b9b3a5", "#0a0a0a", "#f4efe6"],   // pewter
];

// Type pairings — display + sans
const TYPE_PAIRS = {
  editorial: {
    label: "Editorial",
    display: '"Cormorant Garamond", "Times New Roman", serif',
    sans:    '"Manrope", system-ui, sans-serif',
    google:  "Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700",
  },
  modern: {
    label: "Modern",
    display: '"Bodoni Moda", "Didot", serif',
    sans:    '"Public Sans", system-ui, sans-serif',
    google:  "Bodoni+Moda:wght@500;600;700&family=Public+Sans:wght@400;500;600;700",
  },
  monumental: {
    label: "Monumental",
    display: '"Fraunces", Georgia, serif',
    sans:    '"DM Sans", system-ui, sans-serif',
    google:  "Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700",
  },
};

// Inject a Google Fonts <link> per pair on demand and cache it.
function useGoogleFont(query) {
  React.useEffect(() => {
    if (!query) return;
    const id = `gf-${btoa(query).slice(0, 16)}`;
    if (document.getElementById(id)) return;
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.id = id;
    link.href = `https://fonts.googleapis.com/css2?family=${query}&display=swap`;
    document.head.appendChild(link);
  }, [query]);
}

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

  const pair = TYPE_PAIRS[t.type] || TYPE_PAIRS.editorial;
  useGoogleFont(pair.google);

  // Apply tokens to :root and body data attrs
  React.useEffect(() => {
    const r = document.documentElement;
    const accent = Array.isArray(t.accent) ? t.accent[0] : t.accent;
    r.style.setProperty("--accent", accent);
    r.style.setProperty("--display", pair.display);
    r.style.setProperty("--sans", pair.sans);
    r.dataset.density = t.density;
    r.dataset.hero = t.hero;
  }, [t.accent, pair, t.density, t.hero]);

  return (
    <>
      <TopBar />
      <main>
        <Hero />
        <Services />
        <Why />
        <Gallery />
        <Reviews />
        <About />
        <Products />
        <Visit />
      </main>
      <Footer />
      <StickyCTA />

      <TweaksPanel title="VIP Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            label="Tone"
            value={t.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakRadio
            label="Pairing"
            value={t.type}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "modern",    label: "Modern" },
              { value: "monumental", label: "Monumental" },
            ]}
            onChange={(v) => setTweak("type", v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={t.hero}
            options={[
              { value: "split", label: "Split" },
              { value: "stacked", label: "Stacked" },
              { value: "editorial", label: "Full‑bleed" },
            ]}
            onChange={(v) => setTweak("hero", v)}
          />
        </TweakSection>

        <TweakSection label="Spacing">
          <TweakRadio
            label="Density"
            value={t.density}
            options={[
              { value: "compact", label: "Compact" },
              { value: "regular", label: "Regular" },
              { value: "airy",    label: "Airy" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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