import Link from "next/link";
import { Metadata } from "next";

import { SITE, UI, type Lang } from "@/lib/config";

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}` : `Resources | ${SITE.brand}`,
    description: isAr
      ? "أدلة شاملة، دراسات حالة، أفضل الممارسات، والمزيد لمساعدتك على النجاح مع موعدي"
      : "Comprehensive guides, case studies, best practices, and more to help you succeed with Mawidi",
    alternates: {
      canonical: `/${lang}/resources`,
      languages: {
        ar: "/ar/resources",
        en: "/en/resources",
      },
    },
  };
}

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

  // Resource data structures
  const guides = [
    {
      title: t.guide1Title,
      description: t.guide1Desc,
      readTime: t.guide1ReadTime,
    },
    {
      title: t.guide2Title,
      description: t.guide2Desc,
      readTime: t.guide2ReadTime,
    },
    {
      title: t.guide3Title,
      description: t.guide3Desc,
      readTime: t.guide3ReadTime,
    },
    {
      title: t.guide4Title,
      description: t.guide4Desc,
      readTime: t.guide4ReadTime,
    },
    {
      title: t.guide5Title,
      description: t.guide5Desc,
      readTime: t.guide5ReadTime,
    },
    {
      title: t.guide6Title,
      description: t.guide6Desc,
      readTime: t.guide6ReadTime,
    },
  ];

  const caseStudies = [
    {
      title: t.case1Title,
      description: t.case1Desc,
      readTime: t.case1ReadTime,
      sector: t.case1Sector,
    },
    {
      title: t.case2Title,
      description: t.case2Desc,
      readTime: t.case2ReadTime,
      sector: t.case2Sector,
    },
    {
      title: t.case3Title,
      description: t.case3Desc,
      readTime: t.case3ReadTime,
      sector: t.case3Sector,
    },
    {
      title: t.case4Title,
      description: t.case4Desc,
      readTime: t.case4ReadTime,
      sector: t.case4Sector,
    },
  ];

  const insights = [
    {
      title: t.insight1Title,
      description: t.insight1Desc,
      readTime: t.insight1ReadTime,
    },
    {
      title: t.insight2Title,
      description: t.insight2Desc,
      readTime: t.insight2ReadTime,
    },
    {
      title: t.insight3Title,
      description: t.insight3Desc,
      readTime: t.insight3ReadTime,
    },
    {
      title: t.insight4Title,
      description: t.insight4Desc,
      readTime: t.insight4ReadTime,
    },
  ];

  const bestPractices = [
    {
      title: t.best1Title,
      description: t.best1Desc,
      readTime: t.best1ReadTime,
    },
    {
      title: t.best2Title,
      description: t.best2Desc,
      readTime: t.best2ReadTime,
    },
    {
      title: t.best3Title,
      description: t.best3Desc,
      readTime: t.best3ReadTime,
    },
    {
      title: t.best4Title,
      description: t.best4Desc,
      readTime: t.best4ReadTime,
    },
  ];

  const documentation = [
    {
      title: t.doc1Title,
      description: t.doc1Desc,
      readTime: t.doc1ReadTime,
    },
    {
      title: t.doc2Title,
      description: t.doc2Desc,
      readTime: t.doc2ReadTime,
    },
    {
      title: t.doc3Title,
      description: t.doc3Desc,
      readTime: t.doc3ReadTime,
    },
    {
      title: t.doc4Title,
      description: t.doc4Desc,
      readTime: t.doc4ReadTime,
    },
  ];

  const videos = [
    {
      title: t.video1Title,
      description: t.video1Desc,
      duration: t.video1Duration,
    },
    {
      title: t.video2Title,
      description: t.video2Desc,
      duration: t.video2Duration,
    },
    {
      title: t.video3Title,
      description: t.video3Desc,
      duration: t.video3Duration,
    },
    {
      title: t.video4Title,
      description: t.video4Desc,
      duration: t.video4Duration,
    },
  ];

  const webinars = [
    {
      title: t.webinar1Title,
      description: t.webinar1Desc,
      date: t.webinar1Date,
      duration: t.webinar1Duration,
    },
    {
      title: t.webinar2Title,
      description: t.webinar2Desc,
      date: t.webinar2Date,
      duration: t.webinar2Duration,
    },
    {
      title: t.webinar3Title,
      description: t.webinar3Desc,
      date: t.webinar3Date,
      duration: t.webinar3Duration,
    },
  ];

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* Hero Section - Editorial Style */}
      <section className="relative bg-white border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 py-20 md:py-28">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-end">
            {/* Left: Title Area */}
            <div className="lg:col-span-8">
              <div className="flex items-center gap-3 mb-6">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  {t.resourcesHeroTag}
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
              </div>
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] leading-[1.1] tracking-tight">
                {t.resourcesTitle}
              </h1>
            </div>
            {/* Right: Subtitle */}
            <div className="lg:col-span-4">
              <p className="text-lg text-[#64748B] leading-relaxed">
                {t.resourcesSubtitle}
              </p>
            </div>
          </div>

          {/* Quick Navigation Pills */}
          <div className="mt-16 flex flex-wrap gap-3">
            {[
              { label: t.resourceCategoryGuides, href: "#guides" },
              { label: t.resourceCategoryCase, href: "#case-studies" },
              { label: t.resourceCategoryInsights, href: "#insights" },
              { label: t.resourceCategoryBest, href: "#best-practices" },
              { label: t.resourceCategoryDocs, href: "#documentation" },
              { label: t.resourceCategoryVideo, href: "#videos" },
            ].map((item, idx) => (
              <a
                key={idx}
                href={item.href}
                className="px-5 py-2.5 text-sm font-medium text-[#1E293B] bg-[#F5F5F5] hover:bg-[#10B981] hover:text-white transition-colors duration-200"
              >
                {item.label}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Section 01: Guides & Tutorials */}
      <section id="guides" className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.resourceCategoryGuides}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "أدلة خطوة بخطوة لمساعدتك على البدء والنمو مع موعدي"
                  : "Step-by-step guides to help you get started and grow with Mawidi"}
              </p>
            </div>
          </div>

          {/* Editorial Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {guides.map((guide, idx) => (
              <article
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors cursor-pointer"
              >
                <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>
                  <span className="text-xs text-[#64748B]">
                    {guide.readTime} {t.resourceReadTime}
                  </span>
                </div>
                <h3 className="text-lg font-semibold text-[#1E293B] mb-3 group-hover:text-[#10B981] transition-colors">
                  {guide.title}
                </h3>
                <p className="text-sm text-[#64748B] leading-relaxed mb-6">
                  {guide.description}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Section 02: Case Studies */}
      <section id="case-studies" className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.resourceCategoryCase}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "اكتشف كيف حقق عملاؤنا نتائج استثنائية باستخدام موعدي"
                  : "Discover how our customers achieved exceptional results with Mawidi"}
              </p>
            </div>
          </div>

          {/* Case Study Cards - Magazine Style */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {caseStudies.map((study, idx) => (
              <article
                key={idx}
                className="group relative bg-white border border-slate-200 hover:border-[#10B981] transition-colors overflow-hidden"
              >
                {/* Accent stripe */}
                <div className="absolute top-0 left-0 w-1 h-full bg-[#10B981] transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />

                <div className="p-8">
                  <div className="flex items-center justify-between mb-6">
                    <span className="px-3 py-1 text-xs font-medium text-[#10B981] bg-[#10B981]/10">
                      {study.sector}
                    </span>
                    <span className="text-xs text-[#64748B]">
                      {study.readTime} {t.resourceReadTime}
                    </span>
                  </div>
                  <h3 className="text-xl font-bold text-[#1E293B] mb-4 group-hover:text-[#10B981] transition-colors">
                    {study.title}
                  </h3>
                  <p className="text-[#64748B] leading-relaxed mb-6">
                    {study.description}
                  </p>
                  <div className="flex items-center gap-2 text-sm font-medium text-[#10B981]">
                    <span>{t.resourceViewResource}</span>
                    <svg
                      className="w-4 h-4 transform group-hover:translate-x-1 transition-transform"
                      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>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Section 03: Industry Insights */}
      <section id="insights" className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.resourceCategoryInsights}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "رؤى واتجاهات خاصة بالقطاع لمساعدتك على البقاء في الطليعة"
                  : "Industry-specific insights and trends to help you stay ahead"}
              </p>
            </div>
          </div>

          {/* Insights - Horizontal List */}
          <div className="space-y-0 divide-y divide-slate-200">
            {insights.map((insight, idx) => (
              <article
                key={idx}
                className="group py-8 flex flex-col md:flex-row md:items-center gap-6 hover:bg-[#FAFAFA] -mx-6 px-6 transition-colors cursor-pointer"
              >
                <div className="flex items-center gap-4 md:w-24 flex-shrink-0">
                  <span
                    className="text-[#10B981] font-mono text-2xl font-light"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-semibold text-[#1E293B] mb-2 group-hover:text-[#10B981] transition-colors">
                    {insight.title}
                  </h3>
                  <p className="text-[#64748B]">{insight.description}</p>
                </div>
                <div className="flex items-center gap-4 text-sm text-[#64748B] md:flex-shrink-0">
                  <span>
                    {insight.readTime} {t.resourceReadTime}
                  </span>
                  <svg
                    className="w-5 h-5 text-[#10B981] opacity-0 group-hover:opacity-100 transform translate-x-0 group-hover:translate-x-1 transition-all"
                    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>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Section 04: Best Practices */}
      <section id="best-practices" className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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]">
                {t.resourceCategoryBest}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "نصائح وممارسات من الخبراء لتحقيق أقصى استفادة من موعدي"
                  : "Expert tips and practices to get the most out of Mawidi"}
              </p>
            </div>
          </div>

          {/* Best Practices - Numbered Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {bestPractices.map((practice, idx) => (
              <article
                key={idx}
                className="group bg-white p-8 border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                <div className="flex items-start gap-6">
                  <div className="w-16 h-16 flex items-center justify-center text-3xl font-light text-[#10B981] border border-[#10B981] flex-shrink-0">
                    <span dir="ltr">{String(idx + 1).padStart(2, "0")}</span>
                  </div>
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3 group-hover:text-[#10B981] transition-colors">
                      {practice.title}
                    </h3>
                    <p className="text-sm text-[#64748B] leading-relaxed mb-4">
                      {practice.description}
                    </p>
                    <span className="text-xs text-[#64748B]">
                      {practice.readTime} {t.resourceReadTime}
                    </span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Section 05: Documentation */}
      <section id="documentation" className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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]">
                {t.resourceCategoryDocs}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "توثيق تقني شامل للمطورين والمدراء التقنيين"
                  : "Comprehensive technical documentation for developers and technical managers"}
              </p>
            </div>
          </div>

          {/* Documentation Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-slate-200">
            {documentation.map((doc, idx) => (
              <article
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors cursor-pointer"
              >
                <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>
                  <span className="text-xs text-[#64748B]">
                    {doc.readTime} {t.resourceReadTime}
                  </span>
                </div>
                <h3 className="text-xl font-semibold text-[#1E293B] mb-3 group-hover:text-[#10B981] transition-colors">
                  {doc.title}
                </h3>
                <p className="text-[#64748B] leading-relaxed mb-6">
                  {doc.description}
                </p>
                <div className="flex items-center justify-between">
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                  <span className="text-sm font-medium text-[#10B981] opacity-0 group-hover:opacity-100 transition-opacity">
                    {t.resourceViewResource} →
                  </span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Section 06: Video Tutorials */}
      <section id="videos" className="py-20 md:py-28 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.resourceCategoryVideo}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "تعلم بصرياً من خلال دروسنا المرئية الشاملة"
                  : "Learn visually through our comprehensive video tutorials"}
              </p>
            </div>
          </div>

          {/* Video Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {videos.map((video, idx) => (
              <article
                key={idx}
                className="group bg-white overflow-hidden border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                {/* Video Thumbnail Area */}
                <div className="relative aspect-video bg-gradient-to-br from-slate-100 to-slate-50 flex items-center justify-center">
                  <div className="w-16 h-16 rounded-full bg-[#10B981] flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                    <svg
                      className="w-6 h-6 text-white ml-1"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </div>
                  <span className="absolute bottom-4 right-4 px-3 py-1 bg-[#1E293B] text-white text-xs font-mono">
                    {video.duration} {isAr ? "دقائق" : "min"}
                  </span>
                </div>
                <div className="p-6">
                  <div className="flex items-center gap-3 mb-3">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                  </div>
                  <h3 className="text-lg font-semibold text-[#1E293B] mb-2 group-hover:text-[#10B981] transition-colors">
                    {video.title}
                  </h3>
                  <p className="text-sm text-[#64748B] leading-relaxed">
                    {video.description}
                  </p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Section 07: Webinars & Events */}
      <section className="py-20 md:py-28 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <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>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.resourceCategoryWebinars}
              </h2>
              <p className="mt-3 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "انضم إلى ندواتنا المباشرة والفعاليات التعليمية"
                  : "Join our live webinars and educational events"}
              </p>
            </div>
          </div>

          {/* Webinar Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {webinars.map((webinar, idx) => (
              <article
                key={idx}
                className="group bg-[#FAFAFA] p-8 hover:bg-white border border-transparent hover:border-[#10B981] transition-all"
              >
                <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>
                  <span className="px-2 py-1 text-xs font-medium text-[#10B981] bg-[#10B981]/10">
                    {isAr ? "قادم" : "Upcoming"}
                  </span>
                </div>
                <h3 className="text-lg font-semibold text-[#1E293B] mb-4 group-hover:text-[#10B981] transition-colors">
                  {webinar.title}
                </h3>
                <p className="text-sm text-[#64748B] leading-relaxed mb-6">
                  {webinar.description}
                </p>

                {/* Event Details */}
                <ul className="space-y-2 mb-6">
                  <li className="flex items-center gap-3 text-sm text-[#64748B]">
                    <div className="w-1.5 h-1.5 bg-[#10B981] flex-shrink-0" />
                    <span>{webinar.date}</span>
                  </li>
                  <li className="flex items-center gap-3 text-sm text-[#64748B]">
                    <div className="w-1.5 h-1.5 bg-[#10B981] flex-shrink-0" />
                    <span>{webinar.duration}</span>
                  </li>
                </ul>

                {/* Register Button */}
                <button className="group/btn relative w-full px-6 py-3 bg-[#10B981] text-white text-sm font-medium overflow-hidden">
                  <span className="relative z-10">
                    {t.resourceRegisterWebinar}
                  </span>
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover/btn:translate-y-0 transition-transform duration-300" />
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 md:py-28 bg-[#1E293B]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            <div className="lg:col-span-7">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-px bg-[#10B981]" />
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
                {t.resourcesCTATitle}
              </h2>
              <p className="text-xl text-slate-400 max-w-xl">
                {t.resourcesCTADesc}
              </p>
            </div>
            <div className="lg:col-span-5 flex flex-col sm:flex-row gap-4">
              <Link
                href={`/${params.lang}/contact`}
                className="group relative inline-flex items-center justify-center px-8 py-4 bg-[#10B981] text-white font-medium overflow-hidden"
              >
                <span className="relative z-10">{t.resourcesCTAButton1}</span>
                <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="inline-flex items-center justify-center px-8 py-4 border border-slate-600 text-white font-medium hover:bg-white/5 transition-colors"
              >
                {t.resourcesCTAButton2}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}