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 t = UI[params.lang].t;

  return {
    title: `${t.termsPageTitle} | ${SITE.brand}`,
    description: t.termsPageDescription,
    alternates: {
      canonical: `/${params.lang}/terms`,
      languages: {
        ar: "/ar/terms",
        en: "/en/terms",
      },
    },
  };
}

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

  const sections = [
    { id: "acceptance", num: "01", title: t.termsAcceptanceTitle },
    { id: "service", num: "02", title: t.termsServiceTitle },
    { id: "responsibilities", num: "03", title: t.termsResponsibilitiesTitle },
    { id: "payment", num: "04", title: t.termsPaymentTitle },
    { id: "intellectual-property", num: "05", title: t.termsIPTitle },
    { id: "privacy", num: "06", title: t.termsPrivacyTitle },
    { id: "liability", num: "07", title: t.termsLiabilityTitle },
    { id: "termination", num: "08", title: t.termsTerminationTitle },
    { id: "governing-law", num: "09", title: t.termsGoverningLawTitle },
    { id: "modifications", num: "10", title: t.termsModificationsTitle },
    { id: "general", num: "11", title: t.termsGeneralTitle },
    { id: "contact", num: "12", title: t.termsContactTitle },
  ];

  return (
    <div dir={dir} className="min-h-screen bg-[#FAFAFA]">
      {/* Hero Section */}
      <section className="bg-white border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Breadcrumb */}
          <div className="py-6 border-b border-slate-100">
            <div className="flex items-center gap-2 text-sm text-[#64748B]">
              <Link
                href={`/${params.lang}`}
                className="hover:text-[#10B981] transition-colors"
              >
                {isAr ? "الرئيسية" : "Home"}
              </Link>
              <span>/</span>
              <span className="text-[#1E293B]">
                {isAr ? "الشروط والأحكام" : "Terms & Conditions"}
              </span>
            </div>
          </div>

          {/* Hero Content */}
          <div className="py-16 lg:py-20">
            <div className="flex items-center gap-3 mb-6">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                LEGAL
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>

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

            <p className="text-xl text-[#64748B] max-w-2xl mb-4">
              {t.termsHeroSubtitle}
            </p>

            <div className="flex items-center gap-6 text-sm">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-[#10B981] rounded-full" />
                <span className="text-[#64748B]">{t.termsEffectiveDate}</span>
              </div>
              <Link
                href={`/${params.lang}/privacy`}
                className="text-[#10B981] hover:underline"
              >
                {isAr ? "سياسة الخصوصية" : "Privacy Policy"} →
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Main Content with Sidebar */}
      <section className="py-12 lg:py-16">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="grid lg:grid-cols-12 gap-12">
            {/* Sticky Sidebar - Table of Contents */}
            <aside className="lg:col-span-3">
              <div className="lg:sticky lg:top-24">
                <h3 className="text-xs font-mono tracking-wider text-[#10B981] uppercase mb-6">
                  {isAr ? "المحتويات" : "Contents"}
                </h3>
                <nav className="space-y-1">
                  {sections.map((section) => (
                    <a
                      key={section.id}
                      href={`#${section.id}`}
                      className="group flex items-center gap-3 py-2 text-sm text-[#64748B] hover:text-[#1E293B] transition-colors"
                    >
                      <span
                        className="text-[#10B981] font-mono text-xs opacity-50 group-hover:opacity-100 transition-opacity"
                        dir="ltr"
                      >
                        {section.num}
                      </span>
                      <span className="truncate">{section.title}</span>
                    </a>
                  ))}
                </nav>

                {/* Quick Links */}
                <div className="mt-8 pt-8 border-t border-slate-200">
                  <h4 className="text-xs font-mono tracking-wider text-[#64748B] uppercase mb-4">
                    {isAr ? "روابط سريعة" : "Quick Links"}
                  </h4>
                  <div className="space-y-2">
                    <Link
                      href={`/${params.lang}/privacy`}
                      className="block text-sm text-[#64748B] hover:text-[#10B981] transition-colors"
                    >
                      {isAr ? "سياسة الخصوصية" : "Privacy Policy"}
                    </Link>
                    <Link
                      href={`/${params.lang}/cookies`}
                      className="block text-sm text-[#64748B] hover:text-[#10B981] transition-colors"
                    >
                      {isAr ? "سياسة الكوكيز" : "Cookie Policy"}
                    </Link>
                    <Link
                      href={`/${params.lang}/contact`}
                      className="block text-sm text-[#64748B] hover:text-[#10B981] transition-colors"
                    >
                      {isAr ? "اتصل بنا" : "Contact Us"}
                    </Link>
                  </div>
                </div>
              </div>
            </aside>

            {/* Main Content */}
            <article className="lg:col-span-9">
              {/* Section 1: Acceptance of Terms */}
              <section id="acceptance" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    01
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsAcceptanceTitle}
                  </h2>
                </div>
                <div className="space-y-4 text-[#64748B] leading-relaxed pl-0 lg:pl-20">
                  <p>{t.termsAcceptancePara1}</p>
                  <p>{t.termsAcceptancePara2}</p>
                  <p>{t.termsAcceptancePara3}</p>
                </div>
              </section>

              {/* Section 2: Service Description */}
              <section id="service" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    02
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsServiceTitle}
                  </h2>
                </div>
                <div className="space-y-4 text-[#64748B] leading-relaxed pl-0 lg:pl-20">
                  <p>{t.termsServicePara1}</p>
                  <ul className="space-y-3 my-6">
                    {[
                      t.termsServiceFeature1,
                      t.termsServiceFeature2,
                      t.termsServiceFeature3,
                      t.termsServiceFeature4,
                      t.termsServiceFeature5,
                    ].map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-3">
                        <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <p>{t.termsServicePara2}</p>
                </div>
              </section>

              {/* Section 3: User Responsibilities */}
              <section id="responsibilities" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    03
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsResponsibilitiesTitle}
                  </h2>
                </div>
                <div className="space-y-8 pl-0 lg:pl-20">
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsResponsibilitiesSubtitle1}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsResponsibilitiesPara1}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsResponsibilitiesSubtitle2}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsResponsibilitiesPara2}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsResponsibilitiesSubtitle3}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed mb-4">
                      {t.termsResponsibilitiesPara3}
                    </p>
                    <ul className="space-y-2">
                      {[
                        t.termsResponsibilitiesProhibited1,
                        t.termsResponsibilitiesProhibited2,
                        t.termsResponsibilitiesProhibited3,
                        t.termsResponsibilitiesProhibited4,
                        t.termsResponsibilitiesProhibited5,
                      ].map((item, idx) => (
                        <li
                          key={idx}
                          className="flex items-start gap-3 text-[#64748B]"
                        >
                          <div className="w-1.5 h-1.5 bg-red-400 mt-2 flex-shrink-0" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </section>

              {/* Section 4: Payment Terms */}
              <section id="payment" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    04
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsPaymentTitle}
                  </h2>
                </div>
                <div className="space-y-8 pl-0 lg:pl-20">
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsPaymentSubtitle1}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsPaymentPara1}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsPaymentSubtitle2}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsPaymentPara2}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsPaymentSubtitle3}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsPaymentPara3}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsPaymentSubtitle4}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsPaymentPara4}
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 5: Intellectual Property */}
              <section
                id="intellectual-property"
                className="mb-16 scroll-mt-24"
              >
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    05
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsIPTitle}
                  </h2>
                </div>
                <div className="space-y-4 text-[#64748B] leading-relaxed pl-0 lg:pl-20">
                  <p>{t.termsIPPara1}</p>
                  <p>{t.termsIPPara2}</p>
                  <p>{t.termsIPPara3}</p>
                </div>
              </section>

              {/* Section 6: Privacy */}
              <section id="privacy" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    06
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsPrivacyTitle}
                  </h2>
                </div>
                <div className="space-y-4 text-[#64748B] leading-relaxed pl-0 lg:pl-20">
                  <p>{t.termsPrivacyPara1}</p>
                  <p>{t.termsPrivacyPara2}</p>
                  <p>{t.termsPrivacyPara3}</p>
                </div>
              </section>

              {/* Section 7: Liability */}
              <section id="liability" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    07
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsLiabilityTitle}
                  </h2>
                </div>
                <div className="space-y-8 pl-0 lg:pl-20">
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsLiabilitySubtitle1}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsLiabilityPara1}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsLiabilitySubtitle2}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsLiabilityPara2}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsLiabilitySubtitle3}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsLiabilityPara3}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsLiabilitySubtitle4}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsLiabilityPara4}
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 8: Termination */}
              <section id="termination" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    08
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsTerminationTitle}
                  </h2>
                </div>
                <div className="space-y-8 pl-0 lg:pl-20">
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsTerminationSubtitle1}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsTerminationPara1}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsTerminationSubtitle2}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsTerminationPara2}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsTerminationSubtitle3}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsTerminationPara3}
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 9: Governing Law */}
              <section id="governing-law" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    09
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsGoverningLawTitle}
                  </h2>
                </div>
                <div className="space-y-4 text-[#64748B] leading-relaxed pl-0 lg:pl-20">
                  <p>{t.termsGoverningLawPara1}</p>
                  <p>{t.termsGoverningLawPara2}</p>
                  <p>{t.termsGoverningLawPara3}</p>
                </div>
              </section>

              {/* Section 10: Modifications */}
              <section id="modifications" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    10
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsModificationsTitle}
                  </h2>
                </div>
                <div className="space-y-4 text-[#64748B] leading-relaxed pl-0 lg:pl-20">
                  <p>{t.termsModificationsPara1}</p>
                  <p>{t.termsModificationsPara2}</p>
                </div>
              </section>

              {/* Section 11: General Provisions */}
              <section id="general" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    11
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsGeneralTitle}
                  </h2>
                </div>
                <div className="space-y-8 pl-0 lg:pl-20">
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsGeneralSubtitle1}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsGeneralPara1}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsGeneralSubtitle2}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsGeneralPara2}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsGeneralSubtitle3}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsGeneralPara3}
                    </p>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {t.termsGeneralSubtitle4}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">
                      {t.termsGeneralPara4}
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 12: Contact */}
              <section id="contact" className="mb-16 scroll-mt-24">
                <div className="flex items-start gap-6 mb-6">
                  <span
                    className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    12
                  </span>
                  <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B] pt-2">
                    {t.termsContactTitle}
                  </h2>
                </div>
                <div className="pl-0 lg:pl-20">
                  <p className="text-[#64748B] leading-relaxed mb-6">
                    {t.termsContactPara1}
                  </p>

                  {/* Contact Card */}
                  <div className="bg-white border border-slate-200 p-8">
                    <div className="grid sm:grid-cols-2 gap-6">
                      <div>
                        <h4 className="text-xs font-mono tracking-wider text-[#10B981] uppercase mb-3">
                          {isAr ? "البريد الإلكتروني" : "Email"}
                        </h4>
                        <p className="text-[#1E293B] font-medium">
                          legal@mawidi.com
                        </p>
                      </div>
                      <div>
                        <h4 className="text-xs font-mono tracking-wider text-[#10B981] uppercase mb-3">
                          {isAr ? "الهاتف" : "Phone"}
                        </h4>
                        <p className="text-[#1E293B] font-medium">
                          +974-0000-0000
                        </p>
                      </div>
                      <div>
                        <h4 className="text-xs font-mono tracking-wider text-[#10B981] uppercase mb-3">
                          {isAr ? "العنوان" : "Address"}
                        </h4>
                        <p className="text-[#1E293B] font-medium">
                          {isAr ? "الدوحة، قطر" : "Doha, Qatar"}
                        </p>
                      </div>
                      <div>
                        <h4 className="text-xs font-mono tracking-wider text-[#10B981] uppercase mb-3">
                          {isAr ? "الدعم العام" : "General Support"}
                        </h4>
                        <p className="text-[#1E293B] font-medium">
                          hello@mawidi.com
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </article>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-white border-t border-slate-200">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
            <div>
              <h3 className="text-xl font-bold text-[#1E293B] mb-2">
                {isAr ? "هل لديك أسئلة؟" : "Have questions?"}
              </h3>
              <p className="text-[#64748B]">
                {isAr
                  ? "فريقنا القانوني مستعد للمساعدة"
                  : "Our legal team is ready to help"}
              </p>
            </div>
            <div className="flex gap-4">
              <Link
                href={`/${params.lang}/contact`}
                className="group relative px-6 py-3 bg-[#10B981] text-white font-semibold overflow-hidden transition-colors"
              >
                <span className="relative z-10">
                  {isAr ? "تواصل معنا" : "Contact Us"}
                </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}`}
                className="px-6 py-3 border border-slate-300 text-[#1E293B] font-semibold hover:border-[#10B981] hover:text-[#10B981] transition-colors"
              >
                {isAr ? "العودة للرئيسية" : "Back to Home"}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}