"use client";

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

const pillars = [
  {
    icon: Globe,
    title: "Regional Cooperation",
    titleZh: "区域合作",
    description: "Fostering legal ties across all ten ASEAN member states and the People's Republic of China.",
  },
  {
    icon: Users,
    title: "Professional Network",
    titleZh: "专业网络",
    description: "Connecting lawyers, academics, and legal professionals across the China-ASEAN region.",
  },
  {
    icon: BookOpen,
    title: "Knowledge Exchange",
    titleZh: "知识交流",
    description: "Facilitating seminars, publications, and collaborative research on cross-border legal issues.",
  },
];

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

  return (
    <section className="py-28 bg-white" ref={ref}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-20 items-center">
          {/* Left: Text */}
          <div>
            <div
              className="animate-on-scroll inline-flex items-center gap-2 text-xs font-semibold tracking-widest uppercase mb-5"
              style={{ color: "#C9A84C" }}
            >
              <span className="w-8 h-px inline-block" style={{ background: "#C9A84C" }} aria-hidden="true" />
              About CALCC
            </div>

            <h2 className="animate-on-scroll font-serif text-4xl lg:text-5xl font-bold text-charcoal leading-snug mb-6">
              A Bridge Between{" "}
              <span style={{ color: "#2D5FA6" }}>Two Legal Worlds</span>
            </h2>
            <p className="animate-on-scroll text-charcoal/60 text-xs tracking-wider mb-8 font-medium">
              中国与东盟法律合作的枢纽
            </p>

            <p className="animate-on-scroll text-charcoal/70 leading-relaxed mb-5">
              The China-ASEAN Legal Cooperation Center (CALCC) was established in Kuala Lumpur,
              Malaysia, as a premier institution dedicated to strengthening legal ties between
              the People's Republic of China and the ten member states of ASEAN.
            </p>
            <p className="animate-on-scroll text-charcoal/70 leading-relaxed mb-8">
              We serve as the definitive platform for legal professionals, law firms, academics,
              and government bodies to collaborate, exchange expertise, and develop frameworks
              that support the Belt and Road Initiative and ASEAN-China free trade relations.
            </p>

            <Link
              href="/about"
              className="animate-on-scroll inline-flex items-center gap-2 text-sm font-semibold group cursor-pointer"
              style={{ color: "#2D5FA6" }}
            >
              Learn More About CALCC
              <ArrowRight className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" />
            </Link>
          </div>

          {/* Right: Pillars */}
          <div className="space-y-5">
            {pillars.map((p, i) => (
              <div
                key={p.title}
                className="animate-from-right flex gap-5 p-6 rounded-xl transition-all duration-200 group cursor-pointer"
                style={{
                  border: "1px solid rgba(45, 95, 166, 0.1)",
                  background: i === 0 ? "rgba(45, 95, 166, 0.03)" : "white",
                  transitionDelay: `${i * 100}ms`,
                }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLDivElement).style.background = "rgba(45, 95, 166, 0.04)";
                  (e.currentTarget as HTMLDivElement).style.borderColor = "rgba(45, 95, 166, 0.2)";
                  (e.currentTarget as HTMLDivElement).style.boxShadow = "0 4px 20px rgba(45, 95, 166, 0.08)";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLDivElement).style.background = i === 0 ? "rgba(45, 95, 166, 0.03)" : "white";
                  (e.currentTarget as HTMLDivElement).style.borderColor = "rgba(45, 95, 166, 0.1)";
                  (e.currentTarget as HTMLDivElement).style.boxShadow = "none";
                }}
              >
                <div
                  className="flex-shrink-0 w-11 h-11 rounded-lg flex items-center justify-center"
                  style={{ background: "rgba(45, 95, 166, 0.08)" }}
                >
                  <p.icon className="w-5 h-5" style={{ color: "#2D5FA6" }} />
                </div>
                <div>
                  <div className="font-serif font-semibold text-charcoal mb-0.5">{p.title}</div>
                  <div className="text-xs mb-2" style={{ color: "#C9A84C" }}>{p.titleZh}</div>
                  <div className="text-sm text-charcoal/60 leading-relaxed">{p.description}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}