import React from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import {
  Blend,
  Frame,
  HardHat,
  Images,
  MessagesSquare,
  NotebookPen,
  Star,
} from "lucide-react";

// A simple utility to combine Tailwind CSS classes.
const cn = (...classNames) => classNames.filter(Boolean).join(" ");

// Data for the "Why Us" section, now including grid styling for the Bento layout.
const stages = [
  {
    icon: <MessagesSquare className="w-8 h-8 text-cyan-500 mb-2" />,
    image: "/images/svg/discussions.svg",
    title: "Discussion",
    description:
      "Each project begins with a comprehensive discussion to identify your needs, establish scope, and understand how you want your home to feel and function.",
    gridSpan: "col-span-1 row-span-1 lg:row-span-2 bg-cyan-300/10", // Make this card span two columns on larger screens
  },
  {
    icon: <NotebookPen className="w-8 h-8 text-cyan-500 mb-2" />,
    image: "/images/svg/research.svg",
    title: "Research",
    description:
      "After exploring your preferences, our team creates a visual concept of your home that will guide the construction, if building, and the overall design direction of your interiors project.",
    gridSpan: "col-span-1 lg:col-span-2 bg-green-300/10",
  },
  {
    icon: <Frame className="w-8 h-8 text-cyan-500 mb-2" />,
    image: "/images/svg/design.svg",
    title: "Design",
    description:
      "We develop a schematic or interior design, and collaborate with you to ensure every detail is perfect. This is a visual and tactile process, where your home’s design is refined.",
    gridSpan: "col-span-1 bg-blue-300/20",
  },
  {
    icon: <Blend className="w-8 h-8 text-cyan-500 mb-2" />,
    image: "/images/svg/procurement.svg",

    title: "Procurement",
    description:
      "After the overall design has been fully realized, our team facilitates the bidding process with contractors and vendors. Our in-house procurement team orders new furnishings, fixtures, and accessories for your home.",
    gridSpan: "col-span-1 bg-orange-300/10 ", // Make this card span two columns on larger screens
  },
  {
    icon: <HardHat className="w-8 h-8 text-cyan-500 mb-2" />,
    image: "/images/svg/implementation.svg",

    title: "Implementation",
    description:
      "Our residential building design team facilitates all aspects of your home's construction in this stage. When it comes time for the interior design, our team installs all furnishings, art, and accessories for your home.",
    gridSpan: "col-span-1 lg:col-span-2 bg-purple-400/10",
  },
  {
    icon: <Images className="w-8 h-8 text-cyan-500 mb-2" />,
    image: null,
    title: "Reveal",
    description:
      "Your home has been fully designed, with exceptional care, thoughtfulness, and innovation. When interior design is complete, we have a few surprises left before we pop the bubbly and welcome you home.",
    gridSpan: "col-span-1  bg-cyan-300/10 ", // Make this card span all three columns
  },
];

// Main App component containing the "Why Us" section.
export default function Features() {
  return (
    <section className="bg-gray-50 py-16 bg-[url('/images/bathroom/bathroom-3.jpg')]]">
      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
        <h2 className="text-center text-3xl md:text-5xl font-bold mb-4 text-gray-900">
          WHY FOCUX?
        </h2>
        <p className="text-center text-lg md:text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
          THE CREATIVE EXPERIENCE WE PROVIDE IS HIGHLY COLLABORATIVE AND DEEPLY
          PERSONAL, RESULTING IN SOPHISTICATED SPACES THAT REFLECT HOW OUR
          CLIENTS LOVE TO LIVE.
        </p>

        {/* Bento Box Grid Container */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {stages.map((stage, index) => (
            <Card
              key={index}
              className={cn(
                `p-8 rounded-lg border-0 shadow-none flex justify-between gap-6`,
                stage.gridSpan,
                stage.title == "Research"
                  ? "md:flex-row flex-col"
                  : stage.title == "Implementation"
                  ? "md:flex-row flex-col"
                  : "flex-col"
              )}
            >
              <div>
                <CardHeader className="flex flex-col items-start p-0">
                  <CardTitle className="text-2xl md:text-4xl font-bold text-gray-900 pb-4">
                    {stage.title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-0">
                  <CardDescription className={`text-gray-700 leading-relaxed`}>
                    {stage.description}
                  </CardDescription>
                </CardContent>
              </div>
              {stage.image !== null && (
                <img
                  src={stage.image}
                  className={cn(
                    "    hidden md:block",
                    stage.title == "Discussions"
                      ? "bg-contain h-20 bg-bottom-left"
                      : stage.title == "Research"
                      ? "bg-contain bg-left h-40"
                      : stage.title == "Design"
                      ? "bg-contain h-20 bg-bottom-left"
                      : stage.title == "Implementation"
                      ? "bg-contain h-40 bg-bottom-left"
                      : stage.title == "Procurement"
                      ? "bg-contain h-20 bg-bottom-left"
                      : "bg-contain bg-no-repeat bg-bottom-right "
                  )}
                />
              )}
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
