// Shared site shell for all Ewa Nails pages.
// Provides: <Nav>, <Footer>, decorative blobs, and useReveal scroll-in observer.
// Also reads tweak settings from localStorage so changes propagate across pages.

const TWEAK_STORE_KEY = "ewanails-tweaks";

function loadStoredTweaks() {
  try {
    const raw = localStorage.getItem(TWEAK_STORE_KEY);
    return raw ? JSON.parse(raw) : {};
  } catch {return {};}
}
function saveStoredTweaks(t) {
  try {localStorage.setItem(TWEAK_STORE_KEY, JSON.stringify(t));} catch {}
}

// Apply tweak values as CSS variables on :root.
function applyTweaks(t) {
  const r = document.documentElement;
  if (t.glassBlur != null) r.style.setProperty("--glass-blur", t.glassBlur + "px");
  if (t.glassSat != null) r.style.setProperty("--glass-sat", t.glassSat + "%");
  if (t.speed != null) r.style.setProperty("--speed-base", t.speed + "ms");
  if (t.fontDisplay) r.style.setProperty("--font-display", t.fontDisplay);
  if (t.palette && Array.isArray(t.palette)) {
    const [p100, p300, p500, p600, ink] = t.palette;
    if (p100) r.style.setProperty("--rose-100", p100);
    if (p300) r.style.setProperty("--rose-300", p300);
    if (p500) r.style.setProperty("--rose-500", p500);
    if (p600) r.style.setProperty("--rose-600", p600);
    if (ink) r.style.setProperty("--rose-ink", ink);
    if (p100) r.style.setProperty("--bg", "#FFF6F9");
  }
}

// Apply on load.
applyTweaks(loadStoredTweaks());

// Listen for cross-page changes (when tweak panel updates).
window.addEventListener("storage", (e) => {
  if (e.key === TWEAK_STORE_KEY) {
    try {applyTweaks(JSON.parse(e.newValue || "{}"));} catch {}
  }
});

const NAV_LINKS = [
{ href: "index.html", label: "Home" },
{ href: "galleria.html", label: "Galleria" },
{ href: "prezzi.html", label: "Prezzi" },
{ href: "contatti.html", label: "Contatti" }];


function Nav({ active = "Home" }) {
  const [open, setOpen] = React.useState(false);
  // Close on Escape and on resize past mobile breakpoint
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    const onResize = () => { if (window.innerWidth > 760) setOpen(false); };
    document.addEventListener("keydown", onKey);
    window.addEventListener("resize", onResize);
    return () => {
      document.removeEventListener("keydown", onKey);
      window.removeEventListener("resize", onResize);
    };
  }, []);

  return (
    <React.Fragment>
      <nav className={"nav" + (open ? " open" : "")}>
        <div className="nav-row">
          <a href="index.html" className="nav-brand">
            <img src="assets/logo.jpeg" alt="Ewa Nails" />
            <b>EWA</b><small>Nails</small>
          </a>
          <div className="nav-links">
            {NAV_LINKS.map((l) =>
              <a key={l.href} href={l.href} className={l.label === active ? "active" : ""}>{l.label}</a>
            )}
          </div>
          <button className={"nav-burger" + (open ? " open" : "")} onClick={() => setOpen(o => !o)} aria-label={open ? "Chiudi menu" : "Apri menu"} aria-expanded={open}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
        <div className="nav-dropdown" aria-hidden={!open}>
          {NAV_LINKS.map((l) =>
            <a key={l.href} href={l.href} className={l.label === active ? "active" : ""} onClick={() => setOpen(false)}>{l.label}</a>
          )}
          <div className="nav-dropdown-foot">
            <a href="https://wa.me/393465748855" target="_blank" rel="noreferrer">+39 346 574 8855</a>
            <a href="https://instagram.com/ewa_nailslab" target="_blank" rel="noreferrer">@ewa_nailslab</a>
          </div>
        </div>
      </nav>
    </React.Fragment>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div className="f-brand">EwaNails<span>Beauty Lab</span></div>
            <p className="muted" style={{ maxWidth: 320, fontSize: ".95rem" }}>
              Nail art su misura, cura del dettaglio e tanta passione. Fatti notare partendo dalle mani.
            </p>
          </div>
          <div>
            <h4>Esplora</h4>
            <ul>
              {NAV_LINKS.map((l) => <li key={l.href}><a href={l.href}>{l.label}</a></li>)}
            </ul>
          </div>
          <div>
            <h4>Contatti</h4>
            <ul>
              <li><a href="https://instagram.com/ewa_nailslab" target="_blank" rel="noreferrer">@ewa_nailslab</a></li>
              <li><a href="https://wa.me/393465748855">+39 346 574 8855</a></li>
              <li><a href="mailto:lab@ewanails.com">lab@ewanails.com</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-legal">
          <div className="fl-biz">
            <span>© {new Date().getFullYear()} Ewa Nails Beauty Lab</span>
            <span aria-hidden>·</span>
            <span>Gwiazdowska Ewa Sara</span>
            <span aria-hidden>·</span>
            <span>P.IVA 04245050366</span>
            <span aria-hidden>·</span>
            <span>Regime forfettario · L. 190/2014</span>
          </div>
          <div className="fl-links">
            <a href="privacy-policy.html">Privacy Policy</a>
            <a href="cookie-policy.html">Cookie Policy</a>
            <a href="termini.html">Termini e condizioni</a>
          </div>
        </div>
      </div>
    </footer>);

}

// Layout used by legal pages (Privacy, Cookie, Termini).
function LegalPage({ title, kicker, updated, children }) {
  useReveal();
  return (
    <React.Fragment>
      <Blobs />
      <Nav active="" />
      <header className="page-head">
        <div className="shell">
          <div className="reveal" style={{ textAlign: "center" }}>
            <div className="eyebrow">{kicker || "informativa"}</div>
            <h1 className="page-title">{title}</h1>
            {updated && <p className="muted page-sub">Ultimo aggiornamento: {updated}</p>}
          </div>
        </div>
      </header>
      <section className="section-sm">
        <div className="shell">
          <article className="legal-doc reveal glass">
            {children}
          </article>
        </div>
      </section>
      <Footer />
      <EwaTweaks />
    </React.Fragment>);

}

// Reveal-on-scroll observer.
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          en.target.classList.add("in");
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, []);
}

function Blobs() {
  return (
    <React.Fragment>
      <div className="blob blob-1"></div>
      <div className="blob blob-2"></div>
    </React.Fragment>);

}

// Shared tweaks defaults (consumed by tweaks-panel sites).
const EWA_TWEAK_DEFAULTS = {
  "glassBlur": 22,
  "glassSat": 170,
  "speed": 600,
  "fontDisplay": "\"Cormorant Garamond\", serif",
  "palette": ["#FCE4EC", "#F8BBD0", "#EC6E96", "#D9477A", "#4A1F2E"]
};

function EwaTweaks() {
  const initial = { ...EWA_TWEAK_DEFAULTS, ...loadStoredTweaks() };
  const [t, setTweakBase] = useTweaks(initial);

  // Persist to localStorage too so other pages pick it up.
  const setTweak = React.useCallback((k, v) => {
    setTweakBase(k, v);
    const next = typeof k === "object" ? { ...t, ...k } : { ...t, [k]: v };
    saveStoredTweaks(next);
    applyTweaks(next);
  }, [t, setTweakBase]);

  React.useEffect(() => {applyTweaks(t);}, [t]);

  const PALETTES = [
  ["#FCE4EC", "#F8BBD0", "#EC6E96", "#D9477A", "#4A1F2E"], // baby pink
  ["#FFF0F3", "#FFD6DE", "#FFB3C1", "#FF8FA3", "#5C1E2A"], // pesca rosa
  ["#F9E5E0", "#EFC9C0", "#D9A89C", "#B5786A", "#3D1F18"], // nude rosato
  ["#FFF5F7", "#F4C2D7", "#E89BBD", "#C76D97", "#3F1A2C"] // glam pink
  ];
  const FONTS = [
  "\"Cormorant Garamond\", serif",
  "\"Playfair Display\", serif",
  "\"DM Serif Display\", serif",
  "\"Italiana\", serif"];

  const FONT_LABELS = ["Cormorant", "Playfair", "DM Serif", "Italiana"];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette rosa" />
      <TweakColor
        label="Tonalità"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak("palette", v)} />
      
      <TweakSection label="Liquid glass" />
      <TweakSlider label="Sfocatura" value={t.glassBlur} min={6} max={48} unit="px"
      onChange={(v) => setTweak("glassBlur", v)} />
      <TweakSlider label="Saturazione" value={t.glassSat} min={100} max={240} unit="%"
      onChange={(v) => setTweak("glassSat", v)} />
      <TweakSection label="Tipografia" />
      <TweakSelect label="Font titoli" value={t.fontDisplay}
      options={FONTS.map((v, i) => ({ value: v, label: FONT_LABELS[i] }))}
      onChange={(v) => setTweak("fontDisplay", v)} />
      <TweakSection label="Animazioni" />
      <TweakSlider label="Velocità" value={t.speed} min={200} max={1200} unit="ms"
      onChange={(v) => setTweak("speed", v)} />
    </TweaksPanel>);

}

Object.assign(window, { Nav, Footer, Blobs, useReveal, EwaTweaks, LegalPage, EWA_TWEAK_DEFAULTS, applyTweaks, loadStoredTweaks });