"use client";

import { motion } from "framer-motion";
import { Search } from "lucide-react";
import Link from "next/link";

export function Hero() {
  return (
    <section className="relative h-screen min-h-[700px] flex flex-col overflow-hidden">
      {/* Background Image - Nairobi Skyline */}
      <div className="absolute inset-0">
        <img
          src="https://images.unsplash.com/photo-1611348524140-53c9a25263d6?q=80&w=2070&auto=format&fit=crop"
          alt="Nairobi city skyline"
          className="h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-obsidian-900/60 via-obsidian-900/30 to-obsidian-900/70" />
      </div>

      {/* Main Content - Centered */}
      <div className="relative z-10 flex-1 flex items-center justify-center">
        <div className="mx-auto max-w-[1400px] px-6 lg:px-10 w-full text-center">
          <motion.h1
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }}
            className="font-display text-[42px] sm:text-[56px] md:text-[72px] lg:text-[88px] xl:text-[100px] font-bold text-white leading-[1.05] tracking-[-0.02em]"
          >
            DISCOVER YOUR NEXT
            <br />
            <span className="text-primary">PROPERTY</span> IN KENYA.
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
            className="mt-6 text-[15px] sm:text-base text-white/60 max-w-xl mx-auto leading-relaxed"
          >
            Invest in Kenyan real estate from anywhere in the world.
            Trusted by 2,000+ diaspora investors across 12 countries.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
            className="mt-10"
          >
            <Link
              href="/companies"
              className="inline-flex items-center gap-3 bg-primary hover:bg-orange-600 text-white px-8 py-4 text-[13px] font-semibold uppercase tracking-[0.15em] transition-colors"
            >
              <Search size={18} strokeWidth={1.5} />
              Explore Companies
            </Link>
          </motion.div>
        </div>
      </div>
    </section>
  );
}