import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import {
  IntegrationsGallery,
  APIWebhooks,
  IdentityAccess,
  SecurityCompliance,
  MedicalData,
  DataResidency,
  AuditMonitoring,
  MigrationSupport,
  FAQ,
} from "./components";

export const revalidate = SITE.revalidateSeconds;

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

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

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* ══════════════════════════════════════════════════════════════════
          HERO SECTION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 md:py-32 bg-gradient-to-b from-white via-[#FAFAFA] to-white overflow-hidden">
        {/* Subtle grid pattern */}
        <div
          className="pointer-events-none absolute inset-0 opacity-[0.02]"
          aria-hidden="true"
          style={{
            backgroundImage: `
              linear-gradient(to right, #1E293B 1px, transparent 1px),
              linear-gradient(to bottom, #1E293B 1px, transparent 1px)
            `,
            backgroundSize: "80px 80px",
          }}
        />

        <div className="relative z-10 mx-auto max-w-7xl px-6">
          <div className="max-w-4xl">
            {/* Section number */}
            <div className="flex items-center gap-3 mb-8">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                00
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#10B981] text-sm font-medium uppercase tracking-wider">
                {isAr ? "بوابة المؤسسات" : "Enterprise Ready"}
              </span>
            </div>

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

            {/* Subhead */}
            <p className="text-xl md:text-2xl text-[#64748B] leading-relaxed max-w-3xl mb-12">
              {t.integrationsHeroSubline}
            </p>

            {/* CTAs */}
            <div className="flex flex-wrap gap-4">
              <Link
                href={`/${params.lang}/demo`}
                className="group relative inline-flex items-center gap-3 px-8 py-4 bg-[#10B981] text-white font-semibold overflow-hidden transition-all duration-300"
              >
                <span className="relative z-10">{t.browseIntegrations}</span>
                <svg
                  className="relative z-10 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d={
                      isAr ? "M19 12H5M12 5l-7 7 7 7" : "M5 12h14M12 5l7 7-7 7"
                    }
                  />
                </svg>
                <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}/contact`}
                className="inline-flex items-center gap-2 px-8 py-4 border-2 border-[#1E293B] text-[#1E293B] font-semibold hover:bg-[#1E293B] hover:text-white transition-colors duration-300"
              >
                {t.talkToSales}
              </Link>
            </div>
          </div>

          {/* Stats row */}
          <div className="mt-20 grid grid-cols-2 md:grid-cols-6 gap-px bg-slate-200">
            {[
              { label: t.integrationsBadge1, icon: "🔒" },
              { label: t.integrationsBadge2, icon: "⚡" },
              { label: t.integrationsBadge3, icon: "🌐" },
              { label: t.integrationsBadge4, icon: "📊" },
              { label: t.integrationsBadge5, icon: "🔗" },
              { label: t.integrationsBadge6, icon: "✓" },
            ].map((badge, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 flex items-center gap-3 hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <span className="text-xl">{badge.icon}</span>
                <span className="text-sm font-medium text-[#1E293B]">
                  {badge.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          01 - INTEGRATIONS GALLERY
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <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] mb-4">
                {t.integrationsGalleryTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.integrationsGallerySubtitle}
              </p>
            </div>
          </div>
          <IntegrationsGallery lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          02 - API & WEBHOOKS
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-flex items-center gap-2 px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-xs font-bold uppercase tracking-wider mb-4">
                <span className="w-1.5 h-1.5 bg-[#10B981]" />
                {isAr ? "للمطورين" : "Developer First"}
              </span>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.apiWebhooksTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.apiWebhooksSubtitle}
              </p>
            </div>
          </div>
          <APIWebhooks lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          03 - IDENTITY & ACCESS
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <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] mb-4">
                {t.identityAccessTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.identityAccessSubtitle}
              </p>
            </div>
          </div>
          <IdentityAccess lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          04 - SECURITY & COMPLIANCE
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <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] mb-4">
                {t.securityComplianceTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.securityComplianceSubtitle}
              </p>
            </div>
          </div>
          <SecurityCompliance lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          05 - MEDICAL DATA
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <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] mb-4">
                {t.medicalDataTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.medicalDataSubtitle}
              </p>
            </div>
          </div>
          <MedicalData lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          06 - DATA RESIDENCY
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <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] mb-4">
                {t.dataResidencyTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.dataResidencySubtitle}
              </p>
            </div>
          </div>
          <DataResidency lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          07 - AUDIT & MONITORING
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <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] mb-4">
                {t.auditMonitoringTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.auditMonitoringSubtitle}
              </p>
            </div>
          </div>
          <AuditMonitoring lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          08 - MIGRATION & SUPPORT
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.migrationSupportTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.migrationSupportSubtitle}
              </p>
            </div>
          </div>
          <MigrationSupport lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          09 - FAQ
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-[#FAFAFA]">
        <div className="mx-auto max-w-4xl px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.faqTitle}
            </h2>
          </div>
          <FAQ lang={params.lang} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          FINAL CTA
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 md:py-32 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          <div className="bg-[#1E293B] p-12 md:p-20">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
                {t.closingCTATitle}
              </h2>
              <p className="text-lg md:text-xl text-white/70 mb-10">
                {t.closingCTAText}
              </p>

              <div className="flex flex-wrap items-center justify-center gap-4">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group relative inline-flex items-center gap-3 px-8 py-4 bg-[#10B981] text-white font-semibold overflow-hidden transition-all duration-300"
                >
                  <span className="relative z-10">{t.getStarted}</span>
                  <svg
                    className="relative z-10 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d={
                        isAr
                          ? "M19 12H5M12 5l-7 7 7 7"
                          : "M5 12h14M12 5l7 7-7 7"
                      }
                    />
                  </svg>
                  <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 gap-2 px-8 py-4 border-2 border-white/30 text-white font-semibold hover:bg-white/10 transition-colors duration-300"
                >
                  {t.scheduleDemo}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}