import { Metadata } from "next";
import Link from "next/link";
import {
  ArrowLeft,
  ArrowRight,
  Calendar,
  Flag,
  Users,
  Globe,
  Award,
  MapPin,
  TrendingUp,
} from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

export const metadata: Metadata = {
  title: "Our History | تاريخنا - AIUAG",
  description:
    "Learn about the history and milestones of the Africa International University Alumni Association.",
};

const milestones = [
  {
    year: "2013",
    yearAr: "٢٠١٣",
    icon: Flag,
    titleEn: "Association Founded",
    titleAr: "تأسيس الرابطة",
    descriptionEn:
      "The Africa International University Alumni Association was officially established in Khartoum, Sudan, with a founding group of 200 passionate alumni dedicated to connecting graduates and serving the university community.",
    descriptionAr:
      "تم تأسيس رابطة خريجي الجامعة الدولية الأفريقية رسمياً في الخرطوم، السودان، من مجموعة مؤسسة مكونة من 200 خريج شغوف مكرس لربط الخريجين وخدمة مجتمع الجامعة.",
  },
  {
    year: "2015",
    yearAr: "٢٠١٥",
    icon: Users,
    titleEn: "First Alumni Conference",
    titleAr: "أول مؤتمر للخريجين",
    descriptionEn:
      "The first alumni conference was held, bringing together over 500 graduates from various fields. The conference featured workshops, panel discussions, and networking opportunities that set the tone for future gatherings.",
    descriptionAr:
      "أُقيم أول مؤتمر للخريجين، حيث شهد حضور أكثر من 500 خريج من مختلف المجالات. شمل المؤتمر ورش عمل ومناقشات م.panel opportunities opportunities opportunities for networking opportunities and professional development.",
  },
  {
    year: "2018",
    yearAr: "٢٠١٨",
    icon: Globe,
    titleEn: "Mentoring Program Launch",
    titleAr: "إطلاق برنامج الإرشاد",
    descriptionEn:
      "The association launched its flagship mentoring program, connecting experienced professionals with recent graduates. The program has since helped over 1,000 young professionals navigate their career paths.",
    descriptionAr:
      "أطلقت الرابطة برنامجها الرئيسي للإرشاد، الذي يربط المحترفين ذوي الخبرة بالخريجين الجدد. ساعد البرنامج منذ ذلك الحين أكثر من 1000 محترف شاب في تخطيط مساراتهم المهنية.",
  },
  {
    year: "2020",
    yearAr: "٢٠٢٠",
    icon: TrendingUp,
    titleEn: "Membership Expansion",
    titleAr: "توسيع العضوية",
    descriptionEn:
      "Despite global challenges, the association expanded its membership to over 3,000 members, with alumni joining from across Africa and the Middle East. Digital platforms were adopted to maintain connections.",
    descriptionAr:
      "على الرغم من التحديات العالمية، وسعت الرابطة عضويتها لتتجاوز 3000 عضو، مع انضمام خريجين من جميع أنحاء إفريقيا والشرق الأوسط. تم اعتماد المنصات الرقمية للحفاظ على التواصل.",
  },
  {
    year: "2023",
    yearAr: "٢٠٢٣",
    icon: Award,
    titleEn: "5th Conference",
    titleAr: "المؤتمر الخامس",
    descriptionEn:
      "The 5th alumni conference was the largest yet, with over 1,500 attendees. The event included international speakers, research presentations, and the launch of the alumni business network.",
    descriptionAr:
      "كان المؤتمر الخامس هو الأكبر حتى الآن، بمشاركة أكثر من 1500 شخص. شمل الحدث متحدثين دوليين وعروض أبحاث وإطلاق شبكة أعمال الخريجين.",
  },
  {
    year: "2025",
    yearAr: "٢٠٢٥",
    icon: MapPin,
    titleEn: "Africa Development Forum",
    titleAr: "ملتقى أفريقيا للتنمية",
    descriptionEn:
      "The association organized the inaugural Africa Development Forum, bringing together alumni leaders, policymakers, and development experts to discuss sustainable development across the continent.",
    descriptionAr:
      "نظّمت الرابطة الملتقى الأول لأفريقيا للتنمية، بمشاركة قادة الخريجين وصنّاع السياسات وخبراء التنمية لمناقشة التنمية المستدامة في القارة.",
  },
  {
    year: "2026",
    yearAr: "٢٠٢٦",
    icon: Calendar,
    titleEn: "Regional Expansion",
    titleAr: "التوسع الإقليمي",
    descriptionEn:
      "The association begins its regional expansion plan, establishing chapters in multiple African countries to better serve the growing diaspora of AIU graduates across the continent.",
    descriptionAr:
      "تبدأ الرابطة خطتها للتوسع الإقليمي، بإنشاء فروع في عدة دول أفريقية لخدمة أعداد المتزايدة من خريجي الجامعة المنتشرين في جميع أنحاء القارة.",
  },
];

export default async function HistoryPage({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const isArabic = lang === "ar";

  return (
    <main className="min-h-screen bg-gradient-to-br from-emerald-900 via-teal-900 to-slate-900">
      <HeroSection
        pageSlug="history"
        lang={lang}
        defaultTitle={isArabic ? "تاريخنا" : "Our History"}
        defaultSubtitle={isArabic
          ? "رحلة عبر الزمن مع أهم المحطات التي شكّلت مسيرة الرابطة"
          : "A journey through time with the key milestones that shaped our association"}
        gradient="from-emerald-900 via-teal-900 to-slate-900"
      />

      {/* Timeline Section */}
      <section className="py-20">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="relative">
            {/* Vertical Line */}
            <div className="absolute left-1/2 -translate-x-1/2 w-1 h-full bg-gradient-to-b from-emerald-400 to-teal-400 hidden md:block" />

            <div className="space-y-16">
              {milestones.map((milestone, index) => {
                const isEven = index % 2 === 0;
                return (
                  <div
                    key={milestone.year}
                    className={`relative flex items-center ${
                      isArabic
                        ? isEven
                          ? "md:flex-row-reverse"
                          : "md:flex-row"
                        : isEven
                        ? "md:flex-row"
                        : "md:flex-row-reverse"
                    }`}
                  >
                    {/* Center dot */}
                    <div className="absolute left-1/2 -translate-x-1/2 w-14 h-14 bg-emerald-500 rounded-full flex items-center justify-center z-10 border-4 border-emerald-300 hidden md:flex">
                      <milestone.icon className="w-7 h-7 text-white" />
                    </div>

                    {/* Content Card */}
                    <div
                      className={`w-full md:w-5/12 ${
                        isArabic
                          ? isEven
                            ? "md:pr-16"
                            : "md:pl-16"
                          : isEven
                          ? "md:pl-16"
                          : "md:pr-16"
                      }`}
                    >
                      <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:bg-white/15 transition-all duration-300">
                        <div className="flex items-center gap-3 mb-4">
                          <milestone.icon className="w-8 h-8 text-emerald-400 md:hidden" />
                          <span className="text-3xl font-bold text-emerald-400">
                            {isArabic ? milestone.yearAr : milestone.year}
                          </span>
                        </div>
                        <h3 className="text-2xl font-bold text-white mb-4">
                          {isArabic ? milestone.titleAr : milestone.titleEn}
                        </h3>
                        <p className="text-emerald-100 leading-relaxed">
                          {isArabic
                            ? milestone.descriptionAr
                            : milestone.descriptionEn}
                        </p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-white/5 backdrop-blur-sm">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-gradient-to-r from-emerald-600 to-teal-600 rounded-3xl p-12">
            <h2 className="text-3xl font-bold text-white mb-4">
              {isArabic
                ? "انضم إلى رحلتنا"
                : "Join Our Journey"}
            </h2>
            <p className="text-emerald-100 text-lg mb-8 max-w-2xl mx-auto">
              {isArabic
                ? "كن جزءاً من قصة نجاحنا وساهم في كتابة فصلنا التالي"
                : "Be part of our success story and help write our next chapter"}
            </p>
            <Link
              href={`/${lang}/about`}
              className="inline-flex items-center gap-2 bg-white text-emerald-700 px-8 py-3 rounded-full font-bold hover:bg-emerald-50 transition-colors"
            >
              {isArabic ? "من نحن" : "About Us"}
              {isArabic ? (
                <ArrowLeft className="w-5 h-5" />
              ) : (
                <ArrowRight className="w-5 h-5" />
              )}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}