/* Nosotros + Servicios */
(function () {
  const { useRef, useEffect, useState } = React;

  function useInView(opts) {
    const ref = useRef(null);
    const [seen, setSeen] = useState(false);
    useEffect(() => {
      const el = ref.current;if (!el) return;
      const io = new IntersectionObserver(([e]) => {if (e.isIntersecting) {setSeen(true);io.disconnect();}}, opts || { threshold: 0.4 });
      io.observe(el);
      const t = setTimeout(() => setSeen(true), 2400);
      return () => {clearTimeout(t);io.disconnect();};
    }, []);
    return [ref, seen];
  }

  function CountUp({ to, prefix, suffix }) {
    const [ref, seen] = useInView();
    const [n, setN] = useState(0);
    useEffect(() => {
      if (!seen) return;
      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {setN(to);return;}
      let raf, start;
      const dur = 1400;
      const step = (t) => {
        if (!start) start = t;
        const p = Math.min((t - start) / dur, 1);
        const e = 1 - Math.pow(1 - p, 3);
        setN(Math.round(to * e));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
      const guard = setTimeout(() => setN(to), dur + 400); // asegura valor final si rAF se pausa
      return () => {cancelAnimationFrame(raf);clearTimeout(guard);};
    }, [seen, to]);
    return <span ref={ref}>{prefix}{n}{suffix}</span>;
  }

  function Nosotros({ data }) {
    const a = data.about;
    return (
      <section id="nosotros" className="section nosotros">
        <div className="wrap nosotros__top">
          <div className="nosotros__intro reveal">
            <span className="eyebrow" data-comment-anchor="ba665258df-span-46-13">{a.eyebrow}</span>
            <h2 className="h2">{a.title}</h2>
          </div>
          <p className="lead nosotros__body reveal" data-d="1">{a.body}</p>
        </div>

        <div className="wrap nosotros__grid">
          <article className="card mv reveal" data-d="1">
            <div className="mv__ic"><Icon name="target" size={24} /></div>
            <h3 className="h3">{a.mission.title}</h3>
            <p className="muted">{a.mission.text}</p>
          </article>
          <article className="card mv reveal" data-d="2">
            <div className="mv__ic"><Icon name="eye" size={24} /></div>
            <h3 className="h3">{a.vision.title}</h3>
            <p className="muted">{a.vision.text}</p>
          </article>
        </div>

        <div className="wrap stats reveal" data-d="2">
          {data.stats.map((s, i) =>
          <div key={i} className="stats__item">
              <div className="stats__num"><CountUp to={s.value} prefix={s.prefix} suffix={s.suffix} /></div>
              <div className="stats__label">{s.label}</div>
            </div>
          )}
        </div>

        <div className="certs">
          <div className="certs__track">
            {[...a.certs, ...a.certs, ...a.certs].map((c, i) =>
            <span key={i} className="certs__item"><Icon name="shieldCheck" size={18} /> {c}</span>
            )}
          </div>
        </div>
      </section>);

  }

  const SERVICE_ICON = { inmobiliarios: "building", financieros: "coin", industriales: "tools", agropecuarios: "plant" };

  function ServiceRow({ s, i }) {
    const flip = i % 2 === 1;
    return (
      <article className={"svc " + (flip ? "svc--flip" : "")}>
        <div className="svc__media reveal">
          <img src={s.photo} alt={s.name} loading="lazy" />
          <span className="svc__num">{String(i + 1).padStart(2, "0")}</span>
        </div>
        <div className="svc__body reveal" data-d="1">
          <div className="svc__head">
            <span className="svc__ic"><Icon name={SERVICE_ICON[s.key]} size={24} /></span>
            <div>
              <span className="svc__tag">{s.tag}</span>
              <h3 className="h3">{s.name}</h3>
            </div>
          </div>
          <ul className="svc__list">
            {s.items.map((it, j) =>
            <li key={j}><span className="svc__check"><Icon name="check" size={14} stroke={2.4} /></span>{it}</li>
            )}
          </ul>
        </div>
      </article>);

  }

  function Servicios({ data }) {
    return (
      <section id="servicios" className="section servicios">
        <div className="wrap servicios__head reveal">
          <div>
            <span className="eyebrow">Servicios</span>
            <h2 className="h2">Cuatro líneas, un mismo estándar de calidad.</h2>
          </div>
          <a className="btn btn-dark" href="#contacto" onClick={(e) => {e.preventDefault();document.querySelector("#contacto")?.scrollIntoView({ behavior: "smooth" });}}>
            Solicitar información <Icon name="arrowUpRight" size={18} />
          </a>
        </div>
        <div className="wrap servicios__list">
          {data.services.map((s, i) => <ServiceRow key={s.key} s={s} i={i} />)}
        </div>
      </section>);

  }

  window.Nosotros = Nosotros;
  window.Servicios = Servicios;
})();