// App entry — tweaks, palette swap, mount sections

const PALETTES = {
  champagne: {
    name: "Şampanya · Ivory",
    vars: {
      "--bg": "#f7f1e8", "--bg-2": "#efe6d6", "--paper": "#fbf6ec",
      "--ink": "#1a1410", "--ink-soft": "#3a2a20", "--muted": "#8a7560",
      "--line": "rgba(26,20,16,0.12)", "--line-soft": "rgba(26,20,16,0.06)",
      "--gold": "#c9a961", "--gold-soft": "#d8bf86",
      "--nude": "#e8d5b7", "--champ": "#d4a574",
      "--glow": "rgba(201,169,97,0.22)",
      "--grain": "rgba(26,20,16,0.025)",
    }
  },
  blush: {
    name: "Blush · Nude",
    vars: {
      "--bg": "#fdfaf6", "--bg-2": "#f6e8e3", "--paper": "#fefaf6",
      "--ink": "#2a1a1a", "--ink-soft": "#4a2e2a", "--muted": "#a08278",
      "--line": "rgba(42,26,26,0.12)", "--line-soft": "rgba(42,26,26,0.06)",
      "--gold": "#b8956a", "--gold-soft": "#d3b48a",
      "--nude": "#f0d7d2", "--champ": "#d9a89e",
      "--glow": "rgba(184,149,106,0.2)",
      "--grain": "rgba(42,26,26,0.022)",
    }
  },
  midnight: {
    name: "Matte Siyah · Altın",
    vars: {
      "--bg": "#0e0a08", "--bg-2": "#1a1410", "--paper": "#16110e",
      "--ink": "#f7f1e8", "--ink-soft": "#d8c9b3", "--muted": "#8a7560",
      "--line": "rgba(247,241,232,0.12)", "--line-soft": "rgba(247,241,232,0.06)",
      "--gold": "#c9a961", "--gold-soft": "#d8bf86",
      "--nude": "#3a2a1f", "--champ": "#5a4530",
      "--glow": "rgba(201,169,97,0.32)",
      "--grain": "rgba(247,241,232,0.018)",
    }
  },
};

const HEADLINES = {
  primary:  "Sevgi Taşan Beauty Studio",
  poetic:   "Güzelliğe zarif bir dokunuş",
  intimate: "Sessiz bir atelye Yıldırım'da",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "champagne",
  "layout":  "editorial",
  "headline": "primary"
}/*EDITMODE-END*/;

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.champagne;
  const root = document.documentElement;
  Object.entries(p.vars).forEach(([k, v]) => root.style.setProperty(k, v));
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => {
    if (window.__reveal_watch) window.__reveal_watch();
  });

  return (
    <>
      <Hero headline={HEADLINES[t.headline] || HEADLINES.primary} />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Görsel Yön">
          <TweakRadio label="Renk Paleti" value={t.palette} onChange={v => setTweak('palette', v)}
            options={[
              { value: "champagne", label: "Şampanya" },
              { value: "blush",     label: "Blush" },
              { value: "midnight",  label: "Gece" },
            ]}
          />
        </TweakSection>
        <TweakSection title="İçerik">
          <TweakSelect label="Hero Başlık" value={t.headline} onChange={v => setTweak('headline', v)}
            options={[
              { value: "primary",  label: "Sevgi Taşan Beauty Studio" },
              { value: "poetic",   label: "Güzelliğe zarif bir dokunuş" },
              { value: "intimate", label: "Sessiz bir atelye Yıldırım'da" },
            ]}
          />
          <TweakRadio label="Hizmetler Düzeni" value={t.layout} onChange={v => setTweak('layout', v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "list",      label: "Liste" },
              { value: "stacked",   label: "Stacked" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
      {/* Render the rest by mounting into other anchors */}
      <SectionPortals layout={t.layout} />
    </>
  );
}

function SectionPortals({ layout }) {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => { setMounted(true); }, []);
  if (!mounted) return null;
  return (
    <>
      {ReactDOM.createPortal(<StorytellingSection />, document.getElementById('storytelling'))}
      {ReactDOM.createPortal(<FelsefeSection />,      document.getElementById('felsefe'))}
      {ReactDOM.createPortal(<HizmetlerSection layout={layout} />, document.getElementById('hizmetler'))}
      {ReactDOM.createPortal(<BookingSection />,      document.getElementById('randevu'))}
      {ReactDOM.createPortal(<ContactSection />,      document.getElementById('iletisim'))}
      {ReactDOM.createPortal(<SiteFooter />,          document.getElementById('site-footer'))}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('hero')).render(<App />);