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

const TWEAK_DEFAULTS = {
  "theme": "light",
  "accent": "emerald",
  "speed": 1,
  "heroBefore": "Multi-channel sales,",
  "heroItalic": "one panel.",
  "heroAfter": "Grow it.",
  "heroLead": "All conversations in a single panel. Find thousands of potential customers with one click, message them all in one tap. WhatsApp-ban-proof.",
  "ctaText": "Start free",
  "demoOrder": ["kanban", "avci", "chat", "broadcast", "voice", "team", "social", "integrations"]
};

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 };

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

  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]);

  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 />);