import Navbar from "@/components/landing/Navbar";
import Footer from "@/components/landing/Footer";
import Link from "next/link";
import { Shield, Rocket, SquarePen, Users, ArrowLeft, Bot, Sparkles, Check } from "lucide-react";

interface FeatureContent {
  title: string;
  subtitle: string;
  desc: string;
  bullets: string[];
  icon: any;
  themeColor: string;
}

const featuresMap: Record<string, FeatureContent> = {
  "click-protection": {
    title: "نظام حماية النقرات الوهمية والاحتيالية",
    subtitle: "وفّر ميزانيتك لحركات المرور الحقيقية والعملاء المستهدفين",
    desc: "يعمل نظامنا الذكي على مراقبة وتتبع سلوك الزوار القادمين من إعلانات جوجل على مدار الساعة. يقوم النظام تلقائياً بكشف وتصفية النقرات الناتجة عن البوتات، المنافسين، أو مزارع النقرات، وإضافتها لقائمة الحظر الفوري.",
    bullets: [
      "حظر فوري وتلقائي لعناوين الـ IP الاحتيالية.",
      "توفير يصل إلى 30% من الميزانية المهدرة.",
      "تقارير تفصيلية عن سلوك ومصادر النقرات الوهمية.",
      "متكامل بنسبة 100% مع حسابات إعلانات جوجل بدون إعداد معقد."
    ],
    icon: Shield,
    themeColor: "text-red-400 border-red-500/20 bg-red-500/5",
  },
  "campaign-builder": {
    title: "منشئ الحملات الإعلانية الفوري بالـ AI",
    subtitle: "خطط، أنشئ، وأطلق إعلاناتك الاحترافية في 3 دقائق",
    desc: "بمساعدة أحدث نماذج الذكاء الاصطناعي (ChatGPT, Claude, DeepSeek, Gemini, Qwen)، يمكنك كتابة وصف بسيط لشركتك ودع المنصة تتولى استخراج الكلمات الدلالية، الأوصاف، العناوين، واستراتيجية المزايدة المناسبة.",
    bullets: [
      "توليد فوري لـ 15 عنواناً إعلانياً و4 أوصاف متناسقة.",
      "اقتراح الكلمات المفتاحية الأكثر ربحية ونية شراء عالية.",
      "بناء هيكل المجموعات الإعلانية وتقسيم الميزانية تلقائياً.",
      "إطلاق مباشر لحساب Google Ads الخاص بك بضغطة زر."
    ],
    icon: Rocket,
    themeColor: "text-emerald-400 border-emerald-500/20 bg-emerald-500/5",
  },
  "ai-ads": {
    title: "صناعة وتصميم الإعلانات الإبداعية بالذكاء الاصطناعي",
    subtitle: "إعلانات تتكيف مع بحث المستخدمين وتحقق أعلى عائد نقر CTR",
    desc: "يقوم مولّد الإعلانات لدينا بكتابة نصوص جذابة ومقنعة تخاطب اهتمامات العميل مباشرة، مع اختبار تركيبات مختلفة من العناوين تلقائياً للوصول للتركيبة الفائزة.",
    bullets: [
      "نصوص إعلانية تتوافق مع معايير جودة إعلانات جوجل الصارمة.",
      "تحسين جودة الإعلان (Ad Strength) للوصول لتقييم 'ممتاز'.",
      "أدوات كتابة إبداعية مخصصة للمستهلك العربي بمختلف اللهجات.",
      "توفير ساعات طويلة من العصف الذهني وكتابة المحتوى."
    ],
    icon: SquarePen,
    themeColor: "text-purple-400 border-purple-500/20 bg-purple-500/5",
  },
  "team": {
    title: "تعرف على فريق برو كود ادز",
    subtitle: "مجموعة من المهندسين والخبراء الرقميين يقودون ثورة الإعلان العربي بالـ AI",
    desc: "نحن نسعى لتبسيط التسويق الرقمي وجعل أدوات إدارة الإعلانات المتقدمة في متناول الجميع، عبر دمج الذكاء الاصطناعي في صلب إدارة الميزانيات وتحسين الحملات الإعلانية.",
    bullets: [
      "فريق دعم مخصص لمساعدتك في ربط وتهيئة حساباتك.",
      "تطوير مستمر للأدوات وإضافة منصات إعلانية جديدة أسبوعياً.",
      "خبرة عميقة ممتدة لسنوات في التسويق عبر محركات البحث وسلوك المستهلك."
    ],
    icon: Users,
    themeColor: "text-blue-400 border-blue-500/20 bg-blue-500/5",
  }
};

const slugsList = [
  "click-protection",
  "campaign-builder",
  "ai-ads",
  "analytics",
  "auto-optimize",
  "49-languages",
  "performance-analyze",
  "campaign-optimize",
  "ai-ad-creative",
  "competitor-analysis",
  "keyword-research",
  "google-ads-costs",
  "ads-grader",
  "ppc-optimization",
  "facebook-ads-optimization",
  "google-ads-optimization",
  "search-campaigns",
  "performance-max",
  "video-campaigns",
  "shopping-campaigns",
  "app-campaigns",
  "display-campaigns",
  "demand-gen",
  "team"
];

export async function generateStaticParams() {
  return slugsList.map((slug) => ({ slug }));
}

interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function DynamicFeaturePage({ params }: PageProps) {
  const { slug } = await params;
  
  // Try to fetch custom content or fall back to generic feature page
  const content = featuresMap[slug] || {
    title: `أداة ${slug.replace("-", " ")} بالذكاء الاصطناعي`,
    subtitle: "ميزة متقدمة من منصة برو كود ادز لتحسين ورفع كفاءة إعلاناتك الرقمية",
    desc: "توفر هذه الميزة حزمة متكاملة من أدوات التحسين والتحليل المستمر لمساعدتك في تحقيق أقصى عائد على الاستثمار الإعلاني، وضبط إعدادات الاستهداف الجغرافي والكلمات المفتاحية تلقائياً.",
    bullets: [
      "مزامنة وتحليل فوري 24/7 دون تدخل يدوي.",
      "مؤشرات تفصيلية لمعدل التحويل ونقاط الجودة.",
      "توصيات ذكاء اصطناعي مخصصة لتقليل تكلفة النقرة CPC.",
      "ربط فوري وحماية متكاملة لجميع قنواتك الإعلانية."
    ],
    icon: Bot,
    themeColor: "text-emerald-400 border-emerald-500/20 bg-emerald-500/5",
  };

  const IconComponent = content.icon;

  return (
    <div className="min-h-screen bg-[#0a0e19] text-right" dir="rtl">
      <Navbar />
      
      <main className="pt-32 pb-24 px-4 sm:px-6">
        <div className="max-w-4xl mx-auto space-y-12">
          
          {/* Back link */}
          <Link href="/" className="inline-flex items-center gap-2 text-xs text-gray-500 hover:text-emerald-400 transition-colors">
            <ArrowLeft className="w-3.5 h-3.5" />
            العودة للصفحة الرئيسية
          </Link>

          {/* Intro Section */}
          <div className="space-y-6">
            <div className="flex items-center gap-4">
              <div className={`w-14 h-14 rounded-2xl border flex items-center justify-center ${content.themeColor}`}>
                <IconComponent className="w-7 h-7" />
              </div>
              <div>
                <h1 className="text-2xl sm:text-4xl font-black text-white">{content.title}</h1>
                <p className="text-gray-400 text-sm mt-1.5">{content.subtitle}</p>
              </div>
            </div>

            <p className="text-gray-300 text-sm leading-relaxed max-w-3xl pt-2">
              {content.desc}
            </p>
          </div>

          {/* Key Advantages / Bullets */}
          <div className="bg-[#101010] border border-gray-800 rounded-2xl p-6 sm:p-8 space-y-6">
            <h3 className="text-white font-bold text-base flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-purple-400" />
              الميزات الرئيسية للأداة:
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {content.bullets.map((bullet, idx) => (
                <div key={idx} className="flex items-start gap-2.5 text-xs text-gray-300">
                  <Check className="w-4 h-4 text-emerald-400 mt-0.5 flex-shrink-0" />
                  <span>{bullet}</span>
                </div>
              ))}
            </div>
          </div>

          {/* CTA Box */}
          <div className="bg-gradient-to-r from-purple-500/10 to-indigo-500/5 border border-purple-500/20 rounded-2xl p-8 text-center space-y-5">
            <h3 className="text-white font-bold text-lg">
              هل أنت جاهز لتجربة هذه الميزة مجاناً؟
            </h3>
            <p className="text-gray-400 text-xs max-w-md mx-auto">
              أطلق حملتك الإعلانية الأولى المحسّنة بالذكاء الاصطناعي ووفر ميزانيتك من النقرات الوهمية الآن. يستغرق التسجيل أقل من دقيقة.
            </p>
            <div className="flex justify-center gap-3 pt-2">
              <Link
                href="/authentication/sign-up"
                className="bg-emerald-500 hover:bg-emerald-400 text-white font-bold text-xs px-6 py-3 rounded-xl transition-all shadow-lg shadow-emerald-500/20"
              >
                ابدأ تجربتك المجانية الآن
              </Link>
              <Link
                href="/pricing"
                className="border border-gray-700 bg-gray-800/30 text-gray-300 hover:text-white px-6 py-3 rounded-xl text-xs font-bold transition-all"
              >
                عرض خطط الاشتراك
              </Link>
            </div>
          </div>

        </div>
      </main>

      <Footer />
    </div>
  );
}