import React from 'react';
import { Metadata } from 'next';
import EnamadBadge from '@/components/EnamadBadge';
import { ShieldCheck, Award, FileCheck, CheckCircle2, Building2, ExternalLink } from 'lucide-react';

export const metadata: Metadata = {
  title: 'نمادهای اعتماد و مجوزهای رسمی | کانینا ایران',
  description: 'مشاهده نماد اعتماد الکترونیکی (اینماد)، مجوزهای سازمان دامپزشکی کشور و گواهینامه‌های اصالت کالاهای کانینا ایران.',
};

export default function TrustSealsPage() {
  const licenses = [
    {
      title: 'نماد اعتماد الکترونیکی (eNamad)',
      authority: 'مرکز توسعه تجارت الکترونیکی (وزارت صمت)',
      code: 'ENAMAD-998241',
      status: 'معتبر و فعال',
      icon: ShieldCheck,
      color: 'from-teal-500 to-emerald-600',
    },
    {
      title: 'پروانه بهداشتی واردات محصولات کانینا',
      authority: 'سازمان دامپزشکی کل کشور',
      code: 'IVC-8840192',
      status: 'تایید شده رسمی',
      icon: Award,
      color: 'from-amber-500 to-orange-600',
    },
    {
      title: 'نشان ثبت ملی ساماندهی',
      authority: 'وزارت فرهنگ و ارشاد اسلامی',
      code: 'SAMANDEHI-102948',
      status: 'احراز هویت شده',
      icon: FileCheck,
      color: 'from-blue-500 to-indigo-600',
    },
    {
      title: 'گواهی اصالت و نمایندگی انحصاری',
      authority: 'Canina pharma GmbH آلمان',
      code: 'GER-CANINA-DE-2026',
      status: '۱۰۰٪ اصل و اورجینال',
      icon: Building2,
      color: 'from-emerald-500 to-teal-700',
    },
  ];

  return (
    <div className="bg-slate-50 flex flex-col font-vazir">
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Banner Section */}
        <div className="relative bg-gradient-to-r from-teal-700 via-teal-600 to-emerald-700 rounded-3xl p-8 md:p-12 text-white shadow-xl overflow-hidden mb-12">
          <div className="absolute -right-10 -bottom-10 w-64 h-64 bg-white/10 rounded-full blur-2xl"></div>
          <div className="relative z-10 max-w-3xl">
            <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full text-xs font-semibold text-teal-100 mb-4 border border-white/20">
              <ShieldCheck className="w-4 h-4 text-emerald-300" />
              تضمین اصالت و اطمینان خرید
            </div>
            <h1 className="text-3xl md:text-5xl font-extrabold tracking-tight mb-4 leading-tight">
              نمادهای اعتماد و مجوزهای قانونی کانینا
            </h1>
            <p className="text-teal-100 text-base md:text-lg leading-relaxed">
              تمام کلیه مکمل‌ها، ویتامین‌ها و داروها به صورت مستقیم از کمپانی Canina Pharma آلمان وارد شده و دارای کلیه مجوزهای رسمی سازمان دامپزشکی و نمادهای تجارت الکترونیک می‌باشند.
            </p>
          </div>
        </div>

        {/* Seals Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          <EnamadBadge />

          {licenses.slice(1).map((lic, idx) => {
            const IconComponent = lic.icon;
            return (
              <div
                key={idx}
                className="flex flex-col justify-between p-6 bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300"
              >
                <div>
                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-tr ${lic.color} flex items-center justify-center text-white mb-4 shadow-sm`}>
                    <IconComponent className="w-6 h-6" />
                  </div>
                  <h3 className="text-base font-bold text-gray-900 mb-1">{lic.title}</h3>
                  <p className="text-xs text-gray-500 mb-3">{lic.authority}</p>
                </div>

                <div className="pt-4 border-t border-gray-100 flex items-center justify-between">
                  <span className="text-[11px] font-mono bg-slate-100 text-slate-700 px-2.5 py-1 rounded-md font-semibold">
                    {lic.code}
                  </span>
                  <span className="text-xs font-bold text-emerald-600 flex items-center gap-1">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                    {lic.status}
                  </span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Guarantees Section */}
        <section className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm mb-12">
          <h2 className="text-xl font-extrabold text-gray-900 mb-6 flex items-center gap-2">
            <CheckCircle2 className="w-6 h-6 text-teal-600" />
            تعهدات کانینا ایران به مشتریان
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-4 rounded-xl bg-teal-50/50 border border-teal-100">
              <h3 className="font-bold text-teal-900 mb-2">۱۰۰٪ گارانتی اصالت کالا</h3>
              <p className="text-xs text-teal-700 leading-relaxed">
                تمامی مکمل‌ها دارای هولوگرام اصلی کمپانی کانینا آلمان و تاریخ انقضای معتبر و بروز می‌باشند.
              </p>
            </div>
            <div className="p-4 rounded-xl bg-emerald-50/50 border border-emerald-100">
              <h3 className="font-bold text-emerald-900 mb-2">ارسال ویژه استاندارد دارویی</h3>
              <p className="text-xs text-emerald-700 leading-relaxed">
                ارسال محموله‌ها با رعایت کامل زنجیره سرد و بسته‌بندی ایمن مخصوص محصولات مکمل حیوانی.
              </p>
            </div>
            <div className="p-4 rounded-xl bg-amber-50/50 border border-amber-100">
              <h3 className="font-bold text-amber-900 mb-2">پشتیبانی تخصصی دامپزشکی</h3>
              <p className="text-xs text-amber-700 leading-relaxed">
                امکان مشاوره و بررسی دوز مصرفی مکمل‌ها زیر نظر دامپزشکان متخصص مجموعه کانینا.
              </p>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}