import React from "react";
import { Button } from "./ui/button";

const Feature = () => {
  return (
    <section className="feature py-16">
      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
        <h2 className="text-left text-xl md:text-3xl font-bold mb-4 text-gray-900">
          WHY FOCUX?
        </h2>
        <p className="text-left text-lg md:text-xl text-gray-600 mb-12 max-w-3xl mr-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>
      </div>
      <div className="container mx-auto grid  grid-col-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 md:px-8 max-w-7xl">
        <div className="rounded-xl row-span-1 lg:row-span-2 col-span-1  bg-[url(/images/bathroom/bathroom-3.jpg)] bg-cover min-h-[300px]"></div>
        <div className="rounded-xl  row-span-1 col-span-1 lg:col-span-2  flex flex-col items-start gap-2 py-12 px-8 border  bg-cyan-500/5 border border-cyan-100 hover:border-cyan-500 transition-colors duration-500 ease-in-out">
          <span className="text-3xl font-semibold">Discussion</span>
          <span className="text-base pb-4">
            Each project begins with a comprehensive discussion to identify your
            needs, establish scope, and understand how you want your home to
            feel and function.
          </span>
          <Button variant="outline" className={"shadow-none px-6 py-6 text-sm"}>
            Get Started
          </Button>
        </div>
        <div className="rounded-xl row-span-1 col-span-1  flex flex-col items-start gap-2 p-8 bg-cyan-500/5 border border-cyan-100 hover:border-cyan-500 transition-colors duration-500 ease-in-out">
          <span className="text-3xl font-semibold">Research</span>
          <span className="pb-4 text-base">
            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.
          </span>
          <Button variant="outline" className={"shadow-none px-6 py-6 text-sm"}>
            Get Started
          </Button>
        </div>
        <div className="rounded-xl row-span-1  col-span-1  flex items-start flex-col gap-2 p-8 bg-cyan-500/5 border border-cyan-100 hover:border-cyan-500 transition-colors duration-500 ease-in-out">
          <span className="text-3xl font-semibold">Design</span>
          <span className="text-base pb-4">
            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.
          </span>
          <Button variant="outline" className={"shadow-none px-6 py-6 text-sm"}>
            Get Started
          </Button>
        </div>
        <div className="rounded-xl row-span-1 col-span-1 flex items-start flex-col gap-2 p-8 bg-cyan-500/5 border border-cyan-100 hover:border-cyan-500 transition-colors duration-500 ease-in-out">
          <span className="text-3xl font-semibold">Procurement</span>
          <span className="text-base pb-4">
            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.
          </span>
          <Button variant="outline" className={"shadow-none px-6 py-6 text-sm"}>
            Get Started
          </Button>
        </div>

        <div className="rounded-xl  col-span-1 lg:col-span-2 row-span-1  bg-[url(/images/kitchen/kitchen-2.jpg)] bg-cover bg-center min-h-[300px]"></div>
        <div className="rounded-xl  col-span-1  bg-[url(/images/kitchen/kitchen-3.jpg)] bg-cover bg-center min-h-[300px]"></div>
        <div className="rounded-xl  col-span-1  flex flex-col items-start gap-2 p-8 bg-cyan-500/5 border border-cyan-100 hover:border-cyan-500 transition-colors duration-500 ease-in-out">
          <span className="text-3xl font-semibold">Implementation</span>
          <span className="pb-4 text-base">
            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.
          </span>
          <Button variant="outline" className={"shadow-none px-6 py-6 text-sm"}>
            Get Started
          </Button>
        </div>
        <div className="rounded-xl  col-span-1  flex flex-col gap-2 p-8 items-start bg-cyan-500/5 border border-cyan-100 hover:border-cyan-500 transition-colors duration-500 ease-in-out">
          <span className="text-3xl font-semibold">Reveal</span>
          <span className="pb-4 text-base">
            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.
          </span>
          <Button variant="outline" className={"shadow-none px-6 py-6 text-sm"}>
            Get Started
          </Button>
        </div>
      </div>
    </section>
  );
};

export default Feature;
