"use client";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ArrowRight, Star, Sparkles } from "lucide-react";
import Link from "next/link";

export function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100">
      {/* Background decoration */}
      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
      <div className="absolute top-20 right-20 w-72 h-72 bg-primary/5 rounded-full blur-3xl"></div>
      <div className="absolute bottom-20 left-20 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div>

      <div className="container mx-auto px-4 py-20 lg:py-32">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left side - Content */}
          <div className="space-y-8">
            {/* Badge */}
            <div className="flex items-center space-x-2">
              <Badge variant="secondary" className="px-3 py-1 text-sm font-medium">
                <Sparkles className="w-3 h-3 mr-1" />
                New Winter Collection
              </Badge>
              <Badge variant="outline" className="px-3 py-1 text-sm">
                Limited Time
              </Badge>
            </div>

            {/* Main heading */}
            <div className="space-y-4">
              <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
                Curated
                <span className="block text-primary">Exclusives</span>
              </h1>
              <p className="text-lg lg:text-xl text-muted-foreground max-w-lg">
                not everyone gets blcklsted. Discover carefully curated fashion pieces that define modern elegance and exclusivity.
              </p>
            </div>

            {/* Features */}
            <div className="flex flex-wrap gap-6 text-sm">
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <span>Free shipping worldwide</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                <span>30-day easy returns</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                <span>Sustainable materials</span>
              </div>
            </div>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Button asChild size="lg" className="text-base px-8">
                <Link href="/shop">
                  Shop Now
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button variant="outline" size="lg" className="text-base px-8" asChild>
                <Link href="/collections">
                  View Collections
                </Link>
              </Button>
            </div>

            {/* Social proof */}
            <div className="flex items-center space-x-6 pt-4">
              <div className="flex items-center space-x-1">
                <div className="flex">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <Star key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  ))}
                </div>
                <span className="text-sm font-medium">4.9/5</span>
              </div>
              <div className="text-sm text-muted-foreground">
                Trusted by <span className="font-semibold text-foreground">50,000+</span> customers
              </div>
            </div>
          </div>

          {/* Right side - Product showcase */}
          <div className="relative">
            {/* Main product image */}
            <div className="relative bg-gradient-to-br from-neutral-100 to-neutral-200 rounded-2xl p-8 lg:p-12">
              <div className="aspect-[3/4] bg-gradient-to-br from-neutral-300 to-neutral-400 rounded-xl flex items-center justify-center">
                <div className="text-center text-neutral-600">
                  <div className="w-16 h-16 bg-neutral-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <Sparkles className="w-8 h-8 text-white" />
                  </div>
                  <p className="font-medium">Featured Product</p>
                  <p className="text-sm">Premium Winter Coat</p>
                </div>
              </div>

              {/* Price tag */}
              <div className="absolute -top-4 -right-4 bg-red-500 text-white px-4 py-2 rounded-full shadow-lg">
                <span className="text-sm font-bold">50% OFF</span>
              </div>
            </div>

            {/* Floating product cards */}
            <div className="absolute -left-6 top-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border">
              <div className="flex items-center space-x-3">
                <div className="w-12 h-12 bg-gradient-to-br from-pink-100 to-pink-200 rounded-lg"></div>
                <div>
                  <p className="font-medium text-sm">Summer Dress</p>
                  <p className="text-xs text-muted-foreground">$89.99</p>
                  <div className="flex items-center space-x-1 mt-1">
                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                    <span className="text-xs">4.8</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="absolute -right-8 bottom-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border">
              <div className="flex items-center space-x-3">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg"></div>
                <div>
                  <p className="font-medium text-sm">Casual Sneakers</p>
                  <p className="text-xs text-muted-foreground">$129.99</p>
                  <div className="flex items-center space-x-1 mt-1">
                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                    <span className="text-xs">4.9</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Stats bubble */}
            <div className="absolute top-8 -left-4 bg-primary text-primary-foreground rounded-3xl px-6 py-3 shadow-lg">
              <div className="text-center">
                <p className="text-xs font-medium">This Week</p>
                <p className="text-lg font-bold">2.5K+</p>
                <p className="text-xs">Orders</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom wave */}
      <div className="absolute bottom-0 left-0 right-0">
        <svg
          className="w-full h-12 fill-white"
          viewBox="0 0 1200 120"
          preserveAspectRatio="none"
        >
          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
          />
        </svg>
      </div>
    </section>
  );
}