// shared-pages.jsx — utilidades compartidas para todas las páginas
// (asume que components.jsx ya cargó: window.Icon, PalaSVG, TopBar, Header, Footer, ProductCard, Newsletter, PROD_BEST, PROD_NEW)

const { useState: usePState, useEffect: usePEffect } = React;

// Page header con breadcrumbs
window.PageHead = function PageHead({ crumbs = [], title, titleEm, sub, meta }) {
  return (
    <section className="page-head">
      <div className="container">
        <div>
          <div className="crumbs">
            <a href="index.html">Inicio</a>
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                <span>/</span>
                {c.href ? <a href={c.href}>{c.label}</a> : <span style={{opacity: 1}}>{c.label}</span>}
              </React.Fragment>
            ))}
          </div>
          <h1>{title}{titleEm && <> <em>{titleEm}</em></>}</h1>
          {sub && <p>{sub}</p>}
        </div>
        {meta && <div className="page-head-meta">{meta}</div>}
      </div>
    </section>
  );
};

// Tweaks panel mínimo (paleta + dark)
window.SharedTweaks = function SharedTweaks({ defaults, extra }) {
  const [t, setTweak] = useTweaks(defaults);
  const PALETTES = {
    lime:    { accent: "#1F8A3A", accent2: "#22B14C", accent3: "#C8FF3D", deep: "#0E3A1F", mid: "#0A6B2F", emer: "#3CFFA9" },
    emerald: { accent: "#0A7A56", accent2: "#1FA677", accent3: "#3CFFA9", deep: "#06382B", mid: "#0A6B4E", emer: "#6BFFC8" },
    forest:  { accent: "#2C5530", accent2: "#3D6B2F", accent3: "#A8D85B", deep: "#152912", mid: "#3D6B2F", emer: "#A8D85B" },
    neon:    { accent: "#16A34A", accent2: "#22C55E", accent3: "#BEF264", deep: "#0A1A0A", mid: "#15803D", emer: "#86EFAC" },
  };
  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.dark ? "dark" : "light";
    const p = PALETTES[t.palette] || PALETTES.lime;
    root.style.setProperty("--accent", p.accent);
    root.style.setProperty("--green-deep", p.deep);
    root.style.setProperty("--green-mid", p.mid);
    root.style.setProperty("--green-pist", p.accent);
    root.style.setProperty("--green-bright", p.accent2);
    root.style.setProperty("--green-lime", p.accent3);
    root.style.setProperty("--green-emer", p.emer);
  }, [t.dark, t.palette]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Apariencia"/>
      <TweakSelect label="Paleta" value={t.palette}
        options={[
          { value: "lime",    label: "Verde pádel + lima" },
          { value: "emerald", label: "Esmeralda + neón" },
          { value: "forest",  label: "Forest + oliva" },
          { value: "neon",    label: "Neón hi-vis" },
        ]}
        onChange={(v) => setTweak("palette", v)}/>
      <TweakToggle label="Modo oscuro" value={t.dark} onChange={(v) => setTweak("dark", v)}/>
      {extra && extra(t, setTweak)}
    </TweaksPanel>
  );
};