// SimpleTEC — main app
const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "violet",
  "heroVariant": "terminal",
  "density": "comfortable",
  "showMarquee": true
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  violet: { base: "#7C3AED", hover: "#A78BFA", pressed: "#6D28D9", soft: "rgba(124,58,237,0.12)" },
  cyan:   { base: "#06B6D4", hover: "#22D3EE", pressed: "#0891B2", soft: "rgba(6,182,212,0.12)" },
  amber:  { base: "#F59E0B", hover: "#FBBF24", pressed: "#D97706", soft: "rgba(245,158,11,0.12)" },
  emerald:{ base: "#10B981", hover: "#34D399", pressed: "#059669", soft: "rgba(16,185,129,0.12)" },
};

function App() {
  const [tweaks, setTweaks] = useTweaks(DEFAULTS);
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem("simpletec-theme") || "dark"; }
    catch (e) { return "dark"; }
  });

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem("simpletec-theme", theme); } catch (e) {}
  }, [theme]);

  useEffect(() => {
    const a = ACCENT_MAP[tweaks.accent] || ACCENT_MAP.violet;
    const r = document.documentElement;
    r.style.setProperty("--accent", a.base);
    r.style.setProperty("--accent-hover", a.hover);
    r.style.setProperty("--accent-pressed", a.pressed);
    r.style.setProperty("--accent-soft", a.soft);
    r.dataset.density = tweaks.density;
  }, [tweaks]);

  return (
    <div className="page" data-marquee={tweaks.showMarquee ? "on" : "off"}>
      <Nav theme={theme} setTheme={setTheme} />
      <main>
        <Hero />
        <TrustBar />
        <Services />
        <HowItWorks />
        <Coverage />
        <Warranty />
        <FAQSection />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks" defaultPosition="bottom-right">
        <TweakSection title="Acento" subtitle="Violeta por defecto (brand).">
          <TweakRadio
            value={tweaks.accent}
            options={[
              { value: "violet", label: "Violet (default)" },
              { value: "cyan", label: "Cyan" },
              { value: "emerald", label: "Emerald" },
              { value: "amber", label: "Amber" },
            ]}
            onChange={(v) => setTweaks({ accent: v })}
          />
        </TweakSection>
        <TweakSection title="Densidad">
          <TweakRadio
            value={tweaks.density}
            options={[
              { value: "comfortable", label: "Comfortable" },
              { value: "compact", label: "Compact" },
            ]}
            onChange={(v) => setTweaks({ density: v })}
          />
        </TweakSection>
        <TweakSection title="Decoración">
          <TweakToggle
            label="Marquee de zonas en hero"
            checked={tweaks.showMarquee}
            onChange={(v) => setTweaks({ showMarquee: v })}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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