UI.exs

import React, { useState } from 'react';
import { Shield, Wind, Paintbrush, Car, ChevronDown, Search, CheckCircle, X, Filter } from 'lucide-react';

const ProtectionPackages = () => {
  const [activeTab, setActiveTab] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [selectedBrands, setSelectedBrands] = useState([]);
  const [language, setLanguage] = useState('dual'); // 'en', 'ar', or 'dual'
  
  const carBrands = ['Aston Martin', 'Audi', 'BMW'];
  
  const packages = [
    {
      id: 1,
      brand: 'future',
      nameEn: 'Hood Protection - Future',
      nameAr: 'حماية كبوت كامل',
      price: 200.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'protection',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 2,
      brand: 'future',
      nameEn: 'Windshield Protection - Future',
      nameAr: 'حماية الزجاج الأمامي',
      price: 25.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'wind',
      category: 'protection',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 3,
      brand: 'future',
      nameEn: 'Polish - Future',
      nameAr: 'بوليش',
      price: 50.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'paintbrush',
      category: 'polish',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 4,
      brand: 'buffalo',
      nameEn: 'Polish',
      nameAr: 'بوليش',
      price: 50.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'paintbrush',
      category: 'polish',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 5,
      brand: 'buffalo',
      nameEn: 'Windshield Protection',
      nameAr: 'حماية الزجاج الأمامي',
      price: 25.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'wind',
      category: 'protection',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 6,
      brand: 'buffalo',
      nameEn: 'Window Shield - BUFFALO',
      nameAr: 'عازل حراري لزجاج السيارة',
      price: 75.000,
      originalPrice: 90.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'protection',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
      isDiscounted: true,
    },
    {
      id: 7,
      brand: 'buffalo',
      nameEn: 'Hood Protection',
      nameAr: 'حماية كبوت كامل',
      price: 200.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'protection',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 8,
      brand: 'buffalo',
      nameEn: 'Half Hood Protection',
      nameAr: 'حماية نص كبوت',
      price: 90.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'protection',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 9,
      brand: 'future',
      nameEn: 'Full body PPF Gyeon',
      nameAr: 'أفلام حماية الطلاء',
      price: 750.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'ppf',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 10,
      brand: 'future',
      nameEn: 'Ultra Plus PPF - Future',
      nameAr: 'فيلم حماية ألترا بلس',
      price: 650.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'ppf',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 11,
      brand: 'buffalo',
      nameEn: 'Plus PPF',
      nameAr: 'فيلم حماية بلس',
      price: 550.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'ppf',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 12,
      brand: 'buffalo',
      nameEn: 'Ultra Plus PPF',
      nameAr: 'فيلم حماية ألترا بلس',
      price: 650.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'ppf',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
    {
      id: 13,
      brand: 'future',
      nameEn: 'Plus PPF - Future',
      nameAr: 'فيلم حماية بلس',
      price: 550.000,
      currency: 'د.ك',
      stock: 0,
      icon: 'shield',
      category: 'ppf',
      compatible: ['Aston Martin', 'Audi', 'BMW'],
    },
  ];
  
  const getIcon = (iconName) => {
    switch (iconName) {
      case 'shield':
        return <Shield className="h-6 w-6" />;
      case 'wind':
        return <Wind className="h-6 w-6" />;
      case 'paintbrush':
        return <Paintbrush className="h-6 w-6" />;
      default:
        return <Car className="h-6 w-6" />;
    }
  };
  
  const filteredPackages = packages.filter(pkg => {
    // Filter by tab
    if (activeTab !== 'all' && pkg.brand !== activeTab) return false;
    
    // Filter by search
    const searchInEn = pkg.nameEn.toLowerCase().includes(searchTerm.toLowerCase());
    const searchInAr = pkg.nameAr.includes(searchTerm);
    if (searchTerm && !searchInEn && !searchInAr) return false;
    
    // Filter by selected brands
    if (selectedBrands.length > 0 && !selectedBrands.some(brand => pkg.compatible.includes(brand))) {
      return false;
    }
    
    return true;
  });
  
  const toggleBrandFilter = (brand) => {
    if (selectedBrands.includes(brand)) {
      setSelectedBrands(selectedBrands.filter(b => b !== brand));
    } else {
      setSelectedBrands([...selectedBrands, brand]);
    }
  };
  
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-50 p-4 md:p-8" dir={language === 'ar' ? 'rtl' : 'ltr'}>
      {/* Header */}
      <div className="max-w-7xl mx-auto mb-10">
        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
            <h1 className="text-3xl font-bold text-slate-800">
              {language === 'ar' ? 'حزم حماية السيارات' : (language === 'en' ? 'Car Protection Packages' : 'Car Protection Packages | حزم حماية السيارات')}
            </h1>
            <p className="text-slate-500 mt-2">
              {language === 'ar' ? 'احمِ سيارتك بأفضل الحلول المتاحة' : (language === 'en' ? 'Protect your vehicle with premium solutions' : 'Protect your vehicle with premium solutions | احمِ سيارتك بأفضل الحلول المتاحة')}
            </p>
          </div>
          
          <div className="flex space-x-2">
            <button 
              onClick={() => setLanguage('en')} 
              className={`px-3 py-1 rounded-md text-sm ${language === 'en' ? 'bg-blue-500 text-white' : 'bg-slate-200 text-slate-700'}`}
            >
              EN
            </button>
            <button 
              onClick={() => setLanguage('dual')} 
              className={`px-3 py-1 rounded-md text-sm ${language === 'dual' ? 'bg-blue-500 text-white' : 'bg-slate-200 text-slate-700'}`}
            >
              EN/AR
            </button>
            <button 
              onClick={() => setLanguage('ar')} 
              className={`px-3 py-1 rounded-md text-sm ${language === 'ar' ? 'bg-blue-500 text-white' : 'bg-slate-200 text-slate-700'}`}
            >
              AR
            </button>
          </div>
        </div>
      </div>
      
      {/* Search & Filter Bar */}
      <div className="max-w-7xl mx-auto bg-white rounded-xl shadow-md p-4 mb-6">
        <div className="flex flex-col md:flex-row justify-between gap-4">
          <div className="relative flex-1">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Search className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="text"
              placeholder={language === 'ar' ? 'ابحث عن المنتجات...' : (language === 'en' ? 'Search packages...' : 'Search packages... | ابحث عن المنتجات...')}
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          
          <div className="flex items-center gap-2">
            <button 
              onClick={() => setShowFilters(!showFilters)}
              className="flex items-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition-colors"
            >
              <Filter className="h-5 w-5" />
              {language === 'ar' ? 'فلتر' : (language === 'en' ? 'Filter' : 'Filter | فلتر')}
              <ChevronDown className={`h-4 w-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
            </button>
          </div>
        </div>
        
        {/* Filters */}
        {showFilters && (
          <div className="mt-4 pt-4 border-t border-gray-200">
            <div>
              <h3 className="font-medium text-gray-700 mb-2">
                {language === 'ar' ? 'العلامات التجارية للسيارات' : (language === 'en' ? 'Car Brands' : 'Car Brands | العلامات التجارية للسيارات')}
              </h3>
              <div className="flex flex-wrap gap-2">
                {carBrands.map(brand => (
                  <button
                    key={brand}
                    onClick={() => toggleBrandFilter(brand)}
                    className={`px-3 py-1 rounded-full text-sm border transition-colors ${
                      selectedBrands.includes(brand) 
                        ? 'bg-blue-100 border-blue-300 text-blue-800' 
                        : 'bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100'
                    }`}
                  >
                    {brand}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
      
      {/* Tabs */}
      <div className="max-w-7xl mx-auto mb-8">
        <div className="flex overflow-x-auto pb-2 space-x-2">
          <button
            onClick={() => setActiveTab('all')}
            className={`px-5 py-2.5 rounded-lg whitespace-nowrap transition-colors ${
              activeTab === 'all'
                ? 'bg-slate-800 text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-slate-100'
            }`}
          >
            {language === 'ar' ? 'جميع الباقات' : (language === 'en' ? 'All Packages' : 'All Packages | جميع الباقات')}
          </button>
          <button
            onClick={() => setActiveTab('future')}
            className={`px-5 py-2.5 rounded-lg whitespace-nowrap transition-colors ${
              activeTab === 'future'
                ? 'bg-blue-600 text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-slate-100'
            }`}
          >
            {language === 'ar' ? 'فيوتشر' : (language === 'en' ? 'Future' : 'Future | فيوتشر')}
          </button>
          <button
            onClick={() => setActiveTab('buffalo')}
            className={`px-5 py-2.5 rounded-lg whitespace-nowrap transition-colors ${
              activeTab === 'buffalo'
                ? 'bg-amber-600 text-white shadow-md'
                : 'bg-white text-slate-700 hover:bg-slate-100'
            }`}
          >
            {language === 'ar' ? 'بافلو' : (language === 'en' ? 'Buffalo' : 'Buffalo | بافلو')}
          </button>
        </div>
      </div>
      
      {/* Package Cards */}
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredPackages.map(pkg => (
            <div 
              key={pkg.id} 
              className={`relative overflow-hidden rounded-xl shadow-md transition-all hover:shadow-lg hover:translate-y-px bg-white border-t-4 ${
                pkg.brand === 'future' ? 'border-blue-500' : 'border-amber-500'
              }`}
            >
              {pkg.isDiscounted && (
                <div className="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
                  {language === 'ar' ? 'خصم' : (language === 'en' ? 'SALE' : 'SALE | خصم')}
                </div>
              )}
              
              <div className="p-6">
                <div className="flex justify-between items-start">
                  <div className={`p-3 rounded-lg ${
                    pkg.brand === 'future' ? 'bg-blue-100 text-blue-600' : 'bg-amber-100 text-amber-600'
                  }`}>
                    {getIcon(pkg.icon)}
                  </div>
                  <div className="text-right">
                    <span className="inline-block text-xs font-medium rounded-full px-2 py-0.5 bg-slate-100 text-slate-700">
                      {pkg.brand === 'future' ? 'Future | فيوتشر' : 'Buffalo | بافلو'}
                    </span>
                  </div>
                </div>
                
                <div className="mt-4">
                  {language === 'ar' ? (
                    <h3 className="text-xl font-bold text-slate-800">{pkg.nameAr}</h3>
                  ) : language === 'en' ? (
                    <h3 className="text-xl font-bold text-slate-800">{pkg.nameEn}</h3>
                  ) : (
                    <>
                      <h3 className="text-xl font-bold text-slate-800">{pkg.nameEn}</h3>
                      <h3 className="text-lg font-bold text-slate-600">{pkg.nameAr}</h3>
                    </>
                  )}
                  
                  <div className="mt-2 flex items-baseline gap-2">
                    {pkg.isDiscounted && (
                      <span className="text-sm text-gray-500 line-through">
                        {pkg.originalPrice.toFixed(3)} {pkg.currency}
                      </span>
                    )}
                    <span className={`text-2xl font-bold ${pkg.isDiscounted ? 'text-red-500' : 'text-slate-800'}`}>
                      {pkg.price.toFixed(3)} {pkg.currency}
                    </span>
                  </div>
                </div>
                
                <div className="mt-4 flex items-center gap-2">
                  <span className="inline-flex items-center text-sm text-gray-500">
                    {pkg.stock > 0 ? (
                      <>
                        <CheckCircle className="h-4 w-4 text-green-500 mr-1" />
                        {language === 'ar' ? 'متوفر' : (language === 'en' ? 'In Stock' : 'In Stock | متوفر')}
                      </>
                    ) : (
                      <>
                        <X className="h-4 w-4 text-gray-400 mr-1" />
                        {language === 'ar' ? 'غير متوفر حاليا' : (language === 'en' ? 'Out of Stock' : 'Out of Stock | غير متوفر حاليا')}
                      </>
                    )}
                  </span>
                </div>
                
                <div className="mt-6">
                  <button className={`w-full py-2.5 px-4 rounded-lg font-medium text-center transition-colors ${
                    pkg.brand === 'future' 
                      ? 'bg-blue-500 hover:bg-blue-600 text-white' 
                      : 'bg-amber-500 hover:bg-amber-600 text-white'
                  }`}>
                    {language === 'ar' ? 'أضف إلى السلة' : (language === 'en' ? 'Add to Cart' : 'Add to Cart | أضف إلى السلة')}
                  </button>
                </div>
                
                <div className="mt-4">
                  <div className="text-xs text-slate-500">
                    {language === 'ar' ? 'متوافق مع' : (language === 'en' ? 'Compatible with' : 'Compatible with | متوافق مع')}:
                  </div>
                  <div className="flex flex-wrap gap-1 mt-1">
                    {pkg.compatible.map(brand => (
                      <span key={brand} className="text-xs bg-slate-100 text-slate-700 px-2 py-0.5 rounded">
                        {brand}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        {/* Results count */}
        <div className="mt-8 text-center text-sm text-gray-500">
          {language === 'ar' 
            ? `عرض ${filteredPackages.length} من ${packages.length} منتجات` 
            : (language === 'en' 
                ? `Showing ${filteredPackages.length} of ${packages.length} products` 
                : `Showing ${filteredPackages.length} of ${packages.length} products | عرض ${filteredPackages.length} من ${packages.length} منتجات`
              )
          }
        </div>
      </div>
    </div>
  );
};

export default ProtectionPackages;