"use client";

import { useLayoutEffect, useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import gsap from "gsap";
import { FiArrowDown, FiArrowUpRight, FiPlay } from "react-icons/fi";
import { AudioVisualizer } from "@/components/audio-visualizer";

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

  useLayoutEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    const context = gsap.context(() => {
      const timeline = gsap.timeline({ defaults: { ease: "power3.out" } });
      timeline
        .from(".hero-background", { scale: 1.08, duration: 1.8 })
        .from(".hero-kicker", { autoAlpha: 0, y: 20, duration: 0.7 }, 0.25)
        .from(
          ".hero-title-line",
          { yPercent: 115, duration: 1.05, stagger: 0.12 },
          0.35,
        )
        .from(".hero-summary", { autoAlpha: 0, y: 30, duration: 0.8 }, 0.75)
        .from(".hero-actions", { autoAlpha: 0, y: 24, duration: 0.7 }, 0.9)
        .from(
          ".hero-art-card",
          { autoAlpha: 0, x: 80, rotate: 3, duration: 1.1 },
          0.55,
        );

      gsap.to(".hero-orbit", {
        rotate: 360,
        duration: 32,
        repeat: -1,
        ease: "none",
      });
    }, root);

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

  return (
    <section className="hero" ref={root}>
      <div className="hero-background" data-parallax>
        <Image
          src="/images/brand/hero.webp"
          alt=""
          fill
          priority
          sizes="100vw"
        />
      </div>
      <div className="hero-noise" />
      <div className="hero-glow" />
      <div className="hero-orbit" aria-hidden="true" />

      <div className="shell hero-grid">
        <div className="hero-copy">
          <div className="hero-kicker">
            <AudioVisualizer bars={14} />
            <span>FÉ · PROPÓSITO · VERDADE · SOM</span>
          </div>

          <h1>
            <span className="hero-title-mask">
              <span className="hero-title-line">Verdades eternas.</span>
            </span>
            <span className="hero-title-mask">
              <span className="hero-title-line hero-title-gold">
                Som do presente.
              </span>
            </span>
          </h1>

          <p className="hero-summary">
            Música cristã contemporânea, direção artística humana e tecnologia a
            serviço de uma mensagem que permanece.
          </p>

          <div className="hero-actions">
            <Link href="/bio" className="primary-button">
              <FiPlay />
              Ouvir agora
            </Link>
            <Link href="/sobre" className="text-button">
              Conhecer o SelahBeat
              <FiArrowUpRight />
            </Link>
          </div>
        </div>

        <div className="hero-art-card">
          <div className="hero-art-image">
            <Image
              src="/images/brand/logo-bg.webp"
              alt="Identidade visual SelahBeat"
              fill
              priority
              sizes="(max-width: 900px) 70vw, 36vw"
            />
          </div>
          <div className="hero-art-meta">
            <span>SELAHBEAT / 2026</span>
            <strong>TRAP · RAP · WORSHIP URBANO</strong>
          </div>
        </div>
      </div>

      <a className="scroll-indicator" href="#destaque">
        <FiArrowDown />
        <span>EXPLORAR</span>
      </a>
    </section>
  );
}