import React, { useState } from 'react';
import { 
  MapPin, 
  Calendar, 
  Users, 
  Search, 
  Star, 
  Menu,
  X,
  Globe,
  Award,
  Tent,
  Heart,
  Facebook,
  Instagram,
  Twitter,
  Youtube,
  ChevronDown
} from 'lucide-react';

export default function TryBookAfrikaApp() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Theme colors based on the design
  const colors = {
    darkGreen: '#123722',
    brandOrange: '#d68a19',
    lightBg: '#fbfaf7',
    badgeBestSeller: '#e88f0a',
    badgeLuxury: '#f0ad00',
    badgeEco: '#7f9c21',
    badgeNew: '#f0ad00'
  };

  return (
    <div className="min-h-screen font-sans text-gray-800 bg-[#fbfaf7]">
      
      {}
      <nav className="bg-white sticky top-0 z-50 px-4 sm:px-6 lg:px-12 py-4">
        <div className="max-w-[1400px] mx-auto flex justify-between items-center">
          
          {/* Logo */}
          <div className="flex items-center cursor-pointer">
            <div className="relative mr-2">
              {/* African Map SVG Placeholder */}
              <svg width="48" height="48" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M49.5 5C35 12 25 35 30 55C35 75 55 95 65 85C75 75 80 50 70 30C60 10 55 5 49.5 5Z" fill="#123722"/>
                <path d="M40 40C40 40 45 45 50 40C55 35 60 40 60 40" stroke="#d68a19" strokeWidth="3" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="flex flex-col">
              <span className="font-extrabold text-2xl tracking-tight leading-none text-[#123722]">
                TryBook<span className="text-[#d68a19]">Afrika</span>
              </span>
              <span className="text-[0.6rem] uppercase tracking-[0.2em] font-bold text-[#d68a19] mt-1">
                Safari & Travel
              </span>
            </div>
          </div>

          {/* Desktop Menu */}
          <div className="hidden lg:flex items-center space-x-10">
            <a href="#" className="text-[#d68a19] font-bold border-b-2 border-[#d68a19] pb-1">Home</a>
            <a href="#" className="text-gray-900 font-bold hover:text-[#d68a19] transition-colors">Safaris</a>
            <a href="#" className="text-gray-900 font-bold hover:text-[#d68a19] transition-colors">Lodges</a>
            <a href="#" className="text-gray-900 font-bold hover:text-[#d68a19] transition-colors">Destinations</a>
            <a href="#" className="text-gray-900 font-bold hover:text-[#d68a19] transition-colors">About</a>
            
            <button className="ml-4 px-6 py-2 border-2 border-[#d68a19] text-[#d68a19] font-bold rounded-lg hover:bg-[#d68a19] hover:text-white transition-all">
              Sign In
            </button>
          </div>

          {/* Mobile menu button */}
          <div className="lg:hidden flex items-center">
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="text-gray-900 hover:text-[#d68a19] focus:outline-none"
            >
              {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-lg border-t border-gray-100 py-4 px-6 flex flex-col space-y-4">
            <a href="#" className="text-[#d68a19] font-bold">Home</a>
            <a href="#" className="text-gray-900 font-bold">Safaris</a>
            <a href="#" className="text-gray-900 font-bold">Lodges</a>
            <a href="#" className="text-gray-900 font-bold">Destinations</a>
            <a href="#" className="text-gray-900 font-bold">About</a>
            <button className="w-full px-6 py-3 border-2 border-[#d68a19] text-[#d68a19] font-bold rounded-lg mt-2">
              Sign In
            </button>
          </div>
        )}
      </nav>

      {}
      {/* Hero Section */}
      <div className="relative w-full h-[550px] lg:h-[600px] flex items-center bg-[#f2e6d6]">
        {/* Full-width Background Image - Using a golden hour savanna image */}
        <div 
          className="absolute inset-0 w-full h-full object-cover z-0 opacity-80"
          style={{
            backgroundImage: "url('https://images.unsplash.com/photo-1547471080-7fc2caa7df68?q=80&w=2000&auto=format&fit=crop')",
            backgroundPosition: "center",
            backgroundSize: "cover"
          }}
        >
          {/* Subtle gradient overlay to make text pop */}
          <div className="absolute inset-0 bg-gradient-to-r from-white/70 via-white/40 to-transparent"></div>
        </div>

        <div className="max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-12 relative z-10 flex flex-col lg:flex-row justify-between items-center h-full pt-10 pb-20">
          
          {/* Left Content */}
          <div className="w-full lg:w-1/2 flex flex-col justify-center">
            <h1 className="text-5xl lg:text-7xl font-extrabold text-[#123722] leading-[1.1] mb-2 tracking-tight">
              Discover Africa's
            </h1>
            <h1 className="text-5xl lg:text-7xl font-extrabold text-[#d68a19] leading-[1.1] mb-4 flex items-center tracking-tight">
              Wild Heart <span className="text-5xl ml-3">🦁</span>
            </h1>
            
            {/* Small decorative line */}
            <div className="w-16 h-1 bg-[#d68a19] mb-6"></div>

            <p className="text-gray-900 text-lg lg:text-xl mb-10 max-w-lg font-medium leading-snug">
              Book your dream safari with TryBookAfrika. From the Big Five to breathtaking landscapes — your African adventure starts here.
            </p>
            
            {/* Stats */}
            <div className="flex items-center space-x-6 lg:space-x-10">
              <div className="flex flex-col items-center">
                <span className="text-3xl lg:text-4xl font-extrabold text-[#123722]">500+</span>
                <span className="text-sm font-bold text-gray-800">Safari Lodges</span>
              </div>
              <div className="h-10 w-[2px] bg-[#d68a19]/40"></div>
              <div className="flex flex-col items-center">
                <span className="text-3xl lg:text-4xl font-extrabold text-[#123722]">12K</span>
                <span className="text-sm font-bold text-gray-800">Happy Travelers</span>
              </div>
              <div className="h-10 w-[2px] bg-[#d68a19]/40"></div>
              <div className="flex flex-col items-center">
                <span className="text-3xl lg:text-4xl font-extrabold text-[#123722]">47</span>
                <span className="text-sm font-bold text-gray-800">Countries</span>
              </div>
            </div>
          </div>
          
          {}
          {/* Right Content - The Big Five Image overlay */}
          <div className="hidden lg:block w-[600px] h-[380px] relative rounded-[2.5rem] overflow-hidden shadow-2xl mr-4 bg-white/20 border-4 border-white/30">
            {/* Developer Note: Place your Big 5 image in your public folder or host it on your Nextcloud! */}
            <img 
              src="/assets/big-five.png" 
              onError={(e) => { e.target.src = "https://images.unsplash.com/photo-1516426122078-c23e76319801?q=80&w=1000&auto=format&fit=crop"; }}
              alt="The Big Five Wildlife" 
              className="w-full h-full object-cover"
            />
            {/* Light bottom fade to match the design's text area */}
            <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white/95 via-white/70 to-transparent flex items-end justify-center pb-6">
              <h3 className="text-[#5a3219] text-4xl font-extrabold tracking-tight drop-shadow-sm">
                The Big Five
              </h3>
            </div>
          </div>
        </div>
      </div>

      <main className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-12 pb-20">
        
        {}
        {/* Search Bar - Positioned to overlap the hero */}
        <div className="relative -mt-16 z-30 mb-24">
          <div className="bg-white rounded-2xl shadow-xl p-3 flex flex-col lg:flex-row items-center border border-gray-100">
            
            <div className="flex-1 w-full px-4 py-2 border-b lg:border-b-0 lg:border-r border-gray-200">
              <label className="flex items-center text-xs font-extrabold text-gray-800 uppercase tracking-widest mb-2">
                <MapPin className="text-[#d68a19] mr-2" size={16} /> DESTINATION
              </label>
              <input 
                type="text" 
                placeholder="e.g. Serengeti, Kruger..." 
                className="w-full outline-none text-base font-semibold text-gray-900 placeholder-gray-400 bg-gray-50 rounded-lg p-3 border border-gray-200 focus:border-[#d68a19]"
              />
            </div>

            <div className="flex-1 w-full px-4 py-2 border-b lg:border-b-0 lg:border-r border-gray-200">
              <label className="flex items-center text-xs font-extrabold text-gray-800 uppercase tracking-widest mb-2">
                <Calendar className="text-[#d68a19] mr-2" size={16} /> CHECK-IN
              </label>
              <div className="relative">
                <input 
                  type="text" 
                  defaultValue="May 27, 2026" 
                  className="w-full outline-none text-base font-semibold text-gray-900 bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer"
                  readOnly
                />
                <Calendar className="absolute right-3 top-3 text-[#d68a19] opacity-70" size={18} />
              </div>
            </div>

            <div className="flex-1 w-full px-4 py-2 border-b lg:border-b-0 lg:border-r border-gray-200">
              <label className="flex items-center text-xs font-extrabold text-gray-800 uppercase tracking-widest mb-2">
                <Calendar className="text-[#d68a19] mr-2" size={16} /> CHECK-OUT
              </label>
              <div className="relative">
                <input 
                  type="text" 
                  defaultValue="Jun 3, 2026" 
                  className="w-full outline-none text-base font-semibold text-gray-900 bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer"
                  readOnly
                />
                <Calendar className="absolute right-3 top-3 text-[#d68a19] opacity-70" size={18} />
              </div>
            </div>

            <div className="flex-1 w-full px-4 py-2 flex items-end space-x-4">
              <div className="flex-1">
                <label className="flex items-center text-xs font-extrabold text-gray-800 uppercase tracking-widest mb-2">
                  <Users className="text-[#d68a19] mr-2" size={16} /> GUESTS
                </label>
                <div className="relative">
                  <select className="w-full outline-none text-base font-semibold text-gray-900 bg-gray-50 rounded-lg p-3 border border-gray-200 cursor-pointer appearance-none pr-10">
                    <option>2 Adults</option>
                    <option>1 Adult</option>
                    <option>2 Adults, 1 Child</option>
                  </select>
                  <ChevronDown className="absolute right-3 top-3 text-[#d68a19]" size={20} />
                </div>
              </div>
              
              <button className="bg-[#d68a19] hover:bg-[#c07a16] text-white px-8 py-3.5 rounded-lg font-bold flex items-center transition-colors h-[50px] shadow-lg shadow-orange-500/30">
                <Search size={20} className="mr-2" />
                Search
              </button>
            </div>
            
          </div>
        </div>

        {}
        {/* Featured Safaris Section */}
        <div>
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-8">
            <div>
              <h2 className="text-3xl font-extrabold text-[#123722]">Featured <span className="text-[#d68a19]">Safaris</span></h2>
              <p className="text-gray-900 font-medium mt-1">Handpicked lodges and experiences across Africa</p>
            </div>
            <button className="mt-4 sm:mt-0 text-sm font-bold text-[#d68a19] border-2 border-[#d68a19] rounded-full px-6 py-2 hover:bg-[#d68a19] hover:text-white transition-colors flex items-center">
              View all <span className="ml-2">→</span>
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            
            {/* Card 1 */}
            <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer">
              <div className="relative h-48 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1516426122078-c23e76319801?q=80&w=800&auto=format&fit=crop" alt="Serengeti Safari Lodge" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                <div className="absolute top-3 left-3 bg-[#e88f0a] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1 rounded-full">
                  BEST SELLER
                </div>
              </div>
              <div className="p-5">
                <h3 className="font-extrabold text-gray-900 text-lg mb-1">Serengeti Safari Lodge</h3>
                <p className="text-gray-600 text-sm flex items-center font-medium mb-3">
                  <MapPin size={14} className="text-[#d68a19] mr-1" /> Serengeti, Tanzania
                </p>
                <div className="flex flex-col">
                  <p className="font-extrabold text-gray-900 text-lg">
                    $1,280 <span className="text-gray-500 text-sm font-medium">/ night</span>
                  </p>
                  <div className="flex items-center text-sm font-bold text-gray-900 mt-1">
                    <div className="flex text-[#d68a19] mr-2">
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                    </div>
                    4.7 <span className="text-gray-500 font-medium ml-1">(312 reviews)</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Card 2 */}
            <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer">
              <div className="relative h-48 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?q=80&w=800&auto=format&fit=crop" alt="Chobe River Camp" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                <div className="absolute top-3 left-3 bg-[#f0ad00] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1 rounded-full">
                  LUXURY
                </div>
              </div>
              <div className="p-5">
                <h3 className="font-extrabold text-gray-900 text-lg mb-1">Chobe River Camp</h3>
                <p className="text-gray-600 text-sm flex items-center font-medium mb-3">
                  <MapPin size={14} className="text-[#d68a19] mr-1" /> Chobe, Botswana
                </p>
                <div className="flex flex-col">
                  <p className="font-extrabold text-gray-900 text-lg">
                    $940 <span className="text-gray-500 text-sm font-medium">/ night</span>
                  </p>
                  <div className="flex items-center text-sm font-bold text-gray-900 mt-1">
                    <div className="flex text-[#d68a19] mr-2">
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                    </div>
                    4.9 <span className="text-gray-500 font-medium ml-1">(208 reviews)</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Card 3 */}
            <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer">
              <div className="relative h-48 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1582613589993-9426f04d785a?q=80&w=800&auto=format&fit=crop" alt="Kruger Bush Retreat" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                <div className="absolute top-3 left-3 bg-[#7f9c21] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1 rounded-full">
                  ECO-FRIENDLY
                </div>
              </div>
              <div className="p-5">
                <h3 className="font-extrabold text-gray-900 text-lg mb-1">Kruger Bush Retreat</h3>
                <p className="text-gray-600 text-sm flex items-center font-medium mb-3">
                  <MapPin size={14} className="text-[#d68a19] mr-1" /> Kruger, South Africa
                </p>
                <div className="flex flex-col">
                  <p className="font-extrabold text-gray-900 text-lg">
                    $760 <span className="text-gray-500 text-sm font-medium">/ night</span>
                  </p>
                  <div className="flex items-center text-sm font-bold text-gray-900 mt-1">
                    <div className="flex text-[#d68a19] mr-2">
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                    </div>
                    4.8 <span className="text-gray-500 font-medium ml-1">(456 reviews)</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Card 4 */}
            <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow cursor-pointer">
              <div className="relative h-48 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1504280549413-5cb78acd5291?q=80&w=800&auto=format&fit=crop" alt="Masai Mara Sky Tents" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                <div className="absolute top-3 left-3 bg-[#f0ad00] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1 rounded-full">
                  NEW
                </div>
              </div>
              <div className="p-5">
                <h3 className="font-extrabold text-gray-900 text-lg mb-1">Masai Mara Sky Tents</h3>
                <p className="text-gray-600 text-sm flex items-center font-medium mb-3">
                  <MapPin size={14} className="text-[#d68a19] mr-1" /> Masai Mara, Kenya
                </p>
                <div className="flex flex-col">
                  <p className="font-extrabold text-gray-900 text-lg">
                    $1,050 <span className="text-gray-500 text-sm font-medium">/ night</span>
                  </p>
                  <div className="flex items-center text-sm font-bold text-gray-900 mt-1">
                    <div className="flex text-[#d68a19] mr-2">
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                      <Star size={14} fill="currentColor" />
                    </div>
                    4.6 <span className="text-gray-500 font-medium ml-1">(189 reviews)</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        {}
        {/* Why TryBookAfrika Section */}
        <div className="mt-24 mb-8">
          <h2 className="text-3xl font-extrabold text-[#123722] mb-1">Why <span className="text-[#d68a19]">TryBookAfrika</span></h2>
          <p className="text-gray-900 font-medium mb-12">Book with confidence — we know Africa inside out</p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
            
            {/* Feature 1 */}
            <div className="flex items-start">
              <div className="w-16 h-16 rounded-full border-2 border-[#123722] flex items-center justify-center text-[#123722] mr-4 flex-shrink-0">
                <Globe size={32} strokeWidth={1.5} />
              </div>
              <div>
                <h4 className="font-extrabold text-gray-900 text-lg mb-1">Local Experts</h4>
                <p className="text-gray-600 text-sm font-medium leading-relaxed">
                  Our team lives and breathes African safari. We handpick every experience.
                </p>
              </div>
            </div>
            
            {/* Feature 2 */}
            <div className="flex items-start">
              <div className="w-16 h-16 rounded-full border-2 border-[#d68a19] flex items-center justify-center text-[#d68a19] mr-4 flex-shrink-0">
                {/* Fallback to Award since we don't have a specific Lion icon in basic Lucide */}
                <Award size={32} strokeWidth={1.5} />
              </div>
              <div>
                <h4 className="font-extrabold text-gray-900 text-lg mb-1">Big Five Guarantee</h4>
                <p className="text-gray-600 text-sm font-medium leading-relaxed">
                  We'll help you spot all five — or your next safari is on us.
                </p>
              </div>
            </div>

            {/* Feature 3 */}
            <div className="flex items-start">
              <div className="w-16 h-16 rounded-full border-2 border-[#123722] flex items-center justify-center text-[#123722] mr-4 flex-shrink-0">
                <Tent size={32} strokeWidth={1.5} />
              </div>
              <div>
                <h4 className="font-extrabold text-gray-900 text-lg mb-1">Curated Stays</h4>
                <p className="text-gray-600 text-sm font-medium leading-relaxed">
                  From luxury lodges to mobile camps, we have the perfect fit for you.
                </p>
              </div>
            </div>

            {/* Feature 4 */}
            <div className="flex items-start">
              <div className="w-16 h-16 rounded-full bg-[#d68a19] flex items-center justify-center text-white mr-4 flex-shrink-0">
                <Heart size={32} strokeWidth={2} fill="white" />
              </div>
              <div>
                <h4 className="font-extrabold text-gray-900 text-lg mb-1">Conscious Travel</h4>
                <p className="text-gray-600 text-sm font-medium leading-relaxed">
                  We support conservation and local communities with every booking.
                </p>
              </div>
            </div>

          </div>
        </div>

      </main>

      {}
      {/* Footer */}
      <footer className="bg-[#123722] text-white pt-16 pb-8">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
            
            {/* Brand Column */}
            <div className="lg:col-span-2 pr-8">
              <div className="flex items-center mb-6">
                <span className="font-extrabold text-3xl tracking-tight text-white">
                  TryBook<span className="text-[#d68a19]">Afrika</span>
                </span>
              </div>
              <p className="text-gray-300 text-sm leading-relaxed mb-6 font-medium">
                Your gateway to Africa's wildest adventures. Book safaris, lodges, and experiences with the continent's most trusted travel platform.
              </p>
              <p className="text-gray-400 text-xs mt-10">
                © 2026 TryBookAfrika. All rights reserved.
              </p>
            </div>

            {/* Links Columns */}
            <div>
              <h4 className="font-bold text-white mb-6 text-lg">Explore</h4>
              <ul className="space-y-3">
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Safaris</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Lodges</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Destinations</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Deals</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold text-white mb-6 text-lg">Company</h4>
              <ul className="space-y-3">
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">About Us</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Careers</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Press</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Blog</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold text-white mb-6 text-lg">Support</h4>
              <ul className="space-y-3">
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Contact</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">FAQ</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Privacy Policy</a></li>
                <li><a href="#" className="text-gray-300 hover:text-white text-sm transition-colors font-medium">Terms</a></li>
              </ul>
              
              {/* Social Icons row placed under support according to standard layouts, though design places them far right */}
              <div className="flex space-x-4 mt-8">
                <a href="#" className="text-white hover:text-[#d68a19] transition-colors border-2 border-gray-500 rounded-full p-2 hover:border-[#d68a19]">
                  <Facebook size={18} />
                </a>
                <a href="#" className="text-white hover:text-[#d68a19] transition-colors border-2 border-gray-500 rounded-full p-2 hover:border-[#d68a19]">
                  <Instagram size={18} />
                </a>
                <a href="#" className="text-white hover:text-[#d68a19] transition-colors border-2 border-gray-500 rounded-full p-2 hover:border-[#d68a19]">
                  <Twitter size={18} />
                </a>
                <a href="#" className="text-white hover:text-[#d68a19] transition-colors border-2 border-gray-500 rounded-full p-2 hover:border-[#d68a19]">
                  <Youtube size={18} />
                </a>
              </div>
            </div>
            
          </div>
        </div>
      </footer>
      
    </div>
  );
}