"use client";

import { useEffect, useRef } from "react";
import Link from "next/link";
import { ArrowRight, Scale } from "lucide-react";

export default function Hero() {
  const heroRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          el.querySelectorAll(".hero-animate").forEach((child, i) => {
            setTimeout(() => {
              (child as HTMLElement).style.opacity = "1";
              (child as HTMLElement).style.transform = "translateY(0)";
            }, i * 120);
          });
        }
      },
      { threshold: 0.1 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      className="relative min-h-screen flex items-center overflow-hidden"
      style={{
        background: "linear-gradient(135deg, #ffffff 0%, #EEF3FB 40%, #E4ECF7 70%, #f0f4fa 100%)",
      }}
    >
      {/* Decorative background elements */}
      <div
        className="absolute top-0 right-0 w-1/2 h-full opacity-5 pointer-events-none"
        aria-hidden="true"
        style={{
          backgroundImage:
            "repeating-linear-gradient(45deg, #2D5FA6 0px, #2D5FA6 1px, transparent 0px, transparent 50%)",
          backgroundSize: "20px 20px",
        }}
      />
      {/* Animated floating orbs */}
      <div
        className="absolute bottom-0 left-0 w-80 h-80 rounded-full opacity-[0.06] pointer-events-none animate-float-slow"
        aria-hidden="true"
        style={{
          background: "radial-gradient(circle, #C9A84C 0%, transparent 70%)",
          transform: "translate(-30%, 30%)",
        }}
      />
      <div
        className="absolute top-1/4 right-1/4 w-96 h-96 rounded-full opacity-[0.07] pointer-events-none animate-float"
        aria-hidden="true"
        style={{ background: "radial-gradient(circle, #2D5FA6 0%, transparent 70%)" }}
      />
      <div
        className="absolute top-10 right-10 w-48 h-48 rounded-full opacity-[0.04] pointer-events-none animate-float-alt"
        aria-hidden="true"
        style={{ background: "radial-gradient(circle, #C9A84C 0%, transparent 70%)" }}
      />

      {/* Gold accent line */}
      <div
        className="absolute left-0 top-[18%] bottom-[18%] w-1 rounded-r-full"
        style={{ background: "linear-gradient(to bottom, transparent, #C9A84C, transparent)" }}
        aria-hidden="true"
      />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-20 w-full" ref={heroRef}>
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Left: Content */}
          <div>
            {/* Badge */}
            <div
              className="hero-animate inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium mb-8"
              style={{
                opacity: 0,
                transform: "translateY(20px)",
                transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
                background: "rgba(45, 95, 166, 0.08)",
                color: "#2D5FA6",
                border: "1px solid rgba(45, 95, 166, 0.2)",
              }}
            >
              <Scale className="w-3.5 h-3.5" />
              Kuala Lumpur, Malaysia · Since 2015
            </div>

            {/* English headline */}
            <h1
              className="hero-animate font-serif text-5xl sm:text-6xl lg:text-7xl font-bold text-charcoal leading-tight mb-4"
              style={{
                opacity: 0,
                transform: "translateY(20px)",
                transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
              }}
            >
              Bridging Law.{" "}
              <span style={{ color: "#2D5FA6" }}>Building</span>{" "}
              <span
                className="relative inline-block"
                style={{ color: "#C9A84C" }}
              >
                Trust.
                <span
                  className="absolute bottom-1 left-0 right-0 h-0.5 rounded-full"
                  style={{ background: "#C9A84C", opacity: 0.4 }}
                  aria-hidden="true"
                />
              </span>
            </h1>

            {/* Chinese headline */}
            <p
              className="hero-animate font-serif text-2xl sm:text-3xl text-charcoal/60 mb-8 font-medium"
              style={{
                opacity: 0,
                transform: "translateY(20px)",
                transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
                letterSpacing: "0.05em",
              }}
            >
              搭建法律桥梁，构建互信合作
            </p>

            {/* Subtitle */}
            <p
              className="hero-animate text-lg text-charcoal/70 leading-relaxed mb-10 max-w-lg"
              style={{
                opacity: 0,
                transform: "translateY(20px)",
                transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
              }}
            >
              The China-ASEAN Legal Cooperation Center facilitates legal excellence,
              knowledge exchange, and professional collaboration between China and the
              ASEAN member states.
            </p>

            {/* CTAs */}
            <div
              className="hero-animate flex flex-col sm:flex-row gap-4"
              style={{
                opacity: 0,
                transform: "translateY(20px)",
                transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
              }}
            >
              <Link
                href="/members/register"
                className="inline-flex items-center justify-center gap-2 px-7 py-3.5 text-sm font-semibold text-white rounded-md transition-all duration-200 cursor-pointer group"
                style={{ background: "#2D5FA6" }}
                onMouseEnter={(e) =>
                  ((e.currentTarget as HTMLAnchorElement).style.background = "#1e4a8a")
                }
                onMouseLeave={(e) =>
                  ((e.currentTarget as HTMLAnchorElement).style.background = "#2D5FA6")
                }
              >
                Become a Member
                <ArrowRight className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" />
              </Link>
              <Link
                href="/about"
                className="inline-flex items-center justify-center gap-2 px-7 py-3.5 text-sm font-semibold rounded-md border-2 transition-all duration-200 cursor-pointer"
                style={{ borderColor: "#C9A84C", color: "#C9A84C" }}
                onMouseEnter={(e) => {
                  const el = e.currentTarget as HTMLAnchorElement;
                  el.style.background = "#C9A84C";
                  el.style.color = "#ffffff";
                }}
                onMouseLeave={(e) => {
                  const el = e.currentTarget as HTMLAnchorElement;
                  el.style.background = "transparent";
                  el.style.color = "#C9A84C";
                }}
              >
                Learn About CALCC
              </Link>
            </div>

            {/* Stats row */}
            <div
              className="hero-animate mt-14 flex gap-10 pt-8"
              style={{
                opacity: 0,
                transform: "translateY(20px)",
                transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
                borderTop: "1px solid rgba(45, 95, 166, 0.12)",
              }}
            >
              {[
                { value: "10+", label: "ASEAN Countries" },
                { value: "500+", label: "Member Lawyers" },
                { value: "200+", label: "Legal Activities" },
              ].map((stat) => (
                <div key={stat.label}>
                  <div className="font-serif text-3xl font-bold" style={{ color: "#2D5FA6" }}>
                    {stat.value}
                  </div>
                  <div className="text-sm text-charcoal/50 mt-0.5">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Visual card */}
          <div
            className="hero-animate hidden lg:block"
            style={{
              opacity: 0,
              transform: "translateY(20px)",
              transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
            }}
          >
            <div className="relative">
              {/* Main card */}
              <div
                className="rounded-2xl p-8 shadow-xl"
                style={{
                  background: "rgba(255,255,255,0.85)",
                  backdropFilter: "blur(12px)",
                  border: "1px solid rgba(45, 95, 166, 0.12)",
                }}
              >
                {/* Map placeholder — ASEAN + China region */}
                <div
                  className="rounded-xl mb-6 overflow-hidden flex items-center justify-center"
                  style={{
                    height: "240px",
                    background: "linear-gradient(135deg, #EEF3FB 0%, #E4ECF7 100%)",
                    border: "1px solid rgba(45, 95, 166, 0.1)",
                  }}
                >
                  <div className="text-center">
                    <div className="font-serif text-4xl font-bold mb-2" style={{ color: "#2D5FA6", opacity: 0.15 }}>
                      中国 · ASEAN
                    </div>
                    <svg viewBox="0 0 280 180" className="w-64 h-40 mx-auto opacity-30">
                      {/* Simplified Southeast Asia outline */}
                      <circle cx="100" cy="60" r="18" fill="#2D5FA6" opacity="0.4" />
                      <circle cx="145" cy="80" r="12" fill="#2D5FA6" opacity="0.35" />
                      <circle cx="175" cy="70" r="14" fill="#2D5FA6" opacity="0.35" />
                      <circle cx="195" cy="95" r="10" fill="#2D5FA6" opacity="0.3" />
                      <circle cx="155" cy="115" r="16" fill="#2D5FA6" opacity="0.35" />
                      <circle cx="125" cy="130" r="10" fill="#2D5FA6" opacity="0.3" />
                      <circle cx="215" cy="120" r="8" fill="#2D5FA6" opacity="0.25" />
                      {/* China */}
                      <ellipse cx="100" cy="60" rx="40" ry="28" fill="#C9A84C" opacity="0.2" />
                      {/* Connecting lines */}
                      <line x1="100" y1="60" x2="145" y2="80" stroke="#2D5FA6" strokeWidth="1" opacity="0.3" strokeDasharray="4,3" />
                      <line x1="145" y1="80" x2="175" y2="70" stroke="#2D5FA6" strokeWidth="1" opacity="0.3" strokeDasharray="4,3" />
                      <line x1="145" y1="80" x2="155" y2="115" stroke="#2D5FA6" strokeWidth="1" opacity="0.3" strokeDasharray="4,3" />
                      <line x1="175" y1="70" x2="195" y2="95" stroke="#2D5FA6" strokeWidth="1" opacity="0.3" strokeDasharray="4,3" />
                    </svg>
                  </div>
                </div>

                {/* Regional presence pills */}
                <div className="flex flex-wrap gap-2 mb-6">
                  {["China", "Malaysia", "Singapore", "Thailand", "Vietnam", "Indonesia", "Philippines"].map((country) => (
                    <span
                      key={country}
                      className="px-2.5 py-1 rounded-full text-xs font-medium"
                      style={{
                        background: "rgba(45, 95, 166, 0.08)",
                        color: "#2D5FA6",
                        border: "1px solid rgba(45, 95, 166, 0.15)",
                      }}
                    >
                      {country}
                    </span>
                  ))}
                </div>

                {/* Latest update */}
                <div
                  className="rounded-lg p-4"
                  style={{ background: "rgba(201, 168, 76, 0.06)", border: "1px solid rgba(201, 168, 76, 0.2)" }}
                >
                  <div className="text-xs font-medium mb-1" style={{ color: "#C9A84C" }}>
                    Latest Activity
                  </div>
                  <div className="text-sm font-medium text-charcoal">
                    China-ASEAN Legal Forum 2024
                  </div>
                  <div className="text-xs text-charcoal/50 mt-0.5">Kuala Lumpur · December 2024</div>
                </div>
              </div>

              {/* Floating accent badge */}
              <div
                className="absolute -top-4 -right-4 rounded-xl px-4 py-3 shadow-lg"
                style={{
                  background: "#2D5FA6",
                }}
              >
                <div className="text-white text-xs font-medium opacity-80">Established</div>
                <div className="text-white font-serif text-xl font-bold">2015</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom fade */}
      <div
        className="absolute bottom-0 left-0 right-0 h-24 pointer-events-none"
        aria-hidden="true"
        style={{ background: "linear-gradient(to bottom, transparent, rgba(255,255,255,0.6))" }}
      />
    </section>
  );
}