// ============================================================
// Richard Petrus — App shell + Tweaks
// ============================================================
/* global React, ReactDOM, RP_STRINGS,
   Navbar, Hero, Manifiesto, Metodo, Analisis, Ciencia, Servicios, QuoteDivider,
   Sobre, Testimonios, CTAFinal, Footer, FomoPush, WhatsApp, Consent,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect */

const { useState, useEffect } = React;

const RP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "identity": "A",
  "lang": "es",
  "grain": true,
  "aurora": true,
  "fomo": true,
  "consent": true
}/*EDITMODE-END*/;

const IDENTITY_LABELS = {
  A: "Mediterranean Bronze",
  B: "Catalan Brutalism",
  C: "Aurora Modernista"
};

function App() {
  const [tweaks, setTweak] = useTweaks(RP_TWEAK_DEFAULTS);
  const [lang, setLangState] = useState(tweaks.lang || "es");

  useEffect(() => {
    document.documentElement.setAttribute("data-identity", tweaks.identity || "A");
    document.documentElement.lang = lang;
  }, [tweaks.identity, lang]);

  useEffect(() => { setLangState(tweaks.lang || "es"); }, [tweaks.lang]);

  const setLang = (v) => { setLangState(v); setTweak("lang", v); };

  const t = RP_STRINGS[lang] || RP_STRINGS.es;

  return (
    <React.Fragment>
      {tweaks.grain && <div className="rp-grain" aria-hidden="true" />}
      <Navbar t={t} lang={lang} setLang={setLang} />
      <main>
        <Hero t={t} />
        <Manifiesto t={t} />
        <Metodo t={t} />
        <Analisis t={t} />
        <Ciencia t={t} />
        <Servicios t={t} />
        <QuoteDivider t={t} />
        <Sobre t={t} />
        <Testimonios t={t} />
        <CTAFinal t={t} />
      </main>
      <Footer t={t} />

      {tweaks.fomo && <FomoPush t={t} />}
      <WhatsApp />
      {tweaks.consent && <Consent t={t} />}

      <TweaksPanel title="Tweaks · Richard Petrus">
        <TweakSection label="Identidad visual" />
        <TweakRadio
          label="Opción"
          value={tweaks.identity}
          options={["A", "B", "C"]}
          onChange={(v) => setTweak("identity", v)}
        />
        <div style={{ fontSize: 10, color: "rgba(41,38,27,.55)", marginTop: -4, marginBottom: 6, lineHeight: 1.4 }}>
          {tweaks.identity === "A" && "A · Mediterranean Liquid Bronze — preto obsidiana + bronze (recomendada)"}
          {tweaks.identity === "B" && "B · Catalan Brutalism — creme/preto + carmín catalán"}
          {tweaks.identity === "C" && "C · Aurora Modernista — preto + dourado oxidado + verde Sagrada"}
        </div>

        <TweakSection label="Idioma" />
        <TweakRadio
          label="Lang"
          value={lang}
          options={["es", "en"]}
          onChange={(v) => setLang(v)}
        />

        <TweakSection label="Efectos" />
        <TweakToggle label="Aurora (orbs)" value={tweaks.aurora}
          onChange={(v) => setTweak("aurora", v)} />
        <TweakToggle label="Grain overlay" value={tweaks.grain}
          onChange={(v) => setTweak("grain", v)} />
        <TweakToggle label="FOMO push" value={tweaks.fomo}
          onChange={(v) => setTweak("fomo", v)} />
        <TweakToggle label="RGPD banner" value={tweaks.consent}
          onChange={(v) => setTweak("consent", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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