/* ===== Kuntur home — top sections ===== */

function RotatingWord({ words, interval = 2600 }) {
  const ref = useRef(null);
  const idx = useRef(0);
  const build = (txt) => {
    const el = ref.current;
    el.innerHTML = "";
    [...txt].forEach((ch) => {
      const s = document.createElement("span");
      s.className = "dust-l";
      s.textContent = ch === " " ? "\u00A0" : ch;
      el.appendChild(s);
    });
    return el.querySelectorAll(".dust-l");
  };
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!window.gsap) {el.textContent = words[0];return;}
    build(words[0]);
    let tl;
    const id = setInterval(() => {
      const out = el.querySelectorAll(".dust-l");
      tl = gsap.timeline();
      tl.to(out, {
        duration: 0.5, opacity: 0, filter: "blur(12px)",
        yPercent: () => -50 - Math.random() * 70,
        xPercent: () => (Math.random() - 0.5) * 70,
        rotate: () => (Math.random() - 0.5) * 50,
        scale: 1.6, ease: "power2.in",
        stagger: { each: 0.035, from: "start" }
      });
      tl.add(() => {
        idx.current = (idx.current + 1) % words.length;
        const incoming = build(words[idx.current]);
        gsap.fromTo(incoming,
        { opacity: 0, filter: "blur(12px)", yPercent: 60, scale: 0.6, rotate: () => (Math.random() - 0.5) * 30 },
        { duration: 0.6, opacity: 1, filter: "blur(0px)", yPercent: 0, xPercent: 0, scale: 1, rotate: 0, ease: "power3.out", stagger: { each: 0.035, from: "start" } });
      });
    }, interval);
    return () => {clearInterval(id);if (tl) tl.kill();};
  }, []);
  return <span className="hero__rotate" ref={ref}>{words[0]}</span>;
}

const HERO_VIDEOS = ["uploads/brand/hero-1.webm", "uploads/brand/hero-2.webm", "uploads/brand/hero-3.webm"];

function Hero() {
  const D = window.KUNTUR;
  const root = useRef(null);
  const [activeVid, setActiveVid] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setActiveVid(v => (v + 1) % HERO_VIDEOS.length);
    }, 7000);
    return () => clearInterval(id);
  }, []);

  useGsapReady(() => {
    const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
    tl.from(".hero__title .line-inner", { yPercent: 115, duration: 1.1, stagger: 0.12 }, 0.1).
    from(".hero__card", { y: 30, opacity: 0, duration: 0.9 }, 0.5).
    from(".hero__banner", { clipPath: "inset(0% 0% 100% 0%)", duration: 1.1, ease: "power4.inOut" }, 0.35).
    from(".hero__banner .reveal-up", { y: 40, opacity: 0, duration: 0.9, stagger: 0.06 }, 0.9).
    from(".svc-chip", { y: 30, opacity: 0, duration: 0.7, stagger: 0.07 }, 1.0);
    // subtle parallax on banner
    gsap.to(".hero__banner", { yPercent: 8, ease: "none",
      scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: true } });
  }, []);

  return (
    <section className="hero" ref={root}>
      <div className="wrap">
        <div className="hero__top">
          <h1 className="hero__title">
            <span className="line-mask"><span className="line-inner hero__title-lock">
              <span className="hero__title-main">Kuntur<sup>®</sup></span>
              <span className="hero__title-sub" style={{ fontSize: "55px" }}><span>Agencia</span><span>Digital</span></span>
            </span></span>
          </h1>
          <a className="hero__card" href="contact.html">
            <img src={D.heroProfile} alt="Mitchel Jonson" />
            <div className="hero__card-r">
              <div className="hero__card-txt">
                <strong>Desde Oruro</strong>
                <span>Para el mundo</span>
              </div>
              <span className="hero__card-btn">HABLEMOS <i><Icon name="arrow" /></i></span>
            </div>
          </a>
        </div>

        <div className="hero__banner">
          {HERO_VIDEOS.map((src, i) => (
            <video
              key={src}
              className={"hero__banner-video" + (i === activeVid ? " hero__banner-video--active" : "")}
              src={src}
              autoPlay
              muted
              loop
              playsInline
            ></video>
          ))}
          <div className="hero__banner-overlay"></div>
          <div className="hero__banner-content">
            <div className="hero__avatars reveal-up">
              {D.clients.map((c, i) => <img key={i} src={c} alt="" style={{ zIndex: 9 - i }} />)}
            </div>
            <h2 className="hero__lead reveal-up">Creamos Servicios Digitales de <RotatingWord words={["Diseño UI/UX", "Desarrollo Web", "Ciberseguridad", "DevOps", "Soporte Técnico"]} /></h2>

            <div className="hero__socials">
              {D.socials.map((s, i) =>
              <a key={i} href={s.href} target="_blank" rel="noreferrer" aria-label={s.name}><Social name={s.ic} /></a>
              )}
            </div>

            <div className="hero__svcs">
              {D.services.map((s) =>
              <a className="svc-chip" key={s.n} href={s.href}>
                  <img src={s.img} alt="" />
                  <div className="svc-chip__txt">
                    <span className="svc-chip__n">({s.n})</span>
                    <span className="svc-chip__t">{s.title}</span>
                  </div>
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Brands() {
  const techs = window.KUNTUR.techStack;

  return (
    <section className="brands">
      <Marquee speed={55} gap={64}>
        {techs.map((t, i) =>
        <div className="brand-tech" key={i} title={t.name}>
            <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" fill="currentColor"><path d={t.path} fillRule={t.fillRule || "nonzero"} /></svg>
            <span className="brand-tech__name">{t.name}</span>
          </div>
        )}
      </Marquee>
    </section>);

}

function ScrollFill({ text, className = "" }) {
  const ref = useRef(null);
  useGsapReady(() => {
    const words = ref.current.querySelectorAll(".fill-w");
    gsap.set(words, { color: "var(--dim)" });
    gsap.to(words, {
      color: "#ffffff",
      ease: "none",
      stagger: 0.5,
      scrollTrigger: { trigger: ref.current, start: "top 82%", end: "bottom 58%", scrub: 0.4 }
    });
  }, []);
  return (
    <h2 className={"about__fill " + className} ref={ref}>
      {text.split(" ").map((w, i) =>
      <span className="fill-w" key={i}>{w}&nbsp;</span>
      )}
    </h2>);

}

function About() {
  const D = window.KUNTUR;
  return (
    <section className="about section wrap" id="about">
      <div className="about__grid">
        <div className="about__side">
          <span className="eyebrow" data-reveal>Nosotros</span>
          <div className="about__cta" data-reveal><Btn href="about/about-a.html">Leer Más</Btn></div>
        </div>
        <div className="about__main">
          <ScrollFill text="Colaboramos con marcas visionarias. El resultado, un impacto creativo que perdura." />
          <Reveal className="about__imgs" stagger={0.12}>
            <div className="about__img" data-reveal><img src={D.about.homeImg1 || D.about.img1} alt="" /></div>
            <div className="about__img" data-reveal><img src={D.about.homeImg2 || D.about.img2} alt="" /></div>
          </Reveal>
        </div>
      </div>
    </section>);

}

function Work() {
  const D = window.KUNTUR;
  const TILES = 11;
  // scalloped seal shape for the cursor badge
  const seal = (() => {
    const cx = 50,cy = 50,outer = 49,inner = 41,bumps = 16,total = bumps * 2;
    let d = "";
    for (let i = 0; i < total; i++) {
      const r = i % 2 === 0 ? outer : inner;
      const a = i / total * Math.PI * 2 - Math.PI / 2;
      const x = (cx + Math.cos(a) * r).toFixed(2),y = (cy + Math.sin(a) * r).toFixed(2);
      d += (i === 0 ? "M" : "L") + x + " " + y;
    }
    return d + "Z";
  })();
  useGsapReady(() => {
    // ---- cursor-following play badge (lags behind mouse) ----
    const badge = document.querySelector(".work-cursor");
    const list = document.querySelector(".work__list");
    const qx = gsap.quickTo(badge, "x", { duration: 0.55, ease: "power3.out" });
    const qy = gsap.quickTo(badge, "y", { duration: 0.55, ease: "power3.out" });
    gsap.set(badge, { x: window.innerWidth / 2, y: -200, scale: 0, opacity: 0 });
    const onMove = (e) => {qx(e.clientX);qy(e.clientY);};
    window.addEventListener("pointermove", onMove);

    gsap.utils.toArray(".work-card").forEach((card) => {
      const media = card.querySelector(".work-card__media");
      const img = card.querySelector(".work-card__media img");
      const bar = card.querySelector(".work-card__bar");
      const tiles = card.querySelectorAll(".work-tile");

      // perspective tilt + clip reveal on scroll
      gsap.set(media, { transformPerspective: 1100, transformOrigin: "center bottom" });
      gsap.fromTo(media, { rotateX: 25, yPercent: 7, clipPath: "inset(6% 5% 6% 5% round 26px)" },
      { rotateX: 0, yPercent: 0, clipPath: "inset(0% 0% 0% 0% round 26px)", ease: "power2.out",
        scrollTrigger: { trigger: card, start: "top 96%", end: "top 46%", scrub: true } });
      gsap.fromTo(img, { yPercent: -8 }, { yPercent: 6, ease: "none",
        scrollTrigger: { trigger: card, start: "top bottom", end: "bottom top", scrub: true } });
      gsap.from(bar, { y: 34, opacity: 0, duration: 0.9, ease: "power3.out",
        scrollTrigger: { trigger: card, start: "top 72%" } });

      // hover: tiles sweep off to the right + reveal sharp image; badge appears
      const enter = () => {
        gsap.to(tiles, { xPercent: -130, opacity: 0, duration: 0.32, ease: "power2.in",
          stagger: { each: 0.02, from: "end" } });
        gsap.to(badge, { scale: 1, opacity: 1, duration: 0.45, ease: "back.out(1.8)" });
        gsap.to(card, { "--glow": 1, duration: 0.5 });
      };
      const leave = () => {
        gsap.to(tiles, { xPercent: 0, opacity: 1, duration: 0.38, ease: "power2.out",
          stagger: { each: 0.02, from: "start" } });
        gsap.to(badge, { scale: 0, opacity: 0, duration: 0.35, ease: "power2.in" });
        gsap.to(card, { "--glow": 0, duration: 0.5 });
      };
      card.addEventListener("pointerenter", enter);
      card.addEventListener("pointerleave", leave);
    });
  }, []);

  return (
    <section className="work section wrap" id="work">
      <Reveal className="sec-head" sel=".line-mask">
        <RevealText as="h2" className="sec-title">Trabajo Destacado</RevealText>
        <span className="eyebrow">Portafolio</span>
      </Reveal>
      <hr className="divider" data-reveal />

      <div className="work__list">
        {D.work.map((w) =>
        <a className="work-card" key={w.n} href={L(w.href)}>
            <div className="work-card__media">
              <img src={w.img} alt={w.title} />
              <div className="work-card__tiles" aria-hidden="true">
                {Array.from({ length: TILES }).map((_, i) => {
                const SPAN = 48; // bands only across left 48% of card
                const b = Math.max(0, 22 - i * 2.0).toFixed(1);
                const t = Math.max(0, 0.5 - i * 0.045).toFixed(3);
                return (
                  <span className="work-tile" key={i} style={{ left: i / TILES * SPAN + "%", width: SPAN / TILES + 0.4 + "%", "--b": b + "px", "--t": t }}></span>);

              })}
              </div>
            </div>
            <div className="work-card__bar">
              <div className="work-card__name"><span className="work-card__n">({w.n})</span>{w.title}</div>
              <div className="work-card__tags">{w.tags.map((t, i) => <span key={i}>{t}</span>)}</div>
            </div>
          </a>
        )}
      </div>

      {/* cursor-following play badge */}
      <div className="work-cursor" aria-hidden="true">
        <svg className="work-cursor__seal" viewBox="0 0 100 100"><path d={seal} /></svg>
        <svg className="work-cursor__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></svg>
      </div>

      <div className="work__more" data-reveal><Btn href={L("featured-work/featured-work.html")} solid>Ver Todo el Trabajo</Btn></div>
    </section>);

}

function WorkCardAnim() {return null;}

Object.assign(window, { Hero, Brands, About, Work, RotatingWord, ScrollFill });