'use client';

import { CheckCircle2, Mail } from 'lucide-react';
import Image from 'next/image';

import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import * as Input from '@/components/ui/input';

const features = [
  'Real-time updates across all assets',
  'Custom alerts for key movements',
  'Secure synchronization across devices',
];

export default function CryptoMarketNewsletterSection() {
  return (
    <div className='bg-bg-white-0 w-full px-2 py-8 lg:px-0 lg:py-20'>
      <div className='mx-auto w-full max-w-7xl lg:px-7'>
        <div className='shadow-custom-input bg-bg-white-0 flex flex-col gap-8 overflow-hidden rounded-[24px] pt-6 lg:flex-row lg:items-end lg:gap-[40px] lg:rounded-[32px] lg:pt-20 lg:pr-[142px] lg:pb-0 lg:pl-20 xl:gap-[142px]'>
          <div className='flex flex-col gap-8 px-6 lg:w-[430px] lg:shrink-0 lg:gap-10 lg:px-0 lg:pb-20'>
            <div className='flex flex-col gap-4'>
              <div className='flex flex-col gap-3'>
                <Badge.Root
                  variant='lighter'
                  className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
                >
                  Finance & Crypto
                </Badge.Root>
                <h3 className='text-title-h4 text-text-strong-950 lg:text-title-h3 font-[550]'>
                  Track smarter, make confident moves
                </h3>
              </div>
              <p className='text-paragraph-md text-text-sub-600'>
                Monitor live market trends, analyze your portfolio, and{' '}
                <span className='text-label-md text-text-sub-600'>
                  make data-driven investment decisions.
                </span>
              </p>
            </div>

            <div className='flex flex-col gap-4 lg:gap-2.5'>
              <div className='flex flex-col gap-2 lg:flex-row lg:gap-2.5'>
                <Input.Root className='shadow-custom-input flex-1 rounded-xl before:content-none'>
                  <Input.Wrapper size='medium'>
                    <Input.Icon
                      as={Mail}
                      className='group-has-[:placeholder-shown]:text-text-disabled-300 size-5'
                    />
                    <Input.Input
                      id='newsletter-email'
                      type='email'
                      placeholder='Your email address...'
                      className='text-text-strong-950 text-label-sm placeholder:text-text-soft-400 placeholder:text-label-sm'
                    />
                  </Input.Wrapper>
                </Input.Root>
                <div className='text-paragraph-xs text-text-soft-400 lg:hidden'>
                  Your data is safe{' '}
                  <span className='text-text-disabled-300'>—</span>{' '}
                  <span className='text-label-xs text-text-sub-600'>
                    view our policy
                  </span>
                </div>
                <Button.Root
                  variant='primary'
                  mode='filled'
                  size='medium'
                  className='bg-primary-base mt-2 cursor-pointer rounded-xl px-4 lg:mt-0'
                >
                  Join the list
                </Button.Root>
              </div>
              <div className='text-paragraph-xs text-text-soft-400 hidden lg:block'>
                Your data is safe{' '}
                <span className='text-text-disabled-300'>—</span>{' '}
                <span className='text-label-xs text-text-sub-600'>
                  view our policy
                </span>
              </div>
            </div>

            <div className='flex flex-col gap-4'>
              {features.map((feature) => (
                <div key={feature} className='flex items-center gap-2.5'>
                  <CheckCircle2 className='text-primary-base size-3.5 shrink-0' />
                  <span className='text-paragraph-sm text-text-sub-600'>
                    {feature}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <div className='flex flex-1 items-end justify-end px-6 lg:px-0'>
            <Image
              src='https://alignui.com/images/blocks/newsletter-6-image.png'
              alt='Crypto dashboard'
              width={860}
              height={1036}
              className='mx-auto block w-full max-w-[540px] object-contain lg:mx-0 lg:w-[340px] lg:max-w-none xl:w-[430px]'
            />
          </div>
        </div>
      </div>
    </div>
  );
}