import { isMobile } from "react-device-detect";
import Footer from "../components/Footer";
import Button from "../components/Button";
import LeftArrowIcon from "../components/icons/LeftArrowIcon";
import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
import { useNavigate } from "react-router-dom";

interface ICityItem {
  time: number;
  title: string;
  id: string;
  image: string;
}

const roveAroundTheCity: ICityItem[] = [
  {
    id: "1",
    title: "Burj Khalifa",
    time: 10,
    image: "/images/aboutCompany/roveAroundTheCity/1.png",
  },
  {
    id: "2",
    title: "The Dubai Fountain",
    time: 10,
    image: "/images/aboutCompany/roveAroundTheCity/2.png",
  },
  {
    id: "3",
    title: "Dubai Mall",
    time: 8,
    image: "/images/aboutCompany/roveAroundTheCity/3.png",
  },
  {
    id: "4",
    title: "Dubai Opera",
    time: 11,
    image: "/images/aboutCompany/roveAroundTheCity/4.png",
  },
  {
    id: "5",
    title: "Marasi Promenade",
    time: 4,
    image: "/images/aboutCompany/roveAroundTheCity/5.png",
  },
  {
    id: "6",
    title: "Rove Downtown Hotel",
    time: 10,
    image: "/images/aboutCompany/roveAroundTheCity/6.png",
  },
  {
    id: "7",
    title: "Rove City Walk Hotel",
    time: 12,
    image: "/images/aboutCompany/roveAroundTheCity/7.png",
  },
  {
    id: "8",
    title: "City Walk",
    time: 12,
    image: "/images/aboutCompany/roveAroundTheCity/8.png",
  },
  {
    id: "9",
    title: "Coca Cola arena",
    time: 14,
    image: "/images/aboutCompany/roveAroundTheCity/9.png",
  },
  {
    id: "10",
    title: " Dubai International Airport",
    time: 10,
    image: "/images/aboutCompany/roveAroundTheCity/10.png",
  },
];

interface IAdvantages {
  title: string;
  image: string;
  id: string;
}

const advantages: IAdvantages[] = [
  {
    title: "Community",
    image: "/images/aboutCompany/advantages/1.jpg",
    id: "1",
  },
  {
    title: "Rove-Inspired design",
    image: "/images/aboutCompany/advantages/2.jpg",
    id: "2",
  },
  {
    title: "Fully loaded amenities",
    image: "/images/aboutCompany/advantages/3.jpg",
    id: "3",
  },
  {
    title: "Add-on services",
    image: "/images/aboutCompany/advantages/4.jpg",
    id: "4",
  },
  {
    title: "Central urban location",
    image: "/images/aboutCompany/advantages/5.jpg",
    id: "5",
  },
];

const advStyles = [
  "xl:col-start-3 xl:col-end-7",
  "xl:col-span-4",
  "xl:col-start-5 xl:col-end-9",
  "xl:col-span-4",
  "xl:col-start-3 xl:col-span-4",
];

function AboutProjectsPage() {
  const navigate = useNavigate();

  const handleOnBackClick = () => {
    navigate(-1);
  };

  return (
    <>
      <section
        className={`xl:pt-16 sm:pt-10 font-usual ${
          isMobile ? "pt-16" : ""
        } grid grid-cols-12 select-none`}
      >
        <div className="flex px-6 py-4 col-span-full h-16 relative">
          <div className="fixed z-[100]">
            <Button
              onClick={handleOnBackClick}
              text="Masterplan"
              icon={<LeftArrowIcon />}
              buttonType="cta"
            />
          </div>
        </div>
        {/* About Rove Home */}
        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6">
          Rove Home this residence a complete ecosystem that has everything
          you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
          thrive.
        </h1>

        <div className="col-span-full px-6 grid grid-cols-12">
          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 uppercase col-span-full pb-3">
            About rove home
          </div>
          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6 xl:pb-[100px] sm:pb-16 pb-20">
            <img
              src="/images/aboutCompany/rovehome.png"
              alt=""
              className="col-span-full"
            />
            <div className="xl:col-span-4 sm:col-span-6 col-span-full text-l text-[#73787C]">
              Embrace Rove’s forever-young spirit at Rove Home, where inspiring
              design and vibrant art installations converge with an exceptional
              location and an extended playlist of life-enhancing{" "}
            </div>
          </div>
        </div>
        {/* RoveHome roof */}
        <RoveHomeSlider />
        {/* Rove around the city */}
        <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[100px] sm:pt-16 pt-14">
          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
            ROVE AROUND THE CITY
          </div>
          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
            <div className="xl:col-span-4 xl:grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full flex flex-nowrap overflow-x-scroll">
              {roveAroundTheCity.map((item) => (
                <div
                  key={item.id}
                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 xl:min-w-full sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
                >
                  <div className="flex gap-1 items-center">
                    <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                    <div className="text-[#0D1922] text-m">{item.title}</div>
                  </div>
                  <p className="text-s text-[#73787C]">{item.time} mins</p>
                  <img className="w-16 h-16 self-end" src={item.image} alt="" />
                </div>
              ))}
            </div>
            <div className="relative col-span-full xl:col-start-5 order-1 xl:order-2">
              <img
                src="/images/aboutCompany/Map.jpg"
                alt=""
                className="w-full"
              />
              <div className="bg-gradient-to-r from-[#f3f3f2] to-transparent to-20% w-full h-full absolute top-0 left-0"></div>
            </div>
          </div>
        </div>
        {/* Advantages */}
        <div className="col-span-full grid grid-cols-12 px-6 gap-x-4 xl:pt-[140px] sm:pt-16 pt-14">
          <div className="uppercase text-[#73787C] font-semibold xl:col-span-1 pb-3 text-caption-m col-span-full">
            ADVANTAGES
          </div>
          <p className="text-subheadline-m font-semibold xl:col-start-3 col-span-full xl:pb-6 text-[#00BED7] pb-3">
            What makes a rove home?
          </p>
          {advantages.map((adv, index) => {
            const styles = `${advStyles[index]} ${
              index === advantages.length - 1 ? "" : "xl:pb-14 pb-6"
            }`;

            return (
              <div
                key={adv.id}
                className={`flex flex-col ${styles} xl:col-span-4 sm:col-span-6 col-span-full`}
              >
                <img
                  src={adv.image}
                  alt={adv.title}
                  className="rounded-2xl object-cover aspect-[5/3]"
                />
                <div className="flex gap-1 pt-3 items-center">
                  <div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
                  <div className="text-m">{adv.title}</div>
                </div>
              </div>
            );
          })}
        </div>
        {/* EXPANDABLE LIVING SOLUTIONS */}
        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 xl:pt-[140px] sm:pt-[100px] pt-20">
          Live in the future, today. Designed to embody Rove’s unique look and
          feel, the interiors will feature intelligent and modular living
          solutions by ORI, never seen before in UAE and the region.
        </h1>
        <div className="col-span-full grid grid-cols-12 px-6">
          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase col-start-1 col-span-full pb-3">
            EXPANDABLE LIVING SOLUTIONS
          </div>
          <div className="flex flex-col gap-6 xl:col-start-3 xl:col-span-4 col-span-full">
            <div className="text-[#00BED7] text-subheadline-m">
              ORI introduces a revolutionary solution to apartment living, where
              space is not just a constraint but an opportunity.{" "}
            </div>
            <div className="flex gap-6">
              <div className="flex items-center gap-4">
                <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
                <p className="text-[#0D1922] text-m">Simple</p>
              </div>
              <div className="flex items-center gap-4">
                <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
                <p className="text-[#0D1922] text-m">Safe</p>
              </div>
              <div className="flex items-center gap-4">
                <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
                <p className="text-[#0D1922] text-m">Effortless</p>
              </div>
            </div>
          </div>
          <div className="col-span-full pt-6">
            <LivingSolutionSlider />
          </div>
        </div>
        {/* Units description */}
        <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[140px] xm:pt-[100px] pt-[80px]">
          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
            UNITS DESCRIPTION
          </div>
          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                <div>
                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
                    Studio flex
                  </h2>
                  <p className="text-m text-[#73787C] pt-4">
                    Live in the future, today. In Studio Flex explore the ORI
                    Cloud Bed, optimizing your living space with functionality
                    and smart living.
                  </p>
                  <p className="text-m text-[#73787C] mt-[10px]">
                    Every inch is designed to provide more space for comfort and
                    convenience. This feature increase your unit size by 33%
                  </p>
                </div>
                <div>
                  <p className="text-s text-[#0D1922]">341 Sqft</p>
                  <p className="font-bold text-m text-[#00BED7]">Unavailable</p>
                </div>
              </div>
              <img
                src="/images/aboutCompany/unitsDescription/1.jpg"
                alt=""
                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
              />
            </div>
            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                <div>
                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
                    Studio<sup>2</sup>
                  </h2>
                  <p className="text-m text-[#73787C] pt-4">
                    In Studio 2 experience the Flexibed, a smart innovation for
                    modern living. When folded, it unveils a spacious living
                    room creating a cohesive space that blends both style and
                    functionality.
                  </p>
                </div>
                <div>
                  <p className="text-s text-[#0D1922]">390 Sqft</p>
                  <p className="font-bold text-m text-[#00BED7]">
                    AED 1,138,888
                  </p>
                </div>
              </div>
              <img
                src="/images/aboutCompany/unitsDescription/2.jpg"
                alt=""
                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
              />
            </div>
            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                <div>
                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
                    1 Bedroom<sup>2</sup>
                  </h2>
                  <p className="text-m text-[#73787C] pt-4">
                    In 1 Bedroom 2 double up your space with next generation
                    features that enhance smart living.
                  </p>
                  <p className="text-m text-[#73787C] mt-[10px]">
                    With pocket walls that disappear and a Flexibed that
                    seamlessly converts, you can transform your living room into
                    an extra bedroom, anytime you want!
                  </p>
                </div>
                <div>
                  <p className="text-s text-[#0D1922]">609 Sqft</p>
                  <p className="font-bold text-m text-[#00BED7]">Unvailiable</p>
                </div>
              </div>
              <img
                src="/images/aboutCompany/unitsDescription/3.jpg"
                alt=""
                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
              />
            </div>
            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                <div>
                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
                    2 Bedroom<sup>2</sup>
                  </h2>
                  <p className="text-m text-[#73787C] pt-4">
                    In 2 Bedroom 2 discover extra functionality with added space
                    and maximum value.
                  </p>
                  <p className="text-m text-[#73787C] mt-[10px]">
                    Whether you want to add a multipurpose spare room or double
                    up your living space as a bedroom - every inch of space
                    feels larger and works exactly how you want.
                  </p>
                </div>
                <div>
                  <p className="text-s text-[#0D1922]">891 Sqft</p>
                  <p className="font-bold text-m text-[#00BED7]">
                    AED 2,408,888
                  </p>
                </div>
              </div>
              <img
                src="/images/aboutCompany/unitsDescription/4.jpg"
                alt=""
                className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] h-full mt-[-32px] sm:mt-0"
              />
            </div>
          </div>
        </div>
        {/* About the developer */}
        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full xl:pb-16 sm:pb-10 pb-7 xl:pt-[140px] sm:pt-[100px] pt-20">
          Founded under Alshamsi family, IRTH is a real estate investment
          platform - based on the philosophy of value creation, innovation and
          building world-class living experiences.
        </h1>
        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 gap-6">
          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase">
            ABOUT THE DEVELOPER
          </div>
          <div className="xl:col-start-3 xl:col-span-3 text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
            <div>
              <p className="text-m">
                IRTH’s vision is long-term, supported with a proactive approach,
                swift actions, strong financial backing, and high-quality
                projects - bridging the gap between ambition and success. IRTH
                continues seeking new opportunities and broadening horizons –
                thriving in any market situation through an extensive land bank
                and strategic partnerships.
              </p>
              <p className="text-m pt-4">
                At IRTH, we take pride in offering the best-inclass locations
                and properties for value-based investment opportunities -
                setting new standards in the real estate market in the region.
                We are IRTH – The Future of Real Estate.
              </p>
            </div>
            <Button
              text="Learn more"
              buttonType="cta"
              className="justify-center w-fit px-[51px]"
            />
          </div>
          <div className="xl:col-start-7 xl:col-span-7 col-span-full">
            <img
              src="/images/aboutCompany/about_the_developer.png"
              alt=""
              className="w-full"
            />
          </div>
        </div>
        {/* MAIN CONSULTANTS */}
        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 xl:pt-[140px] xl:pb-[140px] sm:pt-[100px] pt-20 pb-10">
          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase pb-3 col-span-full">
            MAIN CONSULTANTS
          </div>
          <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 gap-4">
            <div className="xl:col-start-3 col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[280px] justify-between flex flex-col">
              <div className="flex gap-1 items-center">
                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                <p className="text-m text-[#0D1922]">Architect</p>
              </div>
              <img
                src="/images/aboutCompany/mainConsultants/1.png"
                alt=""
                className="self-end"
              />
            </div>
            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
              <div className="flex gap-1 items-center">
                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                <p className="text-m text-[#0D1922]">Landscape architect</p>
              </div>
              <img
                src="/images/aboutCompany/mainConsultants/2.png"
                alt=""
                className="self-end"
              />
            </div>
            <div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[280px] justify-between flex flex-col xl:col-start-9 sm:col-start-7">
              <div className="flex gap-1 items-center">
                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                <p className="text-m text-[#0D1922]">Art team</p>
              </div>
              <img
                src="/images/aboutCompany/mainConsultants/3.png"
                alt=""
                className="self-end"
              />
            </div>
            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col xl:col-start-5 sm:col-start-3">
              <div className="flex gap-1 items-center">
                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                <p className="text-m text-[#0D1922]">Id team</p>
              </div>
              <img
                src="/images/aboutCompany/mainConsultants/4.png"
                alt=""
                className="self-end"
              />
            </div>
            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
              <div className="flex gap-1 items-center">
                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                <p className="text-m text-[#0D1922]">Sales and marketing</p>
              </div>
              <img
                src="/images/aboutCompany/mainConsultants/5.png"
                alt=""
                className="self-end"
              />
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

export default AboutProjectsPage;