"use client";

import { useScrollAnimation } from "@/lib/useScrollAnimation";
import { Building2, Globe, Handshake, Scale } from "lucide-react";

const milestones = [
  { year: "2010", event: "China-ASEAN Free Trade Area (CAFTA) launched on January 1, representing a two-billion-population market." },
  { year: "2011", event: "CALCC proposed at the 5th China-ASEAN Forum on Legal Cooperation and Development, Kuala Lumpur, September 2011." },
  { year: "2012", event: "CALCC officially established March 26, 2012. Headquarters set up in Haikou and Sanya, Hainan Province." },
  { year: "2013", event: "Philippines Centre opened in Manila (September). Network expansion across ASEAN member states." },
  { year: "2014", event: "Myanmar Centre established in Yangon (August). Vietnam Centre opened in Hanoi." },
  { year: "2015", event: "Thailand Centre launched in Bangkok (May). CALCC network fully covers major ASEAN jurisdictions." },
  { year: "2016", event: "Cambodia Centre established in Phnom Penh (February)." },
  { year: "2020", event: "CALCC China registration formally concluded November 18, 2020. Overseas chapters continue independent operations." },
];

const pillars = [
  {
    icon: Scale,
    title: "Legal Cooperation",
    titleZh: "法律合作",
    desc: "Facilitating cross-border legal collaboration between China and all ten ASEAN member states through structured frameworks and MOU signings.",
  },
  {
    icon: Globe,
    title: "International Network",
    titleZh: "国际网络",
    desc: "Building an integrated international service network covering the entire ASEAN region to become the No.1 Brand for China-ASEAN legal services.",
  },
  {
    icon: Handshake,
    title: "MOU Facilitation",
    titleZh: "合作备忘录",
    desc: "Over 200 MOUs signed between Malaysian and Chinese law firms, fostering direct professional relationships across jurisdictions.",
  },
  {
    icon: Building2,
    title: "Institutional Partnerships",
    titleZh: "机构合作",
    desc: "Working closely with Bar Council Malaysia, AIAC, AIADR, University of Malaya, Inns of Court Malaysia, ASEAN Law Association, and JustLaw Guangxi.",
  },
];

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

  return (
    <section id="introduction" className="py-24 bg-white" ref={ref as React.RefObject<HTMLElement>}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Section header */}
        <div className="mb-16">
          <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" style={{ background: "#C9A84C", display: "inline-block" }} aria-hidden="true" />
            Introduction · 简介
          </div>
          <h2 className="animate-on-scroll font-serif text-4xl lg:text-5xl font-bold text-charcoal leading-snug mb-6">
            About <span style={{ color: "#2D5FA6" }}>CALCC</span>
          </h2>
        </div>

        {/* Two-column: description + image placeholder */}
        <div className="grid lg:grid-cols-2 gap-16 items-start mb-20">
          <div>
            <div
              className="animate-from-left rounded-2xl overflow-hidden mb-8"
              style={{ border: "1px solid rgba(45,95,166,0.1)" }}
            >
              <img
                src="https://calcc.world/wp-content/uploads/2020/02/logo-300x300.png"
                alt="CALCC Logo"
                className="w-32 h-32 object-contain mx-auto my-8"
                onError={(e) => {
                  (e.currentTarget as HTMLImageElement).style.display = "none";
                }}
              />
              <div
                className="px-8 py-6 border-t"
                style={{ borderColor: "rgba(45,95,166,0.1)", background: "rgba(45,95,166,0.02)" }}
              >
                <blockquote className="font-serif text-lg text-charcoal/80 leading-relaxed italic">
                  "CALCC strives to promote international cooperation and exchange. The Center makes unwavering efforts in building an integrated international service network that caters to the entire ASEAN region and to create a No.1 Brand of China-ASEAN legal services."
                </blockquote>
              </div>
            </div>

            <div className="animate-from-left space-y-4 text-charcoal/70 leading-relaxed" style={{ transitionDelay: "120ms" }}>
              <p>
                The <strong className="text-charcoal font-semibold">China-ASEAN Legal Cooperation Center (CALCC)</strong> is a non-governmental organization registered with the Ministry of Civil Affairs of the People's Republic of China, with the China Law Society as its professional regulator.
              </p>
              <p>
                CALCC was proposed at the <strong className="text-charcoal font-semibold">5th China-ASEAN Forum on Legal Cooperation and Development</strong> held in Kuala Lumpur in September 2011, and was formally established on <strong className="text-charcoal font-semibold">March 26, 2012</strong>, with headquarters in Haikou and Sanya, Hainan Province.
              </p>
              <p>
                Branches were established across Malaysia, Thailand, Philippines, Singapore, Cambodia, Vietnam, Laos, and Myanmar — covering all major ASEAN jurisdictions and creating a comprehensive regional legal cooperation network.
              </p>
              <p>
                CALCC Malaysia operates as a registered NGO in Kuala Lumpur, led by <strong className="text-charcoal font-semibold">President Dato' Ricky Tan</strong>, with a full committee of Malaysian lawyers. The Malaysia chapter has facilitated over <strong className="text-charcoal font-semibold">200 MOUs</strong> between Malaysian and Chinese law firms, and conducted market visits to Guangxi, Shenzhen, Guangdong, Hainan, and Dalian.
              </p>
            </div>
          </div>

          {/* CAFTA context */}
          <div className="space-y-6">
            <div
              className="animate-from-right rounded-2xl p-7"
              style={{
                background: "linear-gradient(135deg, #1A1A2E 0%, #2D5FA6 100%)",
              }}
            >
              <div className="text-xs font-semibold tracking-widest uppercase mb-4" style={{ color: "#C9A84C" }}>
                CAFTA Context · 背景
              </div>
              <h3 className="font-serif text-2xl font-bold text-white mb-4">
                China-ASEAN Free Trade Area
              </h3>
              <p className="text-white/70 text-sm leading-relaxed mb-6">
                The China-ASEAN Free Trade Area (CAFTA) launched on <strong className="text-white">January 1, 2010</strong>, comprising Brunei, Cambodia, Indonesia, Laos, Malaysia, Myanmar, Philippines, Singapore, Thailand, and Vietnam.
              </p>
              <p className="text-white/70 text-sm leading-relaxed">
                Representing a <strong className="text-white">two billion population</strong> market with trade projected to reach <strong className="text-white">one trillion dollars</strong>, CAFTA created an urgent need for cross-border legal frameworks and professional legal cooperation — the founding mandate of CALCC.
              </p>
              <div className="mt-6 grid grid-cols-3 gap-4 pt-6" style={{ borderTop: "1px solid rgba(255,255,255,0.1)" }}>
                {[
                  { v: "10", l: "ASEAN States" },
                  { v: "2B+", l: "Population" },
                  { v: "$1T", l: "Trade Volume" },
                ].map((s) => (
                  <div key={s.l} className="text-center">
                    <div className="font-serif text-2xl font-bold" style={{ color: "#C9A84C" }}>{s.v}</div>
                    <div className="text-white/50 text-xs mt-1">{s.l}</div>
                  </div>
                ))}
              </div>
            </div>

            <div
              className="animate-on-scroll rounded-2xl p-6"
              style={{ background: "#F7F5F2", border: "1px solid rgba(0,0,0,0.06)" }}
            >
              <div className="text-xs font-semibold tracking-widest uppercase mb-4" style={{ color: "#C9A84C" }}>
                Core Objective · 核心目标
              </div>
              <p className="text-charcoal/70 text-sm leading-relaxed">
                <strong className="text-charcoal font-semibold">"Promote China-ASEAN economic and legal cooperation and improve multinational legal service quality"</strong> — establishing CALCC as the definitive platform for cross-border legal excellence across the region.
              </p>
            </div>
          </div>
        </div>

        {/* Four pillars */}
        <div className="mb-20">
          <h3 className="animate-on-scroll font-serif text-2xl font-bold text-charcoal mb-8 text-center">
            What We <span style={{ color: "#2D5FA6" }}>Do</span>
          </h3>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {pillars.map((p, i) => (
              <div
                key={p.title}
                className="animate-scale-in rounded-xl p-6 bg-white transition-shadow duration-200 hover:shadow-md"
                style={{ border: "1px solid rgba(45,95,166,0.1)", transitionDelay: `${i * 80}ms` }}
              >
                <div
                  className="w-11 h-11 rounded-lg flex items-center justify-center mb-4"
                  style={{ background: "rgba(45,95,166,0.08)" }}
                >
                  <p.icon className="w-5 h-5" style={{ color: "#2D5FA6" }} />
                </div>
                <div className="font-serif font-semibold text-charcoal mb-1">{p.title}</div>
                <div className="text-xs mb-3" style={{ color: "#C9A84C" }}>{p.titleZh}</div>
                <div className="text-sm text-charcoal/60 leading-relaxed">{p.desc}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Timeline */}
        <div>
          <h3 className="animate-on-scroll font-serif text-2xl font-bold text-charcoal mb-10 text-center">
            Our <span style={{ color: "#2D5FA6" }}>History</span>
            <span className="block text-sm font-sans font-normal text-charcoal/40 mt-1 tracking-wider">发展历程</span>
          </h3>
          <div className="relative">
            {/* Timeline line */}
            <div
              className="absolute left-24 sm:left-32 top-0 bottom-0 w-px hidden sm:block"
              style={{ background: "linear-gradient(to bottom, transparent, #2D5FA6 10%, #2D5FA6 90%, transparent)" }}
              aria-hidden="true"
            />
            <div className="space-y-6">
              {milestones.map((m, i) => (
                <div
                  key={m.year}
                  className="animate-on-scroll flex gap-6 sm:gap-10 items-start"
                  style={{ transitionDelay: `${i * 50}ms` }}
                >
                  <div className="flex-shrink-0 w-16 sm:w-24 text-right">
                    <span
                      className="font-serif font-bold text-lg sm:text-xl"
                      style={{ color: "#2D5FA6" }}
                    >
                      {m.year}
                    </span>
                  </div>
                  {/* Dot */}
                  <div className="flex-shrink-0 w-3 h-3 rounded-full mt-1.5 hidden sm:block" style={{ background: "#C9A84C" }} aria-hidden="true" />
                  <div
                    className="flex-1 rounded-xl p-4 text-sm text-charcoal/70 leading-relaxed"
                    style={{ background: "#F7F5F2", border: "1px solid rgba(0,0,0,0.05)" }}
                  >
                    {m.event}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}