```jsx
import { useState } from 'react';

export default function App() {
  const [selectedType, setSelectedType] = useState('Пакет с вырубной ручкой');
  const [width, setWidth] = useState(30);
  const [height, setHeight] = useState(40);
  const [quantity, setQuantity] = useState(100);
  const [thickness, setThickness] = useState(60);
  const [colors, setColors] = useState(1);
  const [totalPrice, setTotalPrice] = useState(0);

  const [uploadedImage, setUploadedImage] = useState(null);
  const [previewImage, setPreviewImage] = useState(null);

  const types = [
    'Пакет с вырубной ручкой',
    'Пакет с прорезной ручкой',
    'Пакет дой-пак',
    'Пакет майка',
    'Мешок с zip-локом',
    'Профилированный мешок'
  ];

  const calculatePrice = () => {
    // Базовые цены и коэффициенты для расчёта стоимости
    const basePrices = {
      'Пакет с вырубной ручкой': 5,
      'Пакет с прорезной ручкой': 4.8,
      'Пакет дой-пак': 7,
      'Пакет майка': 4.5,
      'Мешок с zip-локом': 9,
      'Профилированный мешок': 6
    };

    const sizeMultiplier = (width * height) / 1000;
    const colorCosts = [0, 2, 3.5, 5];
    const thicknessMultiplier = thickness / 60;

    const pricePerUnit = basePrices[selectedType] * sizeMultiplier * thicknessMultiplier + colorCosts[colors - 1];

    const totalPrice = pricePerUnit * quantity;
    setTotalPrice(Math.round(totalPrice * 100) / 100);
  };

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      setPreviewImage(e.target.result);
      setUploadedImage(file);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-md sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <svg className="w-10 h-10 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z" />
              <path d="M8 10h8M8 14h8" />
            </svg>
            <span className="text-xl font-bold text-gray-800">Сервиспак</span>
          </div>
          <nav className="hidden md:flex space-x-8 text-sm font-medium">
            <a href="#about" className="text-gray-600 hover:text-blue-600 transition">О компании</a>
            <a href="#products" className="text-gray-600 hover:text-blue-600 transition">Продукция</a>
            <a href="#calculator" className="text-gray-600 hover:text-blue-600 transition">Калькулятор</a>
            <a href="#design" className="text-gray-600 hover:text-blue-600 transition">Дизайн</a>
            <a href="#contacts" className="text-gray-600 hover:text-blue-600 transition">Контакты</a>
          </nav>
          <button className="md:hidden text-gray-600">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
              Изготовление пластиковых пакетов и мешков на заказ
            </h1>
            <p className="text-lg opacity-90 mb-8">
              Высокое качество, разнообразие форматов, индивидуальные параметры и быстрые сроки производства
            </p>
            <a href="#calculator" className="inline-block bg-white text-blue-600 font-semibold px-6 py-3 rounded-lg shadow hover:shadow-md transition transform hover:-translate-y-1">
              Рассчитать стоимость
            </a>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="w-full h-24 md:h-32">
            <path fill="#f9fafb" fillOpacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,128C672,128,768,160,864,176C960,192,1056,192,1152,170.7C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
          </svg>
        </div>
      </section>

      {/* About Company */}
      <section id="about" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold text-gray-800 mb-4">О компании "Сервиспак"</h2>
              <p className="text-gray-600 mb-4">
                Компания "Сервиспак" уже более 10 лет специализируется на производстве полиэтиленовой упаковки по индивидуальным размерам.
                Мы предлагаем широкий ассортимент продукции от классических пакетов до сложных конструкций под любые задачи.
              </p>
              <p className="text-gray-600 mb-6">
                Наши клиенты получают не только качественную продукцию, но и полный цикл услуг — от разработки дизайна до доставки готовой партии.
                Мы используем современное оборудование и сырьё ведущих европейских производителей.
              </p>
              <div className="grid grid-cols-2 gap-4 mt-6">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <div className="text-2xl font-bold text-blue-600">10+</div>
                  <div className="text-sm text-gray-600">лет опыта</div>
                </div>
                <div className="bg-green-50 p-4 rounded-lg">
                  <div className="text-2xl font-bold text-green-600">1000+</div>
                  <div className="text-sm text-gray-600">довольных клиентов</div>
                </div>
                <div className="bg-purple-50 p-4 rounded-lg">
                  <div className="text-2xl font-bold text-purple-600">100+</div>
                  <div className="text-sm text-gray-600">цветов печати</div>
                </div>
                <div className="bg-yellow-50 p-4 rounded-lg">
                  <div className="text-2xl font-bold text-yellow-600">100%</div>
                  <div className="text-sm text-gray-600">контроль качества</div>
                </div>
              </div>
            </div>
            <div className="relative">
              <img src="https://picsum.photos/800/600?random=1" alt="Производство" className="rounded-lg shadow-lg w-full" />
              <div className="absolute inset-0 bg-blue-600 bg-opacity-70 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300">
                <button className="bg-white text-blue-600 font-semibold px-6 py-3 rounded-lg shadow hover:bg-blue-50 transition">
                  Посмотреть сертификаты
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Products */}
      <section id="products" className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 text-center mb-12">Наша продукция</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: 'Пакет с вырубной ручкой',
                image: 'https://picsum.photos/400/300?random=2',
                description: 'Классический пакет с удобными ручками для повседневного использования.'
              },
              {
                title: 'Пакет с прорезной ручкой',
                image: 'https://picsum.photos/400/300?random=3',
                description: 'Прочный пакет с усиленными ручками для тяжелых товаров.'
              },
              {
                title: 'Пакет дой-пак',
                image: 'https://picsum.photos/400/300?random=4',
                description: 'Универсальная упаковка с клапаном для хранения сыпучих продуктов.'
              },
              {
                title: 'Пакет майка',
                image: 'https://picsum.photos/400/300?random=5',
                description: 'Экологичная альтернатива одноразовым пакетам с логотипом вашей компании.'
              },
              {
                title: 'Мешок с zip-локом',
                image: 'https://picsum.photos/400/300?random=6',
                description: 'Воздухонепроницаемая упаковка с застежкой для длительного хранения.'
              },
              {
                title: 'Профилированный мешок',
                image: 'https://picsum.photos/400/300?random=7',
                description: 'Высокопрочные мешки для упаковки строительных материалов и товаров на вес.'
              }
            ].map((product, index) => (
              <div key={index} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
                <img src={product.image} alt={product.title} className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-gray-800 mb-2">{product.title}</h3>
                  <p className="text-gray-600">{product.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Calculator */}
      <section id="calculator" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 text-center mb-12">Калькулятор стоимости</h2>
          <div className="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
            <div className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-gray-700 font-medium mb-2">Тип пакета</label>
                  <select
                    value={selectedType}
                    onChange={(e) => setSelectedType(e.target.value)}
                    className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    {types.map((type, index) => (
                      <option key={index}>{type}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-2">Ширина (см)</label>
                  <input
                    type="number"
                    min="10"
                    max="100"
                    value={width}
                    onChange={(e) => setWidth(parseInt(e.target.value))}
                    className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-2">Высота (см)</label>
                  <input
                    type="number"
                    min="10"
                    max="150"
                    value={height}
                    onChange={(e) => setHeight(parseInt(e.target.value))}
                    className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-2">Количество</label>
                  <input
                    type="number"
                    min="50"
                    max="10000"
                    step="50"
                    value={quantity}
                    onChange={(e) => setQuantity(parseInt(e.target.value))}
                    className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-2">Толщина материала (мкм)</label>
                  <input
                    type="range"
                    min="40"
                    max="120"
                    step="10"
                    value={thickness}
                    onChange={(e) => setThickness(parseInt(e.target.value))}
                    className="w-full"
                  />
                  <div className="mt-2 text-sm text-gray-600">{thickness} мкм</div>
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-2">Цвета печати</label>
                  <div className="flex space-x-4">
                    {[1, 2, 3, 4].map((num) => (
                      <label key={num} className="flex items-center space-x-1 cursor-pointer">
                        <input
                          type="radio"
                          name="colors"
                          checked={colors === num}
                          onChange={() => setColors(num)}
                          className="text-blue-600 focus:ring-blue-500"
                        />
                        <span>{num} цвет{num > 1 ? (num === 2 ? 'а' : 'а') : ''}</span>
                      </label>
                    ))}
                  </div>
                </div>
              </div>
              <div className="mt-8 text-right">
                <button
                  onClick={calculatePrice}
                  className="bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg shadow hover:bg-blue-700 transition"
                >
                  Рассчитать стоимость
                </button>
              </div>
              {totalPrice > 0 && (
                <div className="mt-6 p-4 bg-blue-50 border-l-4 border-blue-500 rounded">
                  <p className="text-lg font-medium text-blue-800">
                    Примерная стоимость: <span className="font-bold">{totalPrice.toLocaleString()} ₽</span>
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Design Upload */}
      <section id="design" className="py-16 bg-gray-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-gray-800 text-center mb-12">Загрузите свой дизайн</h2>
          <div className="max-w-3xl mx-auto">
            <div className="bg-white rounded-xl shadow-lg p-6">
              <p className="text-gray-600 mb-4">
                Хотите посмотреть, как будет выглядеть ваш дизайн на выбранной упаковке? Загрузите изображение с вашим логотипом или принтом:
              </p>
              <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleImageUpload}
                  className="hidden"
                  id="design-upload"
                />
                <label htmlFor="design-upload" className="cursor-pointer">
                  <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span className="mt-2 block text-sm font-medium text-blue-600">
                    Нажмите, чтобы загрузить изображение
                  </span>
                </label>
              </div>
              {previewImage && (
                <div className="mt-6 relative border border-gray-200 rounded-lg overflow-hidden">
                  <img src={previewImage} alt="Превью" className="w-full h-auto" />
                  <div className="absolute top-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
                    Предварительный просмотр
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Contacts */}
      <section id="contacts" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-gray-800 mb-6">Контактная информация</h2>
              <div className="space-y-6 text-gray-600">
                <div className="flex items-start space-x-4">
                  <svg className="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  <div>
                    <h3 className="font-medium text-gray-800">Адрес</h3>
                    <p>620000, г. Екатеринбург, ул. Индустриальная, 15</p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <svg className="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                  </svg>
                  <div>
                    <h3 className="font-medium text-gray-800">Телефон</h3>
                    <p>+7 (343) 123-45-67</p>
                    <p>+7 (343) 123-45-68</p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <svg className="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  <div>
                    <h3 className="font-medium text-gray-800">Email</h3>
                    <p>info@serwispack.ru</p>
                    <p>sales@serwispack.ru</p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <svg className="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <div>
                    <h3 className="font-medium text-gray-800">Режим работы</h3>
                    <p>Понедельник - Пятница: 9:00 - 18:00</p>
                    <p>Суббота: 10:00 - 14:00</p>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <h2 className="text-3xl font-bold text-gray-800 mb-6">Форма обратной связи</h2>
              <form className="space-y-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-gray-700 font-medium mb-1">Имя</label>
                    <input type="text" className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                  </div>
                  <div>
                    <label className="block text-gray-700 font-medium mb-1">Email</label>
                    <input type="email" className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                  </div>
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-1">Тема</label>
                  <input type="text" className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                </div>
                <div>
                  <label className="block text-gray-700 font-medium mb-1">Сообщение</label>
                  <textarea rows="5" className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <button type="submit" className="bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg shadow hover:bg-blue-700 transition">
                  Отправить сообщение
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <svg className="w-8 h-8 text-blue-400" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z" />
                  <path d="M8 10h8M8 14h8" />
                </svg>
                <span className="text-xl font-bold">Сервиспак</span>
              </div>
              <p className="text-gray-400 mb-4">
                Производство высококачественной полиэтиленовой упаковки по индивидуальным параметрам.
              </p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-white transition">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.477 2 2 6.477 2 12c0 5.523 4.477 10 10 10 5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zm-5-9c0 .552-.448 1-1 1s-1-.448-1-1 .448-1 1-1 1 .448 1 1zm5 0c0 .552-.448 1-1 1s-1-.448-1-1 .448-1 1-1 1 .448 1 1zm5 0c0 .552-.448 1-1 1s-1-.448-1-1 .448-1 1-1 1 .448 1 1z" />
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition">
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.74 0 8.333.014 7.053.06 2.05 0.292 0.292 2.057 0.06 7.053.014 8.333 0 8.74 0 12c0 3.26.014 3.668.06 4.948.232 4.997 2.003 6.768 6.99 6.99C8.333 23.986 8.74 24 12 24c3.26 0 3.668-.014 4.948-.06 4.997-.232 6.768-2.003 6.99-6.99.047-1.28.06-1.688.06-4.948 0-3.26-.014-3.667-.06-4.947-0.232-4.997-2.003-6.768-6.99-6.99C15.668.014 15.26 0 12 0zm6.93 6.93A9.949 9.949 0 0012 4c-2.962 0-5.444 1.042-7.237 2.835A9.948 9.948 0 002 12c0 2.962 1.042 5.444 2.835 7.237A9.949 9.949 0 0012 22c2.962 0 5.444-1.042 7.237-2.835A9.948 9.948 0 0022 12c0-2.962-1.042-5.444-2.835-7.237zM12 17c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5z" />
                  </svg>
                </a>
              </div>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Продукция</h3>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition">Пакеты с вырубной ручкой</a></li>
                <li><a href="#" className="hover:text-white transition">Пакеты с прорезной ручкой</a></li>
                <li><a href="#" className="hover:text-white transition">Пакеты дой-пак</a></li>
                <li><a href="#" className="hover:text-white transition">Пакеты майки</a></li>
                <li><a href="#" className="hover:text-white transition">Мешки с zip-локом</a></li>
                <li><a href="#" className="hover:text-white transition">Профилированные мешки</a></li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Клиентам</h3>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition">Как сделать заказ</a></li>
                <li><a href="#" className="hover:text-white transition">Доставка и оплата</a></li>
                <li><a href="#" className="hover:text-white transition">Гарантии</a></li>
                <li><a href="#" className="hover:text-white transition">Часто задаваемые вопросы</a></li>
                <li><a href="#" className="hover:text-white transition">Политика конфиденциальности</a></li>
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">Контакты</h3>
              <ul className="space-y-2 text-gray-400">
                <li>г. Екатеринбург, ул. Индустриальная, 15</li>
                <li>+7 (343) 123-45-67</li>
                <li>info@serwispack.ru</li>
                <li>Пн-Пт: 9:00 - 18:00</li>
                <li>Сб: 10:00 - 14:00</li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400 text-sm">
            © 2025 Сервиспак. Все права защищены.
          </div>
        </div>
      </footer>
    </div>
  );
}
```