"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { gsap } from "gsap";
import { useGSAP } from "@gsap/react";
import { ArrowRight } from "@/components/ui/icons";
import AnimatedButton from "@/components/ui/AnimatedButton";

/**
 * Full-bleed image hero (GSAP). The showcase image spans the full width as
 * the section background, with floating glass cards overlaid — a tag pill,
 * a tabbed info card, and an animated, tilted feature card.
 *
 * Swap the visuals by replacing the slide images (HeroBanner*.jpg) and the
 * feature-card image in /public/images.
 */

const HEADLINE_2 = ["Digital", "Products"];

// Auto-rotating slides — each drives the full-width image + info card.
const SLIDES = [
  {
    label: "Build",
    image: "/images/HeroBanner3.jpg",
    title: "Engineering that performs.",
    desc: "Production-grade web, mobile and AI products — designed to perform and built to scale.",
  },
  {
    label: "Scale",
    image: "/images/HeroBanner2.jpg",
    title: "Grow without limits.",
    desc: "Cloud, DevOps and data systems that keep you fast, secure and always-on as you scale.",
  },
];

export default function Hero() {
  const root = useRef(null);
  const [tab, setTab] = useState(0);

  // Auto-advance through slides; resets whenever `tab` changes (manual or auto).
  useEffect(() => {
    const id = setTimeout(() => setTab((t) => (t + 1) % SLIDES.length), 4500);
    return () => clearTimeout(id);
  }, [tab]);

  const slide = SLIDES[tab];

  useGSAP(
    () => {
      const tl = gsap.timeline({ defaults: { ease: "power3.out", duration: 0.8 } });

      tl.from(".hero-eyebrow", { opacity: 0, y: 16, duration: 0.6 })
        .from(".hero-word", { yPercent: 120, opacity: 0, stagger: 0.07, duration: 0.7 }, "-=0.2")
        .from(".hero-sub", { opacity: 0, y: 20, duration: 0.6 }, "-=0.2")
        .from(".hero-cta", { opacity: 0, y: 20, stagger: 0.1, duration: 0.6 }, "-=0.3")
        .from(".hero-pill", { opacity: 0, y: -16, duration: 0.6 }, "-=0.3")
        .from(".hero-info", { opacity: 0, x: -28, duration: 0.7 }, "-=0.4")
        .from(".hero-card", { opacity: 0, scale: 0.9, duration: 0.7 }, "-=0.5");

      gsap.to(".hero-glow-1", { scale: 1.15, opacity: 0.8, duration: 8, repeat: -1, yoyo: true, ease: "sine.inOut" });
      gsap.to(".hero-glow-2", { scale: 1.1, opacity: 0.7, duration: 10, repeat: -1, yoyo: true, ease: "sine.inOut" });

      // Floating feature card (bottom-right) — gentle bob
      gsap.to(".hero-card", { y: -14, duration: 3, repeat: -1, yoyo: true, ease: "sine.inOut" });
      gsap.to(".hero-pill", { y: 8, duration: 4, repeat: -1, yoyo: true, ease: "sine.inOut" });
    },
    { scope: root }
  );

  return (
    <section ref={root} className="relative overflow-hidden">
      {/* Full-width background — crossfading slide layers w/ slow zoom */}
      <div className="absolute inset-0 -z-20 bg-gradient-to-br from-surface via-background to-surface">
        {SLIDES.map((s, i) => (
          <div
            key={s.label}
            className="absolute inset-0 overflow-hidden transition-opacity duration-1000 ease-in-out"
            style={{ opacity: i === tab ? 1 : 0 }}
          >
            <div
              className="h-full w-full animate-kenburns"
              style={{
                backgroundImage: `url(${s.image})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
              }}
            />
          </div>
        ))}
      </div>
      {/* Legibility + cinematic vignette */}
      <div className="absolute inset-0 -z-10 bg-gradient-to-t from-background via-background/25 to-background/60" />
      <div
        className="absolute inset-0 -z-10"
        style={{
          background:
            "radial-gradient(ellipse 90% 70% at 50% 40%, transparent 40%, rgb(var(--background) / 0.55) 100%)",
        }}
      />

      {/* Ambient glows */}
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div className="hero-glow-1 absolute -top-40 left-1/3 h-[34rem] w-[34rem] -translate-x-1/2 rounded-full bg-primary/20 opacity-50 blur-[120px]" />
        <div className="hero-glow-2 absolute -bottom-40 right-1/4 h-[30rem] w-[30rem] translate-x-1/2 rounded-full bg-accent/15 opacity-40 blur-[120px]" />
      </div>

      {/* Tag pill (top-left) */}
      <div className="hero-pill absolute left-5 top-6 z-10 flex items-center gap-2 rounded-full border border-border bg-surface/70 py-1.5 pl-4 pr-1.5 text-sm font-medium text-foreground backdrop-blur md:left-10">
        Capabilities
        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground">
          +
        </span>
      </div>

      <div className="container relative flex min-h-[calc(100svh-5rem)] flex-col pb-12 pt-10">
        {/* Eyebrow kicker */}
        <div className="hero-eyebrow mx-auto mb-6 flex w-fit items-center gap-2.5 rounded-full border border-border bg-surface/50 px-4 py-1.5 text-xs font-medium text-muted-foreground backdrop-blur">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-75" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-accent" />
          </span>
          A technology studio for ambitious teams
        </div>

        {/* Headline */}
        <h1 className="text-center text-4xl font-bold leading-[1.05] tracking-tight drop-shadow-[0_2px_30px_rgba(0,0,0,0.5)] sm:text-6xl md:text-7xl lg:text-8xl">
          <span className="block overflow-hidden pb-[0.1em]">
            <span className="hero-word inline-block">High-Performance</span>
          </span>
          <span className="block">
            {HEADLINE_2.map((w, i) => (
              <span key={i} className="inline-block overflow-hidden pb-[0.1em] align-bottom">
                <span className="hero-word inline-block bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
                  {w}
                </span>
                {i < HEADLINE_2.length - 1 && <span>&nbsp;</span>}
              </span>
            ))}
          </span>
        </h1>

        {/* Subtitle */}
        <p className="hero-sub mx-auto mt-6 max-w-2xl text-center text-base leading-relaxed text-muted-foreground drop-shadow-[0_1px_12px_rgba(0,0,0,0.6)] sm:text-lg">
          We design, engineer and scale web, mobile and AI products — turning
          ambitious ideas into software that performs in the real world.
        </p>

        {/* CTAs */}
        <div className="mt-9 flex flex-wrap items-center justify-center gap-4">
          <AnimatedButton href="/contact" className="hero-cta">
            Start a project
          </AnimatedButton>
          <Link
            href="/portfolio"
            className="hero-cta inline-flex items-center gap-2 rounded-full border border-border bg-surface/50 px-6 py-3 text-sm font-semibold text-foreground backdrop-blur transition-colors hover:border-primary/50 hover:bg-surface"
          >
            See our work
            <ArrowRight className="h-4 w-4 text-primary transition-transform group-hover:translate-x-0.5" />
          </Link>
        </div>

        {/* Floating cards pinned to the bottom */}
        <div className="mt-auto flex flex-col items-stretch justify-between gap-6 pt-10 lg:flex-row lg:items-end">
          {/* Info card (left) — gradient-ring glass */}
          <div className="hero-info max-w-md rounded-2xl bg-gradient-to-br from-white/15 via-border to-transparent p-px shadow-2xl shadow-black/40">
            <div className="rounded-[15px] bg-surface/85 p-5 backdrop-blur-xl">
              <div className="flex gap-2">
                {SLIDES.map((s, i) => (
                  <button
                    key={s.label}
                    onClick={() => setTab(i)}
                    className={
                      "rounded-full px-3.5 py-1.5 text-xs font-medium transition-colors " +
                      (tab === i
                        ? "bg-primary text-primary-foreground"
                        : "border border-border text-muted-foreground hover:text-foreground")
                    }
                  >
                    {s.label}
                  </button>
                ))}
              </div>

              {/* Slideshow progress */}
              <div className="mt-3 flex gap-1.5">
                {SLIDES.map((s, i) => (
                  <div key={s.label} className="h-1 flex-1 overflow-hidden rounded-full bg-border">
                    {i === tab ? (
                      <div key={`p-${tab}`} className="slide-progress h-full w-full bg-primary" />
                    ) : (
                      <div className="h-full w-0" />
                    )}
                  </div>
                ))}
              </div>

              <h3 key={`t-${tab}`} className="animate-fade-in mt-4 font-heading text-lg font-semibold text-foreground">
                {slide.title}
              </h3>
              <p key={`d-${tab}`} className="animate-fade-in mt-2 text-sm text-muted-foreground">
                {slide.desc}
              </p>
              <AnimatedButton href="/services" size="sm" className="mt-4">
                Explore services
              </AnimatedButton>
            </div>
          </div>

          {/* Animated feature card (right, tilted) */}
          <div className="hidden rotate-6 self-end lg:block">
            <div className="hero-card w-72 rounded-2xl bg-gradient-to-br from-white/20 via-border to-transparent p-px shadow-2xl shadow-black/50">
             <div className="overflow-hidden rounded-[15px] bg-surface/90 p-3 backdrop-blur-xl">
              <div className="mb-3 flex items-center justify-between">
                <span className="text-sm font-semibold text-foreground">Orbit AI Platform</span>
                <span className="text-xs text-muted-foreground">
                  <span className="text-primary">★★★★</span>★ 4.0
                </span>
              </div>
              <div
                className="aspect-[16/10] w-full rounded-xl border border-border bg-gradient-to-br from-primary/20 via-surface to-accent/20"
                style={{
                  backgroundImage: "url(/images/HeroBanner1.jpg)",
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                }}
              />
              <div className="mt-3 flex items-center justify-between">
                <div>
                  <span className="text-lg font-bold text-foreground">Featured</span>
                  <span className="ml-2 text-xs text-muted-foreground line-through">case study</span>
                </div>
                <Link
                  href="/portfolio"
                  className="group inline-flex items-center gap-1 text-sm font-medium text-primary"
                >
                  Let’s go
                  <span className="flex h-7 w-7 items-center justify-center rounded-full border border-primary/40 transition-transform group-hover:translate-x-0.5">
                    <ArrowRight className="h-3.5 w-3.5" />
                  </span>
                </Link>
              </div>
             </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}