import cx from 'classnames'

import AnimateUnderline from '@/components/shared/AnimateUnderline'
import BlurImage from '@/components/shared/BlurImage'
import Container from '@/components/shared/Container'
import CallToAction from '@/components/sections/CallToAction'
import FeatureSlider from '@/components/sections/FeatureSlider'

type Props = {
  page: {
    title: string
    featuredImage?: {
      node: {
        imageUrl: string
        alt: string
        placeholder: string
      }
    } | null
    productOverviewContent: ProductOverview
    customCtaSection: {
      accentColor: string
      ctaText: string
      ctaLink: {
        title: string
        url: string
      }
      enableCta: any
    }
  }
}

type ProductOverview = {
  heroSection: {
    heroTitle: string
    heroText: string
    subHeroTitle: string
    subHeroText: string
  }
  keyFeatureSliders: KeyFeatureSlider[]
}
type KeyFeatureSlider = {
  sliderTitle: string
  sliderText: string
  sliderButtonLink: SliderButtonLink
  sliderImages: SliderImage[]
}

type SliderButtonLink = {
  title: string
  url: string
}

type SliderImage = {
  imageSlide?: {
    imageUrl: string
    alt: string
    placeholder: string
  }
  imageCaption: string
}

export default function Overview({ page }: Props) {
  const {
    title,
    featuredImage,
    productOverviewContent: {
      keyFeatureSliders: keyFeatureSlidersArray,
      heroSection: { heroTitle, heroText, subHeroTitle, subHeroText },
    },
    customCtaSection,
  } = page

  return (
    <>
      <div className="fixed inset-0 h-vh -z-1 bg-gray-light">
        {featuredImage && (
          <BlurImage
            src={featuredImage.node.imageUrl}
            alt={featuredImage.node.alt}
            placeholderSrc={featuredImage.node.placeholder}
            fill
            className="object-cover object-top"
            sizes="100vw"
            priority
          />
        )}
      </div>

      <div className="relative h-vh-header md:h-[125vh] lg:h-[150vh] py-6 sm:py-12">
        <Container className="flex flex-col h-full">
          <div className="pb-4">
            <AnimateUnderline className="inline-block text-h6">{title}</AnimateUnderline>
          </div>

          <div className="flex flex-col justify-center flex-1">
            <h1 className="text-h1 text-white">{heroTitle}</h1>
          </div>
        </Container>
      </div>

      <div
        className={cx(
          'flex flex-col gap-y-16 md:gap-y-24 bg-white lg:pt-[100px] md:pb-[150px] md:pt-[80px] pt-[60px] pb-[75px]',
          customCtaSection?.enableCta ?? 'pb-16 md:pb-24'
        )}
      >
        <Container>
          <h2 className="lg:w-5/6 text-page-intro">{heroText}</h2>
        </Container>

        <Container>
          <AnimateUnderline className="inline-block">{subHeroTitle}</AnimateUnderline>
          <div className="lg:w-5/6 pt-4 text-section-intro">{subHeroText}</div>
        </Container>
      </div>

      {/* Feature slider */}
      <div className="flex flex-col gap-y-16 md:gap-y-0 bg-white">
        {keyFeatureSlidersArray.map((item, index: number) => (
          <FeatureSlider
            key={index}
            title={item.sliderTitle}
            content={item.sliderText}
            button={item.sliderButtonLink}
            slides={item.sliderImages}
            reverse={Boolean(index % 2)}
          />
        ))}
      </div>

      {/* Custom CTA Section */}
      {customCtaSection?.enableCta && (
        <CallToAction heading={customCtaSection?.ctaText} link={customCtaSection?.ctaLink} accentColor="white" />
      )}
    </>
  )
}