import React from 'react'
import { HeroSection } from '../herosection'
import { AboutCompany } from '../aboutcompany'
import { WhyPaySey } from '../whypaysey'
import { SecurityAndTrust } from '../securityandtrust'
import { ConnecteDecosystem } from '../connectedecosystem'
import { Faq } from '../faq'
import { GetInTouch } from '../getintouch'
import { Button, Text } from '@/components/ui'
import { ArrowUpRightIcon, LightLogo } from '@/app/assets/svg/icon'
import type { AboutFields } from '@/types/about'
import Image from 'next/image'

export const AboutSection = ({ fields }: { fields: AboutFields }) => {
  return (
    <div>
        <HeroSection
          title={fields.banner_title}
          description={fields.banner_description}
        />
                 <div  className='bg-white relative '>
                    <AboutCompany sections={fields.mission_list} />
                    <WhyPaySey
                      badge={fields.why_paysey_badge_text}
                      title={fields.why_paysey_section_title}
                      description={fields.why_paysey_description}
                      items={fields.why_paysey_list}
                    />
                    <SecurityAndTrust
                      badge={fields.trust_badge_text}
                      title={fields.trust_section_title}
                      description={fields.trust_description}
                    />
                    <ConnecteDecosystem
                      badge={fields.ecosystem_badge_title}
                      title={fields.ecosystem_section_title}
                      description={fields.ecosystem_description}
                      items={fields.ecosystem_list}
                    />
                    <Faq
                      badge={fields.faqs_badge_title}
                      title={fields.faqs_section_title}
                      description={fields.faqs_description}
                      items={fields.faqs_list}
                    />
                    {/* <div className='stack container'>
                      
                    <div className="bg-[linear-gradient(90deg,#029653_0%,#036B3A_100%)] rounded-[24px] p-5 lg:p-[60px] space-y-[30px] relative overflow-hidden">
                      <div className='space-y-3'>
                        
                  <Text size="h2" className='text-white' textKey={fields.cta_title}/>
                  <Text size="normal" className='text-white' textKey={fields.cta_description}/>
                      </div>
                                    <Button href={fields.button_url} variant="secondary" className="bg-white hover:text-secondary">
                                      {fields.cta_button_text} <ArrowUpRightIcon color="#029653" />
                                    </Button>
                                    <div className='absolute right-[30px] top-[17px]'>
                                      {fields.cta_logo.url ? (
                                        <Image src={fields.cta_logo.url} alt={fields.cta_logo.alt || ''} width={160} height={160} />
                                      ) : (
                                        <LightLogo/>
                                      )}
                                    </div>
                      
                    </div>
                    </div> */}
                  {/* <div className='stack'>
                      <div className='bg-[#DFDFDF] w-full h-px  '/>
                  </div> */}
                    <GetInTouch
                      badge={fields.contact_badge_text}
                      title={fields.contact_section_title}
                      description={fields.contact_description}
                      contactInfo={fields.contact_info_list}
                      formTitle={fields.contact_form_title}
                      formDescription={fields.contact_form_description}
                      formFieldLabels={fields.form_fields_label}
                      submitButtonText={fields.submit_button_text}
                    />
                 </div>
    </div>
  )
}