import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardContent } from "@/components/ui/card";
import Image from "next/image";

const collections = [
  {
    title: "Women Collection",
    description: "Everyday Soft Luxury. Clean, relaxed silhouettes with gentle structure and breathable fabrics.",
    image: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=800&auto=format&fit=crop",
    link: "#women"
  },
  {
    title: "Kids Collection",
    description: "Gentle by Nature. Ultra-soft, skin-friendly fabrics designed for movement and comfort.",
    image: "https://images.unsplash.com/photo-1519704943920-18447022ad7d?q=80&w=800&auto=format&fit=crop",
    link: "#kids"
  }
];

export function Collections() {
  return (
    <section className="py-24 bg-[#F9F7F2]">
      <Container>
        <Heading className="text-center mb-16">The Collections</Heading>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {collections.map((item) => (
            <Card key={item.title} className="border-none bg-transparent overflow-hidden group cursor-pointer">
              <div className="relative aspect-[4/5] overflow-hidden">
                <img 
                  src={item.image} 
                  alt={item.title}
                  className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
                />
              </div>
              <CardContent className="pt-8 px-0">
                <Heading className="text-2xl mb-3">{item.title}</Heading>
                <p className="text-neutral-600 mb-4">{item.description}</p>
                <span className="text-sm font-medium tracking-widest uppercase border-b border-neutral-900 pb-1">Explore</span>
              </CardContent>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}