import React, { useState, useEffect } from 'react';
import { ShoppingCart, Menu, X, Search, Phone, Mail, Instagram, MessageCircle, Send, ChevronDown, ChevronUp, Trash2, Plus, Minus, Filter, Star, MapPin, Clock, Package, Shield, Check, AlertCircle } from 'lucide-react';

// Данные товаров из предоставленного каталога
const productsData = [
  // Pablo 25mg
  { id: 1, name: "Pablo Ice Mint 25mg", brand: "Pablo", strength: "25mg", flavor: "Мята", price: 2800, description: "Мятный вкус, освежающий и бодрящий. Подходит для начинающих.", image: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" },
  { id: 2, name: "Pablo Berry Blast 25mg", brand: "Pablo", strength: "25mg", flavor: "Ягодный", price: 2800, description: "Ягодный вкус с лёгкой сладостью и мягким воздействием.", image: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" },
  { id: 3, name: "Pablo Citrus Fresh 25mg", brand: "Pablo", strength: "25mg", flavor: "Цитрусовый", price: 2800, description: "Цитрусовый вкус, лёгкий и ароматный.", image: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)" },
  { id: 4, name: "Pablo Strong Mint 50mg", brand: "Pablo", strength: "50mg", flavor: "Мята", price: 3000, description: "Мощная мята, средняя крепость, для опытных.", image: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" },
  { id: 5, name: "Pablo Arctic Berry 50mg", brand: "Pablo", strength: "50mg", flavor: "Ягодный", price: 3000, description: "Ягоды с холодным мятным послевкусием.", image: "linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)" },
  { id: 6, name: "Pablo Lemon Energy 50mg", brand: "Pablo", strength: "50mg", flavor: "Цитрусовый", price: 3000, description: "Лимонный вкус с бодрящим эффектом.", image: "linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%)" },
  { id: 7, name: "Pablo Hardcore Mint 100mg", brand: "Pablo", strength: "100mg", flavor: "Мята", price: 3200, description: "Очень сильная мята для профи.", image: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)" },
  { id: 8, name: "Pablo Black Ice 100mg", brand: "Pablo", strength: "100mg", flavor: "Ягодный", price: 3200, description: "Ягоды с мятой, экстремально холодный вкус.", image: "linear-gradient(135deg, #434343 0%, #000000 100%)" },
  { id: 9, name: "Pablo Citrus Explosion 100mg", brand: "Pablo", strength: "100mg", flavor: "Цитрусовый", price: 3200, description: "Яркий цитрусовый вкус с ударной крепостью.", image: "linear-gradient(135deg, #ff9a56 0%, #ff6a00 100%)" },
  { id: 10, name: "Pablo Ultra Mint 200mg", brand: "Pablo", strength: "200mg", flavor: "Мята", price: 3500, description: "Максимальная крепость, ледяная мята.", image: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)" },
  { id: 11, name: "Pablo Double Ice 200mg", brand: "Pablo", strength: "200mg", flavor: "Мята", price: 3500, description: "Холодный удар, двойная мята.", image: "linear-gradient(135deg, #dfe9f3 0%, #ffffff 100%)" },
  { id: 12, name: "Pablo Inferno Citrus 200mg", brand: "Pablo", strength: "200mg", flavor: "Цитрусовый", price: 3500, description: "Цитрусовый взрыв с максимальной дозой никотина.", image: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)" },
  { id: 13, name: "Cuba Classic Mint 25mg", brand: "Cuba", strength: "25mg", flavor: "Мята", price: 2800, description: "Классическая мята, мягкий вкус.", image: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)" },
  { id: 14, name: "Cuba Sweet Berry 25mg", brand: "Cuba", strength: "25mg", flavor: "Ягодный", price: 2800, description: "Сладкие ягоды, лёгкая крепость.", image: "linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)" },
  { id: 15, name: "Cuba Tropic Fresh 25mg", brand: "Cuba", strength: "25mg", flavor: "Тропический", price: 2800, description: "Тропические фрукты, лёгкий освежающий аромат.", image: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)" },
  { id: 16, name: "Cuba Strong Mint 50mg", brand: "Cuba", strength: "50mg", flavor: "Мята", price: 3000, description: "Крепкая мята, освежает и бодрит.", image: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" },
  { id: 17, name: "Cuba Berry Ice 50mg", brand: "Cuba", strength: "50mg", flavor: "Ягодный", price: 3000, description: "Ягоды с холодком, средняя сила.", image: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)" },
  { id: 18, name: "Cuba Citrus Kick 50mg", brand: "Cuba", strength: "50mg", flavor: "Цитрусовый", price: 3000, description: "Цитрус с кислинкой, умеренная крепость.", image: "linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)" },
  { id: 19, name: "Cuba Hardcore Mint 100mg", brand: "Cuba", strength: "100mg", flavor: "Мята", price: 3200, description: "Холодная мята с экстремальной крепостью.", image: "linear-gradient(135deg, #17ead9 0%, #6078ea 100%)" },
  { id: 20, name: "Cuba Black Berry 100mg", brand: "Cuba", strength: "100mg", flavor: "Ягодный", price: 3200, description: "Тёмные ягоды, насыщенный вкус.", image: "linear-gradient(135deg, #7f00ff 0%, #e100ff 100%)" },
  { id: 21, name: "Iceberg Cool Mint 25mg", brand: "Iceberg", strength: "25mg", flavor: "Мята", price: 2800, description: "Лёгкая мята, приятный холодок.", image: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)" },
  { id: 22, name: "Iceberg Berry Fresh 25mg", brand: "Iceberg", strength: "25mg", flavor: "Ягодный", price: 2800, description: "Ягоды, сладковатый вкус.", image: "linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)" },
  { id: 23, name: "Velo Fresh Mint 25mg", brand: "Velo", strength: "25mg", flavor: "Мята", price: 2800, description: "Лёгкий мятный вкус.", image: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)" },
  { id: 24, name: "Velo Berry Light 25mg", brand: "Velo", strength: "25mg", flavor: "Ягодный", price: 2800, description: "Ягоды с нежным ароматом.", image: "linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)" },
  { id: 25, name: "Kasta Ice Mint 25mg", brand: "Kasta", strength: "25mg", flavor: "Мята", price: 2800, description: "Мягкая мята, лёгкий вкус.", image: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)" },
];

const VapeShop = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [cart, setCart] = useState([]);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [isAgeVerified, setIsAgeVerified] = useState(false);
  const [isAdminAuth, setIsAdminAuth] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [showProductModal, setShowProductModal] = useState(false);
  const [showCartSidebar, setShowCartSidebar] = useState(false);
  const [showCheckoutModal, setShowCheckoutModal] = useState(false);
  const [showOrderSuccess, setShowOrderSuccess] = useState(false);
  const [showAdminLogin, setShowAdminLogin] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [filters, setFilters] = useState({
    flavors: [],
    strengths: [],
    brands: []
  });
  const [sortBy, setSortBy] = useState('popular');
  const [orders, setOrders] = useState([]);
  const [adminProducts, setAdminProducts] = useState(productsData);
  const [orderNumber, setOrderNumber] = useState('');
  const [faqOpen, setFaqOpen] = useState({});
  const [adminPassword, setAdminPassword] = useState('');
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');
  const [checkoutForm, setCheckoutForm] = useState({
    name: '',
    phone: '',
    email: '',
    address: '',
    comment: '',
    payment: 'cash',
    agree: false
  });

  useEffect(() => {
    if (!isAgeVerified) {
      setTimeout(() => {
        // Age verification modal will be shown
      }, 500);
    }
  }, [isAgeVerified]);

  const showToastNotification = (message) => {
    setToastMessage(message);
    setShowToast(true);
    setTimeout(() => setShowToast(false), 3000);
  };

  const addToCart = (product, quantity = 1) => {
    const existingItem = cart.find(item => item.id === product.id);
    if (existingItem) {
      setCart(cart.map(item => 
        item.id === product.id 
          ? { ...item, quantity: item.quantity + quantity }
          : item
      ));
    } else {
      setCart([...cart, { ...product, quantity }]);
    }
    showToastNotification(`${product.name} добавлен в корзину`);
  };

  const removeFromCart = (productId) => {
    setCart(cart.filter(item => item.id !== productId));
    showToastNotification('Товар удален из корзины');
  };

  const updateQuantity = (productId, newQuantity) => {
    if (newQuantity < 1) {
      removeFromCart(productId);
      return;
    }
    setCart(cart.map(item => 
      item.id === productId ? { ...item, quantity: newQuantity } : item
    ));
  };

  const calculateTotal = () => {
    return cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  };

  const getFilteredProducts = () => {
    let filtered = adminProducts;

    if (searchQuery) {
      filtered = filtered.filter(p => 
        p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        p.description.toLowerCase().includes(searchQuery.toLowerCase())
      );
    }

    if (filters.flavors.length > 0) {
      filtered = filtered.filter(p => filters.flavors.includes(p.flavor));
    }
    if (filters.strengths.length > 0) {
      filtered = filtered.filter(p => filters.strengths.includes(p.strength));
    }
    if (filters.brands.length > 0) {
      filtered = filtered.filter(p => filters.brands.includes(p.brand));
    }

    if (sortBy === 'price-asc') {
      filtered.sort((a, b) => a.price - b.price);
    } else if (sortBy === 'price-desc') {
      filtered.sort((a, b) => b.price - a.price);
    }

    return filtered;
  };

  const toggleFilter = (type, value) => {
    setFilters(prev => {
      const current = prev[type];
      if (current.includes(value)) {
        return { ...prev, [type]: current.filter(v => v !== value) };
      } else {
        return { ...prev, [type]: [...current, value] };
      }
    });
  };

  const resetFilters = () => {
    setFilters({ flavors: [], strengths: [], brands: [] });
    setSearchQuery('');
  };

  const handleCheckout = (e) => {
    e.preventDefault();
    
    if (!checkoutForm.agree) {
      showToastNotification('Необходимо согласиться с условиями');
      return;
    }

    const newOrder = {
      id: Date.now(),
      orderNumber: `ORD-${Math.random().toString(36).substr(2, 9).toUpperCase()}`,
      date: new Date().toLocaleString('ru-RU'),
      customer: checkoutForm.name,
      phone: checkoutForm.phone,
      address: checkoutForm.address,
      items: [...cart],
      total: calculateTotal(),
      status: 'Новый',
      paymentMethod: checkoutForm.payment
    };
    
    setOrders([newOrder, ...orders]);
    setOrderNumber(newOrder.orderNumber);
    setCart([]);
    setShowCheckoutModal(false);
    setShowOrderSuccess(true);
    setCheckoutForm({
      name: '',
      phone: '',
      email: '',
      address: '',
      comment: '',
      payment: 'cash',
      agree: false
    });
  };

  const handleAdminLogin = () => {
    if (adminPassword === 'admin123') {
      setIsAdminAuth(true);
      setShowAdminLogin(false);
      setCurrentPage('admin');
      showToastNotification('Успешный вход в админ-панель');
    } else {
      showToastNotification('Неверный пароль');
    }
  };

  // Header Component
  const Header = () => (
    <header className="sticky top-0 z-50 bg-slate-900/95 backdrop-blur-sm border-b border-slate-800">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center space-x-8">
            <button onClick={() => setCurrentPage('home')} className="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
              SNUS.KZ
            </button>
            <nav className="hidden md:flex space-x-6">
              <button onClick={() => setCurrentPage('home')} className={`transition ${currentPage === 'home' ? 'text-cyan-400' : 'text-gray-300 hover:text-white'}`}>
                Главная
              </button>
              <button onClick={() => setCurrentPage('catalog')} className={`transition ${currentPage === 'catalog' ? 'text-cyan-400' : 'text-gray-300 hover:text-white'}`}>
                Каталог
              </button>
              <button onClick={() => setCurrentPage('about')} className={`transition ${currentPage === 'about' ? 'text-cyan-400' : 'text-gray-300 hover:text-white'}`}>
                О нас
              </button>
              <button onClick={() => setCurrentPage('faq')} className={`transition ${currentPage === 'faq' ? 'text-cyan-400' : 'text-gray-300 hover:text-white'}`}>
                FAQ
              </button>
            </nav>
          </div>
          
          <div className="flex items-center space-x-4">
            <button onClick={() => setShowCartSidebar(true)} className="relative p-2 hover:bg-slate-800 rounded-lg transition">
              <ShoppingCart className="w-6 h-6 text-gray-300" />
              {cart.length > 0 && (
                <span className="absolute -top-1 -right-1 bg-gradient-to-r from-cyan-500 to-purple-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                  {cart.length}
                </span>
              )}
            </button>
            
            <button onClick={() => setShowAdminLogin(true)} className="hidden md:block px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg transition text-sm text-gray-300">
              Админ
            </button>

            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 hover:bg-slate-800 rounded-lg transition">
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>

        {mobileMenuOpen && (
          <div className="md:hidden py-4 border-t border-slate-800">
            <nav className="flex flex-col space-y-2">
              <button onClick={() => { setCurrentPage('home'); setMobileMenuOpen(false); }} className="text-left py-2 text-gray-300 hover:text-cyan-400 transition">
                Главная
              </button>
              <button onClick={() => { setCurrentPage('catalog'); setMobileMenuOpen(false); }} className="text-left py-2 text-gray-300 hover:text-cyan-400 transition">
                Каталог
              </button>
              <button onClick={() => { setCurrentPage('about'); setMobileMenuOpen(false); }} className="text-left py-2 text-gray-300 hover:text-cyan-400 transition">
                О нас
              </button>
              <button onClick={() => { setCurrentPage('faq'); setMobileMenuOpen(false); }} className="text-left py-2 text-gray-300 hover:text-cyan-400 transition">
                FAQ
              </button>
              <button onClick={() => { setShowAdminLogin(true); setMobileMenuOpen(false); }} className="text-left py-2 text-gray-300 hover:text-cyan-400 transition">
                Админ
              </button>
            </nav>
          </div>
        )}
      </div>
    </header>
  );

  // Home Page
  const HomePage = () => (
    <div className="min-h-screen">
      <section className="relative py-20 px-4 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-purple-500/10"></div>
        <div className="container mx-auto text-center relative z-10">
          <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
            Премиальные снюсы в Казахстане
          </h1>
          <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
            Широкий выбор оригинальной продукции с быстрой доставкой по Астане
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <button onClick={() => setCurrentPage('catalog')} className="px-8 py-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg hover:shadow-cyan-500/50 transition transform hover:scale-105">
              Перейти в каталог
            </button>
            <button className="px-8 py-4 bg-slate-800 rounded-lg font-semibold hover:bg-slate-700 transition">
              Текущие акции
            </button>
            <button onClick={() => setCurrentPage('about')} className="px-8 py-4 bg-slate-800 rounded-lg font-semibold hover:bg-slate-700 transition">
              Контакты
            </button>
          </div>
        </div>
      </section>

      <section className="py-16 px-4 bg-slate-900/50">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold mb-8 text-center">Популярные товары</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {adminProducts.slice(0, 8).map(product => (
              <div key={product.id} className="bg-slate-800 rounded-xl overflow-hidden hover:transform hover:scale-105 transition group">
                <div className="h-48 relative" style={{ background: product.image }}>
                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition"></div>
                </div>
                <div className="p-4">
                  <h3 className="font-semibold mb-2 text-white">{product.name}</h3>
                  <p className="text-gray-400 text-sm mb-3 line-clamp-2">{product.description}</p>
                  <div className="flex items-center justify-between">
                    <span className="text-2xl font-bold text-cyan-400">{product.price}₸</span>
                    <button onClick={() => addToCart(product)} className="p-2 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg hover:shadow-lg transition">
                      <ShoppingCart className="w-5 h-5" />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 px-4">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center p-6 bg-slate-800/50 rounded-xl">
              <Package className="w-12 h-12 mx-auto mb-4 text-cyan-400" />
              <h3 className="text-xl font-semibold mb-2">Быстрая доставка</h3>
              <p className="text-gray-400">Доставка по Астане за 1-2 часа</p>
            </div>
            <div className="text-center p-6 bg-slate-800/50 rounded-xl">
              <Shield className="w-12 h-12 mx-auto mb-4 text-purple-400" />
              <h3 className="text-xl font-semibold mb-2">Гарантия качества</h3>
              <p className="text-gray-400">Только оригинальная продукция</p>
            </div>
            <div className="text-center p-6 bg-slate-800/50 rounded-xl">
              <Clock className="w-12 h-12 mx-auto mb-4 text-pink-400" />
              <h3 className="text-xl font-semibold mb-2">Работаем 24/7</h3>
              <p className="text-gray-400">Круглосуточная поддержка</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );

  // Catalog Page
  const CatalogPage = () => {
    const filteredProducts = getFilteredProducts();
    
    return (
      <div className="min-h-screen py-8 px-4">
        <div className="container mx-auto">
          <h1 className="text-4xl font-bold mb-8">Каталог товаров</h1>
          
          <div className="flex flex-col lg:flex-row gap-8">
            <aside className="lg:w-64 space-y-6">
              <div className="bg-slate-800 rounded-xl p-6">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold flex items-center gap-2">
                    <Filter className="w-5 h-5" />
                    Фильтры
                  </h3>
                  <button onClick={resetFilters} className="text-sm text-cyan-400 hover:text-cyan-300">
                    Сбросить
                  </button>
                </div>

                <div className="space-y-4">
                  <div>
                    <h4 className="text-sm font-semibold mb-2 text-gray-400">Вкус</h4>
                    <div className="space-y-2">
                      {['Мята', 'Ягодный', 'Цитрусовый', 'Тропический'].map(flavor => (
                        <label key={flavor} className="flex items-center gap-2 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={filters.flavors.includes(flavor)}
                            onChange={() => toggleFilter('flavors', flavor)}
                            className="rounded"
                          />
                          <span className="text-sm">{flavor}</span>
                        </label>
                      ))}
                    </div>
                  </div>

                  <div>
                    <h4 className="text-sm font-semibold mb-2 text-gray-400">Крепость</h4>
                    <div className="space-y-2">
                      {['25mg', '50mg', '100mg', '200mg'].map(strength => (
                        <label key={strength} className="flex items-center gap-2 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={filters.strengths.includes(strength)}
                            onChange={() => toggleFilter('strengths', strength)}
                            className="rounded"
                          />
                          <span className="text-sm">{strength}</span>
                        </label>
                      ))}
                    </div>
                  </div>

                  <div>
                    <h4 className="text-sm font-semibold mb-2 text-gray-400">Бренд</h4>
                    <div className="space-y-2">
                      {['Pablo', 'Cuba', 'Iceberg', 'Velo', 'Kasta'].map(brand => (
                        <label key={brand} className="flex items-center gap-2 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={filters.brands.includes(brand)}
                            onChange={() => toggleFilter('brands', brand)}
                            className="rounded"
                          />
                          <span className="text-sm">{brand}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </aside>

            <main className="flex-1">
              <div className="flex flex-col sm:flex-row gap-4 mb-6">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                  <input
                    type="text"
                    placeholder="Поиск товаров..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-10 pr-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                  />
                </div>
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                  className="px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                >
                  <option value="popular">По популярности</option>
                  <option value="price-asc">Цена: по возрастанию</option>
                  <option value="price-desc">Цена: по убыванию</option>
                </select>
              </div>

              {filteredProducts.length === 0 ? (
                <div className="text-center py-16">
                  <p className="text-gray-400 text-lg">Товары не найдены</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                  {filteredProducts.map(product => (
                    <div key={product.id} className="bg-slate-800 rounded-xl overflow-hidden hover:transform hover:scale-105 transition group">
                      <div className="h-48 relative" style={{ background: product.image }}>
                        <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition"></div>
                        <button 
                          onClick={() => {
                            setSelectedProduct(product);
                            setShowProductModal(true);
                          }}
                          className="absolute top-2 right-2 p-2 bg-slate-900/80 rounded-lg opacity-0 group-hover:opacity-100 transition">
                          <Search className="w-5 h-5" />
                        </button>
                      </div>
                      <div className="p-4">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-xs px-2 py-1 bg-slate-700 rounded">{product.brand}</span>
                          <span className="text-xs px-2 py-1 bg-purple-500/20 text-purple-400 rounded">{product.strength}</span>
                        </div>
                        <h3 className="font-semibold mb-2 text-white">{product.name}</h3>
                        <p className="text-gray-400 text-sm mb-3 line-clamp-2">{product.description}</p>
                        <div className="flex items-center justify-between">
                          <span className="text-2xl font-bold text-cyan-400">{product.price}₸</span>
                          <button onClick={() => addToCart(product)} className="px-4 py-2 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg hover:shadow-lg transition flex items-center gap-2">
                            <ShoppingCart className="w-4 h-4" />
                            В корзину
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </main>
          </div>
        </div>
      </div>
    );
  };

  // About Page
  const AboutPage = () => (
    <div className="min-h-screen py-8 px-4">
      <div className="container mx-auto max-w-4xl">
        <h1 className="text-4xl font-bold mb-8">О нас</h1>
        
        <div className="bg-slate-800 rounded-xl p-8 mb-8">
          <h2 className="text-2xl font-semibold mb-4">SNUS.KZ - Ваш надежный поставщик</h2>
          <p className="text-gray-300 mb-4">
            Мы являемся официальным дистрибьютором премиальных брендов никотиновых паучей в Казахстане. 
            Наша миссия - предоставлять только качественную и оригинальную продукцию с гарантией подлинности.
          </p>
          <p className="text-gray-300 mb-4">
            Работаем на рынке с 2020 года и имеем тысячи довольных клиентов по всему Казахстану.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 mb-8">
          <div className="bg-slate-800 rounded-xl p-6">
            <Package className="w-10 h-10 text-cyan-400 mb-4" />
            <h3 className="text-xl font-semibold mb-2">Быстрая доставка</h3>
            <p className="text-gray-400">Доставка по Астане за 1-2 часа. По регионам Казахстана - 1-3 дня.</p>
          </div>
          <div className="bg-slate-800 rounded-xl p-6">
            <Shield className="w-10 h-10 text-purple-400 mb-4" />
            <h3 className="text-xl font-semibold mb-2">100% оригинал</h3>
            <p className="text-gray-400">Вся продукция сертифицирована и имеет гарантию подлинности.</p>
          </div>
        </div>

        <div className="bg-slate-800 rounded-xl p-8">
          <h2 className="text-2xl font-semibold mb-6">Контакты</h2>
          <div className="space-y-4">
            <a href="tel:+77777777777" className="flex items-center gap-3 text-gray-300 hover:text-cyan-400 transition">
              <Phone className="w-5 h-5" />
              <span>+7 (777) 777-77-77</span>
            </a>
            <a href="mailto:info@snus.kz" className="flex items-center gap-3 text-gray-300 hover:text-cyan-400 transition">
              <Mail className="w-5 h-5" />
              <span>info@snus.kz</span>
            </a>
            <a href="https://wa.me/77777777777" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-gray-300 hover:text-cyan-400 transition">
              <MessageCircle className="w-5 h-5" />
              <span>WhatsApp</span>
            </a>
            <a href="https://t.me/snuskz" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-gray-300 hover:text-cyan-400 transition">
              <Send className="w-5 h-5" />
              <span>Telegram</span>
            </a>
            <a href="https://instagram.com/snus.kz" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-gray-300 hover:text-cyan-400 transition">
              <Instagram className="w-5 h-5" />
              <span>Instagram: @snus.kz</span>
            </a>
            <div className="flex items-center gap-3 text-gray-300">
              <MapPin className="w-5 h-5" />
              <span>г. Астана, ул. Кабанбай батыра, 15</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // FAQ Page
  const FAQPage = () => {
    const faqs = [
      {
        q: "Как сделать заказ?",
        a: "Выберите товары в каталоге, добавьте их в корзину и оформите заказ. Мы свяжемся с вами для подтверждения."
      },
      {
        q: "Какие способы оплаты доступны?",
        a: "Мы принимаем оплату наличными при получении, Kaspi QR, банковские карты онлайн и Kaspi рассрочку."
      },
      {
        q: "Сколько стоит доставка?",
        a: "Доставка по Астане - 500₸. При заказе от 10000₸ - бесплатно. По регионам - от 1000₸."
      },
      {
        q: "Как долго доставка?",
        a: "По Астане - 1-2 часа. По регионам Казахстана - 1-3 рабочих дня."
      },
      {
        q: "Можно ли вернуть товар?",
        a: "Возврат возможен в течение 14 дней, если товар не был вскрыт и сохранен товарный вид."
      },
      {
        q: "Как проверить оригинальность?",
        a: "Вся наша продукция имеет сертификаты подлинности. На упаковке есть защитные голограммы и QR-коды для проверки."
      }
    ];

    return (
      <div className="min-h-screen py-8 px-4">
        <div className="container mx-auto max-w-4xl">
          <h1 className="text-4xl font-bold mb-8">Часто задаваемые вопросы</h1>
          
          <div className="space-y-4 mb-12">
            {faqs.map((faq, index) => (
              <div key={index} className="bg-slate-800 rounded-xl overflow-hidden">
                <button
                  onClick={() => setFaqOpen({ ...faqOpen, [index]: !faqOpen[index] })}
                  className="w-full flex items-center justify-between p-6 text-left hover:bg-slate-700 transition"
                >
                  <span className="font-semibold">{faq.q}</span>
                  {faqOpen[index] ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
                </button>
                {faqOpen[index] && (
                  <div className="px-6 pb-6">
                    <p className="text-gray-400">{faq.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>

          <div className="bg-slate-800 rounded-xl p-8">
            <h2 className="text-2xl font-semibold mb-6">Доставка и Оплата</h2>
            
            <div className="mb-6">
              <h3 className="text-xl font-semibold mb-3 text-cyan-400">Доставка</h3>
              <div className="space-y-2 text-gray-300">
                <p>• По Астане: 1-2 часа - 500₸ (бесплатно от 10000₸)</p>
                <p>• По Казахстану: 1-3 дня - от 1000₸</p>
                <p>• Самовывоз: бесплатно</p>
              </div>
            </div>

            <div>
              <h3 className="text-xl font-semibold mb-3 text-purple-400">Способы оплаты</h3>
              <div className="space-y-2 text-gray-300">
                <p>• Наличными при получении</p>
                <p>• Kaspi QR</p>
                <p>• Банковская карта онлайн</p>
                <p>• Kaspi Рассрочка 0-0-3</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Admin Page
  const AdminPage = () => {
    if (!isAdminAuth) return null;

    return (
      <div className="min-h-screen py-8 px-4">
        <div className="container mx-auto">
          <h1 className="text-4xl font-bold mb-8">Панель администратора</h1>

          <div className="grid md:grid-cols-4 gap-6 mb-8">
            <div className="bg-slate-800 rounded-xl p-6">
              <h3 className="text-gray-400 text-sm mb-2">Всего заказов</h3>
              <p className="text-3xl font-bold text-cyan-400">{orders.length}</p>
            </div>
            <div className="bg-slate-800 rounded-xl p-6">
              <h3 className="text-gray-400 text-sm mb-2">Сумма продаж</h3>
              <p className="text-3xl font-bold text-purple-400">
                {orders.reduce((sum, order) => sum + order.total, 0)}₸
              </p>
            </div>
            <div className="bg-slate-800 rounded-xl p-6">
              <h3 className="text-gray-400 text-sm mb-2">Товаров</h3>
              <p className="text-3xl font-bold text-pink-400">{adminProducts.length}</p>
            </div>
            <div className="bg-slate-800 rounded-xl p-6">
              <h3 className="text-gray-400 text-sm mb-2">Средний чек</h3>
              <p className="text-3xl font-bold text-green-400">
                {orders.length > 0 ? Math.round(orders.reduce((sum, order) => sum + order.total, 0) / orders.length) : 0}₸
              </p>
            </div>
          </div>

          <div className="bg-slate-800 rounded-xl p-6">
            <h2 className="text-2xl font-semibold mb-6">Последние заказы</h2>
            {orders.length === 0 ? (
              <p className="text-gray-400 text-center py-8">Заказов пока нет</p>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b border-slate-700">
                      <th className="text-left py-3 px-4">Номер</th>
                      <th className="text-left py-3 px-4">Дата</th>
                      <th className="text-left py-3 px-4">Клиент</th>
                      <th className="text-left py-3 px-4">Телефон</th>
                      <th className="text-left py-3 px-4">Сумма</th>
                      <th className="text-left py-3 px-4">Статус</th>
                    </tr>
                  </thead>
                  <tbody>
                    {orders.map(order => (
                      <tr key={order.id} className="border-b border-slate-700 hover:bg-slate-700">
                        <td className="py-3 px-4 text-cyan-400">{order.orderNumber}</td>
                        <td className="py-3 px-4 text-gray-300">{order.date}</td>
                        <td className="py-3 px-4 text-gray-300">{order.customer}</td>
                        <td className="py-3 px-4 text-gray-300">{order.phone}</td>
                        <td className="py-3 px-4 text-gray-300">{order.total}₸</td>
                        <td className="py-3 px-4">
                          <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
                            {order.status}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  // Cart Sidebar
  const CartSidebar = () => (
    <>
      {showCartSidebar && (
        <>
          <div className="fixed inset-0 bg-black/50 z-50" onClick={() => setShowCartSidebar(false)}></div>
          <div className="fixed right-0 top-0 h-full w-full max-w-md bg-slate-900 z-50 shadow-xl transform transition-transform">
            <div className="flex flex-col h-full">
              <div className="flex items-center justify-between p-6 border-b border-slate-800">
                <h2 className="text-xl font-semibold">Корзина ({cart.length})</h2>
                <button onClick={() => setShowCartSidebar(false)} className="p-2 hover:bg-slate-800 rounded-lg transition">
                  <X className="w-6 h-6" />
                </button>
              </div>

              <div className="flex-1 overflow-y-auto p-6">
                {cart.length === 0 ? (
                  <div className="text-center py-16">
                    <ShoppingCart className="w-16 h-16 mx-auto mb-4 text-gray-600" />
                    <p className="text-gray-400 mb-4">Корзина пуста</p>
                    <button onClick={() => { setShowCartSidebar(false); setCurrentPage('catalog'); }} className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg hover:shadow-lg transition">
                      Перейти в каталог
                    </button>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {cart.map(item => (
                      <div key={item.id} className="bg-slate-800 rounded-xl p-4">
                        <div className="flex gap-4">
                          <div className="w-20 h-20 rounded-lg" style={{ background: item.image }}></div>
                          <div className="flex-1">
                            <h3 className="font-semibold mb-1">{item.name}</h3>
                            <p className="text-cyan-400 font-semibold">{item.price}₸</p>
                            <div className="flex items-center gap-2 mt-2">
                              <button onClick={() => updateQuantity(item.id, item.quantity - 1)} className="p-1 bg-slate-700 rounded hover:bg-slate-600 transition">
                                <Minus className="w-4 h-4" />
                              </button>
                              <span className="px-3">{item.quantity}</span>
                              <button onClick={() => updateQuantity(item.id, item.quantity + 1)} className="p-1 bg-slate-700 rounded hover:bg-slate-600 transition">
                                <Plus className="w-4 h-4" />
                              </button>
                              <button onClick={() => removeFromCart(item.id)} className="ml-auto p-1 text-red-400 hover:bg-red-500/20 rounded transition">
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {cart.length > 0 && (
                <div className="border-t border-slate-800 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <span className="text-lg">Итого:</span>
                    <span className="text-2xl font-bold text-cyan-400">{calculateTotal()}₸</span>
                  </div>
                  <button onClick={() => { setShowCartSidebar(false); setShowCheckoutModal(true); }} className="w-full py-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg transition">
                    Оформить заказ
                  </button>
                </div>
              )}
            </div>
          </div>
        </>
      )}
    </>
  );

  // Product Modal
  const ProductModal = () => (
    <>
      {showProductModal && selectedProduct && (
        <>
          <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" onClick={() => setShowProductModal(false)}>
            <div className="bg-slate-900 rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
              <div className="p-6 border-b border-slate-800 flex items-center justify-between">
                <h2 className="text-2xl font-bold">{selectedProduct.name}</h2>
                <button onClick={() => setShowProductModal(false)} className="p-2 hover:bg-slate-800 rounded-lg transition">
                  <X className="w-6 h-6" />
                </button>
              </div>
              
              <div className="p-6">
                <div className="grid md:grid-cols-2 gap-8">
                  <div>
                    <div className="h-96 rounded-xl mb-4" style={{ background: selectedProduct.image }}></div>
                  </div>
                  
                  <div>
                    <div className="flex items-center gap-2 mb-4">
                      <Star className="w-5 h-5 text-yellow-400 fill-current" />
                      <Star className="w-5 h-5 text-yellow-400 fill-current" />
                      <Star className="w-5 h-5 text-yellow-400 fill-current" />
                      <Star className="w-5 h-5 text-yellow-400 fill-current" />
                      <Star className="w-5 h-5 text-yellow-400 fill-current" />
                      <span className="text-sm text-gray-400 ml-2">(5.0)</span>
                    </div>

                    <p className="text-3xl font-bold text-cyan-400 mb-6">{selectedProduct.price}₸</p>

                    <p className="text-gray-300 mb-6">{selectedProduct.description}</p>

                    <div className="bg-slate-800 rounded-xl p-4 mb-6">
                      <h3 className="font-semibold mb-3">Характеристики</h3>
                      <div className="space-y-2 text-sm">
                        <div className="flex justify-between">
                          <span className="text-gray-400">Бренд:</span>
                          <span className="text-gray-300">{selectedProduct.brand}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-400">Вкус:</span>
                          <span className="text-gray-300">{selectedProduct.flavor}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-400">Крепость:</span>
                          <span className="text-gray-300">{selectedProduct.strength}</span>
                        </div>
                      </div>
                    </div>

                    <button onClick={() => { addToCart(selectedProduct); setShowProductModal(false); }} className="w-full py-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg transition flex items-center justify-center gap-2">
                      <ShoppingCart className="w-5 h-5" />
                      Добавить в корзину
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );

  // Checkout Modal
  const CheckoutModal = () => (
    <>
      {showCheckoutModal && (
        <>
          <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4 overflow-y-auto">
            <div className="bg-slate-900 rounded-2xl max-w-4xl w-full my-8" onClick={(e) => e.stopPropagation()}>
              <div className="p-6 border-b border-slate-800 flex items-center justify-between">
                <h2 className="text-2xl font-bold">Оформление заказа</h2>
                <button onClick={() => setShowCheckoutModal(false)} className="p-2 hover:bg-slate-800 rounded-lg transition">
                  <X className="w-6 h-6" />
                </button>
              </div>

              <form onSubmit={handleCheckout} className="p-6">
                <div className="grid md:grid-cols-2 gap-8">
                  <div>
                    <h3 className="text-xl font-semibold mb-4">Контактные данные</h3>
                    
                    <div className="space-y-4">
                      <div>
                        <label className="block text-sm font-medium mb-2">Имя *</label>
                        <input
                          type="text"
                          required
                          value={checkoutForm.name}
                          onChange={(e) => setCheckoutForm({...checkoutForm, name: e.target.value})}
                          className="w-full px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                          placeholder="Введите ваше имя"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium mb-2">Телефон *</label>
                        <input
                          type="tel"
                          required
                          value={checkoutForm.phone}
                          onChange={(e) => setCheckoutForm({...checkoutForm, phone: e.target.value})}
                          className="w-full px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                          placeholder="+7 (___) ___-__-__"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium mb-2">Email</label>
                        <input
                          type="email"
                          value={checkoutForm.email}
                          onChange={(e) => setCheckoutForm({...checkoutForm, email: e.target.value})}
                          className="w-full px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                          placeholder="your@email.com"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium mb-2">Адрес доставки *</label>
                        <input
                          type="text"
                          required
                          value={checkoutForm.address}
                          onChange={(e) => setCheckoutForm({...checkoutForm, address: e.target.value})}
                          className="w-full px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                          placeholder="Улица, дом, квартира"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium mb-2">Комментарий к заказу</label>
                        <textarea
                          value={checkoutForm.comment}
                          onChange={(e) => setCheckoutForm({...checkoutForm, comment: e.target.value})}
                          className="w-full px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 resize-none"
                          rows="3"
                          placeholder="Дополнительная информация"
                        ></textarea>
                      </div>

                      <div>
                        <label className="block text-sm font-medium mb-3">Способ оплаты *</label>
                        <div className="space-y-2">
                          {[
                            { value: 'cash', label: 'Наличными при получении' },
                            { value: 'kaspi-qr', label: 'Kaspi QR' },
                            { value: 'card', label: 'Банковская карта' },
                            { value: 'kaspi-credit', label: 'Kaspi Рассрочка' }
                          ].map(option => (
                            <label key={option.value} className="flex items-center gap-3 p-3 bg-slate-800 rounded-lg cursor-pointer hover:bg-slate-700 transition">
                              <input
                                type="radio"
                                name="payment"
                                value={option.value}
                                checked={checkoutForm.payment === option.value}
                                onChange={(e) => setCheckoutForm({...checkoutForm, payment: e.target.value})}
                                className="w-4 h-4"
                              />
                              <span>{option.label}</span>
                            </label>
                          ))}
                        </div>
                      </div>

                      <label className="flex items-start gap-3 cursor-pointer">
                        <input
                          type="checkbox"
                          checked={checkoutForm.agree}
                          onChange={(e) => setCheckoutForm({...checkoutForm, agree: e.target.checked})}
                          className="mt-1"
                        />
                        <span className="text-sm text-gray-400">
                          Согласен с условиями доставки и политикой конфиденциальности *
                        </span>
                      </label>
                    </div>
                  </div>

                  <div>
                    <h3 className="text-xl font-semibold mb-4">Ваш заказ</h3>
                    
                    <div className="bg-slate-800 rounded-xl p-4 mb-4">
                      <div className="space-y-3 mb-4">
                        {cart.map(item => (
                          <div key={item.id} className="flex justify-between text-sm">
                            <span className="text-gray-300">{item.name} x{item.quantity}</span>
                            <span className="text-cyan-400">{item.price * item.quantity}₸</span>
                          </div>
                        ))}
                      </div>
                      <div className="border-t border-slate-700 pt-3">
                        <div className="flex justify-between text-lg font-semibold">
                          <span>Итого:</span>
                          <span className="text-cyan-400">{calculateTotal()}₸</span>
                        </div>
                      </div>
                    </div>

                    <button type="submit" className="w-full py-4 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled={!checkoutForm.agree}>
                      Подтвердить заказ
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </>
      )}
    </>
  );

  // Order Success Modal
  const OrderSuccessModal = () => (
    <>
      {showOrderSuccess && (
        <>
          <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4">
            <div className="bg-slate-900 rounded-2xl max-w-md w-full p-8 text-center" onClick={(e) => e.stopPropagation()}>
              <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <Check className="w-8 h-8 text-green-400" />
              </div>
              <h2 className="text-2xl font-bold mb-2">Заказ оформлен!</h2>
              <p className="text-gray-400 mb-4">Номер вашего заказа:</p>
              <p className="text-2xl font-bold text-cyan-400 mb-4">{orderNumber}</p>
              <p className="text-gray-400 mb-6">Мы свяжемся с вами в течение 15 минут для подтверждения заказа</p>
              <button onClick={() => { setShowOrderSuccess(false); setCurrentPage('home'); }} className="w-full py-3 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg transition">
                Вернуться на главную
              </button>
            </div>
          </div>
        </>
      )}
    </>
  );

  // Admin Login Modal
  const AdminLoginModal = () => (
    <>
      {showAdminLogin && (
        <>
          <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" onClick={() => setShowAdminLogin(false)}>
            <div className="bg-slate-900 rounded-2xl max-w-md w-full p-8" onClick={(e) => e.stopPropagation()}>
              <h2 className="text-2xl font-bold mb-6 text-center">Вход в админ-панель</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2">Пароль</label>
                  <input
                    type="password"
                    value={adminPassword}
                    onChange={(e) => setAdminPassword(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && handleAdminLogin()}
                    className="w-full px-4 py-3 bg-slate-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500"
                    placeholder="Введите пароль"
                  />
                </div>
                <button onClick={handleAdminLogin} className="w-full py-3 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg transition">
                  Войти
                </button>
                <p className="text-xs text-gray-500 text-center">Пароль для демо: admin123</p>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );

  // Age Verification Modal
  const AgeVerificationModal = () => (
    <>
      {!isAgeVerified && (
        <>
          <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4">
            <div className="bg-slate-900 rounded-2xl max-w-md w-full p-8 text-center border-2 border-red-500">
              <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
              <h2 className="text-3xl font-bold mb-4">Предупреждение 18+</h2>
              <p className="text-gray-300 mb-6">
                Данный сайт содержит информацию о никотиновых продуктах. 
                <br /><br />
                Вам уже исполнилось 18 лет?
              </p>
              <div className="flex gap-4">
                <button onClick={() => setIsAgeVerified(true)} className="flex-1 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:shadow-lg transition">
                  Да, мне есть 18
                </button>
                <button onClick={() => window.location.href = 'https://google.com'} className="flex-1 py-3 bg-slate-800 rounded-lg font-semibold hover:bg-slate-700 transition">
                  Нет
                </button>
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );

  // Toast Notification
  const Toast = () => (
    <>
      {showToast && (
        <div className="fixed bottom-4 right-4 z-50 bg-slate-800 text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 animate-slide-up">
          <Check className="w-5 h-5 text-green-400" />
          <span>{toastMessage}</span>
        </div>
      )}
    </>
  );

  // Footer
  const Footer = () => (
    <footer className="bg-slate-900 border-t border-slate-800 py-12 px-4">
      <div className="container mx-auto">
        <div className="grid md:grid-cols-3 gap-8 mb-8">
          <div>
            <h3 className="text-xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
              SNUS.KZ
            </h3>
            <p className="text-gray-400 mb-4">
              Официальный дистрибьютор премиальных никотиновых паучей в Казахстане
            </p>
            <div className="flex gap-4">
              <a href="https://instagram.com/snus.kz" className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center hover:bg-slate-700 transition">
                <Instagram className="w-5 h-5" />
              </a>
              <a href="https://t.me/snuskz" className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center hover:bg-slate-700 transition">
                <Send className="w-5 h-5" />
              </a>
              <a href="https://wa.me/77777777777" className="w-10 h-10 bg-slate-800 rounded-lg flex items-center justify-center hover:bg-slate-700 transition">
                <MessageCircle className="w-5 h-5" />
              </a>
            </div>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Информация</h4>
            <div className="space-y-2">
              <button onClick={() => setCurrentPage('about')} className="block text-gray-400 hover:text-cyan-400 transition">О нас</button>
              <button onClick={() => setCurrentPage('faq')} className="block text-gray-400 hover:text-cyan-400 transition">Доставка и оплата</button>
              <button onClick={() => setCurrentPage('faq')} className="block text-gray-400 hover:text-cyan-400 transition">FAQ</button>
              <a href="#" className="block text-gray-400 hover:text-cyan-400 transition">Политика конфиденциальности</a>
            </div>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Контакты</h4>
            <div className="space-y-2 text-gray-400">
              <p className="flex items-center gap-2">
                <Phone className="w-4 h-4" />
                +7 (777) 777-77-77
              </p>
              <p className="flex items-center gap-2">
                <Mail className="w-4 h-4" />
                info@snus.kz
              </p>
              <p className="flex items-center gap-2">
                <MapPin className="w-4 h-4" />
                г. Астана, ул. Кабанбай батыра, 15
              </p>
            </div>
          </div>
        </div>

        <div className="border-t border-slate-800 pt-8 text-center">
          <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 mb-4 max-w-3xl mx-auto">
            <p className="text-red-400 text-sm">
              ⚠️ ПРЕДУПРЕЖДЕНИЕ: Продукция содержит никотин - вещество, вызывающее зависимость. Только для лиц старше 18 лет.
            </p>
          </div>
          <p className="text-gray-500 text-sm">
            © 2024 SNUS.KZ. Все права защищены.
          </p>
        </div>
      </div>
    </footer>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
      <AgeVerificationModal />
      <Header />
      
      <main>
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'catalog' && <CatalogPage />}
        {currentPage === 'about' && <AboutPage />}
        {currentPage === 'faq' && <FAQPage />}
        {currentPage === 'admin' && <AdminPage />}
      </main>

      <Footer />
      
      <CartSidebar />
      <ProductModal />
      <CheckoutModal />
      <OrderSuccessModal />
      <AdminLoginModal />
      <Toast />

      <style jsx>{`
        @keyframes slide-up {
          from {
            transform: translateY(100%);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .animate-slide-up {
          animation: slide-up 0.3s ease-out;
        }
      `}</style>
    </div>
  );
};

export default VapeShop;