import { Metadata } from "next";
import Link from "next/link";
import {
  ArrowLeft,
  ArrowRight,
  Eye,
  Target,
  Lightbulb,
  Handshake,
  TrendingUp,
  Star,
  Compass,
} from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

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

const visionElements = [
  {
    icon: Eye,
    titleEn: "Leadership",
    titleAr: "الريادة",
    descEn:
      "To be the leading alumni association in Africa, recognized for our impact, innovation, and commitment to excellence in serving graduates and the community.",
    descAr:
      "أن نكون الرابطة الرائدة في إفريقيا، معترفاً بتأثيرنا وابتكارنا والالتزامنا بالتميز في خدمة الخريجين والمجتمع.",
  },
  {
    icon: Handshake,
    titleEn: "Connection",
    titleAr: "التواصل",
    descEn:
      "Building an unbreakable network of professionals that transcends borders, cultures, and industries across the African continent.",
    descAr:
      "بناء شبكة لا تنفصل من المحترفين تتجاوز الحدود والثقافات والصناعات في جميع أنحاء القارة الأفريقية.",
  },
  {
    icon: Lightbulb,
    titleEn: "Innovation",
    titleAr: "الابتكار",
    descEn:
      "Fostering a culture of innovation and entrepreneurship among alumni, driving economic growth and social development.",
    descAr:
      "تعزيز ثقافة الابتكار وريادة الأعمال بين الخريجين، ودفع عجلة النمو الاقتصادي والتنمية الاجتماعية.",
  },
  {
    icon: TrendingUp,
    titleEn: "Development",
    titleAr: "التنمية",
    descEn:
      "Contributing to sustainable development goals across Africa through education, mentorship, and community service.",
    descAr:
      "المساهمة في أهداف التنمية المستدامة في أفريقيا من خلال التعليم والإرشاد وخدمة المجتمع.",
  },
];

const relatedGoals = [
  {
    icon: Star,
    titleEn: "Excellence in Service",
    titleAr: "التميز في الخدمة",
    descEn:
      "We strive to provide world-class services to our members, ensuring that every interaction adds value to their professional and personal lives.",
    descAr:
      "نسعى لتقديم خدمات على مستوى عالمي لأعضائنا، متأكدين من أن كل تفاعل يضيف قيمة لحياتهم المهنية والشخصية.",
  },
  {
    icon: Compass,
    titleEn: "Strategic Direction",
    titleAr: "التوجه الاستراتيجي",
    descEn:
      "Our vision guides every strategic decision we make, ensuring alignment with our core purpose of serving graduates and the community.",
    descAr:
      "توجّه رؤيتنا كل قرار استراتيجي نتخذه، مما يضمن التوافق مع غايتنا الجوهرية في خدمة الخريجين والمجتمع.",
  },
  {
    icon: Target,
    titleEn: "Measurable Impact",
    titleAr: "تأثير قابل للقياس",
    descEn:
      "We set clear, measurable goals to track our progress toward achieving our vision and making a meaningful difference.",
    descAr:
      "نضع أهدافاً واضحة وقابلة للقياس لتتبع تقدمنا نحو تحقيق رؤيتنا وإحداث فرق حقيقي.",
  },
];

export default async function VisionPage({
  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="vision"
        lang={lang}
        defaultTitle={isArabic ? "رؤيتنا" : "Our Vision"}
        defaultSubtitle={isArabic
          ? "نظرة شاملة نحو المستقبل الذي نسعى إلى تحقيقه"
          : "A comprehensive look toward the future we strive to achieve"}
        gradient="from-emerald-900 via-teal-900 to-slate-900"
      >
        <div className="max-w-3xl mx-auto text-center">
          <Eye 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 Vision"}
          </h1>
          <p className="text-xl md:text-2xl text-emerald-200 max-w-3xl mx-auto">
            {isArabic
              ? "نظرة شاملة نحو المستقبل الذي نسعى إلى تحقيقه"
              : "A comprehensive look toward the future we strive to achieve"}
          </p>
        </div>
      </HeroSection>

      {/* Vision 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">
            <Eye 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 Vision"}
            </h2>
            <p className="text-2xl md:text-3xl text-emerald-100 leading-relaxed font-medium italic">
              {isArabic
                ? "أن نكون الرابطة الرائدة في إفريقيا لخدمة الخريجين والمجتمع"
                : "To be the leading alumni association in Africa serving graduates and the community"}
            </p>
          </div>
        </div>
      </section>

      {/* What the Vision Means */}
      <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 ? "ماذا تعني رؤيتنا" : "What Our Vision Means"}
          </h2>
          <p className="text-emerald-200 text-center max-w-3xl mx-auto mb-12">
            {isArabic
              ? "رؤيتنا هي البوصلة التي توجه عملنا وتخضع لكل ما نفعله"
              : "Our vision is the compass that guides our work and governs everything we do"}
          </p>
          <div className="grid md:grid-cols-2 gap-8">
            {visionElements.map((element) => (
              <div
                key={isArabic ? element.titleAr : element.titleEn}
                className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:bg-white/15 transition-all duration-300"
              >
                <element.icon className="w-12 h-12 text-emerald-400 mb-4" />
                <h3 className="text-2xl font-bold text-white mb-4">
                  {isArabic ? element.titleAr : element.titleEn}
                </h3>
                <p className="text-emerald-100 leading-relaxed">
                  {isArabic ? element.descAr : element.descEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Related Goals */}
      <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 ? "أهداف مرتبطة بالرؤية" : "Related Goals"}
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {relatedGoals.map((goal) => (
              <div
                key={isArabic ? goal.titleAr : goal.titleEn}
                className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/10 text-center"
              >
                <goal.icon className="w-10 h-10 text-emerald-400 mx-auto mb-4" />
                <h3 className="text-xl font-bold text-white mb-3">
                  {isArabic ? goal.titleAr : goal.titleEn}
                </h3>
                <p className="text-emerald-100 text-sm leading-relaxed">
                  {isArabic ? goal.descAr : goal.descEn}
                </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 Mission"}
            </h2>
            <p className="text-emerald-100 text-lg mb-8 max-w-2xl mx-auto">
              {isArabic
                ? "اكتشف كيف نترجم رؤيتنا إلى أفعال حقيقية"
                : "Discover how we translate our vision into real actions"}
            </p>
            <Link
              href={`/${lang}/about/mission`}
              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 Mission"}
              {isArabic ? (
                <ArrowLeft className="w-5 h-5" />
              ) : (
                <ArrowRight className="w-5 h-5" />
              )}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}