import { motion } from "framer-motion";
import TrackingSearch from "@/components/TrackingSearch";

export default function Home() {
  return (
    <main className="min-h-screen bg-[#F6F6F6]">
      {/* Hero Section */}
      <section className="relative h-[80vh] bg-[#FFCC00] flex items-center justify-center overflow-hidden">
        {/* Animated Background Map - CSS Blur Effect */}
        <div className="absolute inset-0 opacity-10 bg-[url('/world-map.svg')] bg-cover scale-110 animate-pulse"></div>
        
        <div className="z-10 text-center px-4">
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-5xl md:text-7xl font-black text-black mb-6 uppercase tracking-tighter"
          >
            Fast & Reliable <br /> Global Shipping
          </motion.h1>
          
          <div className="flex gap-4 justify-center">
            <button className="bg-black text-white px-8 py-4 rounded-full font-bold hover:scale-105 transition">Ship Now</button>
            <button className="bg-white/20 backdrop-blur-md border border-white/30 px-8 py-4 rounded-full font-bold">Track Package</button>
          </div>
        </div>
      </section>

      {/* Glassmorphism Region Cards */}
      <section className="py-20 container mx-auto grid grid-cols-1 md:grid-cols-5 gap-6 px-4 -mt-20">
        {['USA 🇺🇸', 'UK 🇬🇧', 'Asia 🌏', 'Europe 🌍', 'Africa 🌍'].map((region) => (
          <motion.div 
            whileHover={{ y: -10 }}
            className="bg-white/40 backdrop-blur-xl border border-white/20 p-8 rounded-2xl shadow-xl text-center"
            key={region}
          >
            <span className="text-4xl block mb-4">{region.split(' ')[1]}</span>
            <h3 className="font-bold text-lg">{region.split(' ')[0]}</h3>
          </motion.div>
        ))}
      </section>
    </main>
  );
}