"use client";

import { ChevronLeft, ChevronRight, Star } from "lucide-react";
import {
  GridOverlay,
  ScrollReveal,
  StaggerChildren,
  SpotlightCard,
  GradientText,
} from "@/components/ui/primitives";

const products = [
  {
    name: "Starter Plan",
    category: "SaaS License",
    price: 29,
    originalPrice: 49,
    rating: 4.9,
    reviews: 128,
  },
  {
    name: "Pro Plan",
    category: "SaaS License",
    price: 79,
    originalPrice: 99,
    rating: 4.8,
    reviews: 256,
  },
  {
    name: "Team Plan",
    category: "SaaS License",
    price: 149,
    originalPrice: null,
    rating: 5.0,
    reviews: 64,
  },
  {
    name: "Enterprise",
    category: "Custom Solution",
    price: 299,
    originalPrice: null,
    rating: 4.9,
    reviews: 42,
  },
];

export default function SaasEcommerce1() {
  return (
    <section className="relative bg-white py-24 overflow-hidden">
      <GridOverlay type="dots" fade="radial" opacity={0.03} />

      <div className="relative mx-auto max-w-6xl px-6">
        {/* Header — matching wireframe: title only, left-aligned */}
        <ScrollReveal variant="blur-in">
          <div className="flex items-center justify-between">
            <h2 className="text-3xl font-semibold tracking-tight text-gray-900 md:text-4xl">
              <GradientText from="indigo-500" to="violet-500">Products</GradientText>
            </h2>

            {/* Slider controls — matching wireframe arrows */}
            <div className="flex items-center gap-2">
              <button className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-700">
                <ChevronLeft className="h-5 w-5" />
              </button>
              <button className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-700">
                <ChevronRight className="h-5 w-5" />
              </button>
            </div>
          </div>
        </ScrollReveal>

        {/* 4-column product grid — matching wireframe: 4 Thumb columns (250x347) */}
        <StaggerChildren staggerDelay={0.12} className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {products.map((product) => (
            <a
              key={product.name}
              href="#"
              className="group"
            >
              <SpotlightCard>
                {/* Product image area — matching wireframe Thumb top area */}
                <div className="aspect-square overflow-hidden bg-gray-50">
                  <div className="flex h-full items-center justify-center bg-linear-to-br from-gray-50 to-gray-100 transition-transform duration-500 group-hover:scale-105">
                    <div className="rounded-2xl bg-gray-200/60 p-6">
                      <div className="h-12 w-12 rounded-lg bg-gray-300/50" />
                    </div>
                  </div>
                </div>

                {/* Product info — matching wireframe Thumb bottom area */}
                <div className="p-4">
                  <p className="text-xs text-gray-400">{product.category}</p>
                  <h3 className="mt-1 text-sm font-medium text-gray-900">
                    {product.name}
                  </h3>

                  {/* Rating */}
                  <div className="mt-2 flex items-center gap-1">
                    <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400 drop-shadow-[0_0_3px_rgba(245,158,11,0.3)]" />
                    <span className="text-xs font-medium text-gray-700">
                      {product.rating}
                    </span>
                    <span className="text-xs text-gray-400">
                      ({product.reviews})
                    </span>
                  </div>

                  {/* Price */}
                  <div className="mt-3 flex items-baseline gap-2">
                    {product.originalPrice ? (
                      <GradientText from="indigo-500" to="violet-500" className="text-lg font-semibold">
                        ${product.price}
                      </GradientText>
                    ) : (
                      <span className="text-lg font-semibold text-gray-900">
                        ${product.price}
                      </span>
                    )}
                    {product.originalPrice && (
                      <span className="text-sm text-gray-400 line-through">
                        ${product.originalPrice}
                      </span>
                    )}
                  </div>
                </div>
              </SpotlightCard>
            </a>
          ))}
        </StaggerChildren>
      </div>
    </section>
  );
}