import Image from "next/image";
import type { SunatRacingContent } from "@/services/sunat-racing.service";
import SunatRacingBeritaSection from "./SunatRacingBeritaSection";
import SunatRacingDokterSection from "./SunatRacingDokterSection";
import SunatRacingFAQSection from "./SunatRacingFAQSection";
import SunatRacingHeroSection from "./SunatRacingHeroSection";
import SunatRacingKeunggulanSection from "./SunatRacingKeunggulanSection";
import SunatRacingPaketSection from "./SunatRacingPaketSection";
import SunatRacingPascaSection from "./SunatRacingPascaSection";
import SunatRacingTestimoniSection from "./SunatRacingTestimoniSection";

interface SunatRacingMainProps {
  content: SunatRacingContent;
}

const SunatRacingMain = ({ content }: SunatRacingMainProps) => {
  return (
    <>
      <SunatRacingHeroSection hero={content.hero} />

      <SunatRacingKeunggulanSection
        advantages={content.advantages}
        sectionTitle={content.pageContent.advantageSectionTitle}
        sectionSubtitle={content.pageContent.advantageSectionSubtitle}
      />

      {/* Shared Background Wrapper for Paket and Testimoni */}
      <div
        className="relative"
        style={{
          background: "linear-gradient(to bottom, #2459DD, #85CCFF)",
        }}
      >
        {/* Background Image Overlay */}
        <div className="absolute inset-0 z-0">
          <Image
            src="/assets/tentang-kami/shared-background.png"
            alt=""
            fill
            className="object-cover mix-blend-hard-light opacity-50"
            priority
          />
        </div>

        {/* Content */}
        <div className="relative z-10">
          <SunatRacingPaketSection />
          <SunatRacingTestimoniSection />
        </div>
      </div>

      <SunatRacingPascaSection />

      {/* Shared Background Wrapper for Dokter and Berita */}
      <div style={{ backgroundColor: "#003CD7" }}>
        <SunatRacingDokterSection
          doctors={content.doctors}
          sectionTitle={content.pageContent.doctorSectionTitle}
          sectionSubtitle={content.pageContent.doctorSectionSubtitle}
        />
        <SunatRacingBeritaSection
          news={content.news}
          sectionTitle={content.pageContent.newsSectionTitle}
          sectionSubtitle={content.pageContent.newsSectionSubtitle}
        />
      </div>

      <SunatRacingFAQSection
        faqs={content.faqs}
        sectionTitle={content.pageContent.faqSectionTitle}
        sectionSubtitle={content.pageContent.faqSectionSubtitle}
      />
    </>
  );
};

export default SunatRacingMain;