"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";
import type { HeroSection } from "@/types/landing-pages.type";

interface SunatRacingHeroSectionProps {
  hero: HeroSection;
}

const SunatRacingHeroSection = ({ hero }: SunatRacingHeroSectionProps) => {
  return (
    <section className="overflow-hidden relative bg-[#003CD7] p-16 min-h-[90vh]">
      <div className="max-w-360 mx-auto">
        <div className="flex flex-col gap-8">
          <div className="flex flex-col w-full">
            <div className="flex items-center w-full justify-between">
              <div className="relative w-200 h-80">
                <Image
                  src="/assets/sunat-racing/hero-logo.png"
                  alt="Sunat Racing Logo"
                  fill
                  className="object-contain"
                />
              </div>

              <div className="relative w-57.75 h-65">
                <Image
                  src="/assets/sunat-racing/hero-piala.png"
                  alt="Piala Sunat Racing"
                  fill
                  className="object-contain -rotate-10"
                />
              </div>
            </div>
          </div>

          <p className="text-[28px] text-white max-w-147.5 leading-tight">
            {hero.subtitle || "Sunat modern, ramah anak, dengan pendampingan penuh untuk kenyamanan dan hasil terbaik."}
          </p>

          <Button
            size="lg"
            variant="outline"
            className="rounded-full mt-4 z-20 w-fit py-8 px-10 text-[28px] font-bold border-white border-3 bg-[#FFB700] text-white hover:bg-[#FFB700] hover:text-white"
            style={{
              boxShadow: "0px 1px 11px 0px #FFD466",
            }}
          >
            {hero.primaryCtaLabel || "Pesan Layanan"}
          </Button>
        </div>
      </div>

      <div className="absolute right-0 -bottom-80 w-full h-full z-10">
        <Image
          src="/assets/sunat-racing/hero-mobil-jalan.png"
          alt="Mobil Sunat Racing"
          fill
          className="object-contain"
        />
      </div>
    </section>
  );
};

export default SunatRacingHeroSection;