import AboutSectionHeading from "../about/AboutSectionHeading";
import ComunityCard from "../about/ComunityCard";
import LayoutIcon from "../icons/LayoutIcon";
import BedIcon from "../icons/BedIcon";
import LampIcon from "../icons/LampIcon";
import CarIcon from "../icons/CarIcon";
import ParkingIcon from "../icons/ParkingIcon";
import ShopIcon from "../icons/ShopIcon";
import Accordeon from "../ui/Accordeon";
import ShopInStyleAccordeonContent from "../about/accordeons/ShopInStyleAccordeonContent";
import CulinaryExperienceAccordeonContent from "../about/accordeons/CulinaryExperienceAccordeonContent";
import CentralPlazaAccordeonContent from "../about/accordeons/CentralPlazaAccordeonContent";
import LifestyleLivingAccordeonContent from "../about/accordeons/LifestyleLivingAccordeonContent";
import ContemporaryOfficesAccordeonContent from "../about/accordeons/ContemporaryOfficesAccordeonContent";
import Feedback from "../Feedback";
import Socials from "../Socials";

export default function AboutPage() {
  return (
    <section className="2xl:space-y-[8.333vw] md:space-y-[10.417vw] space-y-[22.222vw] bg-[#F7F6F3]">
      <AboutHero />
      <AboutBaraha />
      <BuildingCommunities />
      <Accordeons />
      <div className="2xl:p-[2.778vw_2.778vw_6.667vw] md:p-[24px_24px_96px] p-[16px_16px_88px] !pt-0 2xl:space-y-[2.222vw] space-y-8">
        <Feedback />
        <hr className="w-full border-[#ECE8DF] 2xl:border-[0.069vw] border-[1px] col-span-full" />
        <Socials />
      </div>
    </section>
  );
}

function AboutHero() {
  return (
    <div className="bg-[url('/img/about/about_main.jpg')] [box-shadow:0_-100px_400px_rgba(0,0,0,0.9)_inset] flex flex-col justify-between items-center 2xl:pt-[1.667vw] md:pt-[2.083vw] pt-[4.444vw] 2xl:pb-[4.444vw] md:pb-[9.375vw] pb-[16.667vw] 2xl:rounded-b-[2.222vw] md:rounded-b-[4.167vw] rounded-b-[8.889vw] w-full 2xl:h-[95.5vh] md:h-[96.4dvh] h-[94dvh] bg-cover bg-center ">
      <img
        src="/img/about/baraha_logo.svg"
        className="2xl:w-[13.681vw] md:w-[29.948vw] w-[45.556vw]"
        alt=""
      />
      <div className="flex flex-col 2xl:gap-[2.778vw] md:gap-[3.646vw] gap-[6.667vw]">
        <h1 className="2xl:h1 md:h2 h3 text-white text-center [font-family:New_York_Large]">
          Your Journey to a Perfect&nbsp;Life <br className="max-md:hidden" />{" "}
          Begins in&nbsp;Baraha&nbsp;Town.
        </h1>
        <span className="text-m max-md:text-s text-white text-center block font-[Poppins]">
          Live, Shop, Work & Dine in the Vibrant Heart <br /> of Abu Hamour.
        </span>
      </div>
    </div>
  );
}

function AboutBaraha() {
  return (
    <div className="2xl:space-y-[2.778vw] md:space-y-[4.167vw] space-y-[8.889vw] 2xl:px-[2.778vw] md:px-[3.125vw] px-[4.444vw]">
      <AboutSectionHeading
        title="ABOUT BARAHA"
        description={
          <>
            Baraha Town is mixed-use development that
            has&nbsp;been&nbsp;designed to bring retail, residential and
            commercial offices into one easily accessible location with
            fantastic transport links to the surrounding area.
          </>
        }
        className="2xl:mb-0 md:mb-[4.167vw] mb-[6.667vw] [&_div]:2xl:pr-[17.847vw]"
      />
      <div className="flex flex-col 2xl:gap-[2.778vw] md:gap-[4.167vw] gap-[8.889vw]">
        <div className="2xl:ml-[23.889vw] ml-0 flex flex-col 2xl:gap-[1.111vw] md:gap-[2.083vw] gap-[3.333vw] text-s 2xl:max-w-[23.611vw] md:max-w-[44.271vw] text-[#324D4399]">
          <p className="font-[Poppins]">
            A state-of-the-art town offering an aspirational journey to its
            visitors. With its vibrant, colorful buildings, Baraha Town offers
            the biggest retail, residential, and office spaces in a 3km radius.
          </p>
          <p className="font-[Poppins]">
            Baraha Town will be home to various local and international brand
            names.
          </p>
        </div>

        <div className="flex items-start w-full gap-[1.111vw]">
          <img
            className="w-[22.778vw] aspect-[328/188] max-2xl:hidden block object-cover flex-shrink-0"
            src="/img/about/about_1.jpg"
            alt=""
          />
          <img
            src="/img/about/about_2.jpg"
            className="flex-1 min-w-0 object-cover md:rounded-[2.083vw] rounded-[4.444vw] md:aspect-[720/289] aspect-[328/289]"
            alt=""
          />
        </div>

        <div className="2xl:ml-[23.819vw] ml-0 flex flex-col gap-[1.111vw] 2xl:h3 md:subheadline-m text-[6.667vw] leading-[110%] text-[#324D4399]">
          <p className="[font-family:New_York_Large]">
            Baraha Town is more <br /> than a destination; <br />
            <span className="text-[#324D43]">it’s a journey.</span>
          </p>
        </div>
      </div>
    </div>
  );
}

function BuildingCommunities() {
  return (
    <div className="2xl:space-y-[2.778vw] 2xl:px-[2.778vw] md:px-[3.125vw] px-[4.444vw]">
      <AboutSectionHeading
        title="BUILDING COMMUNITIES"
        description={
          <>
            Baraha Town, with its collection of Retail Stores, <br />
            Restaurants, Cafes, Hypermarket, Fitness Club,
            <br /> Medical Clinic, Offices and Residential Apartments, will be
            an ideal destination for those seeking a new journey.
          </>
        }
        className="2xl:mb-0 md:mb-[4.167vw] mb-[8.889vw]"
      />
      <div className="grid 2xl:grid-cols-4 max-2xl:grid-cols-2 grid-rows-3 2xl:gap-[1.111vw] md:gap-[2.083vw] gap-[2.222vw]">
        <ComunityCard
          icon={<ShopIcon />}
          number="356"
          text="Retail / F & B stores"
          className=""
        />
        <ComunityCard
          icon={<LayoutIcon />}
          number="61"
          text="Studio Apartments"
        />
        <ComunityCard
          icon={<BedIcon />}
          number="91"
          text="1 Bedroom Apartments"
        />
        <ComunityCard
          icon={<LampIcon />}
          number="68"
          text="Commercial Offices"
        />
        <ComunityCard
          icon={<CarIcon />}
          number="475"
          text="Above-Ground Parking Spaces"
          className="2xl:col-start-2 2xl:col-end-3 2xl:row-start-2 2xl:row-end-3"
        />
        <ComunityCard
          icon={<ParkingIcon />}
          number="1,470"
          text="Basement Parking Spaces"
          className="2xl:col-start-3 2xl:col-end-4 2xl:row-start-3 2xl:row-end-4"
        />
      </div>
    </div>
  );
}

function Accordeons() {
  return (
    <div className="2xl:px-[2.778vw]">
      <div className="2xl:ml-[23.889vw] ml-0 flex flex-col 2xl:gap-[1.667vw] md:gap-[3.125vw] gap-[4.444vw] 2xl:mb-[4.444vw] md:mb-[4.167vw] mb-[8.889vw] 2xl:px-0 px-[4.444vw] md:px-[3.125vw]">
        <h2 className="2xl:h2 md:h3 subheadline-m text-[#324D43] [font-family:New_York_Large]">
          Your World, Reimagined
        </h2>
        <p className="text-s text-[#324D4399] 2xl:w-[19.583vw] md:w-[42.708vw] font-[Poppins]">
          Step into Baraha Town, where every aspect <br /> of your daily life is
          designed for inspiration <br /> and convenience.
        </p>
      </div>

      <Accordeon
        subtitle={"A World-Class Shopping Destination"}
        label={"Shop in Style"}
        content={<ShopInStyleAccordeonContent />}
        open
      />
      <Accordeon
        subtitle={"A World of Flavors on Your Doorstep"}
        label={"Culinary Experience"}
        content={<CulinaryExperienceAccordeonContent />}
        className="translate-y-[-1px]"
      />
      <Accordeon
        subtitle={"A hub for Baraha Town’s attractions."}
        label={"Central Plaza"}
        content={<CentralPlazaAccordeonContent />}
        className="translate-y-[-2px]"
      />
      <Accordeon
        subtitle={"Your Serene Escape in the City"}
        label={"Lifestyle Living"}
        content={<LifestyleLivingAccordeonContent />}
        className="translate-y-[-3px]"
      />
      <Accordeon
        subtitle={"Achieve Perfect Work-Life Balance"}
        label={"Contemporary Offices"}
        content={<ContemporaryOfficesAccordeonContent />}
        className="translate-y-[-4px]"
      />
    </div>
  );
}
