"use client";

import Link from "next/link";
import { ArrowRight, Bot, Shield, Truck, Award, Zap, Laptop, Smartphone } from "lucide-react";
import { formatPrice } from "@/lib/utils";

interface HeroProduct {
  id: string;
  name: string;
  slug: string;
  price: number | string;
  comparePrice?: number | string | null;
  images: string[];
  brand: { name: string };
  category: { name: string };
}

const features = [
  { icon: Truck, label: "Same-Day Delivery", sub: "Within Nairobi" },
  { icon: Shield, label: "1-Year Warranty", sub: "All Products" },
  { icon: Award, label: "100% Genuine", sub: "Certified Authentic" },
  { icon: Bot, label: "AI Finder", sub: "Smart Match" },
];

const categories = [
  { label: "Laptops", href: "/laptops", icon: Laptop, color: "bg-sky-500/20 border-sky-400/40 text-sky-300 hover:bg-sky-500/30" },
  { label: "iPhones", href: "/iphones", icon: Smartphone, color: "bg-indigo-500/20 border-indigo-400/40 text-indigo-300 hover:bg-indigo-500/30" },
];

export default function HeroBanner({ products = [] }: { products?: HeroProduct[] }) {
  const heroProducts = products.slice(0, 3);

  return (
    <section>
      {/* Main hero */}
      <div className="relative overflow-hidden bg-gradient-to-br from-sky-950 via-sky-900 to-blue-900">
        {/* Background blobs */}
        <div className="absolute top-0 right-1/3 w-96 h-96 bg-sky-500/10 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-72 h-72 bg-blue-600/10 rounded-full blur-3xl pointer-events-none" />

        <div className="max-w-7xl mx-auto px-4 py-10 sm:py-14 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">

            {/* Left — copy + CTAs */}
            <div>
              <div className="inline-flex items-center gap-2 bg-sky-500/20 border border-sky-400/30 rounded-full px-3 py-1 mb-4">
                <Zap className="w-3.5 h-3.5 text-yellow-400" />
                <span className="text-sky-300 text-xs font-bold tracking-wide">Flash Sale — Up to 40% OFF</span>
              </div>

              <h1 className="text-4xl sm:text-5xl font-black text-white leading-[1.1] mb-3">
                Laptops & iPhones{" "}
                <span className="text-sky-400"> Store</span>
              </h1>
              <p className="text-slate-300 text-base leading-relaxed mb-6 max-w-md">
                Brand-new laptops, iPhones &amp; accessories at the best prices in Nairobi.
                Same-day delivery, 1-year warranty, genuine products.
              </p>

              {/* Category quick links */}
              <div className="flex flex-wrap gap-3 mb-6">
                {categories.map(({ label, href, icon: Icon, color }) => (
                  <Link
                    key={label}
                    href={href}
                    className={`flex items-center gap-2 border px-5 py-2.5 rounded-xl text-sm font-bold transition-all ${color}`}
                  >
                    <Icon className="w-4 h-4" /> {label}
                  </Link>
                ))}
                <Link
                  href="/ai-finder"
                  className="flex items-center gap-2 bg-white/10 border border-white/20 text-white hover:bg-white/20 px-5 py-2.5 rounded-xl text-sm font-bold transition-all"
                >
                  <Bot className="w-4 h-4" /> AI Finder
                </Link>
              </div>

              <Link
                href="/products"
                className="inline-flex items-center gap-2 bg-sky-500 hover:bg-sky-400 text-white px-6 py-3 rounded-xl font-bold text-sm transition-all shadow-lg shadow-sky-900/60 hover:scale-105"
              >
                Browse All Products <ArrowRight className="w-4 h-4" />
              </Link>
            </div>

            {/* Right — product showcase */}
            <div className="flex flex-col gap-3">
              {heroProducts.length > 0 ? (
                heroProducts.map((product) => (
                  <Link
                    key={product.id}
                    href={`/products/${product.slug}`}
                    className="group flex items-center gap-4 bg-white/8 hover:bg-white/14 border border-white/10 hover:border-sky-400/40 rounded-2xl p-3 transition-all"
                  >
                    {/* Product image */}
                    <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-xl overflow-hidden bg-white/10 shrink-0">
                      {product.images[0] ? (
                        <img
                          src={product.images[0]}
                          alt={product.name}
                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                        />
                      ) : (
                        <div className="w-full h-full flex items-center justify-center text-2xl">
                          {product.category.name.toLowerCase().includes("iphone") ? "📱" : "💻"}
                        </div>
                      )}
                    </div>

                    {/* Info */}
                    <div className="flex-1 min-w-0">
                      <p className="text-sky-400 text-xs font-medium mb-0.5">{product.brand.name}</p>
                      <p className="text-white font-bold text-sm leading-tight line-clamp-1 group-hover:text-sky-300 transition-colors">
                        {product.name}
                      </p>
                      <div className="flex items-center gap-2 mt-1">
                        <span className="text-white font-black text-base">{formatPrice(product.price)}</span>
                        {product.comparePrice && (
                          <span className="text-slate-400 text-xs line-through">{formatPrice(Number(product.comparePrice))}</span>
                        )}
                      </div>
                    </div>

                    <div className="shrink-0 flex items-center gap-1 text-sky-400 group-hover:text-sky-300 text-xs font-bold">
                      View <ArrowRight className="w-3 h-3" />
                    </div>
                  </Link>
                ))
              ) : (
                /* Fallback when no products */
                <div className="grid grid-cols-2 gap-3">
                  {[
                    { emoji: "💻", label: "Laptops", sub: "From KES 45,000", href: "/laptops" },
                    { emoji: "📱", label: "iPhones", sub: "From KES 60,000", href: "/iphones" },
                    { emoji: "🎮", label: "Gaming", sub: "RTX Series", href: "/laptops?tag=gaming" },
                    { emoji: "✨", label: "New Arrivals", sub: "Just Landed", href: "/products?isNew=true" },
                  ].map((c) => (
                    <Link key={c.label} href={c.href}
                      className="flex items-center gap-3 bg-white/8 hover:bg-white/14 border border-white/10 rounded-2xl p-4 transition-all group">
                      <span className="text-3xl">{c.emoji}</span>
                      <div>
                        <p className="text-white font-bold text-sm">{c.label}</p>
                        <p className="text-slate-400 text-xs">{c.sub}</p>
                      </div>
                    </Link>
                  ))}
                </div>
              )}

              {heroProducts.length > 0 && (
                <Link href="/products?featured=true"
                  className="text-center text-sky-400 hover:text-sky-300 text-xs font-semibold py-1 transition-colors">
                  View all featured products →
                </Link>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Feature badges bar */}
      <div className="bg-white border-b border-slate-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-2 sm:grid-cols-4 divide-x divide-slate-100">
            {features.map(({ icon: Icon, label, sub }) => (
              <div key={label} className="flex items-center gap-3 px-4 py-3.5">
                <div className="w-9 h-9 rounded-xl bg-sky-50 flex items-center justify-center shrink-0">
                  <Icon className="w-4.5 h-4.5 text-sky-600" style={{ width: "18px", height: "18px" }} />
                </div>
                <div>
                  <p className="text-xs font-bold text-slate-800">{label}</p>
                  <p className="text-xs text-slate-500">{sub}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}