import React, { useState } from 'react';
import { 
  CreditCard, 
  Sparkles, 
  Check, 
  ShieldCheck, 
  Clock, 
  Zap, 
  ArrowLeft, 
  HelpCircle, 
  Building2,
  CheckCircle2
} from 'lucide-react';
import pricingData from '../data/pricing.json';
import siteInfo from '../data/siteInfo.json';

interface PricingProps {
  onOpenAuth: () => void;
}

export const Pricing: React.FC<PricingProps> = ({ onOpenAuth }) => {
  const faqs = [
    {
      q: 'آیا بسته‌ها و پلن‌های هوشان تاریخ انقضا دارند؟',
      a: 'خیر! یکی از بزرگ‌ترین مزایای هوشان این است که پیام‌ها و اعتبار شما در طول دوره فعال است و می‌توانید بدون نگرانی از سوختن اشتراک استفاده کنید.'
    },
    {
      q: 'آیا در تمامی پلن‌ها به مدل‌های پیشرفته مثل GPT-4o و Claude دسترسی داریم؟',
      a: 'بله، در تمامی بسته‌ها به تمام مدل‌های زبانی و کلیه ابزارهای هوش مصنوعی هوشان دسترسی دارید.'
    },
    {
      q: 'بسته خریداری شده چگونه و چه زمانی فعال می‌شود؟',
      a: 'بلافاصله پس از پرداخت موفقیت‌آمیز در درگاه بانکی شاپرک، حساب کاربری و امکانات پلن به صورت آنی و خودکار فعال می‌شوند.'
    },
    {
      q: 'چگونه می‌توانیم برای سازمان یا شرکت خود پلن سازمانی تهیه کنیم؟',
      a: 'برای بسته‌های سازمانی با تعداد کاربران بالا، فاکتور رسمی و استقرار اختصاصی، از طریق صفحه راهکارهای سازمانی یا تماس با واحد فروش در ارتباط باشید.'
    }
  ];

  return (
    <div className="pt-28 pb-20 bg-slate-950 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Header matching Donya Theme */}
        <div className="donya-section-header">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 text-xs font-bold mb-4">
            <CreditCard className="w-3.5 h-3.5" />
            <span>تعرفه‌ها و اشتراک‌های هوشان</span>
          </div>
          <h1 className="donya-section-title">
            <Sparkles className="w-7 h-7 text-indigo-400" />
            <span>پلن‌های متناسب با نیاز شما</span>
          </h1>
          <div className="donya-divider">
            <span className="donya-divider-line"></span>
            <span className="donya-divider-icon"></span>
            <span className="donya-divider-line"></span>
          </div>
          <p className="text-slate-400 text-sm sm:text-base max-w-2xl mx-auto mt-3">
            از مصرف شخصی تا سازمان‌های بزرگ؛ بهترین قیمت با پرداخت ریالی و دسترسی نامحدود
          </p>
        </div>

        {/* Pricing Cards Grid (Elementor Page #4361) */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {pricingData.map((pkg: any) => {
            const isPopular = pkg.isPopular;
            return (
              <div
                key={pkg.id}
                className={`glass-panel rounded-3xl p-6 sm:p-8 flex flex-col justify-between relative transition-all duration-300 hover:-translate-y-2 shadow-2xl ${
                  isPopular
                    ? 'border-2 border-indigo-500/60 bg-slate-900/90 shadow-indigo-500/20'
                    : 'border border-white/10 hover:border-indigo-500/30'
                }`}
              >
                {isPopular && (
                  <span className="absolute -top-3.5 right-1/2 translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-indigo-500 to-cyan-500 text-white shadow-lg">
                    محبوب‌ترین پلن
                  </span>
                )}

                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-bold text-white">{pkg.name}</h3>
                    <span className="text-xs text-slate-400 font-medium px-2 py-1 bg-slate-800 rounded-lg">
                      {pkg.badge || 'پلن دوره‌ای'}
                    </span>
                  </div>

                  <div className="mb-6">
                    <div className="flex items-baseline gap-1">
                      <span className="text-3xl font-extrabold text-white">{pkg.priceTomans}</span>
                      <span className="text-xs text-slate-400">تومان</span>
                    </div>
                    {pkg.subtitle && (
                      <span className="text-xs text-indigo-400 mt-1 block font-medium">{pkg.subtitle}</span>
                    )}
                  </div>

                  <div className="space-y-3 mb-8 border-t border-white/5 pt-6 text-xs sm:text-sm text-slate-300">
                    {pkg.features.map((feat: string, fidx: number) => (
                      <div key={fidx} className="flex items-start gap-2.5">
                        <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                        <span className="leading-snug">{feat}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <button
                  onClick={onOpenAuth}
                  className={`w-full py-3.5 rounded-xl font-bold text-sm transition-all flex items-center justify-center gap-2 ${
                    isPopular
                      ? 'btn-donya-primary text-white shadow-xl'
                      : 'btn-donya-outline text-white'
                  }`}
                >
                  <Zap className="w-4 h-4" />
                  <span>انتخاب و خرید اشتراک</span>
                </button>
              </div>
            );
          })}
        </div>

        {/* Enterprise Banner */}
        <div className="glass-panel p-8 sm:p-10 rounded-3xl border border-white/10 mb-16 flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-5">
            <div className="w-14 h-14 rounded-2xl bg-indigo-600/20 border border-indigo-500/40 flex items-center justify-center text-indigo-400 shrink-0">
              <Building2 className="w-7 h-7" />
            </div>
            <div>
              <h3 className="text-lg sm:text-xl font-bold text-white mb-1">پلن اختصاصی سازمان‌ها و شرکت‌ها</h3>
              <p className="text-xs sm:text-sm text-slate-400">دسترسی تیمی، ارائه فاکتور رسمی، اتصال اختصاصی API و پشتیبانی اختصاصی ۲۴ ساعته</p>
            </div>
          </div>
          <button
            onClick={onOpenAuth}
            className="btn-donya-primary px-6 py-3 rounded-xl font-bold text-sm shrink-0 flex items-center gap-2"
          >
            <span>درخواست مشاوره سازمانی</span>
            <ArrowLeft className="w-4 h-4" />
          </button>
        </div>

        {/* FAQ Section */}
        <div className="max-w-4xl mx-auto">
          <div className="donya-section-header">
            <h2 className="donya-section-title">
              <HelpCircle className="w-6 h-6 text-cyan-400" />
              <span>سوالات متداول درباره خرید و تعرفه‌ها</span>
            </h2>
            <div className="donya-divider">
              <span className="donya-divider-line"></span>
              <span className="donya-divider-icon"></span>
              <span className="donya-divider-line"></span>
            </div>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, idx) => (
              <div key={idx} className="glass-panel p-5 rounded-2xl border border-white/5">
                <h4 className="text-sm font-bold text-white mb-2">{faq.q}</h4>
                <p className="text-xs sm:text-sm text-slate-300 leading-relaxed">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>

      </div>
    </div>
  );
};
