"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";

const line1 = "La mayoría de agencias alquilan sus herramientas.".split(" ");
const line2 = "Nosotros construimos la nuestra.".split(" ");

function Words({ words, grad }: { words: string[]; grad?: boolean }) {
  return (
    <span className={"line" + (grad ? " grad" : "")}>
      {words.map((w, i) => (
        <span className="word" key={i}>
          <span className="word-in">{w}</span>{" "}
        </span>
      ))}
    </span>
  );
}

export default function Hero() {
  const root = useRef<HTMLElement>(null);
  const mark = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = root.current;
    if (!el) return;

    const ctx = gsap.context(() => {
      const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
      tl.from(".eyebrow", { y: 20, opacity: 0, duration: 0.8 })
        .from(
          ".word-in",
          { yPercent: 115, duration: 1.05, stagger: 0.045 },
          "-=0.4"
        )
        .from(".hero-sub", { y: 24, opacity: 0, duration: 0.9 }, "-=0.7")
        .from(".hero-actions > *", { y: 20, opacity: 0, stagger: 0.12, duration: 0.7 }, "-=0.6")
        .from(".bar", { scaleX: 0, transformOrigin: "left", stagger: 0.08, duration: 0.7, ease: "power3.inOut" }, "-=1.1");

      // floating pill-mark
      gsap.to(".bar", {
        y: "+=8",
        duration: 2.4,
        ease: "sine.inOut",
        repeat: -1,
        yoyo: true,
        stagger: { each: 0.15, from: "random" },
      });

    }, el);

    const onMove = (e: MouseEvent) => {
      const rx = (e.clientX / window.innerWidth - 0.5) * 2;
      const ry = (e.clientY / window.innerHeight - 0.5) * 2;
      gsap.to(mark.current, { x: rx * 22, y: ry * 22, duration: 0.8, ease: "power3" });
      gsap.to(".blob", { x: rx * 30, y: ry * 30, duration: 1.2, ease: "power3" });
    };
    window.addEventListener("mousemove", onMove);

    return () => {
      window.removeEventListener("mousemove", onMove);
      ctx.revert();
    };
  }, []);

  return (
    <section className="hero" ref={root}>
      <div className="mesh" aria-hidden>
        <span className="blob b1" />
        <span className="blob b2" />
        <span className="blob b3" />
        <span className="blob b4" />
      </div>

      <div className="hero-inner wrap">
        <p className="eyebrow">Agencia de marketing AI-native</p>

        <div ref={mark} className="pillmark" aria-hidden>
          <span className="bar bar-grad" />
          <div className="bar-row">
            <span className="bar bar-ink" />
            <span className="bar bar-blue" />
          </div>
          <span className="bar bar-green" />
        </div>

        <h1 className="hero-h1">
          <Words words={line1} />
          <Words words={line2} grad />
        </h1>

        <p className="hero-sub">
          Estrategia humana + nuestra propia plataforma de IA. Web, SEO, ads y
          contenido — más rápido, más medible y a mejor coste que una agencia
          tradicional.
        </p>

        <div className="hero-actions">
          <a className="btn primary hoverable" href="#contacto">Habla con nosotros</a>
          <a className="btn ghost hoverable" href="#servicios">Ver qué hacemos</a>
        </div>
      </div>

      <div className="scroll-hint" aria-hidden>scroll</div>
    </section>
  );
}