// app.jsx — Identificación.com main app

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHex": "#7aa7ff",
  "headline": "future",
  "showGrid": true,
  "language": "en"
}/*EDITMODE-END*/;

// Map hex swatch -> full OKLCH triple
const ACCENT_MAP = {
  "#7aa7ff": { accent: "oklch(0.78 0.14 250)", hot: "oklch(0.85 0.16 245)", halo: "oklch(0.9 0.18 240 / 0.45)" },
  "#b289ff": { accent: "oklch(0.78 0.16 295)", hot: "oklch(0.85 0.18 290)", halo: "oklch(0.9 0.18 295 / 0.45)" },
  "#7ee0ff": { accent: "oklch(0.85 0.14 200)", hot: "oklch(0.9 0.16 195)",  halo: "oklch(0.9 0.18 200 / 0.45)" },
  "#ffc473": { accent: "oklch(0.82 0.16 75)",  hot: "oklch(0.88 0.18 70)",  halo: "oklch(0.9 0.18 70 / 0.45)" },
};

const HEADLINE_PRESETS = {
  en: {
    future:   ["Bring the future", "into your storefront."],
    network:  ["Host the sphere.", "Join the human network."],
    identity: ["The future of human", "identity starts here."],
    hub:      ["Turn your business into", "an AI-era hub."],
  },
  es: {
    future:   ["Trae el futuro", "a tu local."],
    network:  ["Hospeda la esfera.", "Únete a la red humana."],
    identity: ["El futuro de la identidad", "humana empieza aquí."],
    hub:      ["Convierte tu negocio", "en un hub de la era IA."],
  },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(tweaks.language || "en");

  // Sync lang state from tweaks
  useEffect(() => {
    if (tweaks.language && tweaks.language !== lang) setLang(tweaks.language);
  }, [tweaks.language]);

  const onSetLang = (l) => {
    setLang(l);
    setTweak("language", l);
  };

  // Apply accent CSS vars
  useEffect(() => {
    const preset = ACCENT_MAP[tweaks.accentHex] || ACCENT_MAP["#7aa7ff"];
    document.documentElement.style.setProperty("--accent", preset.accent);
    document.documentElement.style.setProperty("--accent-hot", preset.hot);
    document.documentElement.style.setProperty("--halo", preset.halo);
  }, [tweaks.accentHex]);

  // Toggle background grid
  useEffect(() => {
    document.body.classList.toggle("no-grid", !tweaks.showGrid);
  }, [tweaks.showGrid]);

  // Get translated strings with overridden headline
  const t = useMemo(() => {
    const base = window.STRINGS[lang];
    const hl = (HEADLINE_PRESETS[lang] && HEADLINE_PRESETS[lang][tweaks.headline]) || HEADLINE_PRESETS[lang].future;
    return {
      ...base,
      hero: { ...base.hero, title_a: hl[0], title_b: hl[1] },
    };
  }, [lang, tweaks.headline]);

  return (
    <React.Fragment>
      <Nav t={t} lang={lang} setLang={onSetLang} />
      <Hero t={t} />
      <WhySection t={t} locations={t.locations} />
      <AboutOrbSection t={t} />
      <WhatSection t={t} />
      <HowSection t={t} />
      <StatsSection t={t} />
      <OperatorSection t={t} />
      <FaqSection t={t} />
      <FinalCta t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor
          label="Accent"
          value={tweaks.accentHex}
          onChange={(v) => setTweak("accentHex", v)}
          options={["#7aa7ff", "#b289ff", "#7ee0ff", "#ffc473"]}
        />
        <TweakToggle
          label="Background grid"
          value={tweaks.showGrid}
          onChange={(v) => setTweak("showGrid", v)}
        />

        <TweakSection label="Hero" />
        <TweakSelect
          label="Headline"
          value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "future",   label: "Bring the future" },
            { value: "network",  label: "Join the human network" },
            { value: "identity", label: "Future of human identity" },
            { value: "hub",      label: "AI-era hub" },
          ]}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Site"
          value={lang}
          onChange={(v) => onSetLang(v)}
          options={[
            { value: "en", label: "English" },
            { value: "es", label: "Español" },
          ]}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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