import React from 'react'
import { HeroSection } from '../herosection'
import { BuiltForEveryone } from '../builtforeveryone'
import { PaymentServices } from '../paymentservices'
import { FeaturedProducts } from '../featuredproducts'
import { AccessMoney } from '../accessmoney'
import { WhyPaySey } from '../whypaysey'
import { RewardsBenefits } from '../rewardsbenefit'
import { PaymentJourney } from '../paymentjourney'
import type { HomeFields } from '@/types/home'
import { CardOptions } from '../cardoptions'

interface HomeSectionProps {
  fields: HomeFields
}

export const HomeSection = ({ fields }: HomeSectionProps) => {
  return (
    <div className=''>
      <HeroSection
        title={fields.banner_title}
        description={fields.banner_description}
        buttonText={fields.banner_button_text}
        buttonUrl={fields.banner_button_url}
        mainImage={fields.banner_main_image}
        transactionImage={fields.banner_transaction_image}
        cardImage={fields.banner_card_image}
        moneySavingImage={fields.banner_money_saving_image}
        qrImage={fields.banner_qr_code}
        downloadAppText={fields.download_app_text}
        appDownloadLinks={fields.app_download_links}
      />
      <div className='bg-white relative'>
        <BuiltForEveryone
          heading={fields.main_heading}
          description={fields.main_description}
          questionMarkImage={fields.question_mark_image}
          listTitle={fields.list_title}
          listDescription={fields.list_description}
          cards={fields.card}
        />
        <PaymentServices
          subTitle={fields.payment_solutions_sub_title}
          title={fields.payment_solutions_title}
          description={fields.payment_solutions_description}
          icons={fields.payment_solutions_icone_box}
          exploreUrl={fields.explore_all_services}
        />
       <div className='bg-[#0c1e10] py-20 md:py-24 xl:py-[150px]  '>
      <div className='container'>
           <FeaturedProducts
          subTitle={fields.sub_title}
          title={fields.feature_product_title}
          description={fields.feature_product_description}
          featureList={fields.feature_list}
          cards={fields.product_card}
        />
        <CardOptions
          badgeText={fields.payseypay_cards_badge_text}
          title={fields.payseypay_cards_section_title}
          description={fields.payseypay_cards_description}
          featuresList={fields.payseypay_cards_features_list}
          noteTitle={fields.payseypay_cards_section_note_title}
          noteDesc={fields.payseypay_cards_section_note_desc}
          sectionImage={fields.paysey_cards_section_image_gif}
          sectionImage2={fields.paysey_cards_section_image_2}
        />
      </div>
       </div>
        <div className='bg-white relative'>
          <AccessMoney
            subTitle={fields.access_your_money_sub_title}
            title={fields.access_your_money_title}
            description={fields.access_your_money_description}
            image={fields.access_your_money_iamge}
            cards={fields.access_your_money_card}
          />
          <WhyPaySey
            subTitle={fields.why_paysey_sub_title}
            title={fields.why_paysey_title}
            description={fields.why_paysey_description}
            icons={fields.why_paysey_icon_box}
            image={fields.why_paysey_iamge}
            backgroundImage={fields.why_paysey_background_image}
          />
          <RewardsBenefits
            subTitle={fields.rewards_sub_title}
            title={fields.rewards_title}
            description={fields.rewards_description}
            cards={fields.rewards_card}
          />
          <PaymentJourney
            subTitle={fields.made_for_everyday_payments_sub_title}
            title={fields.made_for_everyday_payments_title}
            description={fields.made_for_everyday_payments_description}
            cards={fields.made_for_everyday_payments_card}
          />
        </div>
      </div>
    </div>
  )
}