import { Metadata } from "next";
import Link from "next/link";
import {
  Calendar,
  Users,
  Target,
  Building2,
  ArrowLeft,
  ArrowRight,
  Heart,
  Globe,
  BookOpen,
  Megaphone,
} from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

export const metadata: Metadata = {
  title: "About AIUAG | من نحن",
  description:
    "Learn about the Africa International University Alumni Association (AIUAG) and our mission to connect graduates and serve the community.",
};

const facts = [
  {
    icon: Calendar,
    numberEn: "2013",
    numberAr: "٢٠١٣",
    labelEn: "Founded",
    labelAr: "سنة التأسيس",
  },
  {
    icon: Users,
    numberEn: "5,000+",
    numberAr: "+٥٬٠٠٠",
    labelEn: "Members",
    labelAr: "عضو",
  },
  {
    icon: Target,
    numberEn: "50+",
    numberAr: "+٥٠",
    labelEn: "Events",
    labelAr: "فعالية",
  },
  {
    icon: Building2,
    numberEn: "20+",
    numberAr: "+٢٠",
    labelEn: "Projects",
    labelAr: "مشروع",
  },
];

const pillars = [
  {
    icon: Heart,
    titleEn: "Vision",
    titleAr: "الرؤية",
    descEn: "To be the leading alumni association in Africa, connecting graduates and serving the community.",
    descAr: "أن نكون الرابطة الرائدة في إفريقيا لخدمة الخريجين والمجتمع، من خلال تعزيز الروابط المهنية والاجتماعية وتقديم الدعم اللازم.",
    href: "vision",
  },
  {
    icon: Megaphone,
    titleEn: "Mission",
    titleAr: "المهمة",
    descEn: "To provide a stimulating environment that brings together alumni and strengthens professional and social ties.",
    descAr: "توفير بيئة محفزة تجمع الخريجين وتعزز الروابط المهنية والاجتماعية بينهم، وتقديم خدمات متنوعة تلبي احتياجاتهم.",
    href: "mission",
  },
  {
    icon: Globe,
    titleEn: "Values",
    titleAr: "القيم",
    descEn: "Excellence, integrity, collaboration, and community service are the core values that guide our association.",
    descAr: "التميز والنزاهة والتعاون وخدمة المجتمع هي القيم الجوهرية التي توجه عملنا ونلتزم بها في كل خطواتنا.",
    href: "objectives",
  },
];

export default async function AboutPage({
  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="about"
        lang={lang}
        defaultTitle={isArabic ? "من نحن" : "About Us"}
        defaultSubtitle={isArabic
          ? "رابطة خريجي الجامعة الدولية الأفريقية في الخرطوم"
          : "Africa International University Alumni Association"}
        gradient="from-emerald-900 via-teal-900 to-slate-900"
      />

      {/* About Description */}
      <section className="py-20 bg-white/5 backdrop-blur-sm">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="prose prose-lg prose-invert max-w-none">
            <div className="bg-white/10 rounded-2xl p-8 md:p-12 border border-white/10">
              <h2 className="text-3xl font-bold text-white mb-6">
                {isArabic ? "عن الرابطة" : "About the Association"}
              </h2>
              {isArabic ? (
                <div className="space-y-4 text-lg text-emerald-100 leading-relaxed">
                  <p>
                    رابطة خريجي الجامعة الدولية الأفريقية (AIUAG) هي منظمة غير ربحية تأسست عام 2013 بمدينة الخرطوم بالسودان، بهدف ربط خريجي الجامعة الدولية الأفريقية وتعزيز الروابط المهنية والاجتماعية بينهم. تسعى الرابطة إلى دعم مشاريع تطوير الجامعة وخدمة المجتمع السوداني من خلال تنظيم الفعاليات والبرامج المختلفة التي ت katkı في بناء قدرات الخريجين وتوسيع آفاقهم المهنية.
                  </p>
                  <p>
                    منذ تأسيسها، قامت الرابطة بتنظيم أكثر من 50 فعالية ومؤتمر، شملت ورش عمل تدريبية، ومحاضرات متخصصة، وبرامج إرشاد مهني، وأنشطة تطوعية تخدم المجتمع المحلي. تضم الرابطة أكثر من 5000 عضو من خريجي الجامعة يعملون في مختلف القطاعات والمناطق الجغرافية.
                  </p>
                  <p>
                    تؤمن الرابطة بأن الخريجين هم سفراء الجامعة وأفضل من يمثل قيمها ورسالتها، ولذلك تسعى دائماً إلى توفير بيئة محفزة تتيح لهم تبادل الخبرات وبناء شراكات مهنية من شأنها تعزيز مسيرتهم المهنية والشخصية. كما تهدف إلى المساهمة في التنمية المستدامة للسودان من خلال مشاريع وبرامج خدمة المجتمع.
                  </p>
                </div>
              ) : (
                <div className="space-y-4 text-lg text-emerald-100 leading-relaxed">
                  <p>
                    The Africa International University Alumni Association (AIUAG) is a non-profit organization established in 2013 in Khartoum, Sudan, with the aim of connecting graduates of Africa International University and strengthening professional and social ties among them. The association seeks to support university development projects and serve the Sudanese community through organizing various events and programs that contribute to building graduates&apos; capabilities and expanding their professional horizons.
                  </p>
                  <p>
                    Since its establishment, the association has organized more than 50 events and conferences, including training workshops, specialized lectures, professional mentoring programs, and volunteer community service activities. The association has more than 5,000 members who are graduates of the university working in various sectors and geographic regions.
                  </p>
                  <p>
                    The association believes that graduates are ambassadors of the university and the best representatives of its values and mission, and therefore it always seeks to provide a stimulating environment that allows them to exchange experiences and build professional partnerships that enhance their professional and personal journey. It also aims to contribute to the sustainable development of Sudan through community service projects and programs.
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Key Facts Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-white text-center mb-12">
            {isArabic ? "حقائق عن الرابطة" : "Key Facts"}
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {facts.map((fact) => (
              <div
                key={isArabic ? fact.labelAr : fact.labelEn}
                className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 text-center border border-white/10 hover:bg-white/15 transition-all duration-300"
              >
                <fact.icon className="w-10 h-10 text-emerald-400 mx-auto mb-4" />
                <div className="text-3xl md:text-4xl font-bold text-white mb-2">
                  {isArabic ? fact.numberAr : fact.numberEn}
                </div>
                <div className="text-emerald-300 text-sm">
                  {isArabic ? fact.labelAr : fact.labelEn}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Vision / Mission / Values */}
      <section className="py-20 bg-white/5 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-white text-center mb-12">
            {isArabic ? "الأساس الذي نستند إليه" : "Our Foundation"}
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {pillars.map((pillar) => (
              <Link
                key={pillar.href}
                href={`/${lang}/about/${pillar.href}`}
                className="group bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:bg-white/15 transition-all duration-300 hover:scale-105"
              >
                <pillar.icon className="w-12 h-12 text-emerald-400 mb-4" />
                <h3 className="text-2xl font-bold text-white mb-4">
                  {isArabic ? pillar.titleAr : pillar.titleEn}
                </h3>
                <p className="text-emerald-100 leading-relaxed mb-4">
                  {isArabic ? pillar.descAr : pillar.descEn}
                </p>
                <div className="flex items-center text-emerald-400 group-hover:text-emerald-300 transition-colors">
                  <span className="text-sm font-medium">
                    {isArabic ? "اقرأ المزيد" : "Learn More"}
                  </span>
                  {isArabic ? (
                    <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
                  ) : (
                    <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  )}
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20">
        <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">
            <BookOpen className="w-16 h-16 text-white/80 mx-auto mb-6" />
            <h2 className="text-3xl font-bold text-white mb-4">
              {isArabic
                ? "اكتشف تاريخنا"
                : "Discover Our History"}
            </h2>
            <p className="text-emerald-100 text-lg mb-8 max-w-2xl mx-auto">
              {isArabic
                ? "تعرف على أهم المحطات والأحداث التي شكلت مسيرة الرابطة منذ تأسيسها"
                : "Learn about the key milestones and events that have shaped our association since its founding"}
            </p>
            <Link
              href={`/${lang}/about/history`}
              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 ? "تاريخنا" : "Our History"}
              {isArabic ? (
                <ArrowLeft className="w-5 h-5" />
              ) : (
                <ArrowRight className="w-5 h-5" />
              )}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}