"use client";

import Link from "next/link";
import { Search, Globe, Shield, Truck, BadgeCheck, ArrowRight } from "lucide-react";
import { motion } from "framer-motion";

export function HeroSection() {
  return (
    <section className="relative bg-gradient-to-br from-slate-950 via-blue-950 to-indigo-950 text-white overflow-hidden">
      <div className="absolute inset-0 bg-[url('/grid.svg')] opacity-10" />
      <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent" />

      <div className="container mx-auto px-4 py-20 lg:py-32 relative">
        <div className="max-w-3xl mx-auto text-center">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 rounded-full border border-blue-400/30 bg-blue-900/50 px-4 py-1.5 text-sm mb-6 backdrop-blur">
            <Globe className="h-4 w-4 text-blue-400" />
            <span className="text-blue-200">Global B2B & B2C Marketplace — 15+ Countries</span>
          </div>

          {/* Heading */}
          <h1 className="text-4xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-tight">
            Your Global{" "}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
              Wholesale &amp; Retail
            </span>{" "}
            Marketplace
          </h1>

          {/* Subtitle */}
          <p className="text-lg lg:text-xl text-blue-200/80 mb-10 max-w-2xl mx-auto leading-relaxed">
            Connect with thousands of verified manufacturers, wholesalers, and brands.
            Buy and sell at scale across Pakistan, GCC, Europe, and North America.
          </p>

          {/* Search */}
          <div className="max-w-xl mx-auto mb-10">
            <div className="flex items-center gap-2 rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-1.5 shadow-2xl">
              <Search className="ml-3 h-5 w-5 text-gray-400 shrink-0" />
              <input
                type="text"
                placeholder="Search products, brands, or suppliers..."
                className="flex-1 bg-transparent py-3.5 text-white placeholder-gray-400 focus:outline-none text-base"
              />
              <button className="rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-3 font-semibold text-white hover:from-blue-500 hover:to-indigo-500 transition-all shadow-lg">
                Search
              </button>
            </div>
          </div>

          {/* Trust Badges */}
          <div className="flex flex-wrap justify-center gap-6 text-sm text-blue-200/70">
            {[
              { icon: Shield, text: "Verified Vendors" },
              { icon: BadgeCheck, text: "Secure Payments" },
              { icon: Truck, text: "Global Shipping" },
              { icon: Globe, text: "15+ Languages" },
            ].map(({ icon: Icon, text }) => (
              <div key={text} className="flex items-center gap-1.5 px-3 py-1">
                <Icon className="h-4 w-4 text-blue-400" />
                <span>{text}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Quick Link Cards */}
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
          {[
            { title: "B2B Wholesale", desc: "Factory-direct bulk pricing", href: "/b2b", icon: "🏭" },
            { title: "B2C Shopping", desc: "Retail deals & fast delivery", href: "/shop", icon: "🛍️" },
            { title: "Export Hub", desc: "Cross-border trade simplified", href: "/export", icon: "🚢" },
            { title: "Sell With Us", desc: "Reach global buyers today", href: "/sell", icon: "🏪" },
          ].map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="group rounded-2xl border border-white/10 bg-white/5 backdrop-blur p-5 hover:bg-white/10 hover:border-blue-400/30 transition-all duration-300"
            >
              <span className="text-2xl mb-2 block">{item.icon}</span>
              <h3 className="font-semibold text-white group-hover:text-amber-400 transition-colors">
                {item.title}
              </h3>
              <p className="text-xs text-blue-200/60 mt-1">{item.desc}</p>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}