import React from 'react';
import { Search } from 'lucide-react';

function Header() {
  return (
    <header className="bg-white shadow-sm">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <div className="w-12 h-12 bg-gradient-to-r from-orange-400 to-yellow-400 rounded flex items-center justify-center">
                <span className="text-white font-bold text-xl">З</span>
              </div>
              <div>
                <h1 className="text-xl font-bold text-orange-500">ЗАПОРІЖЖЯЕЛЕКТРОПОСТАЧАННЯ</h1>
                <p className="text-sm text-primary-600">Ваш партнер з постачання електричної енергії</p>
              </div>
            </div>
          </div>
          
          <div className="flex items-center gap-8">
            <div className="text-right">
              <p className="text-sm font-medium text-primary-600">Кол-центр:</p>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <p className="text-primary-600">📞 061 228 22 20</p>
                  <p className="text-primary-600">📞 063 228 22 20</p>
                </div>
                <div>
                  <p className="text-primary-600">📞 066 228 22 20</p>
                  <p className="text-primary-600">📞 068 228 22 20</p>
                </div>
              </div>
            </div>
            
            <div className="relative">
              <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
              <input 
                type="text" 
                placeholder="Пошук..." 
                className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

export default Header;