// components/footerLinks/AboutUs.tsx
"use client";

import React from "react";
import Image from "next/image";
import { Sparkle } from "lucide-react";
import { WebsiteHeader } from "@/components/website/WebsiteHeader";
import { WebsiteFooter } from "@/components/website/WebsiteFooter";

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

interface AboutUsProps {
  aboutUsPageData: any;
}

const AboutUs = ({ aboutUsPageData }: AboutUsProps) => {
  if (!aboutUsPageData) return null;

  return (
    <div className="min-h-screen w-full flex flex-col">
      {/* ✅ Header */}
      <WebsiteHeader headerData={aboutUsPageData?.headerFooterImage} />

      {/* Hero Section with Background Image */}
      <div
        style={{ backgroundImage: `url(${BASE_URL}/${aboutUsPageData?.heroSection?.mainImage})` }}
        className="w-full h-36 flex items-center justify-center bg-cover bg-center"
      >
        <div className="w-full md:w-md flex flex-col gap-3 items-center">
          <p className="text-[30px] font-semibold leading-[40px] text-[#0084a5]">
            {aboutUsPageData?.heroSection?.pageTitle}
          </p>
          <p className="text-[18px] font-semibold leading-[28px] text-[#262125] md:px-0 px-5 text-center">
            {aboutUsPageData?.heroSection?.pageSubTitle}
          </p>
        </div>
      </div>

      {/* Hero Content */}
      <div className="w-full bg-white py-5 px-5 md:px-0">
        <div className="md:w-2xl lg:w-5xl mx-auto w-full flex flex-col gap-5">
          {aboutUsPageData?.heroSection?.shortContent && (
            <div className="prose max-w-full" dangerouslySetInnerHTML={{ __html: aboutUsPageData?.heroSection?.shortContent }} />
          )}
          
          <div className="flex w-full flex-col gap-5 md:flex-row">
            <div className="w-full md:w-1/2 h-60 overflow-hidden rounded-xl">
              <Image
                width={500}
                height={500}
                quality={80}
                src={`${BASE_URL}/${aboutUsPageData?.heroSectionLeftRightImage?.gallaryImage?.replace(/\\/g, "/")}`}
                alt="About us"
                className="w-full h-full rounded-xl object-cover"
              />
            </div>
            <div className="w-full md:w-1/2 h-60 overflow-hidden rounded-xl">
              <Image
                width={500}
                height={500}
                quality={80}
                src={`${BASE_URL}/${aboutUsPageData?.heroSectionLeftRightImage?.file?.replace(/\\/g, "/")}`}
                alt="About us"
                className="w-full h-full rounded-xl object-cover"
              />
            </div>
          </div>

          {aboutUsPageData?.heroSection?.fullContent && (
            <div className="prose max-w-full" dangerouslySetInnerHTML={{ __html: aboutUsPageData?.heroSection?.fullContent }} />
          )}
        </div>
      </div>

      {/* Vision Section */}
      <div className="w-full bg-[#F5F5F5] py-2 px-5 md:px-0">
        <div className="flex md:flex-row flex-col md:w-2xl lg:w-5xl mx-auto w-full items-center gap-5">
          <div className="md:w-1/2 w-full flex flex-col gap-2">
            <p className="text-[18px] md:text-[20px] leading-[28px] md:leading-[30px] text-[#0084a5] font-bold">
              {aboutUsPageData?.vision?.postTitle}
            </p>
            <p className="text-[14px] md:text-[16px] leading-[24px] md:leading-[26px] text-[#262125] font-semibold">
              {aboutUsPageData?.vision?.postSubTitle}
            </p>
          </div>
          <div className="md:w-1/2 w-full">
            <Image
              width={500}
              height={500}
              quality={80}
              src={`${BASE_URL}/${aboutUsPageData?.vision?.gallaryImage?.replace(/\\/g, "/")}`}
              alt="Vision"
              className="w-full h-full rounded-xl"
            />
          </div>
        </div>
      </div>

      {/* Mission Section */}
      <div className="w-full bg-white py-2 px-5 md:px-0">
        <div className="flex md:flex-row flex-col md:w-2xl lg:w-5xl mx-auto w-full gap-5">
          <div className="md:w-1/2 w-full">
            <Image
              width={500}
              height={500}
              quality={80}
              src={`${BASE_URL}/${aboutUsPageData?.missionImageDescription?.[0]?.gallaryImage?.replace(/\\/g, "/")}`}
              alt="Mission"
              className="w-full h-full rounded-xl"
            />
          </div>
          <div className="md:w-1/2 w-full flex flex-col gap-2">
            <p className="text-[18px] md:text-[20px] leading-[28px] md:leading-[30px] text-[#0084a5] font-bold">
              {aboutUsPageData?.mission?.category}
            </p>
            <p className="text-[14px] md:text-[16px] leading-[24px] md:leading-[26px] text-[#262125] font-semibold">
              {aboutUsPageData?.missionImageDescription?.[0]?.postTitle}
            </p>
            <div className="flex flex-col gap-2 w-full">
              {aboutUsPageData?.missionPoints?.map((mission: any) => (
                <div key={mission?._id} className="flex gap-1 items-start">
                  <Sparkle className="w-3 h-3 mt-1.5 text-[#0084a5]" />
                  <p className="font-semibold text-[14px] leading-[24px] text-black">{mission?.postTitle}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Core Values Section */}
      <div className="w-full bg-[#F5F5F5] py-5 pb-10 px-5 md:px-0">
        <div className="md:w-2xl lg:w-5xl mx-auto w-full flex flex-col items-center justify-center gap-5">
          <p className="text-[18px] md:text-[20px] leading-[28px] md:leading-[30px] text-[#0084a5] font-bold">
            {aboutUsPageData?.coreValues?.category}
          </p>
          <div className="grid md:grid-cols-2 grid-cols-1 w-full gap-5">
            {aboutUsPageData?.coreValuesPoints?.map((core: any) => (
              <div key={core?._id} className="flex gap-1 md:gap-2 w-full items-start rounded-md border-[1px] bg-white shadow border-gray-300 px-3 py-2">
                <Sparkle className="w-3 h-3 mt-1.5 text-[#0084a5]" />
                <p className="font-semibold text-[14px] leading-[24px] text-black">{core?.postTitle}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ✅ Footer */}
      <WebsiteFooter
        footerData={aboutUsPageData?.headerFooterImage}
        socialLinks={aboutUsPageData?.socialLinks}
      />
    </div>
  );
};

export default AboutUs;