import { Metadata } from "next";
import Link from "next/link";
import {
  ArrowLeft,
  ArrowRight,
  Megaphone,
  Users,
  BookOpen,
  Handshake,
  Rocket,
} from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

export const metadata: Metadata = {
  title: "Our Mission | مهمتنا - AIUAG",
  description:
    "Learn about the mission of the Africa International University Alumni Association and our strategic pillars.",
};

const strategicPillars = [
  {
    icon: Users,
    numberEn: "01",
    numberAr: "٠١",
    titleEn: "Connect & Network",
    titleAr: "التواصل والشبكات",
    descriptionEn:
      "Building and maintaining strong professional networks among alumni. We create platforms for meaningful connections that foster collaboration, mentorship, and career advancement opportunities across borders and industries.",
    descriptionAr:
      "بناء وaintenance شبكات مهنية قوية بين الخريجين. نحن نوفر منصات للتواصل الذكي الذي يعزز التعاون والإرشاد وفرص التقدم المهني عبر الحدود والصناعات.",
  },
  {
    icon: BookOpen,
    numberEn: "02",
    numberAr: "٠٢",
    titleEn: "Develop & Empower",
    titleAr: "التطوير والتمكين",
    descriptionEn:
      "Providing continuous professional development opportunities through training programs, workshops, certifications, and educational resources that help alumni stay current and competitive in their fields.",
    descriptionAr:
      "توفير فرص التطوير المهني المستمر من خلال البرامج التدريبية وورش العمل والشهادات والموارد التعليمية التي تساعد الخريجين على مواكبة التطور والمنافسة في مجالاتهم.",
  },
  {
    icon: Handshake,
    numberEn: "03",
    numberAr: "٠٣",
    titleEn: "Serve & Support",
    titleAr: "الخدمة والدعم",
    descriptionEn:
      "Supporting the university development and serving the Sudanese community through impactful projects, charitable initiatives, and volunteer programs that create lasting positive change.",
    descriptionAr:
      "دعم تطوير الجامعة وخدمة المجتمع السوداني من خلال مشاريع مؤثرة ومبادرات خيرية وبرامج تطوعية تحدث تغييراً إيجابياً دائماً.",
  },
  {
    icon: Rocket,
    numberEn: "04",
    numberAr: "٠٤",
    titleEn: "Innovate & Lead",
    titleAr: "الابتكار والقيادة",
    descriptionEn:
      "Fostering innovation and leadership among alumni. We encourage entrepreneurial thinking, support startup ecosystems, and promote thought leadership across the African continent.",
    descriptionAr:
      "تعزيز الابتكار والقيادة بين الخريجين. نحن نشجع التفكير الريادي وندعم منظومات الشركات الناشئة ونروّج لقيادة الفكر في جميع أنحاء القارة الأفريقية.",
  },
];

export default async function MissionPage({
  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="mission"
        lang={lang}
        defaultTitle={isArabic ? "مهمتنا" : "Our Mission"}
        defaultSubtitle={isArabic
          ? "كيف نحوّل رؤيتنا إلى واقع ملموس"
          : "How we turn our vision into tangible reality"}
        gradient="from-emerald-900 via-teal-900 to-slate-900"
      >
        <div className="max-w-3xl mx-auto text-center">
          <Megaphone 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 Mission"}
          </h1>
          <p className="text-xl md:text-2xl text-emerald-200 max-w-3xl mx-auto">
            {isArabic
              ? "كيف نحوّل رؤيتنا إلى واقع ملموس"
              : "How we turn our vision into tangible reality"}
          </p>
        </div>
      </HeroSection>

      {/* Mission Statement */}
      <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 text-center">
            <Megaphone className="w-16 h-16 text-emerald-400 mx-auto mb-6" />
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
              {isArabic ? "المهمة" : "The Mission"}
            </h2>
            <p className="text-2xl md:text-3xl text-emerald-100 leading-relaxed font-medium italic">
              {isArabic
                ? "توفير بيئة محفزة تجمع الخريجين وتعزز الروابط المهنية والاجتماعية بينهم"
                : "To provide a stimulating environment that brings together alumni and strengthens professional and social ties among them"}
            </p>
          </div>
        </div>
      </section>

      {/* Strategic Pillars */}
      <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-4">
            {isArabic ? "الأركان الاستراتيجية" : "Strategic Pillars"}
          </h2>
          <p className="text-emerald-200 text-center max-w-3xl mx-auto mb-12">
            {isArabic
              ? "أربعة أركان أساسية تدعم مهمتنا وتوجه أعمالنا"
              : "Four fundamental pillars that support our mission and guide our work"}
          </p>
          <div className="grid md:grid-cols-2 gap-8">
            {strategicPillars.map((pillar) => (
              <div
                key={pillar.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-center gap-4 mb-6">
                  <div className="w-14 h-14 bg-emerald-500/20 rounded-xl flex items-center justify-center border border-emerald-400/30">
                    <pillar.icon className="w-7 h-7 text-emerald-400" />
                  </div>
                  <div>
                    <span className="text-emerald-400 text-sm font-bold">
                      {isArabic ? pillar.numberAr : pillar.numberEn}
                    </span>
                    <h3 className="text-xl font-bold text-white">
                      {isArabic ? pillar.titleAr : pillar.titleEn}
                    </h3>
                  </div>
                </div>
                <p className="text-emerald-100 leading-relaxed">
                  {isArabic ? pillar.descriptionAr : pillar.descriptionEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How We Achieve */}
      <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">
          <h2 className="text-3xl font-bold text-white text-center mb-12">
            {isArabic
              ? "كيف نحقق مهمتنا"
              : "How We Achieve Our Mission"}
          </h2>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="bg-white/10 rounded-2xl p-6 border border-white/10 text-center">
              <div className="text-4xl font-bold text-emerald-400 mb-3">50+</div>
              <p className="text-white font-medium">
                {isArabic ? "فعالية سنوياً" : "Events Annually"}
              </p>
            </div>
            <div className="bg-white/10 rounded-2xl p-6 border border-white/10 text-center">
              <div className="text-4xl font-bold text-emerald-400 mb-3">10+</div>
              <p className="text-white font-medium">
                {isArabic ? "برامج تدريبية" : "Training Programs"}
              </p>
            </div>
            <div className="bg-white/10 rounded-2xl p-6 border border-white/10 text-center">
              <div className="text-4xl font-bold text-emerald-400 mb-3">5+</div>
              <p className="text-white font-medium">
                {isArabic ? "مشاريع مجتمعية" : "Community Projects"}
              </p>
            </div>
          </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 ? "أهدافنا" : "Our Objectives"}
            </h2>
            <p className="text-emerald-100 text-lg mb-8 max-w-2xl mx-auto">
              {isArabic
                ? "تعرّف على الأهداف المحددة التي نعمل على تحقيقها"
                : "Learn about the specific objectives we work to achieve"}
            </p>
            <Link
              href={`/${lang}/about/objectives`}
              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 Objectives"}
              {isArabic ? (
                <ArrowLeft className="w-5 h-5" />
              ) : (
                <ArrowRight className="w-5 h-5" />
              )}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}