import React from 'react';
import Link from 'next/link';
import { User as UserIcon, Award, Briefcase, MapPin, ArrowRight } from 'lucide-react';
import { Business } from '../types';

const AnnuaireHero = ({ featuredBusiness }: { featuredBusiness: Business }) => {
  if (!featuredBusiness) return null;

  return (
    <div className="bg-gray-50 relative overflow-hidden pb-12 pt-6">
      {/* Geometric Background Pattern */}
      <div className="absolute inset-0 z-0 opacity-10">
        <svg className="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M0 100 C 20 0 50 0 100 100 Z" fill="#ea580c" />
          <path d="M0 0 C 50 100 80 100 100 0 Z" fill="#ea580c" />
        </svg>
      </div>

      <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Card */}
        <div className="bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-100">
          
          {/* Left: Imagery (Founder + Logo) */}
          <div className="md:w-2/5 relative h-64 md:h-auto bg-gray-900 group">
            {featuredBusiness.founderImageUrl ? (
               <img 
               src={featuredBusiness.founderImageUrl} 
               alt={featuredBusiness.founderName} 
               className="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-500"
             />
            ) : (
               <div className="w-full h-full bg-gradient-to-br from-gray-800 to-black flex items-center justify-center">
                 <UserIcon className="w-20 h-20 text-gray-600" />
               </div>
            )}
            
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
            
            {/* Overlaid Logo */}
            <div className="absolute bottom-6 left-6 flex items-center space-x-3">
               <div className="w-16 h-16 bg-white rounded-xl p-1 shadow-lg rotate-3 transform transition-transform group-hover:rotate-0">
                 <img src={featuredBusiness.logoUrl} alt="Logo" className="w-full h-full object-cover rounded-lg" />
               </div>
            </div>
          </div>

          {/* Right: Content */}
          <div className="md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
            <div className="flex items-center space-x-2 mb-4">
               <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-yellow-100 text-yellow-800 uppercase tracking-wider">
                 <Award className="w-3 h-3 mr-1" /> Afroshine
               </span>
            </div>
            
            <h2 className="text-3xl md:text-4xl font-bold font-serif text-gray-900 mb-2">
              {featuredBusiness.name}
            </h2>
            {featuredBusiness.founderName && (
              <p className="text-lg text-gray-600 mb-4 font-medium">
                Dirigé par <span className="text-brand-600">{featuredBusiness.founderName}</span>
              </p>
            )}
            
            <div className="flex flex-wrap gap-4 text-sm text-gray-500 mb-6">
              <div className="flex items-center"><Briefcase className="w-4 h-4 mr-1"/> {featuredBusiness.category}</div>
              <div className="flex items-center"><MapPin className="w-4 h-4 mr-1"/> {featuredBusiness.location}</div>
            </div>

            {/* Shocking Figure */}
            {featuredBusiness.keyMetric && (
              <div className="mb-8 p-4 bg-brand-50 border-l-4 border-brand-500 rounded-r-lg">
                <p className="text-2xl font-bold text-brand-900">{featuredBusiness.keyMetric}</p>
                <p className="text-xs text-brand-700 uppercase font-semibold">Performance validée</p>
              </div>
            )}

            <div className="flex flex-col sm:flex-row gap-4">
              <Link 
                href={`/annuaire/${featuredBusiness.slug || featuredBusiness.id}`}
                className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700 shadow-lg hover:shadow-xl transition-all"
              >
                Voir la fiche complète
              </Link>
              <button className="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-200 text-base font-medium rounded-md text-gray-600 bg-transparent hover:border-brand-300 hover:text-brand-600 transition-colors">
                Devenir l'Afroshine <ArrowRight className="w-4 h-4 ml-2"/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AnnuaireHero;