"use client";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import { ArrowRight, Refrigerator, Flame, Wind, Microwave, WashingMachine, Snowflake, Sparkles, CookingPot, Truck, Shield, RotateCcw, BadgePercent } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import ProductCard from "@/components/ProductCard";
import { useStore } from "@/context/StoreContext";

const heroImage = "https://images.unsplash.com/photo-1556911220-e15b29be8c8f?w=1400&h=900&fit=crop";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const categoryCards = [
  { name: "Refrigerators", icon: Refrigerator, color: "from-Blue-500/10 to-cyan-500/10" },
  { name: "Washing Machines", icon: WashingMachine, color: "from-indigo-500/10 to-Blue-500/10" },
  { name: "Air Conditioners", icon: Snowflake, color: "from-sky-500/10 to-Blue-500/10" },
  { name: "Microwaves", icon: Microwave, color: "from-orange-500/10 to-red-500/10" },
  { name: "Coolers", icon: Wind, color: "from-teal-500/10 to-green-500/10" },
  { name: "Geysers", icon: Flame, color: "from-amber-500/10 to-orange-500/10" },
  { name: "Vacuum Cleaners", icon: Sparkles, color: "from-violet-500/10 to-purple-500/10" },
  { name: "Dishwashers", icon: CookingPot, color: "from-emerald-500/10 to-teal-500/10" },
];

const trustBadges = [
  { icon: Truck, title: "Free Delivery", sub: "On orders over $200" },
  { icon: Shield, title: "Extended Warranty", sub: "Up to 10 years" },
  { icon: RotateCcw, title: "Easy Returns", sub: "30-day hassle-free" },
  { icon: BadgePercent, title: "Best Prices", sub: "Price match guarantee" },
];

export default function HomePage() {
  const { catalogProducts } = useStore();
  const bestSellers = catalogProducts.filter((p) => p.badge === "Featured").slice(0, 4);
  const newArrivals = catalogProducts.slice(0, 4);
  const onSale = catalogProducts.filter((p) => p.originalPrice).slice(0, 4);

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <section className="relative overflow-hidden bg-gradient-warm">
        <div className="absolute inset-0" />
        <div className="container relative mx-auto px-4 py-16 lg:px-8 lg:py-24">
          <div className="grid items-center gap-12 lg:grid-cols-2">
            <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}>
              <motion.span initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.2 }} className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-xs font-semibold text-primary">
                <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
                Summer Sale — Up to 40% Off
              </motion.span>
              <h1 className="mt-6 text-4xl font-bold leading-[1.08] tracking-tight sm:text-5xl lg:text-6xl xl:text-7xl">
                Smart home
                <br />
                appliances for
                <br />
                <span className="text-gradient">modern living</span>
              </h1>
              <p className="mt-6 max-w-md text-base leading-relaxed text-muted-foreground lg:text-lg">
                Premium refrigerators, washers, ACs, and more — engineered for efficiency, designed for your lifestyle.
              </p>
              <div className="mt-8 flex flex-wrap items-center gap-3">
                <Link href="/products" className="inline-flex items-center gap-2.5 rounded-xl bg-primary px-7 py-3.5 text-sm font-semibold text-primary-foreground shadow-lg transition-all hover:scale-[1.02] hover:shadow-elevated active:scale-[0.98]">
                  Shop All Products <ArrowRight className="h-4 w-4" />
                </Link>
                {/* <Link href="/products?category=Refrigerators" className="inline-flex items-center gap-2.5 rounded-xl border border-border bg-card px-7 py-3.5 text-sm font-semibold shadow-card transition-all hover:border-accent/30 hover:shadow-card-hover">
                  Explore Refrigerators
                </Link> */}
              </div>
              <div className="mt-10 flex gap-8">
                {[{ value: "50K+", label: "Happy Customers" }, { value: "200+", label: "Products" }, { value: "4.8★", label: "Avg Rating" }].map((stat) => (
                  <div key={stat.label}>
                    <p className="text-2xl font-bold">{stat.value}</p>
                    <p className="text-xs text-muted-foreground">{stat.label}</p>
                  </div>
                ))}
              </div>
            </motion.div>

            <motion.div initial={{ opacity: 0, scale: 0.92, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.15, ease: [0.22, 1, 0.36, 1] }} className="relative">
              <div className="relative aspect-[14/9] overflow-hidden rounded-3xl shadow-elevated">
                <Image
                  src={heroImage}
                  alt="Premium home appliances showroom"
                  fill
                  className="object-cover"
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  priority
                />
              </div>
              <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6 }} className="absolute -bottom-4 -left-4 rounded-2xl border border-border/60 bg-card p-4 shadow-elevated sm:left-auto sm:-right-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
                    <Truck className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <p className="text-xs font-bold">Same Day Delivery</p>
                    <p className="text-[10px] text-muted-foreground">On all major appliances</p>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          </div>
        </div>
      </section>

      <motion.section initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }} className="border-b border-border/60 bg-card">
        <div className="container mx-auto grid grid-cols-2 gap-4 px-4 py-6 lg:grid-cols-4 lg:px-8">
          {trustBadges.map(({ icon: Icon, title, sub }) => (
            <motion.div key={title} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.3 }} className="flex items-center gap-3">
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/8">
                <Icon className="h-5 w-5 text-primary" />
              </div>
              <div>
                <p className="text-xs font-bold">{title}</p>
                <p className="text-[10px] text-muted-foreground">{sub}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.section>

      <section className="container mx-auto px-4 py-16 lg:px-8">
        <div className="text-center">
          <motion.h2 initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-3xl font-bold lg:text-4xl">Shop by Category</motion.h2>
          <p className="mt-3 text-muted-foreground">Find exactly what your home needs</p>
        </div>
        {/* <div className="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:gap-4">
          {categoryCards.map(({ name, icon: Icon, color }, i) => (
            <motion.div key={name} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.04 }}>
              <Link href={`/products?category=${name}`} className="group flex flex-col items-center gap-3 rounded-2xl border border-border/40 bg-card p-6 shadow-card transition-all duration-300 hover:-translate-y-1 hover:border-accent/30 hover:shadow-card-hover">
                <div className={`flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${color} transition-transform duration-300 group-hover:scale-110`}>
                  <Icon className="h-6 w-6 text-foreground/70" />
                </div>
                <span className="text-sm font-semibold">{name}</span>
              </Link>
            </motion.div>
          ))}
        </div> */}
      </section>

      <motion.section initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }} className="container mx-auto px-4 py-12 lg:px-8">
        <div className="mb-10 flex items-end justify-between">
          <div>
            <span className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Top Rated</span>
            <h2 className="mt-2 text-3xl font-bold">Best Sellers</h2>
          </div>
          <Link href="/products" className="group flex items-center gap-1.5 text-sm font-semibold text-primary transition-colors">
            View All <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
          </Link>
        </div>
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {bestSellers.map((p, i) => <ProductCard key={p.id} product={p} index={i} />)}
        </div>
      </motion.section>

      <motion.section initial={{ opacity: 0, scale: 0.985, y: 20 }} whileInView={{ opacity: 1, scale: 1, y: 0 }} viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }} className="container mx-auto px-4 py-8 lg:px-8">
        <div className="relative overflow-hidden rounded-3xl bg-gradient-dark px-8 py-16 text-center text-primary-foreground lg:px-20">
          <div className="relative">
            <span className="inline-block rounded-full bg-primary/20 px-4 py-1.5 text-xs font-bold text-primary">Limited Time Offer</span>
            <h2 className="mt-5 text-3xl font-bold lg:text-5xl">Same Day Delivery</h2>
            <p className="mx-auto mt-4 max-w-lg text-primary-foreground/60">On all major appliances.</p>
            <Link href="/products" className="mt-8 inline-flex items-center gap-2 rounded-xl bg-primary px-8 py-4 text-sm font-bold text-primary-foreground shadow-lg transition-all hover:scale-[1.02] hover:shadow-glow">
              Shop the Sale <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </motion.section>

      {newArrivals.length > 0 && (
        <motion.section initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }} className="container mx-auto px-4 py-12 lg:px-8">
          <div className="mb-10 flex items-end justify-between">
            <div>
              <span className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Just Launched</span>
              <h2 className="mt-2 text-3xl font-bold">New Arrivals</h2>
            </div>
            <Link href="/products" className="group flex items-center gap-1.5 text-sm font-semibold text-primary">
              View All <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {newArrivals.map((p, i) => <ProductCard key={p.id} product={p} index={i} />)}
          </div>
        </motion.section>
      )}

      {onSale.length > 0 && (
        <motion.section initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }} className="container mx-auto px-4 py-12 lg:px-8">
          <div className="mb-10 flex items-end justify-between">
            <div>
              <span className="text-xs font-bold uppercase tracking-[0.2em] text-destructive">Save Big</span>
              <h2 className="mt-2 text-3xl font-bold">On Sale</h2>
            </div>
            <Link href="/products" className="group flex items-center gap-1.5 text-sm font-semibold text-primary">
              View All <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {onSale.map((p, i) => <ProductCard key={p.id} product={p} index={i} />)}
          </div>
        </motion.section>
      )}

      <motion.section initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.15 }} transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }} className="container mx-auto px-4 py-16 lg:px-8">
        <div className="rounded-3xl border border-border/60 bg-card p-10 text-center shadow-card lg:p-16">
          <h2 className="text-2xl font-bold lg:text-3xl">Stay updated with Ghulam Nabi & Sons</h2>
          <p className="mx-auto mt-3 max-w-md text-sm text-muted-foreground">
            Get exclusive deals, new product alerts, and seasonal offers delivered to your inbox.
          </p>
          <div className="mx-auto mt-8 flex max-w-md gap-2">
            <input type="email" placeholder="Enter your email" className="flex-1 rounded-xl border border-border bg-background px-5 py-3 text-sm outline-none transition-colors focus:border-primary" />
            <button className="rounded-xl bg-foreground px-6 py-3 text-sm font-bold text-primary-foreground shadow-md transition-all hover:scale-[1.02] hover:shadow-glow">
              Subscribe
            </button>
          </div>
        </div>
      </motion.section>

      <Footer />
    </div>
  );
}