import React from "react";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { categoryData } from "@/data/siteData";

export const Categories: React.FC = () => {
  return (
    <section className="w-full pt-4 pb-8 sm:pt-6 sm:pb-10 select-none cursor-default">
      {/* Same max-w-[1800px] and px-6 sm:px-10 lg:px-12 as Header and Hero */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
        {/* Section Heading */}
        <SectionTitle
          title="Shop by Category"
          titleStyle={{ fontFamily: 'var(--font-roboto), "Roboto", sans-serif' }}
          subtitle="Research essentials and specialized solutions for every stage of discovery."
          subtitleStyle={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
          linkText="View All Categories"
        />

        {/* 6 Category Cards Grid: non-clickable cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
          {categoryData.map((category) => (
            <div
              key={category.id}
              style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
              className="flex items-center gap-4 sm:gap-5 p-5 sm:p-6 rounded-2xl bg-white border border-slate-200/90 shadow-2xs select-none cursor-default"
            >
              {/* Category Icon Badge */}
              <div className="shrink-0 relative w-14 h-14 sm:w-16 sm:h-16 lg:w-20 lg:h-20 flex items-center justify-center">
                <Image
                  src={category.icon}
                  alt={category.title}
                  width={80}
                  height={80}
                  className="w-full h-full object-contain"
                />
              </div>

              {/* Category Details */}
              <div className="flex-1 min-w-0">
                <h3 className="text-[17px] sm:text-[18px] font-semibold text-slate-900 leading-snug line-clamp-1">
                  {category.title}
                </h3>
                <p className="mt-1 text-[14px] sm:text-[16px] text-slate-500 line-clamp-2 leading-relaxed inner-section-para">
                  {category.description}
                </p>
                <div className="mt-2.5 inline-flex items-center gap-1.5 text-[14px] sm:text-[15px] lg:text-[16px] font-semibold text-[#0077b6] cursor-default">
                  <span>Explore Product</span>
                  <ArrowRight className="w-3.5 h-3.5 stroke-[2.5]" />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};