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

export const metadata: Metadata = {
  title: "Our Objectives | أهدافنا - AIUAG",
  description:
    "Learn about the eight strategic objectives of the Africa International University Alumni Association.",
};

const objectives = [
  {
    icon: Users,
    numberEn: "01",
    numberAr: "٠١",
    titleEn: "Unite Alumni Under One Organization",
    titleAr: "توحيد الخريجين تحت مظلة منظمة",
    descriptionEn:
      "To unite all graduates of Africa International University under one umbrella organization that represents their interests, amplifies their voice, and provides a platform for collective action and mutual support.",
    descriptionAr:
      "توحيد جميع خريجي الجامعة الدولية الأفريقية تحت مظلة منظمة واحدة تمثل مصالحهم ويعظم صوتها ويوفر منصة للعمل الجماعي والدعم المتبادل.",
  },
  {
    icon: Building2,
    numberEn: "02",
    numberAr: "٠٢",
    titleEn: "Support University Development Projects",
    titleAr: "دعم مشاريع تطوير الجامعة",
    descriptionEn:
      "To actively contribute to and support development projects at Africa International University, including infrastructure improvement, academic program enhancement, and research facility upgrades.",
    descriptionAr:
      "المساهمة الفعّالة في ودعم مشاريع التحسين في الجامعة الدولية الأفريقية، بما في ذلك تحسين البنية التحتية وتطوير البرامج الأكاديمية وتحسين مرافق البحث العلمي.",
  },
  {
    icon: Calendar,
    numberEn: "03",
    numberAr: "٠٣",
    titleEn: "Organize Events and Conferences",
    titleAr: "تنظيم فعاليات ومؤتمرات",
    descriptionEn:
      "To organize regular alumni gatherings, professional conferences, workshops, and networking events that bring together graduates from different years and fields for knowledge sharing and collaboration.",
    descriptionAr:
      "تنظيم لقاءات منتظمة للخريجين ومؤتمرات مهنية وورش عمل وأحداث التواصل التي تجمع الخريجين من السنوات المختلفة والمجالات المختلفة لتبادل المعرفة والتعاون.",
  },
  {
    icon: Globe,
    numberEn: "04",
    numberAr: "٠٤",
    titleEn: "Build International Partnerships",
    titleAr: "بناء شراكات دولية",
    descriptionEn:
      "To establish strategic partnerships with international alumni associations, academic institutions, and professional organizations to expand opportunities for members and enhance the association's global reach.",
    descriptionAr:
      "إنشاء شراكات استراتيجية مع جمعيات الخريجين الدولية والمؤسسات الأكاديمية والمنظمات المهنية لتوسيع الفرص للأعضاء وتعزيز التأثير العالمي للرابطة.",
  },
  {
    icon: Database,
    numberEn: "05",
    numberAr: "٠٥",
    titleEn: "Create Alumni Database",
    titleAr: "إنشاء قاعدة بيانات للخريجين",
    descriptionEn:
      "To develop and maintain a comprehensive alumni database that facilitates communication, enables networking, and supports research and outreach initiatives across the alumni community.",
    descriptionAr:
      "تطوير وإدارة قاعدة بيانات شاملة للخريجين تتيح التواصل وتمكّن الشبكات وتدعم مبادرات البحث والتواصل في مجتمع الخريجين.",
  },
  {
    icon: FileText,
    numberEn: "06",
    numberAr: "٠٦",
    titleEn: "Publish Reports and Research",
    titleAr: "نشر التقارير والأبحاث",
    descriptionEn:
      "To produce and publish regular reports, research papers, and publications that document alumni achievements, community needs, and best practices in alumni engagement and community development.",
    descriptionAr:
      "إعداد ونشر تقارير منتظمة وأوراق بحثية ومواد نشرية توثق إنجازات الخريجين واحتياجات المجتمع وأفضل الممارسات في التفاعل مع الخريجين وتنمية المجتمع.",
  },
  {
    icon: Briefcase,
    numberEn: "07",
    numberAr: "٠٧",
    titleEn: "Facilitate Professional Development",
    titleAr: "تسهيل التطوير المهني",
    descriptionEn:
      "To provide career development resources, mentoring programs, skills training, and employment opportunities that help alumni advance professionally and achieve their career goals.",
    descriptionAr:
      "توفير موارد التطوير المهني وبرامج الإرشاد والتدريب على المهnicas وفرص العمل التي تساعد الخريجين على التقدم المهني وتحقيق أهدافهم المهنية.",
  },
  {
    icon: Heart,
    numberEn: "08",
    numberAr: "٠٨",
    titleEn: "Serve the Sudanese Community",
    titleAr: "خدمة المجتمع السوداني",
    descriptionEn:
      "To engage in community service activities and initiatives that address social challenges, promote education, and contribute to the sustainable development of Sudan and its people.",
    descriptionAr:
      "المشاركة في أنشطة ومبادرات خدمة المجتمع التي تتناول التحديات الاجتماعية وتعزز التعليم وتساهم في التنمية المستدامة للسودان وشعبه.",
  },
];

export default async function ObjectivesPage({
  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="objectives"
        lang={lang}
        defaultTitle={isArabic ? "أهدافنا" : "Our Objectives"}
        defaultSubtitle={isArabic
          ? "ثمانية أهداف استراتيجية تقود عملنا وتحدد مسارنا"
          : "Eight strategic objectives that drive our work and define our path"}
        gradient="from-emerald-900 via-teal-900 to-slate-900"
      >
        <div className="max-w-3xl mx-auto text-center">
          <Target className="w-16 h-16 text-emerald-400 mx-auto mb-6" />
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
            {isArabic ? "أهدافنا" : "Our Objectives"}
          </h1>
          <p className="text-xl md:text-2xl text-emerald-200 max-w-3xl mx-auto">
            {isArabic
              ? "ثمانية أهداف استراتيجية تقود عملنا وتحدد مسارنا"
              : "Eight strategic objectives that drive our work and define our path"}
          </p>
        </div>
      </HeroSection>

      {/* Objectives Grid */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-8">
            {objectives.map((objective) => (
              <div
                key={objective.numberEn}
                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-start gap-4">
                  <div className="w-14 h-14 bg-emerald-500/20 rounded-xl flex items-center justify-center border border-emerald-400/30 flex-shrink-0">
                    <objective.icon className="w-7 h-7 text-emerald-400" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-3">
                      <span className="text-emerald-400 text-sm font-bold">
                        {isArabic ? objective.numberAr : objective.numberEn}
                      </span>
                    </div>
                    <h3 className="text-xl font-bold text-white mb-3">
                      {isArabic ? objective.titleAr : objective.titleEn}
                    </h3>
                    <p className="text-emerald-100 leading-relaxed text-sm">
                      {isArabic
                        ? objective.descriptionAr
                        : objective.descriptionEn}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Summary Section */}
      <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="bg-gradient-to-r from-emerald-600/20 to-teal-600/20 rounded-3xl p-12 border border-emerald-400/30">
            <h2 className="text-3xl font-bold text-white text-center mb-6">
              {isArabic
                ? "أهدافنا في خدمة رؤيتنا"
                : "Our Objectives Serve Our Vision"}
            </h2>
            <p className="text-emerald-100 text-center leading-relaxed max-w-3xl mx-auto text-lg">
              {isArabic
                ? "هذه الأهداف الثمانية هي الأعمدة التي تستند إليها كل أنشطةنا ومبادراتنا. من خلال العمل على تحقيقها، نساهم في بناء مستقبل أفضل للخريجين والمجتمع السوداني. ندعوك للانضمام إلينا ومساهمتنا في تحقيق هذه الأهداف النبيلة."
                : "These eight objectives are the pillars upon which all our activities and initiatives rest. By working to achieve them, we contribute to building a better future for graduates and the Sudanese community. We invite you to join us and contribute to achieving these noble goals."}
            </p>
          </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">
            <h2 className="text-3xl font-bold text-white mb-4">
              {isArabic ? "هل تريد أن تعرف المزيد؟" : "Want to Learn More?"}
            </h2>
            <p className="text-emerald-100 text-lg mb-8 max-w-2xl mx-auto">
              {isArabic
                ? "استكشف أقسامنا الأخرى للاطلاع على المزيد من التفاصيل عن الرابطة"
                : "Explore our other sections to learn more about the association"}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                href={`/${lang}/about`}
                className="inline-flex items-center justify-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>
              <Link
                href={`/${lang}/about/mission`}
                className="inline-flex items-center justify-center gap-2 bg-emerald-700 text-white px-8 py-3 rounded-full font-bold hover:bg-emerald-600 transition-colors border border-emerald-500"
              >
                {isArabic ? "مهمتنا" : "Our Mission"}
                {isArabic ? (
                  <ArrowLeft className="w-5 h-5" />
                ) : (
                  <ArrowRight className="w-5 h-5" />
                )}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}