import React from 'react';
import { Calendar, Scissors, Phone } from 'lucide-react';

const Header = () => {
  return (
    <header className="bg-gradient-to-r from-gray-900 to-gray-800 text-white shadow-lg">
      <div className="container mx-auto px-4 py-6">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <div className="flex items-center space-x-3 mb-4 md:mb-0">
            <Scissors className="h-10 w-10 text-primary-500" />
            <div>
              <h1 className="text-3xl font-bold">EliteBarber</h1>
              <p className="text-gray-300">Programări la frizerie</p>
            </div>
          </div>
          
          <div className="flex items-center space-x-6">
            <div className="hidden md:flex items-center space-x-2">
              <Calendar className="h-5 w-5 text-primary-400" />
              <span className="font-medium">Luni - Sâmbătă: 9:00 - 20:00</span>
            </div>
            
            <div className="flex items-center space-x-2">
              <Phone className="h-5 w-5 text-primary-400" />
              <a href="tel:+40712345678" className="font-bold text-lg hover:text-primary-400 transition-colors">
                +40 712 345 678
              </a>
            </div>
          </div>
        </div>
        
        <div className="mt-6 text-center">
          <a 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank" 
            rel="noopener noreferrer"
            className="inline-flex items-center text-sm text-gray-300 hover:text-white transition-colors"
          >
            <span>Built with anycoder</span>
            <svg className="ml-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
            </svg>
          </a>
        </div>
      </div>
    </header>
  );
};

export default Header;