// Miss-Scully homepage — app shell + tweaks wiring

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Weil dein Tier Familie ist",
  "intensity": 1,
  "palette": ["#B77253", "#221C36", "#F8F4EC"],
  "fontPair": "Serif klassisch (DM Serif Display)"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  'Serif klassisch (DM Serif Display)': {
    display: '"DM Serif Display", serif',
    body: '"Instrument Sans", sans-serif',
  },
  'Modern (Bricolage Grotesque)': {
    display: '"Bricolage Grotesque", sans-serif',
    body: '"Instrument Sans", sans-serif',
  },
  'Elegant (Playfair Display)': {
    display: '"Playfair Display", serif',
    body: '"Instrument Sans", sans-serif',
  },
};

const PALETTES = [
  ['#B77253', '#221C36', '#F8F4EC'], // Brand: Kupfer & Nacht
  ['#9A7B4F', '#26321F', '#F7F4EA'], // Wald & Messing
  ['#B06A5B', '#33222B', '#FAF3EE'], // Terracotta & Pflaume
];

function applyTheme(t) {
  const r = document.documentElement.style;
  const [accent, dark, bg] = Array.isArray(t.palette) ? t.palette : PALETTES[0];
  const fonts = FONT_PAIRS[t.fontPair] || FONT_PAIRS['Serif klassisch (DM Serif Display)'];
  r.setProperty('--accent', accent);
  r.setProperty('--dark', dark);
  r.setProperty('--ink', dark);
  r.setProperty('--bg', bg);
  r.setProperty('--font-display', fonts.display);
  r.setProperty('--font-body', fonts.body);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => applyTheme(t), [t]);
  useReveal();

  // External links must open in a new tab (partner sites refuse being embedded)
  React.useEffect(() => {
    document.querySelectorAll('a[href^="http"]').forEach((a) => {
      a.target = '_blank';
      a.rel = 'noopener';
    });
  }, []);

  const intensity = Number(t.intensity);

  return (
    <React.Fragment>
      <Header></Header>
      <main>
        <VideoHero headline={t.headline}></VideoHero>
        <TrustBar></TrustBar>
        <VideoStories></VideoStories>
        <Story></Story>
        <AnimaliaCalc></AnimaliaCalc>
        <Duo></Duo>
        <CTABand></CTABand>
        <SeoText></SeoText>
      </main>
      <Footer></Footer>

      <TweaksPanel>
        <TweakSection label="Marke"></TweakSection>
        <TweakColor
          label="Farbwelt"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)}
        ></TweakColor>
        <TweakSelect
          label="Schriften"
          value={t.fontPair}
          options={Object.keys(FONT_PAIRS)}
          onChange={(v) => setTweak('fontPair', v)}
        ></TweakSelect>
        <TweakSection label="Hero"></TweakSection>
        <TweakText
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak('headline', v)}
        ></TweakText>
        <TweakSlider
          label="3D-Intensität"
          value={intensity}
          min={0}
          max={2}
          step={0.1}
          onChange={(v) => setTweak('intensity', v)}
        ></TweakSlider>
      </TweaksPanel>
    </React.Fragment>
  );
}

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