"use client";

import Link from "next/link";
import { ArrowRight, FileText, Users, Globe, Shield } from "lucide-react";
import { useScrollAnimation } from "@/lib/useScrollAnimation";

const features = [
  { icon: FileText, label: "Legal Document Templates", labelZh: "法律文件模板" },
  { icon: Users, label: "Expert Lawyer Directory", labelZh: "专家律师名录" },
  { icon: Globe, label: "Cross-Border Legal Advisory", labelZh: "跨境法律咨询" },
  { icon: Shield, label: "Dispute Resolution Support", labelZh: "争议解决支持" },
];

export default function LegalConnect() {
  const ref = useScrollAnimation();

  return (
    <section className="py-28 bg-white" ref={ref as React.RefObject<HTMLElement>}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          className="rounded-2xl overflow-hidden relative"
          style={{
            background: "linear-gradient(135deg, #1A1A2E 0%, #1e2a4a 50%, #2D5FA6 100%)",
          }}
        >
          {/* Background pattern */}
          <div
            className="absolute inset-0 opacity-5 pointer-events-none"
            aria-hidden="true"
            style={{
              backgroundImage: "radial-gradient(circle at 2px 2px, rgba(255,255,255,0.4) 1px, transparent 0)",
              backgroundSize: "40px 40px",
            }}
          />

          {/* Gold accent line */}
          <div
            className="absolute top-0 left-0 right-0 h-1"
            aria-hidden="true"
            style={{ background: "linear-gradient(to right, transparent, #C9A84C, transparent)" }}
          />

          <div className="relative grid lg:grid-cols-2 gap-12 p-10 lg:p-16 items-center">
            {/* Left */}
            <div>
              <div
                className="animate-on-scroll inline-flex items-center gap-2 text-xs font-semibold tracking-widest uppercase mb-6"
                style={{ color: "#C9A84C" }}
              >
                <span className="w-8 h-px inline-block" style={{ background: "#C9A84C" }} aria-hidden="true" />
                Legal Connect
              </div>

              <h2 className="animate-on-scroll font-serif text-4xl lg:text-5xl font-bold text-white leading-snug mb-4">
                Your Gateway to{" "}
                <span style={{ color: "#C9A84C" }}>China-ASEAN Legal</span>{" "}
                Expertise
              </h2>
              <p className="animate-on-scroll text-white/50 text-sm mb-8 tracking-wider">
                连接中国与东盟的法律专业平台
              </p>

              <p className="animate-on-scroll text-white/70 leading-relaxed mb-10">
                Legal Connect is CALCC's dedicated platform for connecting legal professionals,
                businesses, and institutions seeking expert guidance on China-ASEAN cross-border
                legal matters — from contract law to dispute resolution.
              </p>

              <Link
                href="/legal-connect"
                className="animate-on-scroll inline-flex items-center gap-2 px-7 py-3.5 rounded-md text-sm font-semibold transition-all duration-200 cursor-pointer group"
                style={{ background: "#C9A84C", color: "#1A1A2E" }}
                onMouseEnter={(e) =>
                  ((e.currentTarget as HTMLAnchorElement).style.background = "#b8923e")
                }
                onMouseLeave={(e) =>
                  ((e.currentTarget as HTMLAnchorElement).style.background = "#C9A84C")
                }
              >
                Access Legal Connect
                <ArrowRight className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" />
              </Link>
            </div>

            {/* Right: Features */}
            <div className="grid grid-cols-2 gap-4">
              {features.map((f, i) => (
                <div
                  key={f.label}
                  className="animate-from-right rounded-xl p-5 transition-all duration-200 cursor-pointer group"
                  style={{
                    background: "rgba(255,255,255,0.06)",
                    border: "1px solid rgba(255,255,255,0.1)",
                    transitionDelay: `${i * 100}ms`,
                  }}
                  onMouseEnter={(e) => {
                    (e.currentTarget as HTMLDivElement).style.background = "rgba(255,255,255,0.1)";
                    (e.currentTarget as HTMLDivElement).style.borderColor = "rgba(201, 168, 76, 0.3)";
                  }}
                  onMouseLeave={(e) => {
                    (e.currentTarget as HTMLDivElement).style.background = "rgba(255,255,255,0.06)";
                    (e.currentTarget as HTMLDivElement).style.borderColor = "rgba(255,255,255,0.1)";
                  }}
                >
                  <div
                    className="w-10 h-10 rounded-lg flex items-center justify-center mb-4"
                    style={{ background: "rgba(201, 168, 76, 0.15)" }}
                  >
                    <f.icon className="w-5 h-5" style={{ color: "#C9A84C" }} />
                  </div>
                  <div className="text-sm font-semibold text-white mb-1">{f.label}</div>
                  <div className="text-xs" style={{ color: "rgba(201, 168, 76, 0.7)" }}>
                    {f.labelZh}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}