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

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

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}`
      : `AI Voice Agents | ${SITE.brand}`,
    description: isAr
      ? "مساعدون صوتيون أذكياء يردون على المكالمات، يديرون الحجوزات، ويتعاملون مع استفسارات العملاء على مدار الساعة"
      : "Intelligent voice assistants that answer calls, manage bookings, and handle customer queries 24/7",
    alternates: {
      canonical: `/${lang}/ai-voice-agents`,
      languages: {
        ar: "/ar/ai-voice-agents",
        en: "/en/ai-voice-agents",
      },
    },
  };
}

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

  const benefits = [
    {
      title: t.benefit247Title,
      description: t.benefit247Desc,
      icon: "🕐",
      number: "01",
    },
    {
      title: t.benefitCostTitle,
      description: t.benefitCostDesc,
      icon: "💰",
      number: "02",
    },
    {
      title: t.benefitBookingTitle,
      description: t.benefitBookingDesc,
      icon: "📅",
      number: "03",
    },
    {
      title: t.benefitHandoffTitle,
      description: t.benefitHandoffDesc,
      icon: "🤝",
      number: "04",
    },
  ];

  const useCases = [
    { title: t.useCase1Title, description: t.useCase1Desc, icon: "💬" },
    { title: t.useCase2Title, description: t.useCase2Desc, icon: "📞" },
    { title: t.useCase3Title, description: t.useCase3Desc, icon: "✏️" },
    { title: t.useCase4Title, description: t.useCase4Desc, icon: "🌙" },
    { title: t.useCase5Title, description: t.useCase5Desc, icon: "📋" },
    { title: t.useCase6Title, description: t.useCase6Desc, icon: "🔔" },
  ];

  const howItWorksSteps = [
    {
      title: t.voiceHowItWorksStep1Title,
      description: t.voiceHowItWorksStep1Desc,
      icon: "⚙️",
    },
    {
      title: t.voiceHowItWorksStep2Title,
      description: t.voiceHowItWorksStep2Desc,
      icon: "📱",
    },
    {
      title: t.voiceHowItWorksStep3Title,
      description: t.voiceHowItWorksStep3Desc,
      icon: "🤖",
    },
    {
      title: t.voiceHowItWorksStep4Title,
      description: t.voiceHowItWorksStep4Desc,
      icon: "📊",
    },
  ];

  const comparisonPoints = [
    { ai: t.comparison1AI, human: t.comparison1Human },
    { ai: t.comparison2AI, human: t.comparison2Human },
    { ai: t.comparison3AI, human: t.comparison3Human },
    { ai: t.comparison4AI, human: t.comparison4Human },
    { ai: t.comparison5AI, human: t.comparison5Human },
    { ai: t.comparison6AI, human: t.comparison6Human },
    { ai: t.comparison7AI, human: t.comparison7Human },
    { ai: t.comparison8AI, human: t.comparison8Human },
  ];

  const features = [
    {
      title: t.voiceFeature1Title,
      description: t.voiceFeature1Desc,
      icon: "🗣️",
    },
    {
      title: t.voiceFeature2Title,
      description: t.voiceFeature2Desc,
      icon: "🧠",
    },
    {
      title: t.voiceFeature3Title,
      description: t.voiceFeature3Desc,
      icon: "⚡",
    },
    {
      title: t.voiceFeature4Title,
      description: t.voiceFeature4Desc,
      icon: "📈",
    },
    {
      title: t.voiceFeature5Title,
      description: t.voiceFeature5Desc,
      icon: "🎓",
    },
    {
      title: t.voiceFeature6Title,
      description: t.voiceFeature6Desc,
      icon: "🔒",
    },
  ];

  const stats = [
    { value: t.stat1Value, label: t.stat1Label },
    { value: t.stat2Value, label: t.stat2Label },
    { value: t.stat3Value, label: t.stat3Label },
    { value: t.stat4Value, label: t.stat4Label },
  ];

  const trustPoints = [
    t.trustPoint1,
    t.trustPoint2,
    t.trustPoint3,
    t.trustPoint4,
  ];

  return (
    <main
      className="relative min-h-screen overflow-hidden bg-[#FAFAFA] dark:bg-[#0F172A]"
      dir={dir}
    >
      {/* Atmospheric Background - Subtle mesh gradient */}
      <div
        className="pointer-events-none fixed inset-0 opacity-60 dark:opacity-40"
        aria-hidden="true"
        style={{
          background: `
            radial-gradient(ellipse 80% 50% at 20% -10%, rgba(16, 185, 129, 0.15), transparent),
            radial-gradient(ellipse 60% 40% at 80% 10%, rgba(16, 185, 129, 0.08), transparent),
            radial-gradient(ellipse 50% 30% at 10% 60%, rgba(16, 185, 129, 0.05), transparent)
          `,
        }}
      />

      {/* Subtle grid overlay */}
      <div
        className="pointer-events-none fixed inset-0 opacity-[0.03] dark:opacity-[0.05]"
        aria-hidden="true"
        style={{
          backgroundImage: `
            linear-gradient(to right, #1E293B 1px, transparent 1px),
            linear-gradient(to bottom, #1E293B 1px, transparent 1px)
          `,
          backgroundSize: "60px 60px",
        }}
      />

      <div className="relative z-10 mx-auto max-w-7xl px-5 py-16 md:px-8 md:py-20">
        {/* ══════════════════════════════════════════════════════════════════
            HERO SECTION - Asymmetric layout with dramatic typography
        ══════════════════════════════════════════════════════════════════ */}
        <section className="relative mb-32">
          <div className="grid gap-12 lg:grid-cols-[1.4fr_1fr] lg:gap-16">
            {/* Left: Content */}
            <div className="space-y-8">
              {/* Floating tag */}
              <div className="inline-flex items-center gap-3">
                <span className="relative flex h-2.5 w-2.5">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#10B981] opacity-75" />
                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-[#10B981]" />
                </span>
                <span className="text-xs font-bold uppercase tracking-[0.2em] text-[#10B981]">
                  {t.aiVoiceAgentsHeroTag}
                </span>
              </div>

              {/* Headline - Dramatic size jump */}
              <h1 className="font-display text-5xl font-extrabold leading-[1.1] tracking-tight text-[#1E293B] dark:text-white md:text-6xl lg:text-7xl">
                {t.aiVoiceAgentsTitle}
              </h1>

              {/* Subhead */}
              <p className="max-w-xl text-lg leading-relaxed text-[#64748B] dark:text-[#94A3B8] md:text-xl">
                {t.aiVoiceAgentsSubtitle}
              </p>

              {/* Trust badges - Horizontal flow */}
              <div className="flex flex-wrap gap-3">
                {trustPoints.slice(0, 3).map((point, i) => (
                  <span
                    key={i}
                    className="inline-flex items-center gap-2 rounded-full border border-[#10B981]/20 bg-[#10B981]/5 px-4 py-2 text-sm font-medium text-[#1E293B] dark:border-[#10B981]/30 dark:bg-[#10B981]/10 dark:text-white"
                  >
                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[#10B981] text-xs text-white">
                      ✓
                    </span>
                    {point}
                  </span>
                ))}
              </div>

              {/* CTAs - Strong visual hierarchy */}
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href={`/${params.lang}/demo`}
                  className="group relative inline-flex items-center gap-2 overflow-hidden rounded-xl bg-[#10B981] px-7 py-4 text-base font-bold text-white shadow-lg shadow-[#10B981]/25 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-[#10B981]/30"
                >
                  <span className="relative z-10">
                    {t.aiVoiceAgentsCTAButton1}
                  </span>
                  <span className="relative z-10 transition-transform duration-300 group-hover:translate-x-1">
                    {isAr ? "←" : "→"}
                  </span>
                  <div className="absolute inset-0 -z-0 bg-gradient-to-r from-[#059669] to-[#10B981] opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                </Link>
                <Link
                  href={`/${params.lang}/contact`}
                  className="group inline-flex items-center gap-2 rounded-xl border-2 border-[#1E293B]/10 bg-white px-7 py-4 text-base font-bold text-[#1E293B] transition-all duration-300 hover:-translate-y-0.5 hover:border-[#10B981]/30 hover:shadow-lg dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-[#10B981]/50"
                >
                  <span>{t.aiVoiceAgentsCTAButton2}</span>
                  <span className="transition-transform duration-300 group-hover:translate-x-1">
                    {isAr ? "←" : "→"}
                  </span>
                </Link>
              </div>
            </div>

            {/* Right: Stats grid with glassmorphism */}
            <div className="grid grid-cols-2 gap-4 self-center">
              {stats.map((stat, i) => (
                <div
                  key={i}
                  className="group relative overflow-hidden rounded-2xl border border-[#1E293B]/5 bg-white/80 p-6 shadow-sm backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#10B981]/20 hover:shadow-lg dark:border-white/5 dark:bg-white/5"
                >
                  {/* Accent bar */}
                  <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-[#10B981] to-[#059669] opacity-0 transition-opacity duration-300 group-hover:opacity-100" />

                  <div className="font-display text-4xl font-extrabold text-[#10B981] md:text-5xl">
                    {stat.value}
                  </div>
                  <div className="mt-2 text-sm font-semibold uppercase tracking-wide text-[#64748B] dark:text-[#94A3B8]">
                    {stat.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            WHY AI VOICE AGENTS - Editorial card layout
        ══════════════════════════════════════════════════════════════════ */}
        <section id="benefits" className="mb-32">
          {/* Section header with decorative line */}
          <div className="mb-12 flex items-end gap-6">
            <div className="space-y-3">
              <span className="text-xs font-bold uppercase tracking-[0.2em] text-[#10B981]">
                {isAr ? "النتائج الرئيسية" : "Key outcomes"}
              </span>
              <h2 className="font-display text-4xl font-extrabold text-[#1E293B] dark:text-white md:text-5xl">
                {isAr ? "لماذا وكلاء الصوت الذكي؟" : "Why AI Voice Agents?"}
              </h2>
              <p className="max-w-2xl text-lg text-[#64748B] dark:text-[#94A3B8]">
                {isAr
                  ? "حول خدمة العملاء لديك بتقنية متقدمة توفر الوقت والمال"
                  : "Transform your customer service with advanced technology that saves time and money"}
              </p>
            </div>
            <div className="hidden h-px flex-1 bg-gradient-to-r from-[#10B981]/40 to-transparent lg:block" />
          </div>

          {/* Benefits grid - Offset cards */}
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {benefits.map((benefit, i) => (
              <article
                key={i}
                className={`group relative overflow-hidden rounded-3xl border border-[#1E293B]/5 bg-white p-8 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-xl dark:border-white/5 dark:bg-[#1E293B]/50 ${
                  i % 2 === 1 ? "lg:translate-y-8" : ""
                }`}
              >
                {/* Floating number */}
                <span className="absolute right-4 top-4 font-display text-6xl font-black text-[#1E293B]/[0.03] dark:text-white/[0.03]">
                  {benefit.number}
                </span>

                {/* Icon with gradient bg */}
                <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#10B981] to-[#059669] text-3xl shadow-lg shadow-[#10B981]/20">
                  {benefit.icon}
                </div>

                <div className="flex items-center justify-between">
                  <h3 className="font-display text-xl font-bold text-[#1E293B] dark:text-white">
                    {benefit.title}
                  </h3>
                  <span className="text-xs font-bold text-[#10B981]">
                    {benefit.number}
                  </span>
                </div>

                <p className="mt-4 text-sm leading-relaxed text-[#64748B] dark:text-[#94A3B8]">
                  {benefit.description}
                </p>

                {/* Bottom accent line */}
                <div className="absolute inset-x-0 bottom-0 h-1 origin-left scale-x-0 bg-gradient-to-r from-[#10B981] to-[#059669] transition-transform duration-500 group-hover:scale-x-100" />
              </article>
            ))}
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            STATS SECTION - Full-width banner with depth
        ══════════════════════════════════════════════════════════════════ */}
        <section className="relative mb-32 overflow-hidden rounded-[2.5rem] bg-[#1E293B] p-12 dark:bg-[#0F172A]">
          {/* Background texture */}
          <div
            className="pointer-events-none absolute inset-0 opacity-20"
            style={{
              backgroundImage: `radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.3), transparent 50%),
                               radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.15), transparent 40%)`,
            }}
          />
          <div
            className="pointer-events-none absolute inset-0 opacity-10"
            style={{
              backgroundImage: `linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                               linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)`,
              backgroundSize: "40px 40px",
            }}
          />

          <div className="relative">
            <h2 className="mb-10 text-center font-display text-3xl font-extrabold text-white md:text-4xl">
              {t.statsTitle}
            </h2>

            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
              {stats.map((stat, i) => (
                <div
                  key={i}
                  className="group rounded-2xl border border-white/10 bg-white/5 p-8 text-center backdrop-blur-sm transition-all duration-300 hover:border-[#10B981]/30 hover:bg-white/10"
                >
                  <div className="font-display text-5xl font-extrabold text-[#10B981] md:text-6xl">
                    {stat.value}
                  </div>
                  <div className="mt-3 text-sm font-semibold uppercase tracking-wider text-white/60">
                    {stat.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            USE CASES / CAPABILITIES - Bento grid
        ══════════════════════════════════════════════════════════════════ */}
        <section id="use-cases" className="mb-32">
          <div className="mb-12 space-y-3">
            <span className="text-xs font-bold uppercase tracking-[0.2em] text-[#10B981]">
              {isAr ? "القدرات" : "Capabilities"}
            </span>
            <h2 className="font-display text-4xl font-extrabold text-[#1E293B] dark:text-white md:text-5xl">
              {t.useCasesTitle}
            </h2>
            <p className="max-w-2xl text-lg text-[#64748B] dark:text-[#94A3B8]">
              {t.useCasesSubtitle}
            </p>
          </div>

          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {useCases.map((useCase, i) => (
              <article
                key={i}
                className="group relative overflow-hidden rounded-2xl border border-[#1E293B]/5 bg-white p-7 transition-all duration-300 hover:-translate-y-1 hover:border-[#10B981]/20 hover:shadow-xl dark:border-white/5 dark:bg-[#1E293B]/50"
              >
                <div className="mb-5 flex items-center justify-between">
                  <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-[#10B981]/10 to-[#059669]/10 text-2xl transition-all duration-300 group-hover:from-[#10B981] group-hover:to-[#059669] group-hover:text-white group-hover:shadow-lg group-hover:shadow-[#10B981]/20">
                    {useCase.icon}
                  </div>
                  <span className="font-display text-4xl font-black text-[#1E293B]/[0.04] dark:text-white/[0.04]">
                    0{i + 1}
                  </span>
                </div>

                <h3 className="font-display text-lg font-bold text-[#1E293B] transition-colors duration-300 group-hover:text-[#10B981] dark:text-white">
                  {useCase.title}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-[#64748B] dark:text-[#94A3B8]">
                  {useCase.description}
                </p>
              </article>
            ))}
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            LIVE DEMO SECTION
        ══════════════════════════════════════════════════════════════════ */}
        <section
          id="demo"
          className="relative mb-32 overflow-hidden rounded-[2.5rem] border border-[#10B981]/20 bg-gradient-to-br from-[#10B981]/5 via-white to-[#10B981]/10 p-10 dark:from-[#10B981]/10 dark:via-[#1E293B] dark:to-[#10B981]/5 md:p-14"
        >
          <div className="grid gap-12 lg:grid-cols-[1.2fr_1fr]">
            <div className="space-y-6">
              <span className="inline-flex items-center gap-2 rounded-full bg-[#10B981] px-4 py-2 text-xs font-bold uppercase tracking-wider text-white shadow-lg shadow-[#10B981]/25">
                <span className="h-2 w-2 animate-pulse rounded-full bg-white" />
                {isAr ? "تجربة مباشرة" : "Live Demo"}
              </span>

              <h2 className="font-display text-3xl font-extrabold text-[#1E293B] dark:text-white md:text-4xl">
                {t.demoTitle}
              </h2>

              <p className="text-lg text-[#64748B] dark:text-[#94A3B8]">
                {t.demoSubtitle}
              </p>

              <div className="flex flex-wrap gap-4 pt-2">
                <VoiceAgentTriggerButton
                  label={isAr ? "ابدأ المحادثة الآن" : "Start Conversation Now"}
                  ariaLabel={
                    isAr
                      ? "ابدأ محادثة مع الوكيل الصوتي الذكي"
                      : "Start a conversation with the AI voice agent"
                  }
                />
                <Link
                  href={`/${params.lang}/demo`}
                  className="group inline-flex items-center gap-2 rounded-xl border-2 border-[#10B981]/30 bg-white px-6 py-3.5 text-sm font-bold text-[#10B981] transition-all duration-300 hover:-translate-y-0.5 hover:border-[#10B981] hover:shadow-lg dark:bg-transparent dark:text-[#10B981]"
                >
                  {t.aiVoiceAgentsCTAButton1}
                  <span className="transition-transform duration-300 group-hover:translate-x-1">
                    {isAr ? "←" : "→"}
                  </span>
                </Link>
              </div>

              <p className="text-sm italic text-[#94A3B8]">{t.demoNote}</p>
            </div>

            {/* Demo widget container */}
            <div className="overflow-hidden rounded-2xl border border-[#1E293B]/10 bg-white shadow-xl dark:border-white/10 dark:bg-[#1E293B]">
              <div className="border-b border-[#1E293B]/10 bg-[#1E293B] px-6 py-4 dark:border-white/10">
                <span className="text-sm font-bold text-white">
                  {isAr ? "ويدجت الوكيل الصوتي" : "Voice agent widget"}
                </span>
              </div>
              <div className="p-6">
                <ElevenLabsWidget
                  agentId="agent_8201k9czbnrve87tttqeyxxcyrks"
                  placeholder={
                    isAr
                      ? 'انقر على "ابدأ المحادثة الآن" للبدء'
                      : 'Click "Start Conversation Now" to begin'
                  }
                />
              </div>
            </div>
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            HOW IT WORKS - Timeline/Process flow
        ══════════════════════════════════════════════════════════════════ */}
        <section id="how-it-works" className="mb-32">
          <div className="mb-12 space-y-3">
            <span className="text-xs font-bold uppercase tracking-[0.2em] text-[#10B981]">
              {isAr ? "العملية" : "Process"}
            </span>
            <h2 className="font-display text-4xl font-extrabold text-[#1E293B] dark:text-white md:text-5xl">
              {t.voiceHowItWorksTitle}
            </h2>
            <p className="max-w-2xl text-lg text-[#64748B] dark:text-[#94A3B8]">
              {t.voiceHowItWorksSubtitle}
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {howItWorksSteps.map((step, i) => (
              <article
                key={i}
                className="group relative overflow-hidden rounded-2xl border border-[#1E293B]/5 bg-white p-7 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/5 dark:bg-[#1E293B]/50"
              >
                {/* Step number + connector */}
                <div className="mb-6 flex items-center gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-[#10B981] to-[#059669] font-display text-xl font-bold text-white shadow-lg shadow-[#10B981]/25">
                    {i + 1}
                  </div>
                  <div className="h-px flex-1 bg-gradient-to-r from-[#10B981]/30 to-transparent" />
                  <span className="text-2xl">{step.icon}</span>
                </div>

                <h3 className="font-display text-lg font-bold text-[#1E293B] dark:text-white">
                  {step.title}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-[#64748B] dark:text-[#94A3B8]">
                  {step.description}
                </p>
              </article>
            ))}
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            COMPARISON TABLE - Clean, modern
        ══════════════════════════════════════════════════════════════════ */}
        <section className="mb-32">
          <div className="mb-10 text-center">
            <h2 className="font-display text-3xl font-extrabold text-[#1E293B] dark:text-white md:text-4xl">
              {t.comparisonTitle}
            </h2>
            <p className="mt-3 text-lg text-[#64748B] dark:text-[#94A3B8]">
              {t.comparisonSubtitle}
            </p>
          </div>

          <div className="overflow-hidden rounded-2xl border border-[#1E293B]/10 shadow-xl dark:border-white/10">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-gradient-to-r from-[#10B981] to-[#059669]">
                    <th className="px-6 py-5 text-left text-sm font-bold uppercase tracking-wider text-white">
                      {isAr ? "الميزة" : "Feature"}
                    </th>
                    <th className="px-6 py-5 text-left text-sm font-bold uppercase tracking-wider text-white">
                      {t.comparisonAI}
                    </th>
                    <th className="px-6 py-5 text-left text-sm font-bold uppercase tracking-wider text-white">
                      {t.comparisonHuman}
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#1E293B]/5 bg-white dark:divide-white/5 dark:bg-[#1E293B]/50">
                  {comparisonPoints.map((point, i) => (
                    <tr
                      key={i}
                      className="transition-colors hover:bg-[#10B981]/5"
                    >
                      <td className="px-6 py-5 font-display text-sm font-bold text-[#1E293B] dark:text-white">
                        {i + 1}
                      </td>
                      <td className="px-6 py-5">
                        <div className="flex items-center gap-3">
                          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#10B981]/10 text-xs text-[#10B981]">
                            ✓
                          </span>
                          <span className="text-sm text-[#1E293B] dark:text-white">
                            {point.ai}
                          </span>
                        </div>
                      </td>
                      <td className="px-6 py-5">
                        <div className="flex items-center gap-3">
                          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-red-500/10 text-xs text-red-500">
                            ✗
                          </span>
                          <span className="text-sm text-[#64748B] dark:text-[#94A3B8]">
                            {point.human}
                          </span>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            ADVANCED FEATURES - Clean grid
        ══════════════════════════════════════════════════════════════════ */}
        <section className="mb-32">
          <div className="mb-12 space-y-3">
            <span className="text-xs font-bold uppercase tracking-[0.2em] text-[#10B981]">
              {isAr ? "مزايا متقدمة" : "Advanced Features"}
            </span>
            <h2 className="font-display text-4xl font-extrabold text-[#1E293B] dark:text-white md:text-5xl">
              {t.voiceFeaturesTitle}
            </h2>
            <p className="max-w-2xl text-lg text-[#64748B] dark:text-[#94A3B8]">
              {t.voiceFeaturesSubtitle}
            </p>
          </div>

          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {features.map((feature, i) => (
              <article
                key={i}
                className="group relative overflow-hidden rounded-2xl border border-[#1E293B]/5 bg-white p-7 transition-all duration-300 hover:-translate-y-1 hover:border-[#10B981]/20 hover:shadow-xl dark:border-white/5 dark:bg-[#1E293B]/50"
              >
                <div className="mb-5 flex items-center justify-between">
                  <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-[#10B981] to-[#059669] text-2xl text-white shadow-lg shadow-[#10B981]/20">
                    {feature.icon}
                  </div>
                  <span className="rounded-full bg-[#10B981]/10 px-3 py-1 text-xs font-bold text-[#10B981]">
                    AI
                  </span>
                </div>

                <h3 className="font-display text-lg font-bold text-[#1E293B] dark:text-white">
                  {feature.title}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-[#64748B] dark:text-[#94A3B8]">
                  {feature.description}
                </p>
              </article>
            ))}
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            SECURITY & TRUST
        ══════════════════════════════════════════════════════════════════ */}
        <section className="mb-32 overflow-hidden rounded-[2.5rem] border border-[#1E293B]/10 bg-gradient-to-br from-white via-[#FAFAFA] to-[#10B981]/5 p-12 dark:border-white/10 dark:from-[#1E293B] dark:via-[#0F172A] dark:to-[#10B981]/10">
          <div className="mb-10 text-center">
            <h2 className="font-display text-3xl font-extrabold text-[#1E293B] dark:text-white md:text-4xl">
              {t.trustTitle}
            </h2>
            <p className="mt-3 text-lg text-[#64748B] dark:text-[#94A3B8]">
              {t.trustSubtitle}
            </p>
          </div>

          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
            {trustPoints.map((point, i) => (
              <div
                key={i}
                className="flex items-start gap-4 rounded-2xl border border-[#10B981]/10 bg-white p-5 transition-all duration-300 hover:-translate-y-0.5 hover:border-[#10B981]/30 hover:shadow-lg dark:border-[#10B981]/20 dark:bg-[#1E293B]/50"
              >
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[#10B981] to-[#059669] text-white shadow-md">
                  ✓
                </div>
                <p className="text-sm font-medium leading-relaxed text-[#1E293B] dark:text-white/90">
                  {point}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* ══════════════════════════════════════════════════════════════════
            FINAL CTA - Bold, confident
        ══════════════════════════════════════════════════════════════════ */}
        <section className="relative overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-[#10B981] via-[#059669] to-[#047857] p-12 text-white shadow-2xl md:p-16">
          {/* Background effects */}
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background: `
                radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1), transparent 35%)
              `,
            }}
          />
          <div
            className="pointer-events-none absolute inset-0 opacity-10"
            style={{
              backgroundImage: `linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),
                               linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px)`,
              backgroundSize: "50px 50px",
            }}
          />

          <div className="relative text-center">
            <h2 className="mx-auto max-w-3xl font-display text-4xl font-extrabold leading-tight md:text-5xl">
              {t.aiVoiceAgentsCTATitle}
            </h2>
            <p className="mx-auto mt-6 max-w-2xl text-lg text-white/85 md:text-xl">
              {t.aiVoiceAgentsCTADesc}
            </p>

            <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
              <Link
                href={`/${params.lang}/demo`}
                className="group inline-flex items-center gap-2 rounded-xl bg-white px-8 py-4 text-base font-bold text-[#10B981] shadow-xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-2xl"
              >
                {t.aiVoiceAgentsCTAButton1}
                <span className="transition-transform duration-300 group-hover:translate-x-1">
                  {isAr ? "←" : "→"}
                </span>
              </Link>
              <Link
                href={`/${params.lang}/contact`}
                className="group inline-flex items-center gap-2 rounded-xl border-2 border-white/40 bg-white/10 px-8 py-4 text-base font-bold text-white backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-white/60 hover:bg-white/20"
              >
                {t.aiVoiceAgentsCTAButton2}
                <span className="transition-transform duration-300 group-hover:translate-x-1">
                  {isAr ? "←" : "→"}
                </span>
              </Link>
              <Link
                href={`/${params.lang}/signup`}
                className="group inline-flex items-center gap-2 rounded-xl border-2 border-white/40 bg-white/10 px-8 py-4 text-base font-bold text-white backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-white/60 hover:bg-white/20"
              >
                {t.aiVoiceAgentsCTAButton3}
                <span className="transition-transform duration-300 group-hover:translate-x-1">
                  {isAr ? "←" : "→"}
                </span>
              </Link>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}