"use client";

import Image from "next/image";

import {
  LIST_OF_SERVICES,
  shuffleArray,
} from "@/components/pages/client/services/services";
import type { ServicesGhostContent } from "@/lib/services-ghost-content";

function InitialHero({
  content,
}: {
  content: ServicesGhostContent["services"]["hero"];
}) {
  const SHUFFLED_SERVICES = shuffleArray(LIST_OF_SERVICES);

  return (
    <div className="overflow-hidden py-24">
      <div className="mx-auto px-6 lg:flex lg:px-8 max-w-7xl">
        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 lg:mx-0 lg:min-w-full lg:max-w-none lg:flex-none lg:gap-y-8">
          <div className="lg:col-end-1 lg:w-full lg:max-w-2xl lg:pb-8">
            <h1 className="text-5xl md:text-7xl font-black font-inter relative">
              {content.title}
            </h1>
            <p className="font-noto text-lg mt-8 text-gray-700 dark:text-gray-200">
              {content.paragraphs[0]}
            </p>
            <p className="font-noto text-lg mt-8 text-gray-700 dark:text-gray-200">
              {content.paragraphs[1]}
            </p>
          </div>
          <div className="flex flex-wrap items-start justify-end gap-6 sm:gap-8 lg:contents">
            <div className="w-0 flex-auto lg:ml-auto lg:w-auto lg:flex-none lg:self-end">
              <Image
                alt={SHUFFLED_SERVICES[0].alt}
                className="aspect-[7/5] w-[37rem] max-w-none rounded-2xl bg-gray-50 object-cover"
                height={842}
                loading="eager"
                src={SHUFFLED_SERVICES[0].imgSrc}
                width={1152}
              />
            </div>
            <div className="contents lg:col-span-2 lg:col-end-2 lg:ml-auto lg:flex lg:w-[37rem] lg:items-start lg:justify-end lg:gap-x-8">
              <div className="order-first flex w-64 flex-none justify-end self-end lg:w-auto">
                <Image
                  alt={SHUFFLED_SERVICES[1].alt}
                  className="aspect-[4/3] w-[24rem] max-w-none flex-none rounded-2xl bg-gray-50 object-cover"
                  height={604}
                  loading="eager"
                  src={SHUFFLED_SERVICES[1].imgSrc}
                  width={768}
                />
              </div>
              <div className="flex w-96 flex-auto justify-end lg:w-auto lg:flex-none">
                <Image
                  alt={SHUFFLED_SERVICES[2].alt}
                  className="aspect-[7/5] w-[37rem] max-w-none flex-none rounded-2xl bg-gray-50 object-cover"
                  height={842}
                  loading="eager"
                  src={SHUFFLED_SERVICES[2].imgSrc}
                  width={1152}
                />
              </div>
              <div className="hidden sm:block sm:w-0 sm:flex-auto lg:w-auto lg:flex-none">
                <Image
                  alt={SHUFFLED_SERVICES[3].alt}
                  className="aspect-[4/3] w-[24rem] max-w-none rounded-2xl bg-gray-50 object-cover"
                  height={604}
                  loading="eager"
                  src={SHUFFLED_SERVICES[3].imgSrc}
                  width={768}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default InitialHero;