/* === Main app: router + tweaks (minimal) === */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showAnimatedLabel": false,
  "tagline": "El blanco atlántico de Jerez",
  "displayHue": "atlantic"
}/*EDITMODE-END*/;

const ACCENTS = {
  atlantic: { label: "Atlántico", val: { "--atlantic": "#2E4A5C", "--atlantic-deep": "#1E3645", "--atlantic-soft": "#5C7484" } },
  ink:      { label: "Tinta",     val: { "--atlantic": "#0E0D0B", "--atlantic-deep": "#0E0D0B", "--atlantic-soft": "#6E6A60" } },
  burgundy: { label: "Burdeos",   val: { "--atlantic": "#5A1F22", "--atlantic-deep": "#3F1517", "--atlantic-soft": "#8E4D50" } },
};

function App() {
  const route = useRoute();
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [ageOk, setAgeOk] = React.useState(() => localStorage.getItem("vdp_age_ok") === "1");

  React.useEffect(() => {
    const r = document.documentElement;
    const pal = ACCENTS[t.displayHue] || ACCENTS.atlantic;
    Object.entries(pal.val).forEach(([k, v]) => r.style.setProperty(k, v));
  }, [t.displayHue]);

  let page = null;
  const r = route;
  if (r === "/" || r === "") page = <Home />;
  else if (r === "/que-es-vino-de-pasto") page = <QueEs />;
  else if (r === "/paranormal") page = <Paranormal />;
  else if (r === "/bodegas-baron") page = <BodegaPage />;
  else if (r === "/comprar-paranormal") page = <Comprar />;
  else if (r === "/blog") page = <BlogIndex />;
  else if (r.startsWith("/blog/")) page = <BlogPost slug={r.slice("/blog/".length)} />;
  else if (r === "/aviso-legal") page = <AvisoLegal />;
  else if (r === "/politica-privacidad") page = <PoliticaPrivacidad />;
  else if (r === "/politica-cookies") page = <PoliticaCookies />;
  else {
    page = (
      <Page>
        <section className="section-pad">
          <div className="container">
            <div className="eyebrow">404</div>
            <h1 style={{ marginTop: 20 }}>Página<br/><span className="italic">no encontrada</span>.</h1>
            <Link to="/" className="btn-link" style={{ marginTop: 24 }}>
              <span>Volver al inicio</span><span className="arrow">→</span>
            </Link>
          </div>
        </section>
      </Page>
    );
  }

  return (
    <React.Fragment>
      <Header route={route} />
      {page}
      <Footer />
      {!ageOk && <AgeGate onAccept={() => setAgeOk(true)} />}
      {ageOk && <CookieBanner />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Acento cromático">
          <TweakRadio
            label="Tono"
            value={t.displayHue}
            onChange={(v) => setTweak("displayHue", v)}
            options={["atlantic", "ink", "burgundy"]}
          />
        </TweakSection>
        <TweakSection label="Contenido">
          <TweakText
            label="Tagline (Home eyebrow)"
            value={t.tagline}
            onChange={(v) => setTweak("tagline", v)}
          />
          <TweakToggle
            label="Etiqueta animada (placeholder)"
            value={t.showAnimatedLabel}
            onChange={(v) => setTweak("showAnimatedLabel", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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