// GuerrerosCR — Main app
const { useState: useStateApp, useEffect: useEffectApp } = React;

function WAFloat() {
  const isEn = window.location.pathname.startsWith("/en");
  return (
    <a
      className="wa-float"
      href={isEn
        ? "https://wa.me/50670181607?text=Hello%2C%20I%20visited%20GuerrerosCR%20and%20I'm%20interested%20in%20a%20digital%20solution%20for%20my%20company."
        : "https://wa.me/50670181607?text=Hola%2C%20vi%20la%20web%20de%20GuerrerosCR%20y%20me%20interesa%20conversar%20sobre%20una%20soluci%C3%B3n%20digital%20para%20mi%20empresa."
      }
      target="_blank" rel="noreferrer"
      aria-label={isEn ? "Contact via WhatsApp" : "Escribir por WhatsApp"}
      title={isEn ? "Contact via WhatsApp" : "Escribir por WhatsApp"}
    >
      <Icon name="wa" size={28} />
    </a>
  );
}

const savedTheme = (() => {
  try {
    return localStorage.getItem("gc_theme") === "dark" ? "Oscuro" : "Claro";
  } catch (e) {
    return "Claro";
  }
})();

const APP_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": savedTheme,
  "accent": "#2563EB",
  "showFloatingWA": true
}/*EDITMODE-END*/;

function App() {
  const isEn = window.location.pathname.startsWith("/en");
  const [t, setTweak] = useTweaks(APP_DEFAULTS);

  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", t.theme === "Oscuro" ? "dark" : "light");
    document.documentElement.style.setProperty("--brand", t.accent || "#2563EB");
    try {
      localStorage.setItem("gc_theme", t.theme === "Oscuro" ? "dark" : "light");
    } catch (e) {}
  }, [t.theme, t.accent]);

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Marquee />
      <Problem />
      <Services />
      <Process />
      <Projects />
      <About />
      <TechStack />
      <CTABanner />
      <Blog />
      <Contact />
      <Footer />
      {t.showFloatingWA && <WAFloat />}

      <TweaksPanel title={isEn ? "Tweaks" : "Tweaks"}>
        <TweakSection label={isEn ? "Appearance" : "Apariencia"} />
        <TweakRadio
          label={isEn ? "Theme" : "Tema"}
          value={t.theme}
          options={["Claro", "Oscuro"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label={isEn ? "Brand color" : "Color de marca"}
          value={t.accent}
          options={["#2563EB", "#0B1F3A", "#22C55E", "#7C3AED"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label={isEn ? "Components" : "Componentes"} />
        <TweakToggle
          label={isEn ? "Floating WhatsApp" : "WhatsApp flotante"}
          value={t.showFloatingWA}
          onChange={(v) => setTweak("showFloatingWA", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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