/* NovusElement — single-page bilingual site. Composes the design system. */
const { Button, TextLink, GlobalNav } = window.DesignSystem_128eeb;
const { HeroMockup } = window.NEMockups;
const I18N = window.NE_I18N;
const CONTACT = window.NE_CONTACT;

/* WhatsApp logo (uploaded asset) */
function WhatsAppIcon() {
  return /*#__PURE__*/ React.createElement("img", {
    src: "assets/whatsapp.png",
    alt: "",
    width: 22,
    height: 22,
    "aria-hidden": "true",
    className: "ne-wa-icon",
  });
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const startY = window.pageYOffset;
  const targetY = el.getBoundingClientRect().top + startY - 52;
  const distance = targetY - startY;
  if (Math.abs(distance) < 2) return;

  if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    window.scrollTo({ top: targetY, behavior: "auto" });
    return;
  }

  // Duration scales with distance: longer trips take a bit longer, clamped.
  const duration = Math.min(1400, Math.max(600, Math.abs(distance) * 0.6));
  // easeInOutCubic — accelerates out of the start, eases into the section.
  const ease = (p) => (p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2);

  const start = performance.now();
  function step(now) {
    const p = Math.min(1, (now - start) / duration);
    window.scrollTo({ top: startY + distance * ease(p), behavior: "auto" });
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

/* ---------------- Top navigation ---------------- */
function Nav({ t, lang, setLang }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const onScroll = () => el.classList.toggle('is-scrolled', window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { label: t.nav.services, id: "services" },
    { label: t.nav.why, id: "why" },
    { label: t.nav.about, id: "about" },
    { label: t.nav.contact, id: "contact" },
    { label: t.nav.demos, id: "demos", href: "/demos/" },
  ];

  const handleNavLink = (id, href) => {
    setMenuOpen(false);
    if (href) { window.location.href = href; return; }
    setTimeout(() => scrollToId(id), 50);
  };

  const right = /*#__PURE__*/ React.createElement(
    "div",
    { style: { display: "flex", alignItems: "center", gap: "18px" } },
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-lang ne-lang-desktop", role: "group", "aria-label": t.langLabel },
      ["en", "es"].map((code) =>
        /*#__PURE__*/ React.createElement(
          "button",
          {
            key: code,
            type: "button",
            onClick: () => setLang(code),
            className: "ne-lang-btn" + (lang === code ? " is-active" : ""),
          },
          code.toUpperCase()
        )
      )
    ),
    /*#__PURE__*/ React.createElement(
      "button",
      { type: "button", className: "ne-nav-cta ne-nav-cta-desktop", onClick: () => scrollToId("contact") },
      t.navContact
    ),
    /*#__PURE__*/ React.createElement(
      "button",
      {
        type: "button",
        className: "ne-hamburger",
        onClick: () => setMenuOpen(!menuOpen),
        "aria-label": menuOpen ? "Close menu" : "Open menu",
        "aria-expanded": menuOpen,
      },
      menuOpen
        ? /*#__PURE__*/ React.createElement(
            "svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" },
            /*#__PURE__*/ React.createElement("line", { x1: "3", y1: "3", x2: "19", y2: "19" }),
            /*#__PURE__*/ React.createElement("line", { x1: "19", y1: "3", x2: "3", y2: "19" })
          )
        : /*#__PURE__*/ React.createElement(
            "svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" },
            /*#__PURE__*/ React.createElement("line", { x1: "3", y1: "6", x2: "19", y2: "6" }),
            /*#__PURE__*/ React.createElement("line", { x1: "3", y1: "11", x2: "19", y2: "11" }),
            /*#__PURE__*/ React.createElement("line", { x1: "3", y1: "16", x2: "19", y2: "16" })
          )
    )
  );

  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-nav-wrap", ref: wrapRef },
      /*#__PURE__*/ React.createElement(GlobalNav, {
        brand: /*#__PURE__*/ React.createElement(
          "button",
          {
            onClick: () => { setMenuOpen(false); window.scrollTo({ top: 0, behavior: "smooth" }); },
            style: {
              display: "inline-flex", alignItems: "center", gap: "8px",
              background: "none", border: "none", cursor: "pointer", padding: 0,
              color: "#ffffff",
            },
            "aria-label": "Go to top",
          },
          /*#__PURE__*/ React.createElement("img", {
            src: "assets/logo-mark.png",
            alt: "",
            style: { height: "22px", width: "auto", display: "block" },
          }),
          /*#__PURE__*/ React.createElement("span", {
            style: { fontSize: "18px", fontWeight: "600", letterSpacing: "-0.2px" }
          }, "NovusElement")
        ),
        links: items.map((i) => i.label),
        onLink: (label) => {
          const it = items.find((i) => i.label === label);
          if (it) handleNavLink(it.id, it.href);
        },
        rightSlot: right,
      })
    ),
    menuOpen && /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-mobile-menu" },
      items.map((item) =>
        /*#__PURE__*/ React.createElement(
          "button",
          {
            key: item.id,
            type: "button",
            className: "ne-mobile-menu-item",
            onClick: () => handleNavLink(item.id, item.href),
          },
          item.label
        )
      ),
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-mobile-menu-footer" },
        /*#__PURE__*/ React.createElement(
          "button",
          {
            type: "button",
            className: "ne-nav-cta",
            style: { width: "100%" },
            onClick: () => handleNavLink("contact"),
          },
          t.navContact
        ),
        /*#__PURE__*/ React.createElement(
          "div",
          { className: "ne-lang", role: "group", "aria-label": t.langLabel, style: { justifyContent: "center" } },
          ["en", "es"].map((code) =>
            /*#__PURE__*/ React.createElement(
              "button",
              {
                key: code,
                type: "button",
                onClick: () => { setLang(code); setMenuOpen(false); },
                className: "ne-lang-btn" + (lang === code ? " is-active" : ""),
              },
              code.toUpperCase()
            )
          )
        )
      )
    )
  );
}

/* ---------------- Hero ---------------- */
function Hero({ t }) {
  const [idx, setIdx] = React.useState(0);
  const [fade, setFade] = React.useState(true);

  React.useEffect(() => {
    const id = setInterval(() => {
      setFade(false);
      setTimeout(() => { setIdx(function(p){ return (p + 1) % t.heroRotating.length; }); setFade(true); }, 350);
    }, 2600);
    return function() { clearInterval(id); };
  }, [t.heroRotating.length]);

  return /*#__PURE__*/ React.createElement(
    "section",
    { id: "top", className: "ne-hero" },
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-container ne-hero-inner" },
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-hero-copy", style: { maxWidth: "760px" } },
        /*#__PURE__*/ React.createElement("div", { className: "ne-eyebrow on-dark" }, t.heroEyebrow),
        /*#__PURE__*/ React.createElement("h1", { className: "ne-hero-headline on-dark" }, t.heroHeadline),
        /*#__PURE__*/ React.createElement("p", { className: "ne-hero-tagline on-dark" }, t.heroTagline),
        /*#__PURE__*/ React.createElement(
          "p",
          { className: "ne-hero-headline on-dark", style: { marginTop: "8px", marginBottom: "16px" } },
          t.heroFor + " ",
          /*#__PURE__*/ React.createElement(
            "span",
            { style: { color: "#6c63ff", fontWeight: 700, transition: "opacity 0.35s", opacity: fade ? 1 : 0, display: "inline-block" } },
            t.heroRotating[idx]
          )
        ),
        /*#__PURE__*/ React.createElement(
          "div",
          { className: "ne-cta-row" },
          /*#__PURE__*/ React.createElement(
            Button,
            { variant: "primary", onClick: () => scrollToId("contact") },
            t.heroPrimary
          ),
          /*#__PURE__*/ React.createElement(
            Button,
            {
              variant: "secondary-pill",
              onClick: () => scrollToId("services"),
              style: { color: "#fff", borderColor: "rgba(255,255,255,0.55)" },
            },
            t.heroSecondary
          )
        )
      )
    )
  );
}

/* ---------------- Services ---------------- */
function Services({ t }) {
  return /*#__PURE__*/ React.createElement(
    "section",
    { id: "services", className: "ne-section", style: { background: "var(--color-canvas-parchment)" } },
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-container" },
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-head" },
        /*#__PURE__*/ React.createElement("div", { className: "ne-eyebrow" }, t.servicesEyebrow),
        /*#__PURE__*/ React.createElement("h2", { className: "ne-h2" }, t.servicesHeadline),
        /*#__PURE__*/ React.createElement("p", { className: "ne-sub" }, t.servicesTagline)
      ),
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-service-grid" },
        t.services.map((s, i) =>
          /*#__PURE__*/ React.createElement(
            "div",
            { className: "ne-service-card", key: i },
            /*#__PURE__*/ React.createElement(
              "div",
              { className: "ne-service-icon" },
              /*#__PURE__*/ React.createElement("i", { "data-lucide": s.icon })
            ),
            /*#__PURE__*/ React.createElement("h3", { className: "ne-service-title" }, s.title),
            /*#__PURE__*/ React.createElement("p", { className: "ne-service-body" }, s.body)
          )
        )
      )
    )
  );
}

/* ---------------- Why ---------------- */
function Why({ t }) {
  return /*#__PURE__*/ React.createElement(
    "section",
    { id: "why", className: "ne-section ne-dark", style: { background: "var(--color-surface-tile-1)" } },
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-container" },
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-head" },
        /*#__PURE__*/ React.createElement("div", { className: "ne-eyebrow on-dark" }, t.whyEyebrow),
        /*#__PURE__*/ React.createElement("h2", { className: "ne-h2 on-dark" }, t.whyHeadline)
      ),
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-why-grid" },
        t.why.map((w, i) =>
          /*#__PURE__*/ React.createElement(
            "div",
            { className: "ne-why-item", key: i },
            /*#__PURE__*/ React.createElement("span", { className: "ne-why-num" }, "0" + (i + 1)),
            /*#__PURE__*/ React.createElement(
              "div",
              null,
              /*#__PURE__*/ React.createElement("h3", { className: "ne-why-title" }, w.title),
              /*#__PURE__*/ React.createElement("p", { className: "ne-why-body" }, w.body)
            )
          )
        )
      )
    )
  );
}

/* ---------------- About ---------------- */
function About({ t }) {
  return /*#__PURE__*/ React.createElement(
    "section",
    { id: "about", className: "ne-section", style: { background: "var(--color-canvas)" } },
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-container ne-about" },
      t.aboutEyebrow && /*#__PURE__*/ React.createElement("div", { className: "ne-eyebrow" }, t.aboutEyebrow),
      /*#__PURE__*/ React.createElement("h2", { className: "ne-h2 ne-about-h" }, t.aboutHeadline),
      /*#__PURE__*/ React.createElement("p", { className: "ne-about-body" }, t.aboutBody),
      /*#__PURE__*/ React.createElement(
        TextLink,
        { href: "#contact", chevron: true, onClick: (e) => { e.preventDefault(); scrollToId("contact"); } },
        t.aboutLink
      )
    )
  );
}

/* ---------------- Contact ---------------- */
function Contact({ t }) {
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", company: "", message: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const captchaRef = React.useRef(null);

  React.useEffect(() => {
    const SITEKEY = "50b2fe65-b00b-4b9e-ad62-3ba471098be2";
    const tryRender = () => {
      const el = captchaRef.current;
      if (!el || el.querySelector('iframe')) return; // already rendered
      if (window.hcaptcha) {
        window.hcaptcha.render(el, { sitekey: SITEKEY });
      }
    };
    if (window.hcaptcha) {
      tryRender();
    } else {
      const id = setInterval(() => {
        if (window.hcaptcha) { clearInterval(id); tryRender(); }
      }, 100);
      return () => clearInterval(id);
    }
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Accept": "application/json" },
        body: new FormData(e.target),
      });
      const data = await res.json();
      if (data.success) {
        setStatus("success");
        setForm({ name: "", email: "", phone: "", company: "", message: "" });
      } else {
        setStatus("error");
      }
    } catch (err) {
      setStatus("error");
    }
  };

  return /*#__PURE__*/ React.createElement(
    "section",
    { id: "contact", className: "ne-section", style: { background: "var(--color-canvas-parchment)" } },
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-container ne-contact-grid" },
      /*#__PURE__*/ React.createElement(
        "div",
        { className: "ne-contact-copy" },
        /*#__PURE__*/ React.createElement("div", { className: "ne-eyebrow" }, t.contactEyebrow),
        /*#__PURE__*/ React.createElement("h2", { className: "ne-h2" }, t.contactHeadline),
        /*#__PURE__*/ React.createElement("p", { className: "ne-sub" }, t.contactTagline),
        /*#__PURE__*/ React.createElement(
          "div",
          { className: "ne-direct" },
          /*#__PURE__*/ React.createElement("div", { className: "ne-direct-label" }, t.orReach),
          /*#__PURE__*/ React.createElement(
            "a",
            { className: "ne-direct-row", href: "https://wa.me/" + CONTACT.whatsapp, target: "_blank", rel: "noopener" },
            /*#__PURE__*/ React.createElement(WhatsAppIcon, null),
            CONTACT.waDisplay
          ),
          /*#__PURE__*/ React.createElement(
            "a",
            { className: "ne-direct-row", href: "mailto:" + CONTACT.email },
            /*#__PURE__*/ React.createElement("i", { "data-lucide": "mail" }),
            CONTACT.email
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        "form",
        {
          className: "ne-form",
          method: "POST",
          action: "https://api.web3forms.com/submit",
          onSubmit: submit,
        },
        /*#__PURE__*/ React.createElement("input", {
          type: "hidden", name: "access_key", value: "9233499e-3db5-4317-88ba-bd1751e814de",
        }),
        /*#__PURE__*/ React.createElement("input", {
          type: "hidden", name: "subject", value: "New lead from NovusElement website",
        }),
        status === "success"
          ? /*#__PURE__*/ React.createElement(
              "div",
              { className: "ne-form-success", role: "status" },
              /*#__PURE__*/ React.createElement("i", { "data-lucide": "check-circle" }),
              /*#__PURE__*/ React.createElement("span", null, t.formSuccess)
            )
          : /*#__PURE__*/ React.createElement(
              React.Fragment,
              null,
              /*#__PURE__*/ React.createElement(Field, {
                label: t.formName, name: "name", value: form.name, onChange: set("name"), placeholder: t.formNamePh, required: true,
              }),
              /*#__PURE__*/ React.createElement(Field, {
                label: t.formEmail, name: "email", type: "email", value: form.email, onChange: set("email"), placeholder: t.formEmailPh, required: true,
              }),
              /*#__PURE__*/ React.createElement(Field, {
                label: t.formPhone, name: "phone", type: "tel", value: form.phone, onChange: set("phone"), placeholder: t.formPhonePh,
              }),
              /*#__PURE__*/ React.createElement(Field, {
                label: t.formCompany, name: "company", value: form.company, onChange: set("company"), placeholder: t.formCompanyPh,
              }),
              /*#__PURE__*/ React.createElement(
                "label",
                { className: "ne-field" },
                /*#__PURE__*/ React.createElement("span", { className: "ne-field-label" }, t.formMessage),
                /*#__PURE__*/ React.createElement("textarea", {
                  className: "ne-input ne-textarea", name: "message", rows: 4, value: form.message,
                  onChange: set("message"), placeholder: t.formMessagePh, required: true,
                })
              ),
              status === "error"
                ? /*#__PURE__*/ React.createElement("p", { className: "ne-form-error", role: "alert" }, t.formError)
                : null,
              /*#__PURE__*/ React.createElement("div", {
                className: "h-captcha",
                "data-captcha": "true",
                ref: captchaRef,
              }),
              /*#__PURE__*/ React.createElement(
                Button,
                { variant: "primary", type: "submit", style: { width: "100%", marginTop: "4px" } },
                status === "sending" ? t.formSending : t.formSubmit
              )
            )
      )
    )
  );
}

function Field({ label, name, value, onChange, placeholder, type = "text", required }) {
  return /*#__PURE__*/ React.createElement(
    "label",
    { className: "ne-field" },
    /*#__PURE__*/ React.createElement("span", { className: "ne-field-label" }, label),
    /*#__PURE__*/ React.createElement("input", {
      className: "ne-input", type, name, value, onChange, placeholder, required,
    })
  );
}

/* ---------------- Footer (DS parchment style, working links) ---------------- */
function SiteFooter({ t }) {
  const cols = [t.footer.services, t.footer.studio, t.footer.connect];
  const hrefFor = (heading, link) => {
    if (heading === t.footer.connect.heading) {
      if (/whats/i.test(link)) return "https://wa.me/" + CONTACT.whatsapp;
      if (/mail|correo/i.test(link)) return "mailto:" + CONTACT.email;
      return "#";
    }
    return "#contact";
  };
  return /*#__PURE__*/ React.createElement(
    "footer",
    { className: "ne-footer" },
    /*#__PURE__*/ React.createElement("p", { className: "ne-footer-note" }, t.footerNote),
    /*#__PURE__*/ React.createElement(
      "div",
      { className: "ne-footer-cols" },
      cols.map((c) =>
        /*#__PURE__*/ React.createElement(
          "div",
          { key: c.heading },
          /*#__PURE__*/ React.createElement("div", { className: "ne-footer-h" }, c.heading),
          /*#__PURE__*/ React.createElement(
            "ul",
            { className: "ne-footer-list" },
            c.links.map((l) =>
              /*#__PURE__*/ React.createElement(
                "li",
                { key: l },
                /*#__PURE__*/ React.createElement(
                  "a",
                  {
                    className: "ne-footer-link",
                    href: hrefFor(c.heading, l),
                    target: /^https?:/.test(hrefFor(c.heading, l)) ? "_blank" : undefined,
                    rel: "noopener",
                    onClick: (e) => {
                      if (hrefFor(c.heading, l) === "#contact") { e.preventDefault(); scrollToId("contact"); }
                    },
                  },
                  l
                )
              )
            )
          )
        )
      )
    ),
    /*#__PURE__*/ React.createElement("div", { className: "ne-footer-legal" }, t.footerLegal)
  );
}

/* ---------------- Cookie Consent ---------------- */
function CookieBanner({ t }) {
  const STORAGE_KEY = 'ne_cookie_consent';
  const [view, setView] = React.useState(null); // null | 'banner' | 'customize'
  const [prefs, setPrefs] = React.useState({ analytics: false, marketing: false });

  React.useEffect(() => {
    if (!localStorage.getItem(STORAGE_KEY)) setView('banner');
  }, []);

  const save = (analytics, marketing) => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ essential: true, analytics, marketing }));
    setView(null);
  };

  if (!view) return null;

  const Toggle = ({ id, checked, disabled, onChange }) =>
    /*#__PURE__*/ React.createElement('label', { className: 'ne-toggle' },
      React.createElement('input', { type: 'checkbox', id, checked, disabled, onChange }),
      React.createElement('span', { className: 'ne-toggle-track' })
    );

  const categories = [
    {
      key: 'essential',
      title: t.cookieEssentialTitle,
      desc: t.cookieEssentialDesc,
      checked: true,
      disabled: true,
      tag: t.cookieEssentialRequired,
    },
    {
      key: 'analytics',
      title: t.cookieAnalyticsTitle,
      desc: t.cookieAnalyticsDesc,
      checked: prefs.analytics,
      disabled: false,
    },
    {
      key: 'marketing',
      title: t.cookieMarketingTitle,
      desc: t.cookieMarketingDesc,
      checked: prefs.marketing,
      disabled: false,
    },
  ];

  if (view === 'customize') {
    return /*#__PURE__*/ React.createElement('div', { className: 'ne-cookie', role: 'dialog', 'aria-modal': 'true', 'aria-label': t.cookieTitle },
      React.createElement('div', { className: 'ne-cookie-panel' },
        React.createElement('p', { className: 'ne-cookie-panel-title' }, t.cookieTitle),
        categories.map(c =>
          React.createElement('div', { key: c.key, className: 'ne-cookie-row' },
            React.createElement('div', { className: 'ne-cookie-cat' },
              React.createElement('p', { className: 'ne-cookie-cat-title' }, c.title),
              React.createElement('p', { className: 'ne-cookie-cat-desc' }, c.desc)
            ),
            c.tag
              ? React.createElement('span', { className: 'ne-required-tag' }, c.tag)
              : React.createElement(Toggle, {
                  id: c.key,
                  checked: c.checked,
                  disabled: c.disabled,
                  onChange: e => setPrefs(p => ({ ...p, [c.key]: e.target.checked })),
                })
          )
        ),
        React.createElement('div', { className: 'ne-cookie-panel-actions' },
          React.createElement('button', { className: 'ne-cookie-btn ne-cookie-btn-primary', onClick: () => save(prefs.analytics, prefs.marketing) }, t.cookieSave),
          React.createElement('button', { className: 'ne-cookie-btn ne-cookie-btn-ghost', onClick: () => save(true, true) }, t.cookieAcceptAll),
          React.createElement('button', { className: 'ne-cookie-btn ne-cookie-btn-ghost', onClick: () => save(false, false) }, t.cookieRejectAll)
        )
      )
    );
  }

  return /*#__PURE__*/ React.createElement('div', { className: 'ne-cookie', role: 'dialog', 'aria-modal': 'true', 'aria-label': t.cookieTitle },
    React.createElement('div', { className: 'ne-cookie-inner' },
      React.createElement('div', { className: 'ne-cookie-text' },
        React.createElement('p', { className: 'ne-cookie-title' }, t.cookieTitle),
        React.createElement('p', { className: 'ne-cookie-body' },
          t.cookieBody + ' ',
          React.createElement('a', { href: t.cookiePrivacyLink, target: '_blank', rel: 'noopener' }, t.cookiePrivacy)
        )
      ),
      React.createElement('div', { className: 'ne-cookie-actions' },
        React.createElement('button', { className: 'ne-cookie-btn ne-cookie-btn-ghost', onClick: () => setView('customize') }, t.cookieCustomize),
        React.createElement('button', { className: 'ne-cookie-btn ne-cookie-btn-ghost', onClick: () => save(false, false) }, t.cookieRejectAll),
        React.createElement('button', { className: 'ne-cookie-btn ne-cookie-btn-primary', onClick: () => save(true, true) }, t.cookieAcceptAll)
      )
    )
  );
}

/* ---------------- App ---------------- */
function App() {
  const detect = () => {
    const stored = localStorage.getItem("ne_lang");
    if (stored === "en" || stored === "es") return stored;
    return (navigator.language || "").toLowerCase().startsWith("es") ? "es" : "en";
  };
  const [lang, setLangState] = React.useState(detect);
  const t = I18N[lang];

  const setLang = (l) => {
    setLangState(l);
    try { localStorage.setItem("ne_lang", l); } catch (e) {}
  };

  React.useEffect(() => {
    document.documentElement.lang = t.htmlLang;
    document.title = t.docTitle;
    if (window.lucide) window.lucide.createIcons();
  }, [lang]);

  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(Nav, { t, lang, setLang }),
    /*#__PURE__*/ React.createElement(Hero, { t }),
    /*#__PURE__*/ React.createElement(Services, { t }),
    /*#__PURE__*/ React.createElement(Why, { t }),
    /*#__PURE__*/ React.createElement(About, { t }),
    /*#__PURE__*/ React.createElement(Contact, { t }),
    /*#__PURE__*/ React.createElement(SiteFooter, { t }),
    /*#__PURE__*/ React.createElement(ChatBot, { t }),
    /*#__PURE__*/ React.createElement(CookieBanner, { t })
  );
}
function ChatBot({ t }) {
  const isMobile = window.innerWidth <= 640;
  const BUSINESSES = [
    { key: 'dental',   label: 'Clínica Dental',     welcome: '¡Hola! Soy un ejemplo de asistente virtual para una clínica dental. Puedes preguntarme sobre servicios, citas, precios o cuidado bucal.' },
    { key: 'medico',   label: 'Consultorio Médico',  welcome: '¡Hola! Soy un ejemplo de asistente virtual para un consultorio médico. Pregúntame sobre consultas, especialidades, horarios o precios.' },
    { key: 'legal',    label: 'Despacho Legal',      welcome: '¡Hola! Soy un ejemplo de asistente virtual para un despacho jurídico. Puedes preguntarme sobre servicios legales, consultas o áreas de práctica.' },
    { key: 'mecanico', label: 'Taller Mecánico',     welcome: '¡Hola! Soy un ejemplo de asistente virtual para un taller mecánico. Pregúntame sobre servicios, diagnósticos, cotizaciones o citas.' },
  ];

  const [open, setOpen] = React.useState(!isMobile);
  const [selectedBusiness, setSelectedBusiness] = React.useState(null);
  const [chatHistory, setChatHistory] = React.useState([]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const messagesEndRef = React.useRef(null);
  const CHAT_PROXY = "https://novuselement.oscar99armenta.workers.dev/chat";

  React.useEffect(() => {
    if (messagesEndRef.current) messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
  }, [chatHistory]);

  function selectBusiness(biz) {
    setSelectedBusiness(biz);
    setChatHistory([{ role: 'assistant', content: biz.welcome }]);
  }

  function resetBusiness() {
    setSelectedBusiness(null);
    setChatHistory([]);
  }

  async function sendMessage() {
    if (!input.trim() || loading || !selectedBusiness) return;
    const userMsg = { role: 'user', content: input.trim() };
    const newHistory = [...chatHistory, userMsg];
    setChatHistory(newHistory);
    setInput('');
    setLoading(true);
    try {
      const response = await fetch(CHAT_PROXY, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: newHistory.slice(-14), max_tokens: 300, businessType: selectedBusiness.key })
      });
      const data = await response.json();
      const content = data.choices[0].message.content;
      setChatHistory([...newHistory, { role: 'assistant', content }]);
    } catch(e) {
      setChatHistory([...newHistory, { role: 'assistant', content: t.chatError || 'Error de conexión. Intenta de nuevo.' }]);
    }
    setLoading(false);
  }

  const panelStyle = isMobile
    ? { position:'fixed', inset:0, width:'100%', height:'100%', background:'#1a1a2e', zIndex:10000, display:'flex', flexDirection:'column', borderRadius:0, fontFamily:'sans-serif' }
    : { position:'absolute', bottom:'70px', right:'0', width:'380px', background:'#1a1a2e', borderRadius:'16px', boxShadow:'0 8px 24px rgba(0,0,0,0.4)', display:'flex', flexDirection:'column', overflow:'hidden' };

  const headerStyle = { background:'#6c63ff', padding:'14px 16px', color:'white', display:'flex', alignItems:'center', justifyContent:'space-between', flexShrink:0 };
  const closeBtnStyle = { background:'none', border:'none', color:'white', fontSize:'22px', cursor:'pointer', lineHeight:1, padding:'4px 6px' };

  /* — Selector screen — */
  const bizButtons = BUSINESSES.map(function(biz) {
    return React.createElement('button', {
      key: biz.key,
      onClick: function() { selectBusiness(biz); },
      style:{ background:'#2a2a3e', color:'white', border:'1px solid #3a3a5e', borderRadius:'10px', padding:'14px 16px', cursor:'pointer', fontSize:'15px', textAlign:'left', transition:'background 0.15s' },
      onMouseEnter: function(e) { e.currentTarget.style.background = '#3a3a5e'; },
      onMouseLeave: function(e) { e.currentTarget.style.background = '#2a2a3e'; },
    }, biz.label);
  });

  const selectorPanel = React.createElement('div', { style: panelStyle },
    React.createElement('div', { style: headerStyle },
      React.createElement('div', null,
        React.createElement('strong', { style:{ fontSize:'13px', lineHeight:'1.3' } }, 'Prueba el asistente con IA'),
        React.createElement('p', { style:{ margin:'2px 0 0', fontSize:'12px', opacity:0.85 } }, 'Elige un ejemplo para ver cómo funciona')
      ),
      React.createElement('button', { onClick: function() { setOpen(false); }, style: closeBtnStyle }, '✕')
    ),
    React.createElement('div', { style:{ flex:1, padding:'20px', display:'flex', flexDirection:'column', gap:'10px', overflowY:'auto' } },
      React.createElement('p', { style:{ color:'#aaa', fontSize:'13px', margin:'0 0 4px' } }, 'Selecciona un tipo de negocio:'),
      React.createElement(React.Fragment, null, bizButtons),
      React.createElement('p', { style:{ color:'#555', fontSize:'11px', margin:'8px 0 0', lineHeight:'1.5' } },
        'Estos son algunos ejemplos — podemos crear un asistente personalizado para cualquier tipo de negocio.'
      )
    )
  );

  /* — Chat screen — */
  const chatPanel = React.createElement('div', { style: panelStyle },
    React.createElement('div', { style: headerStyle },
      React.createElement('div', { style:{ display:'flex', alignItems:'center', gap:'8px' } },
        React.createElement('button', { onClick: resetBusiness, style:{ ...closeBtnStyle, fontSize:'18px', opacity:0.85 } }, '←'),
        React.createElement('div', null,
          React.createElement('strong', { style:{ fontSize:'13px', lineHeight:'1.3' } }, 'Demo — ' + (selectedBusiness ? selectedBusiness.label : '')),
          React.createElement('p', { style:{ margin:'2px 0 0', fontSize:'11px', opacity:0.8 } }, 'Ejemplo de asistente virtual')
        )
      ),
      React.createElement('button', { onClick: () => setOpen(false), style: closeBtnStyle }, '✕')
    ),
    React.createElement('div', {
      style:{ flex:1, overflowY:'auto', padding:'16px', display:'flex', flexDirection:'column', gap:'10px', maxHeight: isMobile ? undefined : '300px' }
    },
      chatHistory.map((msg, i) =>
        React.createElement('div', { key: i,
          style: msg.role === 'user'
            ? { alignSelf:'flex-end', background:'#6c63ff', color:'white', padding:'10px 14px', borderRadius:'14px 14px 2px 14px', maxWidth:'80%', fontSize:'15px', wordBreak:'break-word' }
            : { alignSelf:'flex-start', background:'#2a2a3e', color:'#e0e0e0', padding:'10px 14px', borderRadius:'14px 14px 14px 2px', maxWidth:'80%', fontSize:'15px', wordBreak:'break-word' }
        }, msg.content.replace(/\s*\[\[LEAD_SENT\]\]/g, '').trim())
      ),
      loading && React.createElement('div', { style:{ alignSelf:'flex-start', background:'#2a2a3e', color:'#888', padding:'10px 14px', borderRadius:'14px', fontSize:'15px' } }, '...'),
      React.createElement('div', { ref: messagesEndRef })
    ),
    React.createElement('div', { style:{ padding:'12px', borderTop:'1px solid #2a2a3e', display:'flex', gap:'8px', flexShrink:0, background:'#111127' } },
      React.createElement('input', {
        type:'text', placeholder: t.chatPlaceholder, value: input,
        onChange: e => setInput(e.target.value),
        onKeyDown: e => e.key === 'Enter' && sendMessage(),
        style:{ flex:1, padding:'10px 14px', borderRadius:'10px', border:'none', background:'#2a2a3e', color:'white', outline:'none', fontSize:'16px' }
      }),
      React.createElement('button', { onClick: sendMessage, style:{ background:'#6c63ff', color:'white', border:'none', padding:'10px 16px', borderRadius:'10px', cursor:'pointer', fontSize:'16px' } }, '➤')
    )
  );

  const panel = open && (selectedBusiness ? chatPanel : selectorPanel);

  const fab = React.createElement('div', {
    onClick: () => setOpen(!open),
    style:{ width:'56px', height:'56px', background:'#6c63ff', borderRadius:'50%', display:(isMobile && open) ? 'none' : 'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', boxShadow:'0 4px 12px rgba(0,0,0,0.3)' }
  }, React.createElement('span', { style:{ fontSize:'24px' } }, '💬'));

  if (isMobile && open) return React.createElement(React.Fragment, null, panel);

  return React.createElement('div', {
    style:{ position:'fixed', bottom:'24px', right:'24px', zIndex:9999, fontFamily:'sans-serif' }
  }, fab, panel);
}

ReactDOM.createRoot(document.getElementById("root")).render(/*#__PURE__*/ React.createElement(App, null));