/* VRIZA — page sections. Reads `t` (current-language content). Exports to window. */
(function () {
  const { useState } = React;
  const { Reveal, Eyebrow, SectionHead, Placeholder, Icon } = window;

  /* Abstract brand visual: stylized device / dashboard in the accent palette. */
  function DeviceVisual({ className }) {
    return React.createElement(
      "div",
      { className: "device " + (className || ""), "aria-hidden": "true" },
      React.createElement("div", { className: "device-grid" }),
      React.createElement("div", { className: "device-orb" }),
      React.createElement(
        "div",
        { className: "device-screen" },
        React.createElement(
          "div",
          { className: "device-top" },
          React.createElement("span", { className: "device-dots" },
            React.createElement("i", null), React.createElement("i", null), React.createElement("i", null)),
          React.createElement("span", { className: "device-chip" })
        ),
        React.createElement(
          "div",
          { className: "device-lines" },
          React.createElement("span", null), React.createElement("span", null),
          React.createElement("span", null), React.createElement("span", null)
        )
      ),
      React.createElement("div", { className: "device-stand" })
    );
  }

  /* ---------------- HERO ---------------- */
  function Hero({ t, go }) {
    const h = t.hero;
    return React.createElement(
      "header",
      { id: "inicio", className: "hero" },
      React.createElement("div", { className: "hero-bg", "aria-hidden": "true" }),
      React.createElement(
        "div",
        { className: "wrap hero-grid" },
        React.createElement(
          "div",
          { className: "hero-copy" },
          React.createElement(Reveal, { as: "div" }, React.createElement(Eyebrow, null, h.eyebrow)),
          React.createElement(
            Reveal,
            { as: "h1", delay: 60, className: "hero-title" },
            h.titleLead,
            " ",
            React.createElement("span", { className: "hi" }, h.titleHi)
          ),
          React.createElement(Reveal, { as: "p", delay: 120, className: "hero-sub" }, h.sub),
          React.createElement(
            Reveal,
            { as: "div", delay: 180, className: "hero-cta" },
            React.createElement(
              "a",
              { href: "#contacto", className: "btn btn-primary btn-lg", onClick: go("#contacto") },
              h.ctaPrimary,
              React.createElement(Icon, { name: "arrow", width: 18, height: 18 })
            ),
            React.createElement(
              "a",
              { href: "#servicios", className: "btn btn-ghost btn-lg", onClick: go("#servicios") },
              h.ctaSecondary
            )
          ),
          React.createElement(
            Reveal,
            { as: "div", delay: 240, className: "hero-chips" },
            h.chips.map((c, i) =>
              React.createElement("span", { key: i, className: "tag" },
                React.createElement(Icon, { name: "check", width: 13, height: 13, style: { color: "var(--accent)" } }), c)
            )
          )
        ),
        React.createElement(
          Reveal,
          { as: "div", delay: 160, className: "hero-visual" },
          React.createElement(
            "div",
            { className: "hero-photo" },
            React.createElement("img", {
              src: "assets/hero.jpg",
              alt: h.eyebrow,
              loading: "eager",
              decoding: "async",
            })
          ),
          React.createElement(
            "div",
            { className: "hero-panel card" },
            React.createElement(
              "div",
              { className: "hero-panel-top" },
              React.createElement("span", { className: "mono-label" }, h.panelLabel),
              React.createElement("span", { className: "dots", "aria-hidden": "true" },
                React.createElement("i", null), React.createElement("i", null), React.createElement("i", null))
            ),
            React.createElement(
              "div",
              { className: "hero-rows" },
              h.panelRows.map((r, i) =>
                React.createElement(
                  "div",
                  { key: i, className: "hero-row" },
                  React.createElement("span", { className: "hr-k" }, r.k),
                  React.createElement("span", { className: "hr-line", "aria-hidden": "true" }),
                  React.createElement("span", { className: "hr-v" }, r.v)
                )
              )
            )
          )
        )
      )
    );
  }

  /* ---------------- ABOUT ---------------- */
  function About({ t }) {
    const a = t.about;
    return React.createElement(
      "section",
      { id: "nosotros", className: "section" },
      React.createElement(
        "div",
        { className: "wrap about-grid" },
        React.createElement(
          "div",
          null,
          React.createElement(Reveal, null,
            React.createElement(SectionHead, { eyebrow: a.eyebrow, title: a.title, sub: a.sub })),
          React.createElement(Reveal, { as: "p", delay: 80, className: "about-body" }, a.body),
          React.createElement(
            Reveal,
            { as: "div", delay: 120, className: "values" },
            React.createElement("span", { className: "values-label mono-label" }, a.valuesLabel),
            React.createElement(
              "div",
              { className: "values-grid" },
              a.values.map((v, i) =>
                React.createElement(
                  "div",
                  { key: i, className: "value-mini" },
                  React.createElement("strong", null, v.title),
                  React.createElement("span", null, v.body)
                )
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "about-cards" },
          a.cards.map((c, i) =>
            React.createElement(
              Reveal,
              { key: i, delay: i * 80, className: "about-card card card-hover" },
              React.createElement("span", { className: "mono-label accent" }, c.label),
              React.createElement("h3", null, c.title),
              React.createElement("p", null, c.body)
            )
          )
        )
      )
    );
  }

  /* ---------------- VALUE ---------------- */
  function Value({ t }) {
    const v = t.value;
    return React.createElement(
      "section",
      { className: "section section-tint" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: v.eyebrow, title: v.title, sub: v.sub })),
        React.createElement(
          "div",
          { className: "value-grid" },
          v.items.map((it, i) =>
            React.createElement(
              Reveal,
              { key: i, delay: i * 70, className: "value-card card card-hover" },
              React.createElement("span", { className: "icon-chip" }, React.createElement(Icon, { name: it.icon })),
              React.createElement("h3", null, it.title),
              React.createElement("p", null, it.body)
            )
          )
        )
      )
    );
  }

  /* ---------------- SERVICES ---------------- */
  function Services({ t }) {
    const s = t.services;
    return React.createElement(
      "section",
      { id: "servicios", className: "section" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: s.eyebrow, title: s.title, sub: s.sub })),
        s.groups.map((grp, gi) =>
          React.createElement(
            "div",
            { key: gi, className: "svc-group" },
            React.createElement(
              Reveal,
              { as: "div", className: "svc-group-head" },
              React.createElement("span", { className: "svc-tag mono-label" }, grp.tag),
              React.createElement("span", { className: "svc-group-label" }, grp.label),
              React.createElement("span", { className: "svc-rule", "aria-hidden": "true" })
            ),
            React.createElement(
              "div",
              { className: "svc-grid" },
              s.items.filter((it) => it.g === gi).map((it, i) =>
                React.createElement(
                  Reveal,
                  { key: i, delay: i * 60, className: "svc-card card card-hover" },
                  React.createElement("span", { className: "icon-chip" }, React.createElement(Icon, { name: it.icon })),
                  React.createElement("h3", null, it.title),
                  React.createElement("p", null, it.body),
                  React.createElement(
                    "div",
                    { className: "svc-tags" },
                    it.tags.map((tg, j) => React.createElement("span", { key: j, className: "mini-tag" }, tg))
                  )
                )
              )
            )
          )
        )
      )
    );
  }

  /* ---------------- EQUIPMENT ---------------- */
  function Equipment({ t, go }) {
    const e = t.equipment;
    return React.createElement(
      "section",
      { id: "equipos", className: "section section-tint" },
      React.createElement(
        "div",
        { className: "wrap eq-grid" },
        React.createElement(
          "div",
          { className: "eq-copy" },
          React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: e.eyebrow, title: e.title, sub: e.sub })),
          React.createElement(
            "div",
            { className: "eq-points" },
            e.points.map((p, i) =>
              React.createElement(
                Reveal,
                { key: i, delay: i * 70, className: "eq-point" },
                React.createElement("span", { className: "eq-check" }, React.createElement(Icon, { name: "check", width: 15, height: 15 })),
                React.createElement("div", null,
                  React.createElement("strong", null, p.title),
                  React.createElement("span", null, p.body))
              )
            )
          ),
          React.createElement(
            Reveal,
            { as: "a", delay: 160, href: "#contacto", className: "btn btn-primary", onClick: go("#contacto") },
            e.cta, React.createElement(Icon, { name: "arrow", width: 18, height: 18 })
          )
        ),
        React.createElement(
          "div",
          { className: "eq-side" },
          React.createElement(Reveal, { delay: 80 },
            React.createElement("div", { className: "eq-photo" },
              React.createElement("img", { src: "assets/equipment.jpg", alt: e.phLabel, loading: "lazy", decoding: "async" }))),
          React.createElement("span", { className: "eq-seg-label mono-label" }, e.segLabel),
          React.createElement(
            "div",
            { className: "eq-segs" },
            e.segments.map((sg, i) =>
              React.createElement(
                Reveal,
                { key: i, delay: i * 70, className: "eq-seg card card-hover" },
                React.createElement("strong", null, sg.title),
                React.createElement("span", null, sg.body)
              )
            )
          )
        )
      )
    );
  }

  /* ---------------- BRANDS ---------------- */
  function Brands({ t, go }) {
    const b = t.brands;
    return React.createElement(
      "section",
      { id: "marcas", className: "section" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: b.eyebrow, title: b.title, sub: b.sub, center: true })),
        React.createElement(
          Reveal,
          { as: "div", delay: 80, className: "brand-wall" },
          b.list.map((name, i) =>
            React.createElement(
              "div",
              { key: i, className: "brand-chip" },
              React.createElement("span", { className: "brand-name" }, name)
            )
          ),
          React.createElement(
            "a",
            { className: "brand-chip brand-more", href: "#contacto", onClick: go && go("#contacto") },
            React.createElement("span", { className: "brand-name" }, b.moreLabel),
            React.createElement(Icon, { name: "arrow", width: 16, height: 16 })
          )
        ),
        React.createElement(
          Reveal,
          { as: "div", delay: 140, className: "brand-note" },
          React.createElement("span", { className: "brand-note-ico" }, React.createElement(Icon, { name: "check", width: 15, height: 15 })),
          React.createElement("p", null, b.note)
        ),
        React.createElement("p", { className: "brand-disclaimer" }, b.disclaimer)
      )
    );
  }

  /* ---------------- SECTORS ---------------- */
  function Sectors({ t }) {
    const s = t.sectors;
    return React.createElement(
      "section",
      { id: "sectores", className: "section section-tint" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: s.eyebrow, title: s.title, sub: s.sub })),
        React.createElement(
          Reveal,
          { as: "div", delay: 80, className: "sector-grid" },
          s.items.map((it, i) =>
            React.createElement(
              "div",
              { key: i, className: "sector-card" },
              React.createElement("span", { className: "icon-chip" }, React.createElement(Icon, { name: it.icon })),
              React.createElement("h3", null, it.title),
              React.createElement("p", null, it.body)
            )
          )
        )
      )
    );
  }

  /* ---------------- TESTIMONIALS ---------------- */
  function Testimonials({ t }) {
    const tm = t.testimonials;
    return React.createElement(
      "section",
      { id: "testimonios", className: "section" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: tm.eyebrow, title: tm.title, sub: tm.sub, center: true })),
        React.createElement(
          Reveal,
          { as: "div", delay: 60, className: "stat-strip" },
          tm.stats.map((st, i) =>
            React.createElement(
              "div",
              { key: i, className: "stat-item" },
              React.createElement("span", { className: "stat-value" }, st.value),
              React.createElement("span", { className: "stat-label" }, st.label)
            )
          )
        ),
        React.createElement(
          Reveal,
          { as: "div", delay: 120, className: "tm-grid" },
          tm.items.map((it, i) =>
            React.createElement(
              "figure",
              { key: i, className: "tm-card" },
              React.createElement("span", { className: "tm-quote-mark", "aria-hidden": "true" }, "\u201C"),
              React.createElement("blockquote", null, it.quote),
              React.createElement(
                "figcaption",
                { className: "tm-author" },
                React.createElement("span", { className: "tm-name" }, it.name),
                React.createElement("span", { className: "tm-role" }, it.role)
              )
            )
          )
        )
      )
    );
  }

  /* ---------------- SOFTWARE ---------------- */
  function Software({ t, go }) {
    const s = t.software;
    return React.createElement(
      "section",
      { id: "desarrollo", className: "section" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: s.eyebrow, title: s.title, sub: s.sub })),
        React.createElement(
          "div",
          { className: "sw-grid" },
          s.items.map((it, i) =>
            React.createElement(
              Reveal,
              { key: i, delay: i * 55, className: "sw-card" },
              React.createElement("span", { className: "sw-ico" }, React.createElement(Icon, { name: it.icon, width: 20, height: 20 })),
              React.createElement("div", null,
                React.createElement("h3", null, it.title),
                React.createElement("p", null, it.body))
            )
          )
        ),
        React.createElement(
          Reveal,
          { as: "div", delay: 120, className: "sw-cta" },
          React.createElement("a", { href: "#contacto", className: "btn btn-primary", onClick: go("#contacto") },
            s.cta, React.createElement(Icon, { name: "arrow", width: 18, height: 18 }))
        )
      )
    );
  }

  /* ---------------- PROCESS ---------------- */
  function Process({ t }) {
    const p = t.process;
    return React.createElement(
      "section",
      { id: "proceso", className: "section section-tint" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: p.eyebrow, title: p.title, sub: p.sub, center: true })),
        React.createElement(
          "div",
          { className: "proc-grid" },
          p.steps.map((st, i) =>
            React.createElement(
              Reveal,
              { key: i, delay: i * 80, className: "proc-step" },
              React.createElement("span", { className: "proc-num" }, String(i + 1).padStart(2, "0")),
              React.createElement("h3", null, st.title),
              React.createElement("p", null, st.body)
            )
          )
        )
      )
    );
  }

  /* ---------------- BENEFITS ---------------- */
  function Benefits({ t }) {
    const b = t.benefits;
    return React.createElement(
      "section",
      { className: "section" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: b.eyebrow, title: b.title, sub: b.sub })),
        React.createElement(
          "div",
          { className: "ben-grid" },
          b.items.map((it, i) =>
            React.createElement(
              Reveal,
              { key: i, delay: i * 50, className: "ben-item" },
              React.createElement("span", { className: "ben-check" }, React.createElement(Icon, { name: "check", width: 14, height: 14 })),
              React.createElement("div", null,
                React.createElement("strong", null, it.title),
                React.createElement("span", null, it.body))
            )
          )
        )
      )
    );
  }

  /* ---------------- FAQ ---------------- */
  function FAQ({ t }) {
    const f = t.faq;
    const [open, setOpen] = useState(0);
    return React.createElement(
      "section",
      { id: "faq", className: "section section-tint" },
      React.createElement(
        "div",
        { className: "wrap faq-wrap" },
        React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: f.eyebrow, title: f.title, sub: f.sub, center: true })),
        React.createElement(
          "div",
          { className: "faq-list" },
          f.items.map((it, i) =>
            React.createElement(
              Reveal,
              { key: i, delay: Math.min(i, 4) * 40, className: "faq-item card" + (open === i ? " open" : "") },
              React.createElement(
                "button",
                { className: "faq-q", onClick: () => setOpen(open === i ? -1 : i), "aria-expanded": open === i },
                React.createElement("span", null, it.q),
                React.createElement("span", { className: "faq-ico" }, React.createElement(Icon, { name: "chevron", width: 18, height: 18 }))
              ),
              React.createElement(
                "div",
                { className: "faq-a-wrap" },
                React.createElement("div", { className: "faq-a" }, React.createElement("p", null, it.a))
              )
            )
          )
        )
      )
    );
  }

  /* ---------------- FINAL CTA ---------------- */
  function FinalCta({ t, go }) {
    const c = t.finalCta;
    return React.createElement(
      "section",
      { className: "section cta-section" },
      React.createElement(
        "div",
        { className: "wrap" },
        React.createElement(
          Reveal,
          { as: "div", className: "cta-band" },
          React.createElement("div", { className: "cta-glow", "aria-hidden": "true" }),
          React.createElement("span", { className: "eyebrow center", style: { color: "var(--accent-soft)" } }, c.eyebrow),
          React.createElement("h2", null, c.title),
          React.createElement("p", null, c.sub),
          React.createElement(
            "div",
            { className: "cta-actions" },
            React.createElement("a", { href: "#contacto", className: "btn btn-primary btn-lg", onClick: go("#contacto") },
              c.primary, React.createElement(Icon, { name: "arrow", width: 18, height: 18 })),
            React.createElement("a", { href: "mailto:" + c.secondary, className: "btn cta-mail btn-lg" },
              React.createElement(Icon, { name: "mail", width: 18, height: 18 }), c.secondary)
          )
        )
      )
    );
  }

  /* ---------------- CONTACT ---------------- */
  function Contact({ t }) {
    const c = t.contact;
    const f = c.form;
    const [data, setData] = useState({ name: "", company: "", email: "", phone: "", service: "", message: "" });
    const [errors, setErrors] = useState({});
    const [sent, setSent] = useState(false);

    const [sending, setSending] = useState(false);
    const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));
    const submit = (e) => {
      e.preventDefault();
      const err = {};
      if (!data.name.trim()) err.name = f.required;
      if (!data.email.trim()) err.email = f.required;
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) err.email = f.invalidEmail;
      if (!data.service) err.service = f.required;
      if (!data.message.trim()) err.message = f.required;
      setErrors(err);
      if (Object.keys(err).length !== 0) return;

      // Send via Formspree if configured (window.VRIZA_FORM_ENDPOINT), else mailto fallback.
      const endpoint = window.VRIZA_FORM_ENDPOINT;
      const payload = {
        nombre: data.name,
        empresa: data.company,
        email: data.email,
        telefono: data.phone,
        servicio: data.service,
        mensaje: data.message,
        _subject: "Nueva solicitud — VRIZA SERVICES: " + data.service,
      };
      if (endpoint && /^https?:\/\//.test(endpoint)) {
        setSending(true);
        fetch(endpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json", Accept: "application/json" },
          body: JSON.stringify(payload),
        })
          .then((r) => { if (r.ok) setSent(true); else throw new Error("send failed"); })
          .catch(() => {
            // Fallback to email client so the request is never lost
            const body = encodeURIComponent(
              "Nombre: " + data.name + "\nEmpresa: " + data.company + "\nEmail: " + data.email +
              "\nTelefono: " + data.phone + "\nServicio: " + data.service + "\n\n" + data.message
            );
            window.location.href = "mailto:" + c.email + "?subject=" + encodeURIComponent("Solicitud VRIZA — " + data.service) + "&body=" + body;
            setSent(true);
          })
          .finally(() => setSending(false));
      } else {
        const body = encodeURIComponent(
          "Nombre: " + data.name + "\nEmpresa: " + data.company + "\nEmail: " + data.email +
          "\nTelefono: " + data.phone + "\nServicio: " + data.service + "\n\n" + data.message
        );
        window.location.href = "mailto:" + c.email + "?subject=" + encodeURIComponent("Solicitud VRIZA — " + data.service) + "&body=" + body;
        setSent(true);
      }
    };

    const field = (k, label, type = "text", optional = false) =>
      React.createElement(
        "label",
        { className: "field" + (errors[k] ? " err" : "") },
        React.createElement("span", { className: "field-label" }, label),
        React.createElement("input", { type, value: data[k], onChange: set(k), placeholder: "" }),
        errors[k] && React.createElement("span", { className: "field-msg" }, errors[k])
      );

    return React.createElement(
      "section",
      { id: "contacto", className: "section" },
      React.createElement(
        "div",
        { className: "wrap contact-grid" },
        React.createElement(
          "div",
          { className: "contact-intro" },
          React.createElement(Reveal, null, React.createElement(SectionHead, { eyebrow: c.eyebrow, title: c.title, sub: c.sub })),
          React.createElement(
            Reveal,
            { as: "div", delay: 100, className: "contact-cards" },
            React.createElement(
              "a",
              { className: "contact-line card card-hover", href: "mailto:" + c.email },
              React.createElement("span", { className: "icon-chip" }, React.createElement(Icon, { name: "mail" })),
              React.createElement("div", null,
                React.createElement("span", { className: "cl-k" }, c.emailLabel),
                React.createElement("strong", null, c.email))
            ),
            React.createElement(
              "div",
              { className: "contact-line card" },
              React.createElement("span", { className: "icon-chip" }, React.createElement(Icon, { name: "headset" })),
              React.createElement("div", null,
                React.createElement("span", { className: "cl-k" }, c.hoursLabel),
                React.createElement("strong", null, c.hours))
            )
          )
        ),
        React.createElement(
          Reveal,
          { as: "div", delay: 80, className: "contact-form-wrap card" },
          sent
            ? React.createElement(
                "div",
                { className: "form-success" },
                React.createElement("span", { className: "success-ico" }, React.createElement(Icon, { name: "check", width: 26, height: 26 })),
                React.createElement("p", null, f.success)
              )
            : React.createElement(
                "form",
                { className: "contact-form", onSubmit: submit, noValidate: true },
                React.createElement("div", { className: "form-row" }, field("name", f.name), field("company", f.company)),
                React.createElement("div", { className: "form-row" }, field("email", f.email, "email"), field("phone", f.phone, "tel")),
                React.createElement(
                  "label",
                  { className: "field" + (errors.service ? " err" : "") },
                  React.createElement("span", { className: "field-label" }, f.serviceType),
                  React.createElement(
                    "div",
                    { className: "select-wrap" },
                    React.createElement(
                      "select",
                      { value: data.service, onChange: set("service") },
                      React.createElement("option", { value: "", disabled: true }, f.servicePlaceholder),
                      f.serviceOptions.map((o, i) => React.createElement("option", { key: i, value: o }, o))
                    ),
                    React.createElement("span", { className: "select-ico" }, React.createElement(Icon, { name: "chevron", width: 16, height: 16 }))
                  ),
                  errors.service && React.createElement("span", { className: "field-msg" }, errors.service)
                ),
                React.createElement(
                  "label",
                  { className: "field" + (errors.message ? " err" : "") },
                  React.createElement("span", { className: "field-label" }, f.message),
                  React.createElement("textarea", { rows: 4, value: data.message, onChange: set("message"), placeholder: f.messagePlaceholder }),
                  errors.message && React.createElement("span", { className: "field-msg" }, errors.message)
                ),
                React.createElement("button", { type: "submit", className: "btn btn-primary btn-lg form-submit", disabled: sending },
                  sending ? (t.code === "es" ? "Enviando…" : "Sending…") : f.submit,
                  !sending && React.createElement(Icon, { name: "arrow", width: 18, height: 18 })),
                React.createElement("p", { className: "form-note" }, f.note)
              )
        )
      )
    );
  }

  Object.assign(window, { Hero, About, Value, Services, Equipment, Brands, Sectors, Testimonials, Software, Process, Benefits, FAQ, FinalCta, Contact });
})();