'use client';

import { useId } from 'react';
import { ArrowUpRight, CalendarDays, UsersRound } from 'lucide-react';
import Image from 'next/image';

import * as Badge from '@/components/ui/badge';
import * as FancyButton from '@/components/ui/fancy-button';

const brands = [
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-1.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-1-dark.svg',
    alt: 'Synergy',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-3.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-3-dark.svg',
    alt: 'Horizon',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-2.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-2-dark.svg',
    alt: 'Catalyst',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-5.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-5-dark.svg',
    alt: 'Phoenix',
  },
  {
    src: 'https://alignui.com/images/blocks/brand-social-company-7.svg',
    darkSrc:
      'https://alignui.com/images/blocks/brand-social-company-7-dark.svg',
    alt: 'Solaris',
  },
];

function Pattern({ className, blue }: { className?: string; blue?: boolean }) {
  const gradientId = useId();

  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='246'
      height='296'
      viewBox='0 0 246 296'
      fill='none'
      className={className}
      aria-hidden='true'
    >
      <path
        d='M209.966 -124L279.566 -8L349.166 -124H488.366M209.966 -124L279.566 -240H418.766L488.366 -124M209.966 -124L140.366 -8L209.966 108H70.7662M209.966 -124H70.7662L1.1662 -8L70.7662 108M488.366 -124L418.766 -8H557.966L627.566 108M488.366 -124H627.566L697.166 -8L627.566 108M627.566 108L697.166 224L627.566 340H488.366M627.566 108H488.366L557.966 224L488.366 340M488.366 340L418.766 224L349.166 340H209.966M488.366 340L418.766 456H279.566L209.966 340M209.966 340H70.7662L1.1662 224L70.7662 108M209.966 340L279.566 224H140.366L70.7662 108'
        stroke={`url(#${gradientId})`}
        strokeOpacity='0.4'
        strokeWidth='2'
      />
      <defs>
        {blue ? (
          <linearGradient
            id={gradientId}
            x1='263.666'
            y1='-141.5'
            x2='-25.8339'
            y2='329'
            gradientUnits='userSpaceOnUse'
          >
            <stop stopColor='#1F3BAD' />
            <stop offset='1' stopColor='#122368' stopOpacity='0.02' />
          </linearGradient>
        ) : (
          <linearGradient
            id={gradientId}
            x1='277.166'
            y1='-56.5'
            x2='-25.8338'
            y2='329'
            gradientUnits='userSpaceOnUse'
          >
            <stop stopColor='#D1D1D1' />
            <stop offset='1' stopColor='#F7F7F7' />
          </linearGradient>
        )}
      </defs>
    </svg>
  );
}

export default function CommunityConsultationCta() {
  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col items-start gap-8 lg:items-center lg:gap-12'>
          <div className='flex w-full flex-col items-start gap-2 lg:items-center'>
            <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'
            >
              Powered by real innovation
            </Badge.Root>
            <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h3 w-full font-[550] lg:text-center'>
              Ready to unlock new opportunities?
            </h2>
          </div>

          <div className='flex w-full flex-col gap-4 lg:flex-row lg:gap-6'>
            <article className='bg-bg-weak-50 relative flex flex-1 flex-col items-start gap-6 overflow-hidden rounded-3xl p-6 lg:gap-8 lg:rounded-[28px] lg:p-12'>
              <Pattern className='pointer-events-none absolute -top-12 left-[188px] lg:top-0 lg:right-0 lg:left-auto' />
              <UsersRound
                className='text-primary-base relative size-6 lg:size-8'
                aria-hidden='true'
              />
              <div className='relative flex w-full flex-col gap-2'>
                <h3 className='text-label-lg text-text-strong-950 lg:text-title-h5 lg:font-[550]'>
                  Join our community
                </h3>
                <p className='text-paragraph-sm text-text-sub-600 lg:text-paragraph-md'>
                  Sign up to access resources, templates, and expert tips
                  instantly.
                </p>
              </div>
              <FancyButton.Root
                type='button'
                variant='primary'
                size='medium'
                className='shadow-complex-7 bg-primary-base relative w-full cursor-pointer gap-1 rounded-xl pr-3.5 pl-4 after:opacity-0 hover:after:opacity-[.24] lg:w-fit'
              >
                Join our community
                <FancyButton.Icon
                  as={ArrowUpRight}
                  className='text-static-white/[0.64] mx-0 size-5'
                  aria-hidden='true'
                />
              </FancyButton.Root>
            </article>

            <article className='bg-primary-base relative flex flex-1 flex-col items-start gap-6 overflow-hidden rounded-3xl p-6 lg:gap-8 lg:rounded-[28px] lg:p-12'>
              <Pattern
                blue
                className='pointer-events-none absolute -top-12 left-[188px] lg:top-0 lg:right-0 lg:left-auto'
              />
              <CalendarDays
                className='text-static-white relative size-6 lg:size-8'
                aria-hidden='true'
              />
              <div className='text-static-white relative flex w-full flex-col gap-2'>
                <h3 className='text-label-lg lg:text-title-h5 lg:font-[550]'>
                  Book a free consultation
                </h3>
                <p className='text-paragraph-sm lg:text-paragraph-md opacity-80'>
                  Chat with a product expert to see how our platform fits your
                  needs.
                </p>
              </div>
              <button
                type='button'
                className='border-static-white text-static-white relative flex w-full cursor-pointer items-center justify-center gap-1 rounded-xl border py-2.5 pr-3 pl-3.5 transition-colors hover:bg-white/10 lg:w-fit lg:justify-start'
              >
                <span className='text-label-sm'>Book a call</span>
                <ArrowUpRight className='size-5' aria-hidden='true' />
              </button>
            </article>
          </div>

          <div className='flex w-full flex-col items-start gap-6 lg:items-center'>
            <p className='text-label-sm text-text-soft-400 lg:text-center'>
              Preferred by global leaders in digital finance
            </p>
            <div className='-mx-6 w-[calc(100%+48px)] lg:mx-0 lg:w-full'>
              <div className='no-scrollbar flex items-center gap-7 overflow-x-auto px-6 lg:justify-center lg:gap-12 lg:overflow-visible lg:px-0'>
                {brands.map((brand) => (
                  <div key={brand.alt} className='flex shrink-0 items-center'>
                    <Image
                      src={brand.src}
                      alt={brand.alt}
                      width={106}
                      height={24}
                      className='h-6 w-auto dark:hidden'
                    />
                    <Image
                      src={brand.darkSrc}
                      alt={brand.alt}
                      width={106}
                      height={24}
                      className='hidden h-6 w-auto dark:block'
                    />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}