'use client';
import { Image } from '@akinon/next/components';
import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
import { LoaderSpinner } from '@theme/components';

export default function AboutUs() {
  const { data, isLoading } = useGetWidgetQuery('about-us');

  if (isLoading) {
    return (
      <div className="py-20">
        <LoaderSpinner />;
      </div>
    );
  }

  if (!data) {
    return null;
  }

  return (
    <div>
      <div className="container px-3 lg:px-0 py-4 lg:py-10">
        <div className="flex gap-2.5 flex-col lg:flex-row">
          <Image
            src={data?.attributes?.image_1?.kwargs?.url}
            alt={data?.attributes?.image_1?.value}
            aspectRatio={350 / 330}
            sizes="350px"
            fill
          />

          <Image
            src={data?.attributes?.image_2?.kwargs?.url}
            alt={data?.attributes?.image_2?.value}
            aspectRatio={350 / 330}
            sizes="350px"
            fill
          />

          <Image
            src={data?.attributes?.image_3?.kwargs?.url}
            alt={data?.attributes?.image_3?.value}
            aspectRatio={350 / 330}
            sizes="350px"
            fill
          />
        </div>

        <div className="my-10 lg:my-16 max-w-[495px] mx-auto">
          <h1 className="text-[30px] lg:text-[40px] mb-8">
            {data?.attributes?.title?.value}
          </h1>
          <div
            className="text-[#121212] leading-[1.72] tracking-[0.64px]"
            dangerouslySetInnerHTML={{
              __html: data?.attributes?.content?.value || ''
            }}
          />
        </div>
      </div>

      <div className="bg-[#fafafa] lg:bg-black text-[#121212] lg:text-white py-10 lg:py-16">
        <div className="container">
          <h2 className="text-center text-xl lg:text-2xl mb-8">
            {data?.attributes?.highlight_section_title?.value}
          </h2>
          <div
            className="text-center max-w-[295px] lg:max-w-[700px] mx-auto leading-[1.72] tracking-[0.64px]"
            dangerouslySetInnerHTML={{
              __html: data?.attributes?.highlight_section?.value || ''
            }}
          />
        </div>
      </div>
    </div>
  );
}