'use client';

import {
  ChartSpline,
  ChevronDown,
  CircleCheck,
  Gauge,
  Landmark,
} from 'lucide-react';
import Image from 'next/image';

import * as Badge from '@/components/ui/badge';

export default function SecureBankTransferSteps() {
  return (
    <div className='bg-bg-white-0 w-full py-10 pb-6 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <div className='flex flex-col gap-8 lg:gap-12'>
          <div className='flex w-full flex-col items-start gap-4 lg:items-center'>
            <div className='flex w-full flex-col items-start gap-3 lg:items-center'>
              <Badge.Root
                variant='stroke'
                className='text-label-sm text-text-sub-600 bg-bg-weak-50 h-7 w-fit !gap-1.5 rounded-[9px] pr-[10px] pl-2 normal-case ring-transparent'
              >
                <Badge.Icon
                  as={Gauge}
                  className='text-primary-base mx-0 size-4'
                />
                How it works?
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 w-full font-[550] lg:text-center'>
                Faster transfers, smarter banking
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 w-full lg:max-w-[528px] lg:text-center'>
              Send funds in seconds, automate transactions, and keep your{' '}
              <br className='hidden md:block' />
              <span className='text-label-md text-text-sub-600'>
                team focused on growth.
              </span>
            </p>
          </div>

          <div className='flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-9'>
            <div className='flex flex-col gap-4 lg:flex-1 lg:gap-6'>
              <div className='border-bg-weak-50 bg-bg-weak-50 relative h-[240px] overflow-hidden rounded-[20px] border'>
                <div className='bg-bg-white-0 shadow-custom-input-4 absolute top-1/2 left-1/2 flex w-[calc(100%-2rem)] max-w-[320px] -translate-x-1/2 -translate-y-1/2 items-center gap-3 rounded-[20px] p-4'>
                  <div className='relative flex shrink-0'>
                    <div className='shadow-regular-sm absolute top-0 -right-1.5 flex size-4.5'>
                      <Image
                        src='https://alignui.com/images/blocks/star-icon.svg'
                        alt='Verified'
                        width={18}
                        height={18}
                        className='size-4.5 rounded-full object-cover'
                      />
                    </div>
                    <Image
                      src='https://alignui.com/images/blocks/hiw-4-image-1.jpg'
                      alt='James Brown'
                      width={40}
                      height={40}
                      className='size-10 rounded-full object-cover'
                    />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <p className='text-label-sm text-text-strong-950'>
                      James Brown
                    </p>
                    <p className='text-paragraph-xs text-text-sub-600'>
                      james@alignui.com
                    </p>
                  </div>
                  <span className='bg-faded-lighter text-faded-base text-label-xs rounded-full px-2 py-0.5'>
                    A-52112
                  </span>
                </div>
              </div>
              <div className='flex items-center gap-4'>
                <div className='bg-bg-weak-50 flex shrink-0 items-center rounded-full p-2.5'>
                  <CircleCheck className='text-primary-base size-6' />
                </div>
                <div className='flex min-w-0 flex-1 flex-col gap-1'>
                  <h3 className='text-label-md text-text-strong-950'>
                    Verify your account
                  </h3>
                  <p className='text-paragraph-sm text-text-sub-600'>
                    Confirm identity to secure every transfer.
                  </p>
                </div>
              </div>
            </div>

            <div className='flex flex-col gap-4 lg:flex-1 lg:gap-6'>
              <div className='border-bg-weak-50 bg-bg-weak-50 relative h-[240px] overflow-hidden rounded-[20px] border'>
                <div className='bg-bg-white-0 shadow-custom-input-4 absolute top-1/2 left-1/2 flex w-[calc(100%-2rem)] max-w-[320px] -translate-x-1/2 -translate-y-1/2 items-center gap-3.5 rounded-[20px] p-4'>
                  <div className='bg-information-lighter flex shrink-0 items-center justify-center rounded-full p-2.5'>
                    <ChartSpline className='text-primary-base size-5' />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <p className='text-label-sm text-text-strong-950'>
                      Summit Finance International
                    </p>
                    <p className='text-paragraph-xs text-text-sub-600'>
                      Account ••9876 · Routing ••5432
                    </p>
                  </div>
                </div>
              </div>
              <div className='flex items-center gap-4'>
                <div className='relative shrink-0'>
                  <div
                    className='absolute -inset-[2px] animate-spin rounded-full'
                    style={{
                      animationDuration: '4s',
                      background:
                        'conic-gradient(from 0deg, transparent 30%, var(--color-primary-base) 100%)',
                    }}
                  />
                  <div className='bg-bg-white-0 relative flex items-center rounded-full p-2.5'>
                    <span className='text-primary-base text-label-md w-6 text-center'>
                      02
                    </span>
                  </div>
                </div>
                <div className='flex min-w-0 flex-1 flex-col gap-1'>
                  <h3 className='text-label-md text-text-strong-950'>
                    Connect your bank
                  </h3>
                  <p className='text-paragraph-sm text-text-sub-600'>
                    Link accounts for seamless transactions.
                  </p>
                </div>
              </div>
            </div>

            <div className='flex flex-col gap-4 lg:flex-1 lg:gap-6'>
              <div className='border-bg-weak-50 bg-bg-weak-50 relative h-[240px] overflow-hidden rounded-[20px] border'>
                <div className='bg-bg-white-0 shadow-custom-input-4 absolute top-1/2 left-1/2 flex w-[calc(100%-2rem)] max-w-[320px] -translate-x-1/2 -translate-y-1/2 items-center gap-3.5 rounded-[20px] py-4 pr-5 pl-4'>
                  <div className='bg-bg-white-0 border-stroke-soft-200 shadow-regular-xs flex shrink-0 items-center justify-center rounded-full border p-2.5'>
                    <Landmark className='text-text-sub-600 size-5' />
                  </div>
                  <div className='flex flex-1 flex-col gap-1'>
                    <p className='text-label-sm text-text-strong-950'>
                      Operations Account
                    </p>
                    <p className='text-paragraph-xs text-text-sub-600'>
                      Available: $15,000.00
                    </p>
                  </div>
                  <div className='bg-bg-white-0 border-stroke-soft-200 shadow-regular-xs flex shrink-0 items-center justify-center rounded-[6px] border p-0.5'>
                    <ChevronDown className='text-text-sub-600 size-5' />
                  </div>
                </div>
              </div>
              <div className='flex items-center gap-4'>
                <div className='bg-bg-weak-50 flex shrink-0 items-center rounded-full p-2.5'>
                  <span className='text-text-sub-600 text-label-md w-6 text-center'>
                    03
                  </span>
                </div>
                <div className='flex min-w-0 flex-1 flex-col gap-1'>
                  <h3 className='text-label-md text-text-sub-600'>
                    Send your payment
                  </h3>
                  <p className='text-paragraph-sm text-text-sub-600'>
                    Transfer funds locally or worldwide fast.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}