import type { Metadata } from "next";
import { Lang, SITE, UI } from "@/lib/config";
import Link from "next/link";

export const revalidate = SITE.revalidateSeconds;

export async function generateStaticParams() {
  return [{ lang: "ar" }, { lang: "en" }];
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const { lang } = params;
  const isAr = lang === "ar";

  return {
    title: isAr ? `قصص النجاح | ${SITE.brand}` : `Case Studies | ${SITE.brand}`,
    description: isAr
      ? "اكتشف كيف حولت الأعمال في الخليج إدارة المواعيد باستخدام منصة مويدي الذكية عبر واتساب"
      : "Discover how businesses across the GCC transformed their appointment management with Mawidi's smart WhatsApp platform",
    alternates: {
      canonical: `/${lang}/case-studies`,
      languages: {
        ar: "/ar/case-studies",
        en: "/en/case-studies",
      },
    },
  };
}

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

  const stats = [
    {
      value: "40%",
      label: isAr ? "انخفاض في عدم الحضور" : "Reduction in No-Shows",
      context: isAr ? "متوسط عبر جميع العملاء" : "Average across all clients",
    },
    {
      value: "3hrs",
      label: isAr ? "توفير الوقت اليومي" : "Daily Time Saved",
      context: isAr ? "لكل موظف استقبال" : "Per receptionist",
    },
    {
      value: "94%",
      label: isAr ? "رضا المرضى" : "Patient Satisfaction",
      context: isAr ? "بعد التطبيق" : "Post-implementation",
    },
    {
      value: "60%",
      label: isAr ? "زيادة الحجوزات" : "Booking Increase",
      context: isAr ? "في أول 90 يوم" : "In first 90 days",
    },
  ];

  const caseStudies = [
    {
      id: "01",
      name: t.caseStudy1Name,
      industry: t.caseStudy1Industry,
      location: t.caseStudy1Location,
      challenge: t.caseStudy1Challenge,
      solution: t.caseStudy1Solution,
      results: t.caseStudy1Results,
      quote: t.caseStudy1Quote,
      author: t.caseStudy1Author,
      accentColor: "#10B981",
      metrics: [
        { value: "40%", label: isAr ? "تقليل عدم الحضور" : "Reduced No-Shows" },
        { value: "3hrs", label: isAr ? "وقت موفر يومياً" : "Time Saved Daily" },
        { value: "60%", label: isAr ? "زيادة الحجوزات" : "Booking Increase" },
      ],
    },
    {
      id: "02",
      name: t.caseStudy2Name,
      industry: t.caseStudy2Industry,
      location: t.caseStudy2Location,
      challenge: t.caseStudy2Challenge,
      solution: t.caseStudy2Solution,
      results: t.caseStudy2Results,
      quote: t.caseStudy2Quote,
      author: t.caseStudy2Author,
      accentColor: "#F59E0B",
      metrics: [
        { value: "0", label: isAr ? "حجوزات مزدوجة" : "Double Bookings" },
        { value: "75%", label: isAr ? "أسرع في الحجز" : "Faster Booking" },
        { value: "45%", label: isAr ? "نمو الإيرادات" : "Revenue Growth" },
      ],
    },
    {
      id: "03",
      name: t.caseStudy3Name,
      industry: t.caseStudy3Industry,
      location: t.caseStudy3Location,
      challenge: t.caseStudy3Challenge,
      solution: t.caseStudy3Solution,
      results: t.caseStudy3Results,
      quote: t.caseStudy3Quote,
      author: t.caseStudy3Author,
      accentColor: "#8B5CF6",
      metrics: [
        { value: "50%", label: isAr ? "كفاءة أعلى" : "Efficiency Gain" },
        { value: "90%", label: isAr ? "رضا النزلاء" : "Guest Satisfaction" },
        { value: "+30%", label: isAr ? "حجوزات متكررة" : "Repeat Bookings" },
      ],
    },
    {
      id: "04",
      name: t.caseStudy4Name,
      industry: t.caseStudy4Industry,
      location: t.caseStudy4Location,
      challenge: t.caseStudy4Challenge,
      solution: t.caseStudy4Solution,
      results: t.caseStudy4Results,
      quote: t.caseStudy4Quote,
      author: t.caseStudy4Author,
      accentColor: "#EC4899",
      metrics: [
        { value: "80%", label: isAr ? "تحسن الحضور" : "Attendance Up" },
        { value: "95%", label: isAr ? "تحصيل الدفع" : "Payment Collection" },
        { value: "+40%", label: isAr ? "نمو الأعضاء" : "Member Growth" },
      ],
    },
  ];

  const industries = [
    { name: isAr ? "الرعاية الصحية" : "Healthcare", count: 12 },
    { name: isAr ? "التجميل والعناية" : "Beauty & Wellness", count: 8 },
    { name: isAr ? "الضيافة" : "Hospitality", count: 5 },
    { name: isAr ? "الرياضة واللياقة" : "Sports & Fitness", count: 7 },
  ];

  return (
    <div dir={dir} className="min-h-screen bg-[#FAFAFA]">
      {/* Hero Section - Editorial Magazine Style */}
      <section className="relative bg-white border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Top Bar with Breadcrumb */}
          <div className="py-6 border-b border-slate-100">
            <div className="flex items-center gap-2 text-sm text-[#64748B]">
              <Link
                href={`/${lang}`}
                className="hover:text-[#10B981] transition-colors"
              >
                {isAr ? "الرئيسية" : "Home"}
              </Link>
              <span>/</span>
              <span className="text-[#1E293B]">
                {isAr ? "قصص النجاح" : "Case Studies"}
              </span>
            </div>
          </div>

          {/* Hero Content - Asymmetric Layout */}
          <div className="grid lg:grid-cols-12 gap-12 py-16 lg:py-24">
            {/* Left Column - Main Title */}
            <div className="lg:col-span-7">
              <div className="flex items-center gap-3 mb-8">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  CASE STUDIES
                </span>
                <div className="w-16 h-px bg-[#10B981]" />
              </div>

              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] leading-[1.1] tracking-tight">
                {isAr ? (
                  <>
                    قصص نجاح
                    <br />
                    <span className="text-[#10B981]">حقيقية</span>
                  </>
                ) : (
                  <>
                    Real stories.
                    <br />
                    <span className="text-[#10B981]">Real results.</span>
                  </>
                )}
              </h1>

              <p className="mt-8 text-xl text-[#64748B] max-w-xl leading-relaxed">
                {isAr
                  ? "اكتشف كيف تحولت الأعمال في الخليج من جدولة المواعيد الفوضوية إلى النمو الاستراتيجي باستخدام منصة مويدي."
                  : "See how GCC businesses transformed from chaotic scheduling to strategic growth with Mawidi's WhatsApp-first platform."}
              </p>
            </div>

            {/* Right Column - Stats Grid */}
            <div className="lg:col-span-5">
              <div className="grid grid-cols-2 gap-px bg-slate-200">
                {stats.map((stat, idx) => (
                  <div key={idx} className="bg-white p-6 lg:p-8">
                    <div className="text-3xl lg:text-4xl font-bold text-[#1E293B] font-mono tracking-tight">
                      {stat.value}
                    </div>
                    <div className="mt-2 text-sm font-medium text-[#1E293B]">
                      {stat.label}
                    </div>
                    <div className="mt-1 text-xs text-[#64748B]">
                      {stat.context}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Industry Filter Bar */}
      <section className="bg-white border-b border-slate-200 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="flex items-center gap-8 py-4 overflow-x-auto scrollbar-hide">
            <span className="text-sm font-medium text-[#64748B] flex-shrink-0">
              {isAr ? "تصفية حسب القطاع:" : "Filter by industry:"}
            </span>
            <button className="px-4 py-2 bg-[#10B981] text-white text-sm font-medium transition-colors flex-shrink-0">
              {isAr ? "الكل" : "All"}
            </button>
            {industries.map((industry, idx) => (
              <button
                key={idx}
                className="px-4 py-2 text-[#64748B] hover:text-[#1E293B] hover:bg-slate-50 text-sm font-medium transition-colors flex-shrink-0 flex items-center gap-2"
              >
                {industry.name}
                <span className="text-xs text-[#94A3B8]">
                  ({industry.count})
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Case Studies - Editorial Layout */}
      <section className="py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* 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"
              >
                01
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B]">
              {isAr ? "قصص مميزة" : "Featured Stories"}
            </h2>
          </div>

          {/* Case Study Cards - Stacked Editorial Layout */}
          <div className="space-y-24">
            {caseStudies.map((study, index) => (
              <article
                key={study.id}
                className={`grid lg:grid-cols-12 gap-8 lg:gap-16 items-start ${
                  index % 2 === 1 ? "lg:flex-row-reverse" : ""
                }`}
              >
                {/* Content Side */}
                <div
                  className={`lg:col-span-7 ${index % 2 === 1 ? "lg:col-start-6" : ""}`}
                >
                  {/* Header with Number */}
                  <div className="flex items-start gap-6 mb-8">
                    <span
                      className="text-6xl lg:text-8xl font-bold leading-none"
                      style={{ color: study.accentColor, opacity: 0.2 }}
                      dir="ltr"
                    >
                      {study.id}
                    </span>
                    <div className="pt-2">
                      <div className="flex items-center gap-3 mb-2">
                        <span
                          className="px-3 py-1 text-xs font-medium text-white"
                          style={{ backgroundColor: study.accentColor }}
                        >
                          {study.industry}
                        </span>
                        <span className="text-sm text-[#64748B]">
                          {study.location}
                        </span>
                      </div>
                      <h3 className="text-2xl lg:text-3xl font-bold text-[#1E293B]">
                        {study.name}
                      </h3>
                    </div>
                  </div>

                  {/* Challenge / Solution / Results - Editorial Sections */}
                  <div className="space-y-8 border-l-2 border-slate-200 pl-6">
                    {/* Challenge */}
                    <div className="relative">
                      <div
                        className="absolute -left-[25px] w-2 h-2"
                        style={{ backgroundColor: study.accentColor }}
                      />
                      <h4 className="text-xs font-mono tracking-wider text-[#64748B] uppercase mb-3">
                        {isAr ? "التحدي" : "The Challenge"}
                      </h4>
                      <p className="text-[#64748B] leading-relaxed">
                        {study.challenge}
                      </p>
                    </div>

                    {/* Solution */}
                    <div className="relative">
                      <div
                        className="absolute -left-[25px] w-2 h-2"
                        style={{ backgroundColor: study.accentColor }}
                      />
                      <h4 className="text-xs font-mono tracking-wider text-[#64748B] uppercase mb-3">
                        {isAr ? "الحل" : "The Solution"}
                      </h4>
                      <p className="text-[#64748B] leading-relaxed">
                        {study.solution}
                      </p>
                    </div>

                    {/* Results */}
                    <div className="relative">
                      <div
                        className="absolute -left-[25px] w-2 h-2"
                        style={{ backgroundColor: study.accentColor }}
                      />
                      <h4 className="text-xs font-mono tracking-wider text-[#64748B] uppercase mb-3">
                        {isAr ? "النتائج" : "The Results"}
                      </h4>
                      <p className="text-[#1E293B] leading-relaxed font-medium">
                        {study.results}
                      </p>
                    </div>
                  </div>

                  {/* Quote Block */}
                  <blockquote
                    className="mt-10 p-8 bg-[#F8FAFC] border-l-4"
                    style={{ borderColor: study.accentColor }}
                  >
                    <p className="text-lg text-[#1E293B] italic leading-relaxed">
                      &ldquo;{study.quote}&rdquo;
                    </p>
                    <footer className="mt-4 flex items-center gap-3">
                      <div
                        className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
                        style={{ backgroundColor: study.accentColor }}
                      >
                        {study.author.charAt(0)}
                      </div>
                      <cite className="not-italic text-sm font-medium text-[#64748B]">
                        {study.author}
                      </cite>
                    </footer>
                  </blockquote>
                </div>

                {/* Metrics Side */}
                <div
                  className={`lg:col-span-5 ${index % 2 === 1 ? "lg:col-start-1 lg:row-start-1" : ""}`}
                >
                  <div className="sticky top-24">
                    {/* Metrics Card */}
                    <div className="bg-white border border-slate-200 overflow-hidden">
                      <div
                        className="px-6 py-4 border-b border-slate-200"
                        style={{ backgroundColor: `${study.accentColor}10` }}
                      >
                        <h4
                          className="text-sm font-mono tracking-wider uppercase"
                          style={{ color: study.accentColor }}
                        >
                          {isAr ? "النتائج الرئيسية" : "Key Metrics"}
                        </h4>
                      </div>
                      <div className="divide-y divide-slate-200">
                        {study.metrics.map((metric, mIdx) => (
                          <div
                            key={mIdx}
                            className="px-6 py-6 flex items-center justify-between"
                          >
                            <span className="text-sm text-[#64748B]">
                              {metric.label}
                            </span>
                            <span
                              className="text-2xl font-bold font-mono"
                              style={{ color: study.accentColor }}
                            >
                              {metric.value}
                            </span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Read Full Study Link */}
                    <Link
                      href={`/${lang}/case-studies/${study.id}`}
                      className="group mt-6 flex items-center justify-between p-4 bg-white border border-slate-200 hover:border-[#10B981] transition-colors"
                    >
                      <span className="text-sm font-medium text-[#1E293B]">
                        {isAr ? "اقرأ القصة كاملة" : "Read full case study"}
                      </span>
                      <svg
                        className={`w-5 h-5 text-[#10B981] transition-transform group-hover:translate-x-1 ${isAr ? "rotate-180" : ""}`}
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M17 8l4 4m0 0l-4 4m4-4H3"
                        />
                      </svg>
                    </Link>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Industries Section */}
      <section className="py-16 bg-white border-y border-slate-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-8 mb-12">
          <div className="flex items-center gap-4">
            <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-3xl md:text-4xl font-bold text-[#1E293B]">
              {isAr ? "القطاعات التي نخدمها" : "Industries We Serve"}
            </h2>
          </div>
        </div>

        {/* Industry Cards Grid */}
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-200">
            {industries.map((industry, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div className="w-14 h-14 bg-[#10B981]/10 flex items-center justify-center">
                    <span className="text-xl font-bold text-[#10B981]">
                      {industry.name.charAt(0)}
                    </span>
                  </div>
                  <div>
                    <div className="font-semibold text-[#1E293B]">
                      {industry.name}
                    </div>
                    <div className="text-sm text-[#64748B]">
                      {industry.count}+ {isAr ? "عميل" : "clients"}
                    </div>
                  </div>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section - Bold Editorial */}
      <section className="py-24 lg:py-32 bg-[#1E293B] relative overflow-hidden">
        {/* Decorative Elements */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-[#10B981] opacity-10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-[#10B981] opacity-5 rounded-full blur-2xl" />

        <div className="max-w-7xl mx-auto px-6 lg:px-8 relative">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left - Content */}
            <div>
              <div className="flex items-center gap-3 mb-8">
                <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 lg:text-6xl font-bold text-white leading-tight">
                {isAr ? (
                  <>
                    جاهز لكتابة
                    <br />
                    <span className="text-[#10B981]">قصة نجاحك؟</span>
                  </>
                ) : (
                  <>
                    Ready to write
                    <br />
                    <span className="text-[#10B981]">your success story?</span>
                  </>
                )}
              </h2>

              <p className="mt-6 text-lg text-slate-400 max-w-lg">
                {isAr
                  ? "انضم إلى مئات الشركات في الخليج التي حولت طريقة إدارتها للمواعيد. احصل على استشارة مجانية اليوم."
                  : "Join hundreds of GCC businesses that transformed their appointment management. Get a free consultation today."}
              </p>
            </div>

            {/* Right - CTA Buttons */}
            <div className="lg:text-right">
              <div className="inline-flex flex-col sm:flex-row gap-4">
                <Link
                  href={`/${lang}/demo`}
                  className="group relative px-8 py-4 bg-[#10B981] text-white font-semibold overflow-hidden transition-colors"
                >
                  <span className="relative z-10">
                    {isAr ? "احجز عرضاً توضيحياً" : "Book a Demo"}
                  </span>
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                </Link>

                <Link
                  href={`/${lang}/contact`}
                  className="px-8 py-4 border-2 border-slate-600 text-white font-semibold hover:border-[#10B981] hover:text-[#10B981] transition-colors"
                >
                  {isAr ? "تواصل معنا" : "Contact Sales"}
                </Link>
              </div>

              <p className="mt-6 text-sm text-slate-500">
                {isAr
                  ? "لا حاجة لبطاقة ائتمان • إعداد في 24 ساعة"
                  : "No credit card required • Setup in 24 hours"}
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}