// mapemedia homepage — compose sections + Tweaks panel.

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B87333",
  "headlineFont": "\"Cormorant Garamond\", Georgia, serif",
  "heroVariant": "dark",
  "heroHeadline": "Marken, *Visualisierungen* und Medien für Bau, Immobilien und Produkte",
  "heroSub": "mapemedia entwickelt hochwertige Markenauftritte, fotorealistische Visualisierungen und Bild- sowie Filmwelten für Projekte in Bau, Architektur, Immobilien und Produktentwicklung. Von Branding und Webdesign über Visualisierung vor dem Bau bis hin zu Fotografie, Film und Produktdarstellung entsteht alles aus einem Guss — präzise, hochwertig und individuell auf jedes Projekt abgestimmt."
}/*EDITMODE-END*/;

function HomeApp() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  // Apply + persist global look (accent, headline font) so it carries across pages.
  React.useEffect(() => {
    persistGlobalTweaks({ accent: t.accent, headlineFont: t.headlineFont });
  }, [t.accent, t.headlineFont]);

  return (
    <React.Fragment>
      <TopNav current="home" />
      <main className="page">
        <HomeHero variant={t.heroVariant} headline={t.heroHeadline} sub={t.heroSub} />
        <ServicesSection />
        <CasePreview />
        <WhySection />
        <ReferenceMarquee />
        <TestimonialsSection />
        <ToolsBand />
        <AboutCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Marke" />
        <TweakColor label="Akzentfarbe" value={t.accent}
          options={['#B87333', '#3d7a82', '#8A5520', '#5E6B73', '#9E6B4A']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSelect label="Headline-Schrift" value={t.headlineFont}
          options={[
            { value: '"Cormorant Garamond", Georgia, serif', label: 'Cormorant Garamond' },
            { value: '"Tiempos Headline", Georgia, serif', label: 'Tiempos / Georgia' },
            { value: 'Georgia, "Times New Roman", serif', label: 'Georgia' },
            { value: '"DM Sans", system-ui, sans-serif', label: 'DM Sans (Sans)' },
          ]}
          onChange={(v) => setTweak('headlineFont', v)} />

        <TweakSection label="Hero" />
        <TweakRadio label="Hero-Stil" value={t.heroVariant}
          options={[{ value: 'dark', label: 'Dunkel' }, { value: 'light', label: 'Hell' }, { value: 'image', label: 'Bild' }]}
          onChange={(v) => setTweak('heroVariant', v)} />
        <TweakText label="Headline" value={t.heroHeadline}
          onChange={(v) => setTweak('heroHeadline', v)} />
        <TweakText label="Sub-Text" value={t.heroSub}
          onChange={(v) => setTweak('heroSub', v)} />
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, lineHeight: 1.5, color: 'rgba(255,255,255,.4)', marginTop: 8 }}>
          Tipp: *Wort* mit Sternchen umschließen → Kupfer-Akzent.
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

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