import qrImage from '@/app/assets/Image/qrcard.svg'
import successfully from '@/app/assets/Image/successfully.gif'
import { SolutionCard } from '../solutioncard'
import QRScan from '@/components/qrscan'
import { Button, Text } from '@/components/ui'
import { ArrowUpRightIcon, LightLogoIcon, PayIcon } from '@/app/assets/svg/icon'
import Image from 'next/image'
import { AgentTimeline } from '../agenttimeline'
import type { SolutionsFields } from '@/types/solutions'

const RichTitle = ({ html, dark = false }: { html: string; dark?: boolean }) => (
  <span
    dangerouslySetInnerHTML={{
      __html: html.replace('<span>', `<span class="${dark ? 'gradient-text-white' : 'gradient-text-green'}">`),
    }}
  />
)

export function AudienceSolutions({ fields }: { fields: SolutionsFields }) {
  return (
    <div>
      <section className='stack container'>
        <div className='mx-auto flex flex-col gap-7 sm:gap-9 lg:gap-[50px]'>
          <SolutionCard
           id='personal'
            title={<RichTitle html={fields.personal_solution_section_title} />}
            subtitle={fields.personal_solution_section_sub_title}
            description={fields.personal_solution_section_description}
            services={fields.solutions_list}
            image={fields.personal_solution_section_image.url}
            imageAlt={fields.personal_solution_section_image.alt || fields.personal_solution_section_title}
            background='#EDF3ED'
            priority
          />

          <SolutionCard
          id='businesses'
            title={<RichTitle html={fields.business_solution_section_title} dark />}
            subtitle={fields.business_solution_sub_heading}
            description={fields.business_solution_description}
            services={fields.business_solution_list}
            image={fields.business_solution_section_image.url}
            imageAlt={fields.business_solution_section_image.alt || fields.business_solution_section_title}
            flexReverse
            imageAsBackground
            dark
            background='#082416'
            imageOverlay='linear-gradient(270deg, #082416 40.61%, rgba(8, 36, 22, 0) 77.68%)'
          />

          <div>
            <SolutionCard
                      id='merchants'

              title={<RichTitle html={fields.merchant_solution_section_title} />}
              subtitle={fields.merchant_solution_sub_heading}
              description={fields.merchant_solution_description}
              services={fields.merchant_solution_list}
              image={fields.merchant_solution_section_image.url}
              imageAlt={fields.merchant_solution_section_image.alt || fields.merchant_solution_section_title}
              background='#EDF3ED'
              priority
              className='xl:min-h-[846px]'
              // imageChildren={
              //   <div className='absolute bottom-11 lg:bottom-28 right-30 sm:right-40 lg:right-auto 2xl:right-100 bg-[#2D643A] px-5 lg:px-[30px] xl:px-[54px] pb-5 lg:pb-[50px] pt-5 lg:pt-[30px] rounded-[30px]'>
              //     <div className='space-y-5'>
              //       <Text size='body' className='text-white text-center' textKey='Scan to pay' />
              //       <div className='relative'>
              //         <QRScan className='size-[150px] md:size-[100px] xl:size-[241px] rounded-[15px]' lineClassName='right-11 left-11' src={qrImage} />
              //         <div className='absolute inset-0 flex-center z-10'><PayIcon /></div>
              //       </div>
              //     </div>
              //   </div>
              // }
            />

            <div className='relative isolate overflow-hidden rounded-[24px] bg-[linear-gradient(90deg,#029653_0%,#036B3A_100%)] px-5 py-7 sm:px-8 lg:px-[50px] lg:py-8'>
              {fields.agent_cta_bg_shape.url ? (
                <Image
                  src={fields.agent_cta_bg_shape.url}
                  alt=''
                  width={242}
                  height={216}
                  className='absolute right-0 top-0 h-full w-auto object-contain'
                />
              ) : <LightLogoIcon />}
              <div className='relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between'>
                <div className='space-y-[30px]'>
                  <div className='space-y-3'>
                    <Text size='h3' className='font-semibold text-white' textKey={fields.agent_cta_section_title} />
                    <Text size='normal' className='text-[#DFDFDF]' textKey={fields.agent_cta_description} />
                  </div>
                  <ul className='relative z-10 flex flex-wrap gap-2.5' aria-label={fields.agent_cta_section_title}>
                    {fields.agent_cta_list.map((benefit, index) => (
                      <li key={`${benefit}-${index}`} className='rounded-full bg-[#00000026] px-5 py-2.5'>
                        <Text size='normal' fontWeight={600} className='text-white' textKey={benefit} />
                      </li>
                    ))}
                  </ul>
                </div>
                <Button href="/about#getintouch" variant='secondary' className='bg-white'>
                  {fields.agent_cta_button_text}<ArrowUpRightIcon color='#029653' />
                </Button>
              </div>
            </div>
          </div>

          <SolutionCard
                    id='ngos'

            title={<RichTitle html={fields.ngo_solution_section_title} dark />}
            subtitle={fields.ngo_solution_sub_heading}
            description={fields.ngo_solution_description}
            services={fields.ngo_solution_list}
            image={fields.ngo_solution_section_image.url}
            imageAlt={fields.ngo_solution_section_image.alt || fields.ngo_solution_section_title}
            imageAsBackground
            dark
            flexReverse
            background='#082416'
          />

          <SolutionCard
                    id='government'

            title={<RichTitle html={fields.government_solution_section_title} />}
            subtitle={fields.government_solution_sub_heading}
            description={fields.government_solution_description}
            services={fields.government_solution_list}
            image={fields.government_solution_section_image.url}
            imageAlt={fields.government_solution_section_image.alt || fields.government_solution_section_title}
            background='#EDF3ED'
            priority
            // imageChildren={
            //   <div className='absolute right-10 top-0 md:top-auto bottom-28 bg-white p-5 xl:p-[30px] rounded-[30px] backdrop-blur-[50px] shadow-[0px_16px_32px_0px_#00000026] flex-center flex-col gap-5'>
            //     <Image src={successfully} alt='' className='size-[80px] md:size-[100px]' />
            //     <Text size='h5' fontWeight={600} className='max-w-[15rem] text-center' textKey='Payment Successfully Sent!' />
            //   </div>
            // }
          />

          <SolutionCard
                    id='agents'

            title={<RichTitle html={fields.agent_network_section_title} dark />}
            subtitle={fields.agent_network_sub_heading}
            description={fields.agent_network_description}
            services={fields.agent_network_list}
            image={fields.agent_network_section_image.url}
            imageAlt={fields.agent_network_section_image.alt || fields.agent_network_section_title}
            imageAsBackground
            flexReverse
            dark
            background='#082416'
          />
        </div>
      </section>

      <AgentTimeline
        badge={fields.become_agent_badge_text}
        title={fields.become_agent_section_title}
        description={fields.become_agent_section_description}
        image={fields.become_agent_image}
        steps={fields.become_agent_steps}
      />
    </div>
  )
}