/* Hero — 3 variaciones seleccionables (A editorial · B centrado bold · C inmersivo) */
(function () {
  const { useRef, useEffect } = React;

  function useTilt() {
    const ref = useRef(null);
    useEffect(() => {
      const el = ref.current;
      if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
      const onMove = (e) => {
        const r = el.getBoundingClientRect();
        const px = (e.clientX - r.left) / r.width - 0.5;
        const py = (e.clientY - r.top) / r.height - 0.5;
        el.style.transform = `perspective(1100px) rotateY(${px * 7}deg) rotateX(${-py * 7}deg) translateZ(0)`;
      };
      const reset = () => {el.style.transform = "perspective(1100px) rotateY(0) rotateX(0)";};
      el.addEventListener("mousemove", onMove);
      el.addEventListener("mouseleave", reset);
      return () => {el.removeEventListener("mousemove", onMove);el.removeEventListener("mouseleave", reset);};
    }, []);
    return ref;
  }

  function Title({ lines }) {
    const head = lines.slice(0, -1).join(" ");
    const last = lines[lines.length - 1];
    return (
      <h1 className="display hero__title">
        {head} <em className="grad-text">{last}</em>
      </h1>);

  }

  function Cta({ h }) {
    const go = (href) => (e) => {
      if (href.startsWith("#")) {e.preventDefault();document.querySelector(href)?.scrollIntoView({ behavior: "smooth" });}
    };
    return (
      <div className="hero__cta">
        <a className="btn btn-primary" href={h.ctaPrimary.href} onClick={go(h.ctaPrimary.href)}>
          {h.ctaPrimary.label} <Icon name="arrowRight" size={18} />
        </a>
        <a className="btn btn-primary" href={h.ctaSecondary.href}>
          {h.ctaSecondary.label}
        </a>
      </div>);

  }

  function Badges({ items, center }) {
    return (
      <div className={"hero__trust" + (center ? " hero__trust--center" : "")}>
        <span className="hero__trust-label">Acreditados ante</span>
        <div className="hero__trust-row">
          {items.map((b) =>
          <span key={b.name} className="hero__trust-item" title={b.full}>
              <Icon name="shieldCheck" size={16} /> {b.name}
            </span>
          )}
        </div>
      </div>);

  }

  function VariantA({ h }) {
    const tilt = useTilt();
    return (
      <div className="wrap hero__A">
        <div className="hero__copy reveal in">
          <span className="eyebrow" data-comment-anchor="4d35942e08-span-72-11">{h.eyebrow}</span>
          <Title lines={h.title} />
          <p className="lead hero__lead">{h.lead}</p>
          <Cta h={h} />
          <Badges items={h.accred} />
        </div>
        <div className="hero__media" ref={tilt}>
          <div className="hero__photo">
            <img src={h.photo} alt="Unidad de valuación Hemel" loading="eager" />
            <div className="hero__photo-grad" />
          </div>
          <div className="hero__float hero__float--1 card">
            <div className="hero__float-ic"><Icon name="fileCheck" size={20} /></div>
            <div><strong>+25 años</strong><span>certificando avalúos</span></div>
          </div>
          <div className="hero__float hero__float--2 card">
            <div className="hero__float-ic"><Icon name="world" size={20} /></div>
            <div><strong>8 estados</strong><span>cobertura nacional</span></div>
          </div>
          <div className="hero__ring" />
        </div>
      </div>);

  }

  function VariantB({ h }) {
    return (
      <div className="wrap hero__B dotgrid">
        <div className="hero__blob hero__blob--a" />
        <div className="hero__blob hero__blob--b" />
        <div className="hero__copy hero__copy--center reveal in">
          <span className="eyebrow" style={{ justifyContent: "center" }}>{h.eyebrow}</span>
          <Title lines={h.title} />
          <p className="lead hero__lead" style={{ marginInline: "auto" }}>{h.lead}</p>
          <Cta h={h} />
          <Badges items={h.accred} center />
        </div>
        <div className="hero__band">
          <img src={h.photo} alt="Unidad de valuación Hemel" />
          <div className="hero__band-grad" />
        </div>
      </div>);

  }

  function VariantC({ h }) {
    const ref = useRef(null);
    useEffect(() => {
      const el = ref.current;
      if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
      const bg = el.querySelector(".hero__C-bg");
      const glow = el.querySelector(".hero__C-glow");
      const onMove = (e) => {
        const r = el.getBoundingClientRect();
        const px = (e.clientX - r.left) / r.width - 0.5;
        const py = (e.clientY - r.top) / r.height - 0.5;
        if (bg) bg.style.transform = `scale(1.1) translate(${px * -12}px, ${py * -8}px)`;
        if (glow) glow.style.transform = `translate(${px * -20}px, ${py * -12}px)`;
      };
      el.addEventListener("mousemove", onMove);
      return () => el.removeEventListener("mousemove", onMove);
    }, []);
    return (
      <div className="hero__C" ref={ref}>
        <img className="hero__C-bg" src={h.photo} alt="Oficinas Hemel" />
        <div className="hero__C-veil" />
        <div className="hero__C-glow" />
        <div className="wrap hero__C-inner reveal in">
          <Title lines={h.title} />
          <p className="lead hero__lead hero__lead--light">{h.lead}</p>
          <Cta h={h} />
          <Badges items={h.accred} center />
        </div>
        <div className="wrap hero__C-strip">
          {[["fileCheck", "+25", "años de experiencia"], ["world", "8", "estados"], ["shieldCheck", "SHF", "registro vigente"], ["chartBar", "4", "líneas de servicio"]].map((s, i) =>
          <div key={i} className="hero__C-stat">
              <Icon name={s[0]} size={20} />
              <div><strong>{s[1]}</strong><span>{s[2]}</span></div>
            </div>
          )}
        </div>
      </div>);

  }

  function Hero({ data, variant }) {
    const h = { ...data.hero, accred: data.accreditations };
    return (
      <section id="top" className={"hero hero--" + variant}>
        {variant === "A" && <VariantA h={h} />}
        {variant === "B" && <VariantB h={h} />}
        {variant === "C" && <VariantC h={h} />}
        <a className="hero__scroll" href="#nosotros" onClick={(e) => {e.preventDefault();document.querySelector("#nosotros")?.scrollIntoView({ behavior: "smooth" });}} aria-label="Bajar">
          <span /> <Icon name="chevronDown" size={18} />
        </a>
      </section>);

  }

  window.Hero = Hero;
})();