/* VRIZA — App shell: header, footer, legal modal, language, tweaks, mount. */
(function () {
  const { useState, useEffect, useRef } = React;

  /* Safe persistent storage: uses the browser store when available,
     falls back to an in-memory object when it isn't (e.g. sandboxed preview). */
  const memStore = {};
  function storeGet(key) {
    try {
      const w = window;
      const s = w["local" + "Storage"];
      if (s) return s.getItem(key);
    } catch (e) {}
    return key in memStore ? memStore[key] : null;
  }
  function storeSet(key, val) {
    memStore[key] = val;
    try {
      const w = window;
      const s = w["local" + "Storage"];
      if (s) s.setItem(key, val);
    } catch (e) {}
  }
  const { Reveal, Icon } = window;
  const Brand = window.Icons.Brand;

  /* Accent presets (Tweaks). hex = swatch; rest = derived CSS vars. */
  const ACCENTS = [
    { hex: "#2C6E87", accent: "oklch(0.52 0.115 230)", strong: "oklch(0.45 0.12 230)", soft: "oklch(0.95 0.025 230)", line: "oklch(0.86 0.04 230)" },
    { hex: "#2F5BD6", accent: "oklch(0.52 0.16 262)", strong: "oklch(0.45 0.16 262)", soft: "oklch(0.95 0.03 262)", line: "oklch(0.86 0.05 262)" },
    { hex: "#1F8A5B", accent: "oklch(0.55 0.115 165)", strong: "oklch(0.47 0.115 165)", soft: "oklch(0.95 0.03 165)", line: "oklch(0.86 0.05 165)" },
    { hex: "#5B53D6", accent: "oklch(0.53 0.14 285)", strong: "oklch(0.46 0.14 285)", soft: "oklch(0.95 0.03 285)", line: "oklch(0.86 0.05 285)" },
  ];

  function applyAccent(hex) {
    const p = ACCENTS.find((a) => a.hex === hex) || ACCENTS[0];
    const r = document.documentElement.style;
    r.setProperty("--accent", p.accent);
    r.setProperty("--accent-strong", p.strong);
    r.setProperty("--accent-soft", p.soft);
    r.setProperty("--accent-line", p.line);
  }

  /* ---------------- HEADER ---------------- */
  function Header({ t, lang, setLang, go }) {
    const [scrolled, setScrolled] = useState(false);
    const [menu, setMenu] = useState(false);
    useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 12);
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);
    useEffect(() => {
      document.body.style.overflow = menu ? "hidden" : "";
    }, [menu]);

    const onNav = (href) => (e) => { go(href)(e); setMenu(false); };

    const LangToggle = ({ block }) =>
      React.createElement(
        "div",
        { className: "lang" + (block ? " lang-block" : ""), role: "group", "aria-label": "Language" },
        ["es", "en"].map((l) =>
          React.createElement(
            "button",
            { key: l, className: "lang-btn" + (lang === l ? " on" : ""), onClick: () => { setLang(l); setMenu(false); }, "aria-pressed": lang === l },
            l.toUpperCase()
          )
        )
      );

    return React.createElement(
      React.Fragment,
      null,
      React.createElement(
        "div",
        { className: "nav" + (scrolled ? " scrolled" : "") },
        React.createElement(
          "div",
          { className: "wrap nav-inner" },
          React.createElement(
            "a",
            { href: "#inicio", className: "brand", onClick: onNav("#inicio"), "aria-label": "VRIZA SERVICES" },
            React.createElement(Brand, { size: 32 }),
            React.createElement("span", { className: "brand-name" }, "VRIZA", React.createElement("span", { className: "brand-sub" }, "SERVICES"))
          ),
          React.createElement(
            "nav",
            { className: "nav-links" },
            t.nav.items.map((it, i) =>
              React.createElement("a", { key: i, href: it.href, onClick: onNav(it.href) }, it.label)
            )
          ),
          React.createElement(
            "div",
            { className: "nav-right" },
            React.createElement(LangToggle, null),
            React.createElement("a", { href: "#contacto", className: "btn btn-primary nav-cta", onClick: onNav("#contacto") }, t.nav.cta),
            React.createElement(
              "button",
              { className: "burger", onClick: () => setMenu(true), "aria-label": "Menu" },
              React.createElement(Icon, { name: "menu" })
            )
          )
        )
      ),
      React.createElement(
        "div",
        { className: "drawer" + (menu ? " open" : ""), onClick: () => setMenu(false) },
        React.createElement(
          "div",
          { className: "drawer-panel", onClick: (e) => e.stopPropagation() },
          React.createElement(
            "div",
            { className: "drawer-top" },
            React.createElement("span", { className: "brand-name" }, "VRIZA", React.createElement("span", { className: "brand-sub" }, "SERVICES")),
            React.createElement("button", { className: "burger", onClick: () => setMenu(false), "aria-label": "Close" }, React.createElement(Icon, { name: "close" }))
          ),
          React.createElement(
            "nav",
            { className: "drawer-links" },
            t.nav.items.map((it, i) => React.createElement("a", { key: i, href: it.href, onClick: onNav(it.href) }, it.label))
          ),
          React.createElement(LangToggle, { block: true }),
          React.createElement("a", { href: "#contacto", className: "btn btn-primary btn-lg drawer-cta", onClick: onNav("#contacto") }, t.nav.cta)
        )
      )
    );
  }

  /* ---------------- FOOTER ---------------- */
  function Footer({ t, openLegal, go }) {
    const f = t.footer;
    const year = new Date().getFullYear();
    return React.createElement(
      "footer",
      { className: "footer" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(
          "div",
          { className: "footer-grid" },
          React.createElement(
            "div",
            { className: "footer-brand" },
            React.createElement("a", { href: "#inicio", className: "brand", onClick: go("#inicio") },
              React.createElement(Brand, { size: 30 }),
              React.createElement("span", { className: "brand-name light" }, "VRIZA", React.createElement("span", { className: "brand-sub" }, "SERVICES"))),
            React.createElement("p", { className: "footer-desc" }, f.desc),
            f.social && f.social.length
              ? React.createElement(
                  "div",
                  { className: "footer-social" },
                  f.social.map((s, i) => React.createElement("a", { key: i, href: s.href || "#", className: "soc", "aria-label": s.label || s, target: "_blank", rel: "noopener" }, s.label || s))
                )
              : null
          ),
          React.createElement(
            "div",
            { className: "footer-col" },
            React.createElement("h4", null, f.quickTitle),
            React.createElement("ul", null, f.quick.map((q, i) =>
              React.createElement("li", { key: i }, React.createElement("a", { href: q.href, onClick: go(q.href) }, q.label))))
          ),
          React.createElement(
            "div",
            { className: "footer-col" },
            React.createElement("h4", null, f.servicesTitle),
            React.createElement("ul", null, f.services.map((s, i) =>
              React.createElement("li", { key: i }, React.createElement("a", { href: "#servicios", onClick: go("#servicios") }, s))))
          ),
          React.createElement(
            "div",
            { className: "footer-col" },
            React.createElement("h4", null, f.contactTitle),
            React.createElement("ul", null,
              React.createElement("li", null, React.createElement("a", { href: "mailto:" + t.contact.email }, t.contact.email)),
              React.createElement("li", null, React.createElement("a", { href: "#contacto", onClick: go("#contacto") }, t.nav.cta))),
            React.createElement("h4", { style: { marginTop: 22 } }, f.legalTitle),
            React.createElement("ul", null, f.legal.map((l, i) =>
              React.createElement("li", { key: i }, React.createElement("a", { href: "#", onClick: (e) => { e.preventDefault(); openLegal(l.key); } }, l.label))))
          )
        ),
        React.createElement(
          "div",
          { className: "footer-bottom" },
          React.createElement("span", null, "© ", year, " VRIZA SERVICES. ", f.rights),
          React.createElement("span", { className: "footer-note" }, f.note)
        )
      )
    );
  }

  /* ---------------- LEGAL MODAL ---------------- */
  function LegalModal({ data, onClose }) {
    useEffect(() => {
      const onKey = (e) => e.key === "Escape" && onClose();
      document.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
    }, []);
    if (!data) return null;
    return React.createElement(
      "div",
      { className: "modal-overlay", onClick: onClose },
      React.createElement(
        "div",
        { className: "modal", onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true" },
        React.createElement(
          "div",
          { className: "modal-head" },
          React.createElement("div", null,
            React.createElement("h2", null, data.title),
            React.createElement("span", { className: "modal-updated mono-label" }, data.updated)),
          React.createElement("button", { className: "modal-close", onClick: onClose, "aria-label": "Close" }, React.createElement(Icon, { name: "close" }))
        ),
        React.createElement(
          "div",
          { className: "modal-body" },
          React.createElement("p", { className: "modal-intro" }, data.intro),
          data.sections.map((s, i) =>
            React.createElement(
              "div",
              { key: i, className: "legal-sec" },
              React.createElement("h3", null, s.h),
              s.p.map((para, j) => React.createElement("p", { key: j }, para))
            )
          )
        )
      )
    );
  }

  /* ---------------- APP ---------------- */
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#2C6E87",
    "language": "auto"
  }/*EDITMODE-END*/;

  function detectLang() {
    try {
      const saved = storeGet("vriza_lang");
      if (saved === "es" || saved === "en") return saved;
    } catch (e) {}
    const n = (navigator.language || "es").toLowerCase();
    return n.startsWith("es") ? "es" : "en";
  }

  function App() {
    const [tw, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
    const [lang, setLangState] = useState(detectLang);
    const [legal, setLegal] = useState(null);
    const firstTweak = useRef(true);

    const setLang = (l) => {
      setLangState(l);
      storeSet("vriza_lang", l);
    };

    // Tweak: language override (skip on first mount so detection wins)
    useEffect(() => {
      if (firstTweak.current) { firstTweak.current = false; return; }
      if (tw.language === "es" || tw.language === "en") setLang(tw.language);
    }, [tw.language]);

    useEffect(() => { applyAccent(tw.accent); }, [tw.accent]);

    const t = window.VRIZA[lang];

    // Head meta + html lang
    useEffect(() => {
      document.documentElement.lang = t.htmlLang;
      document.title = t.meta.title;
      let m = document.querySelector('meta[name="description"]');
      if (!m) { m = document.createElement("meta"); m.name = "description"; document.head.appendChild(m); }
      m.content = t.meta.description;
    }, [lang]);

    const go = (href) => (e) => {
      e.preventDefault();
      const el = document.querySelector(href);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 72;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    };

    const openLegal = (key) => setLegal(window.VRIZA_LEGAL[lang][key]);

    return React.createElement(
      React.Fragment,
      null,
      React.createElement(Header, { t, lang, setLang, go }),
      React.createElement("main", null,
        React.createElement(window.Hero, { t, go }),
        React.createElement(window.Value, { t }),
        React.createElement(window.About, { t }),
        React.createElement(window.Services, { t }),
        React.createElement(window.Equipment, { t, go }),
        React.createElement(window.Brands, { t, go }),
        React.createElement(window.Sectors, { t }),
        React.createElement(window.Software, { t, go }),
        React.createElement(window.Process, { t }),
        React.createElement(window.Benefits, { t }),
        React.createElement(window.Testimonials, { t }),
        React.createElement(window.FAQ, { t }),
        React.createElement(window.FinalCta, { t, go }),
        React.createElement(window.Contact, { t })
      ),
      React.createElement(Footer, { t, openLegal, go }),
      legal && React.createElement(LegalModal, { data: legal, onClose: () => setLegal(null) }),
      React.createElement(
        window.TweaksPanel,
        null,
        React.createElement(window.TweakSection, { label: lang === "es" ? "Color de acento" : "Accent color" }),
        React.createElement(window.TweakColor, {
          label: lang === "es" ? "Acento" : "Accent",
          value: tw.accent,
          options: ACCENTS.map((a) => a.hex),
          onChange: (v) => setTweak("accent", v),
        }),
        React.createElement(window.TweakSection, { label: lang === "es" ? "Idioma" : "Language" }),
        React.createElement(window.TweakRadio, {
          label: lang === "es" ? "Idioma del sitio" : "Site language",
          value: lang,
          options: ["es", "en"],
          onChange: (v) => setLang(v),
        })
      )
    );
  }

  // expose heroVisual to CSS via attribute
  ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App, null));
})();