"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import KineticText from "./KineticText";
import PillMark from "./PillMark";
import Magnetic from "./Magnetic";

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

  useEffect(() => {
    const el = root.current;
    if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    const ctx = gsap.context(() => {
      const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
      tl.from(".hero__eyebrow", { y: 18, opacity: 0, duration: 0.9, delay: 0.15 })
        .from(".hero__sub", { y: 22, opacity: 0, duration: 0.9 }, "-=0.2")
        .from(
          ".hero__actions > *",
          { y: 20, opacity: 0, stagger: 0.1, duration: 0.7 },
          "-=0.5"
        )
        .from(".hero__meta", { opacity: 0, duration: 0.8 }, "-=0.4");

      // parallax on the floating mark as you scroll the hero out
      gsap.to(".hero__mark", {
        yPercent: -22,
        ease: "none",
        scrollTrigger: {
          trigger: el,
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
      });
      gsap.to(".hero__display", {
        yPercent: 12,
        opacity: 0.25,
        ease: "none",
        scrollTrigger: {
          trigger: el,
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
      });
    }, el);

    return () => ctx.revert();
  }, []);

  return (
    <section className="hero" ref={root}>
      <div className="hero__inner wrap">
        <p className="hero__eyebrow">
          <span className="dot" aria-hidden="true" />
          Agencia de marketing AI-native
        </p>

        <h1 className="hero__display">
          <KineticText as="span" className="hero__line" text="No alquilamos" immediate delay={0.25} />
          <span className="hero__line hero__line--mixed">
            <KineticText as="span" text="las" immediate delay={0.4} />
            <em className="hero__serif"> herramientas.</em>
          </span>
          <KineticText
            as="span"
            className="hero__line hero__line--grad"
            text="Construimos la máquina."
            immediate
            delay={0.5}
            highlight={[0, 2]}
          />
        </h1>

        <div className="hero__mark" aria-hidden="true">
          <PillMark animate breathe />
        </div>

        <p className="hero__sub">
          Estrategia humana sobre <strong>nuestra propia plataforma de IA</strong>.
          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">
          <Magnetic strength={0.5}>
            <a className="btn btn--primary hoverable" href="#contacto">
              <span>Habla con nosotros</span>
            </a>
          </Magnetic>
          <Magnetic strength={0.3}>
            <a className="btn btn--ghost hoverable" href="#servicios">
              <span>Ver qué hacemos</span>
            </a>
          </Magnetic>
        </div>

        <dl className="hero__meta">
          <div>
            <dt>Entrega</dt>
            <dd>en días, no semanas</dd>
          </div>
          <div>
            <dt>Reporting</dt>
            <dd>cada acción medida</dd>
          </div>
          <div>
            <dt>Infraestructura</dt>
            <dd>propia, no alquilada</dd>
          </div>
        </dl>
      </div>

      <a className="hero__scroll hoverable" href="#ventaja" aria-label="Bajar a la siguiente sección">
        <span>scroll</span>
        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
          <path d="M12 4v16m0 0l-6-6m6 6l6-6" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </section>
  );
}