import { useState, useEffect } from "react";
import { useLang } from "@/contexts/LanguageContext";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { motion } from "framer-motion";
import {
  GraduationCap, Search, FileText, Users, ArrowLeft, ArrowRight,
  Clock, MapPin, ChevronLeft, ChevronRight, BookOpen, Compass, Handshake, Globe, ChevronDown
} from "lucide-react";
import { scholarships as allScholarships, getScholarshipStatus, getStatusLabelAr, getStatusLabelEn, getStatusColor } from "@/data/scholarshipData";
import { STATS, SITE_CONFIG, FOUNDER } from "@/lib/siteConfig";
import SEOHead, { breadcrumbSchema, faqSchema } from "@/components/SEOHead";
import { SummaryBox } from "@/components/AEOBlocks";

const HERO_BG = "https://d2xsxph8kpxj0f.cloudfront.net/87335511/7PsWYS5ZWJsd2Z3AdAwBnX/hero-bg-dJXFsAYTTDybjFoj9whsr2.webp";
const SCHOLARSHIP_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/87335511/7PsWYS5ZWJsd2Z3AdAwBnX/scholarship-section-iFi4HK77GGTbEXnsFQGYsa.webp";
const MAJOR_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/87335511/7PsWYS5ZWJsd2Z3AdAwBnX/major-analysis-homepage-v2-hKB5FK7d8zEFipzanpmxdd.webp";
const SERVICES_BG = "https://d2xsxph8kpxj0f.cloudfront.net/87335511/7PsWYS5ZWJsd2Z3AdAwBnX/services-bg-LhMfWKhs3rPLTYmktYxLua.webp";

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

function FAQItem({ question, answer, index }: { question: string; answer: string; index: number }) {
  const [open, setOpen] = useState(false);
  return (
    <motion.div
      variants={fadeUp}
      custom={index}
      className="bg-white rounded-xl border border-border/50 overflow-hidden"
    >
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between p-5 text-start gap-4"
      >
        <span className="font-semibold text-navy text-sm md:text-base">{question}</span>
        <ChevronDown className={`w-5 h-5 text-muted-foreground shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
      </button>
      {open && (
        <div className="px-5 pb-5 -mt-1">
          <p className="text-muted-foreground text-sm leading-relaxed">{answer}</p>
        </div>
      )}
    </motion.div>
  );
}

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

  // Homepage FAQ data for schema and rendering
  const homeFAQs = [
    {
      q: t("ما هي منصة دليلك؟", "What is Dalilak?"),
      a: t(
        "دليلك منصة إرشاد تعليمية تساعد الطلاب على اختيار التخصص المناسب، العثور على فرص تعليمية ومنح ممولة، وتجهيز ملفات التقديم للدراسة في الخارج بدعم من خبراء متخصصين.",
        "Dalilak is an educational guidance platform that helps students choose the right major, find funded scholarships, and prepare strong applications for studying abroad with expert support."
      ),
    },
    {
      q: t("كيف يساعدني دليلك في اختيار التخصص أو التقديم على المنح؟", "How does Dalilak help with choosing a major or applying for scholarships?"),
      a: t(
        "نقدم أداة تحليل تخصص مجانية، قاعدة بيانات منح محدثة، استشارات شخصية عبر Zoom، وخدمات كتابة رسالة الدافع والسيرة الذاتية ومراجعة ملفات التقديم.",
        "We offer a free major analysis tool, an updated scholarship database, personal Zoom consultations, and services for writing motivation letters, CVs, and reviewing application files."
      ),
    },
    {
      q: t("من يمكنه الاستفادة من خدمات دليلك؟", "Who can benefit from Dalilak's services?"),
      a: t(
        "خدماتنا متاحة لجميع الطلاب العرب بغض النظر عن الجنسية. نساعد طلاب من اليمن والسعودية ومصر والأردن والعراق وسوريا وغيرها.",
        "Our services are available to all Arab students regardless of nationality. We help students from Yemen, Saudi Arabia, Egypt, Jordan, Iraq, Syria, and more."
      ),
    },
    {
      q: t("كيف تتم الاستشارة التعليمية؟", "How does the educational consultation work?"),
      a: t(
        "الاستشارة تتم عبر Zoom لمدة 45 دقيقة مع مستشار تعليمي متخصص. يمكنك مناقشة اختيار التخصص، استراتيجية التقديم، أو أي سؤال أكاديمي.",
        "The consultation is via Zoom for 45 minutes with a specialized educational advisor. You can discuss major selection, application strategy, or any academic question."
      ),
    },
    {
      q: t("هل يضمن دليلك القبول أو الحصول على منحة؟", "Does Dalilak guarantee admission or a scholarship?"),
      a: t(
        "لا يضمن دليلك القبول في جامعة أو الحصول على منحة أو تأشيرة، لكنه يساعد الطالب على تحسين جودة ملفه وفهم خطوات التقديم بوضوح.",
        "Dalilak does not guarantee admission to a university, a scholarship, or a visa. However, it helps students improve their application quality and understand the steps clearly."
      ),
    },
    {
      q: t("كيف يمكنني التواصل أو حجز خدمة؟", "How can I contact Dalilak or book a service?"),
      a: t(
        "يمكن التواصل مع فريق دليلك عبر البريد الإلكتروني info@dalilks.com أو من خلال صفحة الخدمات. نرد عادة خلال 24 ساعة.",
        "You can contact the Dalilak team via email at info@dalilks.com or through the services page after completing payment. We usually respond within 24 hours."
      ),
    },
  ];

  const homeFAQSchema = faqSchema(homeFAQs.map(f => ({ question: f.q, answer: f.a })));

  return (
    <div className="min-h-screen">
      <SEOHead
        title="دليلك | منصة إرشاد تعليمي ومنح دراسية للطلاب العرب"
        description="دليلك منصة إرشاد تعليمية تساعد الطلاب العرب على اختيار التخصص المناسب والحصول على منح دراسية ممولة بالكامل مع دعم خبراء متخصصين."
        canonical="/"
        keywords="منح دراسية, تحليل تخصص, دراسة في الخارج, إرشاد تعليمي, scholarships, study abroad"
        schema={homeFAQSchema}
      />

      {/* ===== HERO ===== */}
      <section
        className="relative min-h-[90vh] flex items-center overflow-hidden"
        style={{ backgroundImage: `url(${HERO_BG})`, backgroundSize: "cover", backgroundPosition: "center" }}
      >
        <div className="absolute inset-0 bg-gradient-to-b from-[#1B2A4A]/80 via-[#1B2A4A]/60 to-[#1B2A4A]/90" />
        <div className="container relative z-10 py-24 lg:py-32">
          <motion.div
            initial="hidden"
            animate="visible"
            className="max-w-3xl"
          >
            <motion.div variants={fadeUp} custom={0} className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/10 mb-6">
              <GraduationCap className="w-4 h-4 text-gold" />
              <span className="text-white/80 text-sm font-medium">{t("إرشاد تعليمي متخصص", "Specialized Educational Guidance")}</span>
            </motion.div>

            <motion.h1 variants={fadeUp} custom={1} className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight mb-6">
              {t("دليلك لاختيار التخصص،", "Your Guide to Choosing a Major,")}
              <span className="text-gold">{t(" العثور على المنح، وتجهيز ملفك بثقة", " Finding Scholarships, and Preparing Your Application with Confidence")}</span>
            </motion.h1>

            <motion.p variants={fadeUp} custom={2} className="text-lg md:text-xl text-white/70 leading-relaxed mb-8 max-w-2xl">
              {t(
                "منصة إرشاد تعليمية تساعد الطلاب على استكشاف التخصصات المناسبة، الوصول إلى فرص تعليمية ومنح ممولة، وتجهيز ملفات تقديم قوية بدعم من خبراء متخصصين.",
                "An educational guidance platform helping students explore suitable majors, access funded scholarships, and prepare strong applications with expert support."
              )}
            </motion.p>

            <motion.div variants={fadeUp} custom={3} className="flex flex-wrap gap-4">
              <Link href="/major-analysis">
                <Button size="lg" className="gold-gradient text-navy font-bold text-base px-8 py-6 hover:opacity-90 transition-opacity shadow-lg">
                  {t("ابدأ تحليل التخصص", "Start Major Analysis")}
                  <Arrow className="w-5 h-5 ms-2" />
                </Button>
              </Link>
              <Link href="/services">
                <Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 font-medium text-base px-8 py-6">
                  {t("تصفح خدماتنا", "Browse Our Services")}
                </Button>
              </Link>
            </motion.div>

            {/* Stats */}
            <motion.div variants={fadeUp} custom={4} className="flex flex-wrap gap-8 mt-12 pt-8 border-t border-white/10">
              {[
                { num: STATS.scholarships.num, label: t(STATS.scholarships.labelAr, STATS.scholarships.labelEn) },
                { num: STATS.majors.num, label: t(STATS.majors.labelAr, STATS.majors.labelEn) },
                { num: STATS.students.num, label: t(STATS.students.labelAr, STATS.students.labelEn) },
              ].map((stat) => (
                <div key={stat.label}>
                  <div className="text-2xl md:text-3xl font-bold text-gold">{stat.num}</div>
                  <div className="text-white/50 text-sm mt-1">{stat.label}</div>
                </div>
              ))}
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* ===== AI-READABLE SUMMARY ===== */}
      <section className="py-8 bg-cream">
        <div className="container max-w-4xl">
          <SummaryBox title={t("ملخص عن دليلك", "About Dalilak")}>
            <p>{t(
              "دليلك منصة إرشاد تعليمية تساعد الطلاب على اختيار التخصص المناسب، العثور على فرص تعليمية ومنح ممولة، وتجهيز ملفات التقديم للدراسة في الخارج بدعم من خبراء متخصصين. تشمل الخدمات: تحليل التخصص، الاستشارات التعليمية عبر Zoom، كتابة رسالة الدافع والسيرة الذاتية، وباقات الدراسة في كندا. التواصل عبر البريد الإلكتروني info@dalilks.com أو صفحة الخدمات.",
              "Dalilak is an educational guidance platform that helps students choose the right major, find funded scholarships, and prepare strong applications for studying abroad with expert consultant support. Services include: major analysis, Zoom consultations, motivation letter and CV writing, and Study in Canada packages. Contact via email info@dalilks.com or the Services page."
            )}</p>
          </SummaryBox>
        </div>
      </section>

      {/* ===== HOW IT WORKS ===== */}
      <section className="py-20 lg:py-28 bg-cream">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, margin: "-100px" }} className="text-center mb-16">
            <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
              {t("كيف يعمل دليلك", "How Dalilak Works")}
            </motion.span>
            <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-bold text-navy mt-3">
              {t("ثلاث خطوات نحو مستقبلك", "Three Steps to Your Future")}
            </motion.h2>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12">
            {[
              {
                icon: Compass,
                step: "01",
                title: t("اكتشف", "Discover"),
                desc: t("اكتشف تخصصك المثالي من خلال أداة تحليل التخصص المجانية أو تصفح قاعدة بيانات المنح الدراسية", "Discover your ideal major through our free analysis tool or browse our scholarship database."),
              },
              {
                icon: FileText,
                step: "02",
                title: t("جهّز", "Prepare"),
                desc: t("احصل على مساعدة احترافية في كتابة السيرة الذاتية ورسالة الدافع ومراجعة ملفك الأكاديمي", "Get expert help with your CV, motivation letter, and academic profile review."),
              },
              {
                icon: GraduationCap,
                step: "03",
                title: t("انطلق", "Succeed"),
                desc: t("قدم بثقة على المنح والجامعات مع دعم كامل من فريقنا حتى القبول", "Apply with confidence to scholarships and universities with full team support."),
              },
            ].map((item, i) => (
              <motion.div
                key={item.step}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, margin: "-50px" }}
                variants={fadeUp}
                custom={i}
                className="relative group"
              >
                <div className="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-border/50 h-full">
                  <div className="text-5xl font-extrabold text-navy/5 absolute top-4 end-6">{item.step}</div>
                  <div className="w-14 h-14 rounded-xl gold-gradient flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <item.icon className="w-7 h-7 text-navy" />
                  </div>
                  <h3 className="text-xl font-bold text-navy mb-3">{item.title}</h3>
                  <p className="text-muted-foreground leading-relaxed text-sm">{item.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== MAJOR ANALYSIS TEASER ===== */}
      <section className="py-20 lg:py-28 bg-white">
        <div className="container">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }}>
              <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
                {t("أداة تحليل التخصص", "Major Analysis Tool")}
              </motion.span>
              <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-bold text-navy mt-3 mb-5">
                {t("محتار في تخصصك؟", "Not Sure What to Study?")}
                <br />
                <span className="text-gold">{t("دع دليلك يوجهك", "Let Dalilak Guide You")}</span>
              </motion.h2>
              <motion.p variants={fadeUp} custom={2} className="text-muted-foreground leading-relaxed mb-8">
                {t(
                  "أجب على 23 سؤال بسيط واكتشف نقاط قوتك ومجالاتك المثالية. أداتنا تربط نتائجك بالتخصصات الجامعية والمنح المتاحة لتحصل على خطة واضحة لمستقبلك",
                  "Answer 23 simple questions and discover your strengths and ideal fields. Our tool connects your results with university majors and available scholarships to give you a clear plan for your future."
                )}
              </motion.p>

              <motion.div variants={fadeUp} custom={3} className="space-y-4 mb-8">
                {[
                  t("23 سؤال تفاعلي مصمم بعناية", "23 carefully designed interactive questions"),
                  t("نتائج فورية مع تحليل شخصيتك الأكاديمية", "Instant results with your academic personality analysis"),
                  t("ربط مباشر بالمنح والتخصصات المناسبة", "Direct connection to matching scholarships and majors"),
                ].map((item) => (
                  <div key={item} className="flex items-start gap-3">
                    <div className="w-5 h-5 rounded-full gold-gradient flex items-center justify-center shrink-0 mt-0.5">
                      <svg className="w-3 h-3 text-navy" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <span className="text-foreground/80 text-sm">{item}</span>
                  </div>
                ))}
              </motion.div>

              <motion.div variants={fadeUp} custom={4}>
                <Link href="/major-analysis">
                  <Button size="lg" className="bg-navy hover:bg-navy-light text-white font-bold px-8">
                    {t("ابدأ التحليل المجاني", "Start Free Analysis")}
                    <Arrow className="w-5 h-5 ms-2" />
                  </Button>
                </Link>
              </motion.div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="relative"
            >
              <div className="rounded-2xl overflow-hidden shadow-2xl border border-border/30">
                <img src={MAJOR_IMG} alt="Major Analysis" className="w-full h-auto" loading="lazy" />
              </div>
              <div className="absolute -bottom-4 -start-4 w-24 h-24 rounded-xl gold-gradient opacity-20 -z-10" />
              <div className="absolute -top-4 -end-4 w-32 h-32 rounded-xl bg-navy opacity-10 -z-10" />
            </motion.div>
          </div>
        </div>
      </section>

      {/* ===== FEATURED SCHOLARSHIPS ===== */}
      <section className="py-20 lg:py-28 bg-cream">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, margin: "-100px" }} className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4">
            <div>
              <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
                {t("أحدث الفرص", "Latest Opportunities")}
              </motion.span>
              <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-bold text-navy mt-3">
                {t("منح دراسية ممولة", "Funded Scholarships")}
              </motion.h2>
            </div>
            <motion.div variants={fadeUp} custom={2}>
              <Link href="/scholarships">
                <Button variant="outline" className="border-navy/20 text-navy hover:bg-navy/5">
                  {t("عرض جميع المنح", "View All Scholarships")}
                  <Chevron className="w-4 h-4 ms-1" />
                </Button>
              </Link>
            </motion.div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {allScholarships
              .map(s => ({ ...s, computedStatus: getScholarshipStatus(s.deadline) }))
              .filter(s => s.computedStatus !== "closed")
              .sort((a, b) => {
                const order = { closing: 0, open: 1, upcoming: 2, closed: 3 };
                return (order[a.computedStatus] ?? 3) - (order[b.computedStatus] ?? 3);
              })
              .slice(0, 3)
              .map((s, i) => {
                const statusClasses = getStatusColor(s.computedStatus);
                const statusText = lang === "ar" ? getStatusLabelAr(s.computedStatus) : getStatusLabelEn(s.computedStatus);
                return (
                  <motion.div
                    key={s.id}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true }}
                    variants={fadeUp}
                    custom={i}
                  >
                    <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">
                      <div className="p-6 flex-1">
                        <div className="flex items-center justify-between mb-4">
                          <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium ${statusClasses}`}>
                            <span className={`w-1.5 h-1.5 rounded-full ${s.computedStatus === "open" ? "bg-green-500" : s.computedStatus === "closing" ? "bg-amber-500" : "bg-blue-500"}`} />
                            {statusText}
                          </span>
                          <span className="text-2xl">{s.flag}</span>
                        </div>
                        <h3 className="text-lg font-bold text-navy mb-2 group-hover:text-gold transition-colors">
                          {lang === "ar" ? s.titleAr : s.titleEn}
                        </h3>
                        <div className="space-y-2 text-sm text-muted-foreground">
                          <div className="flex items-center gap-2">
                            <MapPin className="w-4 h-4 text-gold" />
                            {lang === "ar" ? s.countryAr : s.countryEn}
                          </div>
                          <div className="flex items-center gap-2">
                            <BookOpen className="w-4 h-4 text-gold" />
                            {lang === "ar" ? s.levelAr : s.levelEn}
                          </div>
                          <div className="flex items-center gap-2">
                            <Clock className="w-4 h-4 text-gold" />
                            {s.deadline === "rolling" ? t("التقديم متدرج", "Rolling basis") : t(`آخر موعد: ${s.deadline}`, `Deadline: ${s.deadline}`)}
                          </div>
                        </div>
                      </div>
                      <div className="px-6 pb-6">
                        <Link href={`/scholarships/${s.slug}`}>
                          <Button className="w-full bg-navy hover:bg-navy-light text-white text-sm">
                            {t("التفاصيل والتقديم", "Details & Apply")}
                            <Arrow className="w-4 h-4 ms-2" />
                          </Button>
                        </Link>
                      </div>
                    </div>
                  </motion.div>
                );
              })}
          </div>
        </div>
      </section>

      {/* ===== SERVICES ===== */}
      <section
        className="py-20 lg:py-28 relative"
        style={{ backgroundImage: `url(${SERVICES_BG})`, backgroundSize: "cover", backgroundPosition: "center" }}
      >
        <div className="absolute inset-0 bg-cream/80 backdrop-blur-sm" />
        <div className="container relative z-10">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="text-center mb-16">
            <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
              {t("خدماتنا المتخصصة", "Our Specialized Services")}
            </motion.span>
            <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-bold text-navy mt-3">
              {t("نساعدك في كل خطوة", "We Help You Every Step")}
            </motion.h2>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: Users,
                title: t("استشارة عبر Zoom", "Zoom Consultation"),
                desc: t("جلسة 45 دقيقة عبر Zoom مع مستشار تعليمي لمناقشة خياراتك واستراتيجية التقديم", "45-minute Zoom session with an education advisor to discuss your options and application strategy."),
                price: t("$40 / 150 ريال", "$40 / 150 SAR"),
              },
              {
                icon: FileText,
                title: t("كتابة رسالة الدافع", "Motivation Letter"),
                desc: t("مراجعة وتحسين شامل لرسالة الدافع أو كتابتها من الصفر بأسلوب احترافي", "Comprehensive review and improvement of your motivation letter, or writing from scratch."),
                price: t("$20 / 75 ريال", "$20 / 75 SAR"),
              },
              {
                icon: GraduationCap,
                title: t("التقديم على منحة", "Scholarship Application"),
                desc: t("دعم كامل للتقديم على منحة واحدة يشمل مراجعة الوثائق والتحضير للمقابلة", "Full support for one scholarship application including document review and interview prep."),
                price: t("$150 / 562 ريال", "$150 / 562 SAR"),
              },
              {
                icon: Globe,
                title: t("الدراسة في كندا - باقة شاملة", "Study in Canada - Full Package"),
                desc: t("مرافقة كاملة من اختيار التخصص إلى القبول إلى التأشيرة إلى الاستقرار في كندا", "Complete guidance from major selection to admission to visa to settling in Canada."),
                price: t("تبدأ من $1,500", "Starting from $1,500"),
              },
            ].map((service, i) => (
              <motion.div
                key={service.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeUp}
                custom={i}
              >
                <div className="bg-white rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-border/50 h-full flex flex-col">
                  <div className="w-12 h-12 rounded-xl bg-navy/5 flex items-center justify-center mb-5">
                    <service.icon className="w-6 h-6 text-gold" />
                  </div>
                  <h3 className="text-lg font-bold text-navy mb-3">{service.title}</h3>
                  <p className="text-muted-foreground text-sm leading-relaxed flex-1 mb-5">{service.desc}</p>
                  <div className="flex items-center justify-between pt-4 border-t border-border/50">
                    <span className="text-gold font-bold text-sm">{service.price}</span>
                    <Link href="/services">
                      <Button size="sm" variant="outline" className="border-navy/20 text-navy hover:bg-navy/5 text-xs">
                        {t("تفاصيل أكثر", "Learn More")}
                      </Button>
                    </Link>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeUp}
            custom={3}
            className="text-center mt-10"
          >
            <Link href="/services">
              <Button size="lg" className="bg-navy hover:bg-navy-light text-white font-bold px-8">
                {t("عرض جميع الخدمات", "View All Services")}
                <Arrow className="w-5 h-5 ms-2" />
              </Button>
            </Link>
          </motion.div>
        </div>
      </section>

      {/* ===== VALUE PATHWAYS ===== */}
      <section className="py-20 lg:py-28 bg-navy">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="text-center mb-16">
            <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
              {t("طريقك في دليلك", "Your Dalilak Path")}
            </motion.span>
            <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-bold text-white mt-3">
              {t("خطوات واضحة نحو قرار أكاديمي أفضل", "Clear Steps Toward a Better Academic Decision")}
            </motion.h2>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              {
                label: t("01. ابدأ مجاناً", "01. Start free"),
                title: t("حلل تخصصك", "Analyze your major"),
                description: t("أجب عن 23 سؤالاً لتفهم نقاط قوتك وتستكشف المسارات والتخصصات المناسبة لك.", "Answer 23 questions to understand your strengths and explore suitable academic paths."),
              },
              {
                label: t("02. راجع الفرص", "02. Review opportunities"),
                title: t("تابع المواعيد", "Track deadlines"),
                description: t("استخدم قاعدة الفرص والمدونة للوصول إلى الروابط الرسمية وفهم متطلبات التقديم.", "Use the opportunities database and blog to reach official links and understand application requirements."),
              },
              {
                label: t("03. اطلب الدعم عند الحاجة", "03. Get support when needed"),
                title: t("جهّز ملفك", "Prepare your file"),
                description: t("اختر خدمة محددة لمراجعة ملفك أو صياغة رسالة الدافع أو بناء خطة تقديم عملية.", "Choose a focused service to review your file, shape a motivation letter, or build an application plan."),
              },
            ].map((pathway, i) => (
              <motion.div
                key={pathway.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeUp}
                custom={i}
              >
                <div className="bg-white/5 backdrop-blur-sm rounded-xl p-8 border border-white/10 h-full flex flex-col">
                  <div className="text-gold text-xs font-bold mb-4">{pathway.label}</div>
                  <h3 className="text-white font-bold text-xl mb-3">{pathway.title}</h3>
                  <p className="text-white/70 text-sm leading-relaxed flex-1">{pathway.description}</p>
                  <div>
                    <Link href={i === 0 ? "/major-analysis" : i === 1 ? "/scholarships" : "/services"} className="inline-flex mt-6 text-gold text-sm font-bold hover:text-gold/80 transition-colors">
                      {t("ابدأ من هنا", "Start here")}
                    </Link>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FOUNDER CREDIBILITY ===== */}
      <section className="py-16 lg:py-20 bg-white border-t border-border/50">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="max-w-4xl mx-auto">
            <motion.div variants={fadeUp} custom={0} className="text-center mb-10">
              <span className="text-gold text-sm font-semibold uppercase tracking-wider">
                {t("من يقف وراء دليلك؟", "Who's Behind Dalilak?")}
              </span>
              <h2 className="text-2xl md:text-3xl font-bold text-navy mt-3">
                {lang === "ar" ? FOUNDER.nameAr : FOUNDER.nameEn}
              </h2>
              <p className="text-muted-foreground mt-2">
                {lang === "ar" ? FOUNDER.titleAr : FOUNDER.titleEn}
              </p>
            </motion.div>
            <motion.div variants={fadeUp} custom={1} className="flex flex-wrap justify-center gap-3 mb-8">
              {FOUNDER.credentials.map((cred, i) => (
                <span key={i} className="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-navy/5 text-navy text-sm font-medium border border-navy/10">
                  {lang === "ar" ? cred.ar : cred.en}
                </span>
              ))}
            </motion.div>
            <motion.div variants={fadeUp} custom={2} className="bg-cream rounded-xl p-6 border border-border/50">
              <p className="text-sm text-muted-foreground mb-3 font-medium">{t("ظهورات إعلامية:", "Media Appearances:")}</p>
              <div className="flex flex-wrap gap-4">
                {FOUNDER.mediaAppearances.map((media, i) => (
                  <span key={i} className="text-sm text-navy">
                    {media.url ? (
                      <a href={media.url} target="_blank" rel="noopener noreferrer" className="hover:text-gold transition-colors underline underline-offset-2">
                        {lang === "ar" ? media.titleAr : media.titleEn}
                      </a>
                    ) : (
                      <span>{lang === "ar" ? media.titleAr : media.titleEn}</span>
                    )}
                  </span>
                ))}
              </div>
            </motion.div>
            <motion.div variants={fadeUp} custom={3} className="text-center mt-8">
              <Link href="/testimonials">
                <Button variant="outline" className="border-navy/20 text-navy hover:bg-navy/5">
                  {t("تعرّف على خبرة دليلك", "Explore Dalilak Experience")}
                </Button>
              </Link>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* ===== CTA ===== */}
      <section className="py-20 lg:py-28 bg-cream">
        <div className="container">
          <motion.div
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            className="bg-navy rounded-2xl p-10 lg:p-16 text-center relative overflow-hidden"
          >
            <div className="absolute inset-0 opacity-10" style={{ backgroundImage: `url(${HERO_BG})`, backgroundSize: "cover" }} />
            <div className="relative z-10">
              <motion.h2 variants={fadeUp} custom={0} className="text-3xl md:text-4xl font-bold text-white mb-4">
                {t("تحتاج توجيه شخصي؟", "Need Personalized Guidance?")}
              </motion.h2>
              <motion.p variants={fadeUp} custom={1} className="text-white/60 text-lg mb-8 max-w-xl mx-auto">
                {t(
                  "احجز جلسة فردية مع خبرائنا لتخطيط رحلة دراستك في الخارج والحصول على خطة عمل واضحة",
                  "Book a 1-on-1 session with our experts to plan your study abroad journey and get a clear action plan."
                )}
              </motion.p>
              <motion.div variants={fadeUp} custom={2} className="flex flex-wrap justify-center gap-4">
                <Link href="/services">
                  <Button size="lg" className="gold-gradient text-navy font-bold text-base px-8 py-6 hover:opacity-90 shadow-lg">
                    {t("احجز استشارتك الآن", "Book Your Consultation")}
                    <Arrow className="w-5 h-5 ms-2" />
                  </Button>
                </Link>
                <Link href="/major-analysis">
                  <Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 font-medium text-base px-8 py-6">
                    {t("جرب تحليل التخصص أولاً", "Try Major Analysis First")}
                  </Button>
                </Link>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section className="py-16 lg:py-24 bg-cream">
        <div className="container max-w-3xl">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="text-center mb-12">
            <motion.h2 variants={fadeUp} custom={0} className="text-2xl md:text-3xl font-bold text-navy mb-3">
              {t("أسئلة شائعة", "Frequently Asked Questions")}
            </motion.h2>
            <motion.p variants={fadeUp} custom={1} className="text-muted-foreground">
              {t("إجابات على أكثر الأسئلة التي تصلنا", "Answers to the most common questions we receive")}
            </motion.p>
          </motion.div>

          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="space-y-3">
            {homeFAQs.map((faq, i) => (
              <FAQItem key={i} question={faq.q} answer={faq.a} index={i} />
            ))}
          </motion.div>
        </div>
      </section>

      {/* ===== CTA ===== */}
      <section className="py-16 bg-white border-t border-border/50">
        <div className="container">
          <div className="max-w-2xl mx-auto text-center">
            <h3 className="text-2xl font-bold text-navy mb-3">
              {t("هل لديك سؤال أو ترغب بحجز استشارة؟", "Have a Question or Want to Book a Consultation?")}
            </h3>
            <p className="text-muted-foreground text-sm mb-6">
              {t("تصفح خدماتنا واختر الخدمة المناسبة لك، وسنساعدك في تحديد الخطوة المناسبة لرحلتك التعليمية", "Browse our services and choose what fits you best. We'll help you determine the right next step for your educational journey.")}
            </p>
            <Link href="/services">
              <Button size="lg" className="gold-gradient text-navy font-bold px-8">
                {t("تصفح الخدمات", "Browse Services")}
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* ===== STICKY MOBILE CTA ===== */}
      <div className="fixed bottom-0 inset-x-0 z-50 md:hidden bg-white/95 backdrop-blur-sm border-t border-border/50 p-3 flex gap-2">
        <Link href="/services" className="flex-1">
          <Button className="w-full gold-gradient text-navy font-bold text-sm py-5">
            {t("احجز استشارة", "Book Consultation")}
          </Button>
        </Link>
        <Link href="/major-analysis" className="flex-1">
          <Button className="w-full bg-navy hover:bg-navy-light text-white text-sm py-5">
            {t("تحليل التخصص", "Major Analysis")}
          </Button>
        </Link>
      </div>
    </div>
  );
}