import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";
import IndustryJsonLd from "@/components/IndustryJsonLd";
import {
  CheckCircleIcon,
  PhoneIcon,
  CalendarIcon,
  AcademicCapIcon,
  CurrencyDollarIcon,
  ChatBubbleLeftRightIcon,
  ChartBarIcon,
  QuestionMarkCircleIcon,
  ArrowRightIcon,
  BuildingLibraryIcon,
  TruckIcon,
  ClockIcon,
  UserGroupIcon,
  ShieldCheckIcon,
  BellAlertIcon,
  DocumentTextIcon,
  SparklesIcon,
} from "@heroicons/react/24/outline";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.educationTitle} | ${SITE.brand}`,
    description: t.educationHeroSubline,
    openGraph: {
      title: `${t.educationTitle} | ${SITE.brand}`,
      description: t.educationHeroSubline,
      type: "website",
    },
  };
}

export default function EducationPage({ params }: { params: { lang: Lang } }) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;
  const isAr = params.lang === "ar";

  const whatMawidiEnables = [
    {
      icon: ChatBubbleLeftRightIcon,
      title: t.eduWhat1Title,
      desc: t.eduWhat1Desc,
    },
    { icon: CurrencyDollarIcon, title: t.eduWhat2Title, desc: t.eduWhat2Desc },
    { icon: BuildingLibraryIcon, title: t.eduWhat3Title, desc: t.eduWhat3Desc },
    { icon: CalendarIcon, title: t.eduWhat4Title, desc: t.eduWhat4Desc },
    { icon: TruckIcon, title: t.eduWhat5Title, desc: t.eduWhat5Desc },
    { icon: PhoneIcon, title: t.eduWhat6Title, desc: t.eduWhat6Desc },
    { icon: ChartBarIcon, title: t.eduWhat7Title, desc: t.eduWhat7Desc },
  ];

  const whoThisIsFor = [
    t.eduWhoFor1,
    t.eduWhoFor2,
    t.eduWhoFor3,
    t.eduWhoFor4,
    t.eduWhoFor5,
  ];

  const integrations = [
    t.eduIntegration1,
    t.eduIntegration2,
    t.eduIntegration3,
    t.eduIntegration4,
    t.eduIntegration5,
    t.eduIntegration6,
    t.eduIntegration7,
    t.eduIntegration8,
    t.eduIntegration9,
  ];

  const faqs = [
    { q: t.eduFAQ1Q, a: t.eduFAQ1A },
    { q: t.eduFAQ2Q, a: t.eduFAQ2A },
    { q: t.eduFAQ3Q, a: t.eduFAQ3A },
    { q: t.eduFAQ4Q, a: t.eduFAQ4A },
    { q: t.eduFAQ5Q, a: t.eduFAQ5A },
  ];

  const structuredFaqs = faqs.map((f) => ({ question: f.q, answer: f.a }));

  const getStartedSteps = [
    t.eduGetStartedStep1,
    t.eduGetStartedStep2,
    t.eduGetStartedStep3,
    t.eduGetStartedStep4,
    t.eduGetStartedStep5,
  ];

  const stats = [
    {
      value: "85%",
      label: isAr ? "تحسين في معدل تحصيل الرسوم" : "Fee Collection Improvement",
    },
    {
      value: "70%",
      label: isAr ? "انخفاض وقت المكالمات" : "Call Time Reduction",
    },
    { value: "92%", label: isAr ? "رضا أولياء الأمور" : "Parent Satisfaction" },
    {
      value: "50+",
      label: isAr ? "مؤسسة تعليمية" : "Educational Institutions",
    },
  ];

  const useCases = [
    {
      icon: ClockIcon,
      title: isAr ? "إدارة الحضور التلقائي" : "Automated Attendance",
      desc: isAr
        ? "ترسل المدارس تقارير الحضور اليومية تلقائيًا لأولياء الأمور عبر WhatsApp مع إشعارات فورية للغياب أو التأخير."
        : "Schools automatically send daily attendance reports to parents via WhatsApp with instant alerts for absences or tardiness.",
      stat: isAr ? "يوفر 15 ساعة أسبوعيًا" : "Saves 15 hours weekly",
    },
    {
      icon: CurrencyDollarIcon,
      title: isAr ? "تحصيل الرسوم بالأقساط" : "Installment Collection",
      desc: isAr
        ? "إعداد خطط دفع مرنة مع تذكيرات تلقائية قبل الاستحقاق وخصم تلقائي من البطاقة."
        : "Set up flexible payment plans with automated reminders before due dates and auto-debit from saved cards.",
      stat: isAr ? "تحسين التحصيل 85%" : "85% collection improvement",
    },
    {
      icon: UserGroupIcon,
      title: isAr ? "جولات القبول الآلية" : "Automated Admission Tours",
      desc: isAr
        ? "يحجز أولياء الأمور جولات المدرسة عبر WhatsApp، ويتلقون تذكيرات تلقائية."
        : "Parents book school tours via WhatsApp, receive automated reminders, and can upload required documents.",
      stat: isAr ? "زيادة التحويلات 40%" : "40% conversion increase",
    },
    {
      icon: BellAlertIcon,
      title: isAr ? "تحديثات النقل المدرسي" : "Transport Updates",
      desc: isAr
        ? "تحديثات مباشرة لمواقع الحافلات وتغييرات المسارات ترسل تلقائيًا للعائلات المعنية."
        : "Live bus location updates, route changes, and trip delays automatically sent to affected families.",
      stat: isAr ? "انخفاض الاستفسارات 60%" : "60% fewer inquiries",
    },
    {
      icon: CalendarIcon,
      title: isAr ? "حجز اجتماعات أولياء الأمور" : "Parent-Teacher Meetings",
      desc: isAr
        ? "يحجز أولياء الأمور مواعيد مع المعلمين مباشرة عبر WhatsApp مع مزامنة تلقائية."
        : "Parents book teacher appointments directly via WhatsApp with auto calendar sync.",
      stat: isAr ? "معدل حضور 95%" : "95% attendance rate",
    },
    {
      icon: DocumentTextIcon,
      title: isAr ? "توقيع الموافقات الإلكترونية" : "E-Signature Consent Forms",
      desc: isAr
        ? "إرسال نماذج الرحلات والموافقات والعقود عبر WhatsApp مع توقيع إلكتروني آمن."
        : "Send field trip forms, consents, and contracts via WhatsApp with secure e-signature.",
      stat: isAr ? "توقيع خلال 24 ساعة" : "Signed within 24 hours",
    },
  ];

  const securityFeatures = [
    {
      icon: ShieldCheckIcon,
      title: isAr ? "تشفير البيانات" : "Data Encryption",
      desc: isAr
        ? "تشفير شامل للبيانات أثناء النقل والتخزين مع بنية تحتية آمنة"
        : "End-to-end encryption for data in transit and at rest with secure infrastructure",
    },
    {
      icon: UserGroupIcon,
      title: isAr ? "إدارة الموافقات" : "Consent Management",
      desc: isAr
        ? "تتبع كامل لموافقات أولياء الأمور على التواصل والتسويق"
        : "Full tracking of parent consents for communications and marketing",
    },
    {
      icon: DocumentTextIcon,
      title: isAr ? "الامتثال للقوانين" : "Regulatory Compliance",
      desc: isAr
        ? "متوافق مع قوانين حماية البيانات في دول الخليج"
        : "Compliant with GCC data protection laws and student data standards",
    },
  ];

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* Hero Section - Editorial Style */}
      <section className="relative overflow-hidden bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4]">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(16,185,129,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(16,185,129,0.03)_1px,transparent_1px)] bg-[size:4rem_4rem]" />

        <div className="relative max-w-7xl mx-auto px-6 py-24 md:py-32">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              {/* Badge */}
              <div className="inline-flex items-center gap-3 mb-8">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  01
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="text-[#64748B] text-sm font-medium uppercase tracking-wider">
                  {t.educationTitle}
                </span>
              </div>

              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] tracking-tight leading-[1.1] mb-8">
                {t.educationHeroTitle}
              </h1>

              <p className="text-xl text-[#64748B] leading-relaxed mb-10 max-w-xl">
                {t.educationHeroSubline}
              </p>

              <div className="flex flex-wrap gap-4">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group relative inline-flex items-center gap-2 px-8 py-4 bg-[#10B981] text-white font-semibold rounded-none overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20"
                >
                  <span className="relative z-10">{t.eduCtaStartFree}</span>
                  <ArrowRightIcon className="w-5 h-5 relative z-10 transition-transform group-hover:translate-x-1" />
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="group inline-flex items-center gap-2 px-8 py-4 bg-transparent text-[#1E293B] font-semibold border-2 border-[#E2E8F0] hover:border-[#10B981] transition-colors duration-300"
                >
                  {t.eduCtaBookDemo}
                </Link>
              </div>
            </div>

            {/* Hero Visual - Stats Grid */}
            <div className="hidden lg:block">
              <div className="grid grid-cols-2 gap-px bg-[#E2E8F0]">
                {stats.map((stat, idx) => (
                  <div
                    key={idx}
                    className="bg-white p-8 group hover:bg-[#FAFAFA] transition-colors duration-300"
                  >
                    <div className="text-5xl font-bold text-[#10B981] mb-2">
                      {stat.value}
                    </div>
                    <div className="text-[#64748B] text-sm">{stat.label}</div>
                    <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* B2B Note - Editorial Callout */}
      <section className="py-12 bg-[#F0FDF4] border-y border-[#D1FAE5]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-6">
            <div className="flex-shrink-0 w-12 h-12 bg-[#10B981]/10 flex items-center justify-center">
              <ChatBubbleLeftRightIcon className="w-6 h-6 text-[#10B981]" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-[#1E293B] mb-2">
                {t.eduB2BNoteTitle}
              </h3>
              <p className="text-[#64748B] max-w-3xl">{t.eduB2BNote}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Who This Is For - Editorial Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-16">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.eduWhoForTitle}
            </h2>
          </div>

          {/* Editorial Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-px bg-[#E2E8F0]">
            {whoThisIsFor.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-1.5 h-1.5 bg-[#10B981]" />
                </div>
                <span className="font-medium text-[#1E293B]">{item}</span>
                <div className="w-0 group-hover:w-full h-px bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What Mawidi Enables - Editorial Grid */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-16">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.eduWhatTitle}
            </h2>
          </div>

          {/* Editorial Feature Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#E2E8F0]">
            {whatMawidiEnables.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-10 h-10 bg-[#10B981]/10 flex items-center justify-center">
                    <item.icon className="w-5 h-5 text-[#10B981]" />
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B] mb-3">
                  {item.title}
                </h3>
                <p className="text-[#64748B] leading-relaxed">{item.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Use Cases - Editorial Cards */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-8">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "حالات استخدام حقيقية" : "Real-World Use Cases"}
              </h2>
            </div>
          </div>
          <p className="text-lg text-[#64748B] mb-16 max-w-2xl">
            {isAr
              ? "كيف تستخدم المؤسسات التعليمية ماويدي"
              : "How educational institutions use Mawidi"}
          </p>

          {/* Use Cases Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#E2E8F0]">
            {useCases.map((useCase, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-12 h-12 bg-[#10B981]/10 flex items-center justify-center">
                    <useCase.icon className="w-6 h-6 text-[#10B981]" />
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B] mb-3">
                  {useCase.title}
                </h3>
                <p className="text-[#64748B] mb-6 leading-relaxed">
                  {useCase.desc}
                </p>
                <div className="flex items-center gap-2 text-sm text-[#10B981] font-medium">
                  <SparklesIcon className="w-4 h-4" />
                  <span>{useCase.stat}</span>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Security & Compliance - Editorial */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-8">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr ? "الأمان والخصوصية" : "Security & Privacy"}
              </h2>
            </div>
          </div>
          <p className="text-lg text-[#64748B] mb-16 max-w-3xl">
            {isAr
              ? "نلتزم بأعلى معايير الأمان والخصوصية لحماية البيانات الحساسة للمؤسسات التعليمية"
              : "We maintain the highest security and privacy standards to protect sensitive educational institution data"}
          </p>

          {/* Security Features Grid */}
          <div className="grid md:grid-cols-3 gap-px bg-[#E2E8F0]">
            {securityFeatures.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="w-10 h-10 bg-[#10B981]/10 flex items-center justify-center">
                    <feature.icon className="w-5 h-5 text-[#10B981]" />
                  </div>
                </div>
                <h3 className="text-lg font-bold text-[#1E293B] mb-2">
                  {feature.title}
                </h3>
                <p className="text-[#64748B]">{feature.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Integrations - Editorial Grid */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-16">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.eduIntegrationsTitle}
            </h2>
          </div>

          {/* Integrations Grid */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-px bg-[#E2E8F0]">
            {integrations.map((integration, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 text-center hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <span
                  className="text-[#10B981] font-mono text-xs block mb-2"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <p className="text-sm font-medium text-[#1E293B]">
                  {integration}
                </p>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mt-4 mx-auto transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQs - Editorial Accordion Style */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-16">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div className="flex items-center gap-3">
              <QuestionMarkCircleIcon className="w-6 h-6 text-[#10B981]" />
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.eduFAQTitle}
              </h2>
            </div>
          </div>

          {/* FAQ Items */}
          <div className="space-y-px bg-[#E2E8F0]">
            {faqs.map((faq, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-sm flex-shrink-0"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg font-bold text-[#1E293B] mb-3">
                      {faq.q}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">{faq.a}</p>
                  </div>
                </div>
                <div className="w-0 group-hover:w-16 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Get Started - Editorial CTA */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-16">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.eduGetStartedTitle}
            </h2>
          </div>

          {/* Steps */}
          <div className="space-y-px bg-[#E2E8F0] mb-12">
            {getStartedSteps.map((step, idx) => (
              <div
                key={idx}
                className="group flex items-start gap-6 p-6 bg-white hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <div className="flex-shrink-0 w-10 h-10 bg-[#10B981] text-white flex items-center justify-center font-mono font-bold text-sm">
                  {String(idx + 1).padStart(2, "0")}
                </div>
                <p className="text-[#1E293B] flex-1 pt-2">{step}</p>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mt-5 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* CTA Buttons */}
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center gap-2 px-10 py-5 bg-[#10B981] text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20"
            >
              <span className="relative z-10">{t.eduCtaStartFree}</span>
              <ArrowRightIcon className="w-5 h-5 relative z-10 transition-transform group-hover:translate-x-1" />
              <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="group inline-flex items-center gap-2 px-10 py-5 bg-[#F8FAFC] text-[#1E293B] font-semibold text-lg border-2 border-[#E2E8F0] hover:border-[#10B981] transition-colors duration-300"
            >
              {t.eduCtaBookDemo}
            </Link>
          </div>
        </div>
      </section>

      {/* Structured Data */}
      <IndustryJsonLd
        industry="education"
        lang={params.lang}
        faqs={structuredFaqs}
      />
    </main>
  );
}