/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "emerald",
  "speed": 1,
  "heroBefore": "Çoklu kanal satışı",
  "heroItalic": "tek panelde",
  "heroAfter": "büyütün.",
  "heroLead": "Bütün sohbetler tek panelde. Tek tıkla binlerce potansiyel müşteri bul, hepsine toplu mesaj at. WhatsApp kapanmama garantili.",
  "ctaText": "Ücretsiz başla",
  "demoOrder": ["kanban", "avci", "chat", "broadcast", "voice", "team", "social", "integrations"]
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  emerald: { accent: "oklch(0.62 0.16 150)", ink: "oklch(0.32 0.13 150)", soft: "oklch(0.94 0.06 150)", glow: "0.62 0.16 150" },
  ocean:   { accent: "oklch(0.6 0.16 230)",  ink: "oklch(0.32 0.14 230)", soft: "oklch(0.94 0.06 230)", glow: "0.6 0.16 230" },
  sunset:  { accent: "oklch(0.68 0.18 35)",  ink: "oklch(0.42 0.16 35)",  soft: "oklch(0.94 0.06 35)",  glow: "0.68 0.18 35" },
  violet:  { accent: "oklch(0.58 0.2 290)",  ink: "oklch(0.36 0.18 290)", soft: "oklch(0.94 0.06 290)", glow: "0.58 0.2 290" },
};

function App() {
  const [theme, setTheme] = useState(TWEAK_DEFAULTS.theme);
  const t = { ...TWEAK_DEFAULTS, theme };

  // theme
  useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
  }, [t.theme]);

  // accent
  useEffect(() => {
    const p = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.emerald;
    const root = document.documentElement.style;
    root.setProperty("--accent", p.accent);
    root.setProperty("--accent-ink", p.ink);
    root.setProperty("--accent-soft", p.soft);
    root.setProperty("--accent-bg", `oklch(from var(--accent) l c h / 0.12)`);
  }, [t.accent]);

  // speed for demos
  useEffect(() => {
    window.__yukaSpeed = t.speed;
  }, [t.speed]);

  return (
    <>
      <SiteHeader theme={t.theme} onThemeToggle={() => setTheme(t.theme === "dark" ? "light" : "dark")} />
      <main>
        <Hero
          heroTitle={{ before: t.heroBefore, italic: t.heroItalic, after: t.heroAfter }}
          heroLead={t.heroLead}
          ctaText={t.ctaText}
          speed={t.speed}
        />
        <FeaturesSection order={t.demoOrder} />
        <MetricsSection />
        <PricingSection ctaText={t.ctaText} />
        <TestimonialsSection />
        <FAQSection />
        <FinalCTA ctaText={t.ctaText} />
      </main>
      <SiteFooter />
    </>
  );
}

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