import { useState, useMemo } from "react";
import { useLang } from "@/contexts/LanguageContext";
import SEOHead, { breadcrumbSchema } from "@/components/SEOHead";
import { Button } from "@/components/ui/button";
import { motion, AnimatePresence } from "framer-motion";
import { Link } from "wouter";
import {
  Search, MapPin, BookOpen, Clock, Filter, GraduationCap,
  ArrowLeft, ArrowRight, X, ExternalLink, Eye,
  FlaskConical, Globe, Calendar, Award, Microscope
} from "lucide-react";
import { scholarships as scholarshipData, getScholarshipStatus, getStatusLabelAr, getStatusLabelEn, getStatusColor } from "@/data/scholarshipData";
import { conferences, type Conference } from "@/data/conferenceData";

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: (i: number) => ({
    opacity: 1, y: 0,
    transition: { delay: i * 0.08, duration: 0.5, ease: [0, 0, 0.2, 1] as const }
  }),
};

const countries = ["all", "🇹🇷", "🇬🇧", "🇩🇪", "🇺🇸", "🇲🇾", "🇸🇦", "🇪🇬", "🇭🇺", "🇯🇵", "🇰🇷", "🇶🇦"];
const levels = ["all", "bachelor", "master", "phd"];
const fundings = ["all", "full", "partial"];

type ActiveTab = "scholarships" | "conferences";
type ConferenceType = "all" | "conference" | "grant" | "fellowship";

export default function Scholarships() {
  const { t, lang } = useLang();
  const Arrow = lang === "ar" ? ArrowLeft : ArrowRight;

  const [activeTab, setActiveTab] = useState<ActiveTab>("scholarships");
  const [searchQuery, setSearchQuery] = useState("");
  const [countryFilter, setCountryFilter] = useState("all");
  const [levelFilter, setLevelFilter] = useState("all");
  const [fundingFilter, setFundingFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState<"all" | "closing" | "rolling">("all");
  const [showFilters, setShowFilters] = useState(false);
  const [confTypeFilter, setConfTypeFilter] = useState<ConferenceType>("all");

  // Compute dynamic status for each scholarship
  const scholarshipsWithStatus = useMemo(() => {
    return scholarshipData.map(s => ({
      ...s,
      computedStatus: getScholarshipStatus(s.deadline),
    }));
  }, []);

  const filteredScholarships = useMemo(() => {
    return scholarshipsWithStatus
      .filter((s) => {
        const title = lang === "ar" ? s.titleAr : s.titleEn;
        if (searchQuery && !title.toLowerCase().includes(searchQuery.toLowerCase())) return false;
        if (countryFilter !== "all" && s.flag !== countryFilter) return false;
        if (levelFilter !== "all") {
          const lvl = (lang === "ar" ? s.levelAr : s.levelEn).toLowerCase();
          if (levelFilter === "bachelor" && !lvl.includes("bachelor") && !lvl.includes("بكالوريوس")) return false;
          if (levelFilter === "master" && !lvl.includes("master") && !lvl.includes("ماجستير")) return false;
          if (levelFilter === "phd" && !lvl.includes("phd") && !lvl.includes("دكتوراه")) return false;
        }
        if (fundingFilter !== "all") {
          const fund = (lang === "ar" ? s.fundingAr : s.fundingEn).toLowerCase();
          if (fundingFilter === "full" && !fund.includes("fully") && !fund.includes("بالكامل")) return false;
          if (fundingFilter === "partial" && !fund.includes("partial") && !fund.includes("جزئي")) return false;
        }
        if (statusFilter === "closing" && s.computedStatus !== "closing") return false;
        if (statusFilter === "rolling" && s.deadline !== "rolling") return false;
        return true;
      })
      .sort((a, b) => {
        const order = { closing: 0, open: 1, upcoming: 2, closed: 3 };
        return (order[a.computedStatus] ?? 3) - (order[b.computedStatus] ?? 3);
      });
  }, [searchQuery, countryFilter, levelFilter, fundingFilter, statusFilter, lang, scholarshipsWithStatus]);

  const filteredConferences = useMemo(() => {
    return conferences.filter((c) => {
      const title = lang === "ar" ? c.titleAr : c.titleEn;
      if (searchQuery && !title.toLowerCase().includes(searchQuery.toLowerCase())) return false;
      if (confTypeFilter !== "all" && c.type !== confTypeFilter) return false;
      return true;
    });
  }, [searchQuery, confTypeFilter, lang]);

  const statusColor = (status: string) => getStatusColor(status as any);
  const statusLabel = (status: string) => lang === "ar" ? getStatusLabelAr(status as any) : getStatusLabelEn(status as any);

  const confTypeLabel = (type: string) => {
    if (type === "conference") return t("مؤتمر", "Conference");
    if (type === "grant") return t("منحة بحثية", "Research Grant");
    return t("زمالة", "Fellowship");
  };

  const confTypeIcon = (type: string) => {
    if (type === "conference") return <Globe className="w-4 h-4" />;
    if (type === "grant") return <Award className="w-4 h-4" />;
    return <Microscope className="w-4 h-4" />;
  };

  const confTypeBg = (type: string) => {
    if (type === "conference") return "bg-purple-50 text-purple-700";
    if (type === "grant") return "bg-emerald-50 text-emerald-700";
    return "bg-amber-50 text-amber-700";
  };

  const hasActiveFilters = countryFilter !== "all" || levelFilter !== "all" || fundingFilter !== "all" || statusFilter !== "all";
  const closingCount = scholarshipsWithStatus.filter((s) => s.computedStatus === "closing").length;
  const rollingCount = scholarshipsWithStatus.filter((s) => s.deadline === "rolling").length;

  return (
    <div className="min-h-screen">
      <SEOHead
        title="المنح الدراسية المتاحة | دليلك للإرشاد التعليمي"
        description="تصفح أحدث المنح الدراسية الممولة بالكامل للطلاب العرب. فلترة حسب الدولة والحالة والتخصص مع تفاصيل شاملة لكل منحة."
        canonical="/scholarships"
        keywords="منح دراسية ممولة, منح 2026, منح 2027, دراسة في الخارج, منح للطلاب العرب"
        schema={breadcrumbSchema([
          { name: "الرئيسية", url: "/" },
          { name: "المنح الدراسية", url: "/scholarships" },
        ])}
      />
      {/* Header */}
      <section className="bg-navy py-16 lg:py-20">
        <div className="container">
          <motion.div initial="hidden" animate="visible">
            <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
              {t("قاعدة بيانات المنح والمؤتمرات", "Scholarships & Conferences Database")}
            </motion.span>
            <motion.h1 variants={fadeUp} custom={1} className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mt-3 mb-4">
              {t("المنح والفرص البحثية", "Scholarships & Research Opportunities")}
            </motion.h1>
            <motion.p variants={fadeUp} custom={2} className="text-white/60 text-lg max-w-2xl">
              {t(
                "تصفح أحدث المنح الدراسية والمؤتمرات العلمية والفرص البحثية المتاحة للطلاب والباحثين",
                "Browse the latest scholarships, scientific conferences, and research opportunities for students and researchers."
              )}
            </motion.p>
          </motion.div>

          {/* Tab Switcher */}
          <motion.div variants={fadeUp} custom={3} className="mt-8 flex gap-3">
            <button
              onClick={() => { setActiveTab("scholarships"); setSearchQuery(""); }}
              className={`flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 ${
                activeTab === "scholarships"
                  ? "bg-gold text-navy shadow-lg"
                  : "bg-white/10 text-white/70 hover:bg-white/20"
              }`}
            >
              <GraduationCap className="w-5 h-5" />
              {t("المنح الدراسية", "Scholarships")}
              <span className={`ms-1 px-2 py-0.5 rounded-full text-xs font-bold ${
                activeTab === "scholarships" ? "bg-navy/20 text-navy" : "bg-white/10 text-white/60"
              }`}>
                {scholarshipData.length}
              </span>
            </button>
            <button
              onClick={() => { setActiveTab("conferences"); setSearchQuery(""); }}
              className={`flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300 ${
                activeTab === "conferences"
                  ? "bg-gold text-navy shadow-lg"
                  : "bg-white/10 text-white/70 hover:bg-white/20"
              }`}
            >
              <FlaskConical className="w-5 h-5" />
              {t("المؤتمرات والأبحاث", "Conferences & Research")}
              <span className={`ms-1 px-2 py-0.5 rounded-full text-xs font-bold ${
                activeTab === "conferences" ? "bg-navy/20 text-navy" : "bg-white/10 text-white/60"
              }`}>
                {conferences.length}
              </span>
            </button>
          </motion.div>
        </div>
      </section>

      {/* Search & Filters */}
      <section className="bg-cream py-8 border-b border-border/50 sticky top-16 lg:top-18 z-40">
        <div className="container">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute start-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder={activeTab === "scholarships"
                  ? t("ابحث عن منحة...", "Search scholarships...")
                  : t("ابحث عن مؤتمر أو فرصة بحثية...", "Search conferences & research...")}
                className="w-full ps-12 pe-4 py-3 rounded-xl border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-gold/50 focus:border-gold"
              />
            </div>
            {activeTab === "scholarships" && (
              <Button
                variant="outline"
                onClick={() => setShowFilters(!showFilters)}
                className={`border-border ${hasActiveFilters ? "bg-gold/10 border-gold text-navy" : ""}`}
              >
                <Filter className="w-4 h-4 me-2" />
                {t("تصفية", "Filter")}
                {hasActiveFilters && (
                  <span className="ms-2 w-5 h-5 rounded-full bg-gold text-navy text-xs flex items-center justify-center font-bold">
                    {[countryFilter, levelFilter, fundingFilter].filter(f => f !== "all").length}
                  </span>
                )}
              </Button>
            )}
            {activeTab === "conferences" && (
              <div className="flex gap-2">
                {(["all", "conference", "grant", "fellowship"] as ConferenceType[]).map((type) => (
                  <button
                    key={type}
                    onClick={() => setConfTypeFilter(type)}
                    className={`px-4 py-2.5 rounded-xl text-xs font-semibold transition-all ${
                      confTypeFilter === type
                        ? "bg-navy text-white"
                        : "bg-white border border-border text-muted-foreground hover:border-navy/30"
                    }`}
                  >
                    {type === "all" ? t("الكل", "All") : confTypeLabel(type)}
                  </button>
                ))}
              </div>
            )}
          </div>

          {activeTab === "scholarships" && (
            <div className="mt-3 flex flex-wrap gap-2" aria-label={t("اختصارات حالة الفرص", "Opportunity status shortcuts")}>
              <button
                onClick={() => setStatusFilter(statusFilter === "closing" ? "all" : "closing")}
                className={`rounded-full px-3 py-1.5 text-xs font-semibold transition-colors ${statusFilter === "closing" ? "bg-red-600 text-white" : "border border-red-200 bg-red-50 text-red-700 hover:bg-red-100"}`}
              >
                {t(`تغلق قريباً (${closingCount})`, `Closing soon (${closingCount})`)}
              </button>
              <button
                onClick={() => setStatusFilter(statusFilter === "rolling" ? "all" : "rolling")}
                className={`rounded-full px-3 py-1.5 text-xs font-semibold transition-colors ${statusFilter === "rolling" ? "bg-emerald-700 text-white" : "border border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"}`}
              >
                {t(`تقديم متدرج (${rollingCount})`, `Rolling admission (${rollingCount})`)}
              </button>
              {statusFilter !== "all" && (
                <button onClick={() => setStatusFilter("all")} className="rounded-full px-3 py-1.5 text-xs font-semibold text-muted-foreground hover:text-navy">
                  {t("مسح الحالة", "Clear status")}
                </button>
              )}
            </div>
          )}

          {showFilters && activeTab === "scholarships" && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              className="mt-4 pt-4 border-t border-border/50 grid grid-cols-1 md:grid-cols-3 gap-4"
            >
              <div>
                <label className="text-xs font-medium text-muted-foreground mb-2 block">{t("الدولة", "Country")}</label>
                <select
                  value={countryFilter}
                  onChange={(e) => setCountryFilter(e.target.value)}
                  className="w-full px-3 py-2.5 rounded-lg border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-gold/50"
                >
                  <option value="all">{t("جميع الدول", "All Countries")}</option>
                  {countries.filter(c => c !== "all").map(c => (
                    <option key={c} value={c}>{c} {scholarshipData.find(s => s.flag === c)?.[lang === "ar" ? "countryAr" : "countryEn"]}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="text-xs font-medium text-muted-foreground mb-2 block">{t("المرحلة", "Level")}</label>
                <select
                  value={levelFilter}
                  onChange={(e) => setLevelFilter(e.target.value)}
                  className="w-full px-3 py-2.5 rounded-lg border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-gold/50"
                >
                  <option value="all">{t("جميع المراحل", "All Levels")}</option>
                  <option value="bachelor">{t("بكالوريوس", "Bachelor's")}</option>
                  <option value="master">{t("ماجستير", "Master's")}</option>
                  <option value="phd">{t("دكتوراه", "PhD")}</option>
                </select>
              </div>
              <div>
                <label className="text-xs font-medium text-muted-foreground mb-2 block">{t("التمويل", "Funding")}</label>
                <select
                  value={fundingFilter}
                  onChange={(e) => setFundingFilter(e.target.value)}
                  className="w-full px-3 py-2.5 rounded-lg border border-border bg-white text-sm focus:outline-none focus:ring-2 focus:ring-gold/50"
                >
                  <option value="all">{t("الكل", "All")}</option>
                  <option value="full">{t("ممولة بالكامل", "Fully Funded")}</option>
                  <option value="partial">{t("ممولة جزئياً", "Partially Funded")}</option>
                </select>
              </div>
              {hasActiveFilters && (
                <div className="md:col-span-3">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => { setCountryFilter("all"); setLevelFilter("all"); setFundingFilter("all"); }}
                    className="text-destructive hover:text-destructive"
                  >
                    <X className="w-4 h-4 me-1" />
                    {t("مسح الفلاتر", "Clear Filters")}
                  </Button>
                </div>
              )}
            </motion.div>
          )}
        </div>
      </section>

      {/* Results */}
      <section className="py-12 lg:py-16 bg-cream">
        <div className="container">
          <AnimatePresence mode="wait">
            {activeTab === "scholarships" ? (
              <motion.div key="scholarships" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                <div className="mb-6 text-sm text-muted-foreground">
                  {t(`عرض ${filteredScholarships.length} منحة`, `Showing ${filteredScholarships.length} scholarships`)}
                </div>

                {filteredScholarships.length === 0 ? (
                  <div className="text-center py-20">
                    <GraduationCap className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-navy mb-2">{t("لا توجد نتائج", "No Results")}</h3>
                    <p className="text-muted-foreground text-sm">{t("جرب تغيير معايير البحث", "Try changing your search criteria")}</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {filteredScholarships.map((s, i) => (
                      <motion.div
                        key={s.id}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        variants={fadeUp}
                        custom={i % 4}
                      >
                        <div className={`bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 border border-border/50 group h-full flex flex-col ${s.computedStatus === "closed" ? "opacity-60" : ""}`}>
                          <div className="p-6 flex-1">
                            <div className="flex items-center justify-between mb-4">
                              <div className="flex items-center gap-2">
                                <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${statusColor(s.computedStatus)}`}>
                                  <span className={`w-1.5 h-1.5 rounded-full ${s.computedStatus === "open" ? "bg-green-500" : s.computedStatus === "closing" ? "bg-amber-500" : s.computedStatus === "closed" ? "bg-red-500" : "bg-blue-500"}`} />
                                  {statusLabel(s.computedStatus)}
                                </span>
                                <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${s.fundingAr.includes("بالكامل") ? "bg-gold/10 text-navy" : "bg-muted text-muted-foreground"}`}>
                                  {lang === "ar" ? s.fundingAr : s.fundingEn}
                                </span>
                              </div>
                              <span className="text-2xl">{s.flag}</span>
                            </div>
                            {s.source === "ministry" && (
                              <div className="mb-2">
                                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-50 text-amber-800 border border-amber-200">
                                  📢 {t("إعلان وزارة التعليم العالي", "Ministry of Higher Education")}
                                </span>
                              </div>
                            )}
                            <h3 className="text-lg font-bold text-navy mb-3 group-hover:text-gold transition-colors">
                              {lang === "ar" ? s.titleAr : s.titleEn}
                            </h3>
                            <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
                              {lang === "ar" ? s.descAr : s.descEn}
                            </p>
                            <div className="grid grid-cols-2 gap-3 text-sm text-muted-foreground">
                              <div className="flex items-center gap-2">
                                <MapPin className="w-4 h-4 text-gold shrink-0" />
                                {lang === "ar" ? s.countryAr : s.countryEn}
                              </div>
                              <div className="flex items-center gap-2">
                                <BookOpen className="w-4 h-4 text-gold shrink-0" />
                                {lang === "ar" ? s.levelAr : s.levelEn}
                              </div>
                              <div className="flex items-center gap-2">
                                <GraduationCap className="w-4 h-4 text-gold shrink-0" />
                                {lang === "ar" ? s.fieldAr : s.fieldEn}
                              </div>
                              <div className="flex items-center gap-2">
                                <Clock className="w-4 h-4 text-gold shrink-0" />
                                {s.deadline === "rolling" ? t("التقديم متدرج", "Rolling basis") : s.deadline}
                              </div>
                            </div>
                          </div>
                          <div className="px-6 pb-6 flex gap-3">
                            <Link href={`/scholarships/${s.slug}`} className="flex-1">
                              <Button className="w-full bg-navy hover:bg-navy-light text-white text-sm">
                                {t("عرض التفاصيل", "View Details")}
                                <Eye className="w-4 h-4 ms-2" />
                              </Button>
                            </Link>
                          </div>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}
              </motion.div>
            ) : (
              <motion.div key="conferences" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                <div className="mb-6 text-sm text-muted-foreground">
                  {t(`عرض ${filteredConferences.length} فرصة`, `Showing ${filteredConferences.length} opportunities`)}
                </div>

                {filteredConferences.length === 0 ? (
                  <div className="text-center py-20">
                    <FlaskConical className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-navy mb-2">{t("لا توجد نتائج", "No Results")}</h3>
                    <p className="text-muted-foreground text-sm">{t("جرب تغيير معايير البحث", "Try changing your search criteria")}</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {filteredConferences.map((c, i) => (
                      <motion.div
                        key={c.id}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        variants={fadeUp}
                        custom={i % 6}
                      >
                        <div className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 border border-border/50 group h-full flex flex-col">
                          {/* Conference Image */}
                          <div className="relative h-44 overflow-hidden">
                            <img
                              src={c.image}
                              alt={lang === "ar" ? c.titleAr : c.titleEn}
                              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                            <div className="absolute bottom-3 start-3 flex items-center gap-2">
                              <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${confTypeBg(c.type)}`}>
                                {confTypeIcon(c.type)}
                                {confTypeLabel(c.type)}
                              </span>
                              <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${statusColor(c.status)}`}>
                                <span className={`w-1.5 h-1.5 rounded-full ${c.status === "open" ? "bg-green-500" : c.status === "closing" ? "bg-amber-500" : "bg-blue-500"}`} />
                                {statusLabel(c.status)}
                              </span>
                            </div>
                          </div>

                          <div className="p-5 flex-1 flex flex-col">
                            <h3 className="text-base font-bold text-navy mb-2 group-hover:text-gold transition-colors line-clamp-2">
                              {lang === "ar" ? c.titleAr : c.titleEn}
                            </h3>
                            <p className="text-muted-foreground text-sm mb-4 leading-relaxed line-clamp-2 flex-1">
                              {lang === "ar" ? c.descAr : c.descEn}
                            </p>

                            <div className="space-y-2 text-sm text-muted-foreground mb-4">
                              <div className="flex items-center gap-2">
                                <MapPin className="w-4 h-4 text-gold shrink-0" />
                                <span>{c.flag} {lang === "ar" ? c.locationAr : c.locationEn}</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Calendar className="w-4 h-4 text-gold shrink-0" />
                                <span>{lang === "ar" ? c.dateAr : c.dateEn}</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <FlaskConical className="w-4 h-4 text-gold shrink-0" />
                                <span>{lang === "ar" ? c.fieldAr : c.fieldEn}</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Award className="w-4 h-4 text-gold shrink-0" />
                                <span className="text-xs">{lang === "ar" ? c.fundingAr : c.fundingEn}</span>
                              </div>
                            </div>

                            <div className="flex items-center justify-between pt-3 border-t border-border/50">
                              <div className="text-xs text-muted-foreground">
                                <Clock className="w-3.5 h-3.5 inline me-1" />
                                {t("آخر موعد:", "Deadline:")} {c.deadline}
                              </div>
                              <a href={c.link} target="_blank" rel="noopener noreferrer">
                                <Button size="sm" className="bg-navy hover:bg-navy-light text-white text-xs">
                                  {t("التفاصيل", "Details")}
                                  <ExternalLink className="w-3.5 h-3.5 ms-1.5" />
                                </Button>
                              </a>
                            </div>
                          </div>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}

                {/* Info Banner */}
                <div className="mt-12 bg-navy/5 rounded-2xl p-8 text-center">
                  <FlaskConical className="w-10 h-10 text-gold mx-auto mb-3" />
                  <h3 className="text-lg font-bold text-navy mb-2">
                    {t("هل لديك مؤتمر أو فرصة بحثية؟", "Have a conference or research opportunity?")}
                  </h3>
                  <p className="text-muted-foreground text-sm mb-4 max-w-lg mx-auto">
                    {t(
                      "إذا كنت تعرف مؤتمراً علمياً أو فرصة بحثية متاحة، تواصل معنا لإضافتها إلى القائمة",
                      "If you know of a scientific conference or research opportunity, contact us to add it to the list"
                    )}
                  </p>
                  <Link href="/services">
                    <Button className="bg-gold hover:bg-gold/90 text-navy font-semibold">
                      {t("تواصل معنا", "Contact Us")}
                      <Arrow className="w-4 h-4 ms-2" />
                    </Button>
                  </Link>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </section>

      {/* Internal Links Section */}
      <section className="py-10 bg-white border-t border-border/30">
        <div className="container">
          <div className="max-w-4xl mx-auto">
            <h3 className="text-lg font-bold text-navy mb-4">{t("صفحات مفيدة", "Useful Pages")}</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              <Link href="/blog">
                <div className="p-3 rounded-lg bg-cream border border-border/40 hover:border-gold/40 hover:bg-gold/5 transition-colors cursor-pointer text-center">
                  <span className="text-sm font-medium text-navy">{t("المدونة", "Blog")}</span>
                </div>
              </Link>
              <Link href="/services">
                <div className="p-3 rounded-lg bg-cream border border-border/40 hover:border-gold/40 hover:bg-gold/5 transition-colors cursor-pointer text-center">
                  <span className="text-sm font-medium text-navy">{t("خدماتنا", "Our Services")}</span>
                </div>
              </Link>
              <Link href="/major-analysis">
                <div className="p-3 rounded-lg bg-cream border border-border/40 hover:border-gold/40 hover:bg-gold/5 transition-colors cursor-pointer text-center">
                  <span className="text-sm font-medium text-navy">{t("تحليل التخصص", "Major Analysis")}</span>
                </div>
              </Link>
              <Link href="/faq">
                <div className="p-3 rounded-lg bg-cream border border-border/40 hover:border-gold/40 hover:bg-gold/5 transition-colors cursor-pointer text-center">
                  <span className="text-sm font-medium text-navy">{t("أسئلة شائعة", "FAQ")}</span>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}