import React from "react";
import type { Floor } from "../types";
import { ProductCard } from "./ProductCard";

interface ProductsSectionProps {
  data: Floor;
  basePath?: string;
}

export function ProductsSection({ data, basePath = "" }: ProductsSectionProps) {
  const heroTitle = data.hero?.title ?? data.title;
  const heroEyebrow = data.hero?.eyebrow;
  const heroDescription = data.hero?.description ?? data.hero?.subtitle;

  return (
    <section className="relative bg-[#f5f7fb] text-[#0f1f39]">
      <div className="absolute inset-0">
        <div className="pointer-events-none absolute inset-x-0 top-0 h-[320px] bg-gradient-to-b from-white via-[#f5f7fb] to-transparent opacity-60" />
        <div className="pointer-events-none absolute left-[-120px] top-[-140px] h-[360px] w-[360px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.14)_0%,rgba(17,138,244,0)_70%)] blur-3xl opacity-70" />
      </div>

      <div className="relative mx-auto w-full max-w-5xl px-4 pb-16 pt-16 text-center md:px-6 md:pt-20">
        {heroEyebrow && (
          <p className="mb-3 text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4]">
            {heroEyebrow}
          </p>
        )}
        <h2 className="mx-auto mb-4 max-w-3xl text-3xl font-semibold leading-tight text-[#0f1f39] md:text-[34px]">
          {heroTitle}
        </h2>
        {heroDescription && (
          <p className="mx-auto max-w-3xl text-base leading-relaxed text-[#4b5565] md:text-lg">
            {heroDescription}
          </p>
        )}
      </div>

      <div className="relative z-10 -mt-10 pb-16 md:-mt-12 md:pb-20">
        <div className="mx-auto w-full max-w-6xl px-4 md:px-6">
          <div className="grid grid-cols-1 gap-7 md:grid-cols-2">
            {data.products.map((product) => (
              <ProductCard key={product.id} item={product} basePath={basePath} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}