'use client';

import {
  CircleCheckBig,
  FileCog,
  FolderLock,
  type LucideIcon,
} from 'lucide-react';
import Image from 'next/image';

import * as Badge from '@/components/ui/badge';
import { cn } from '@/utils/cn';

const tabs: {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
  active?: boolean;
}[] = [
  {
    id: '1',
    icon: CircleCheckBig,
    title: 'Real-time tracking',
    description: 'Monitor live market data instantly',
    active: true,
  },
  {
    id: '2',
    icon: FileCog,
    title: 'Smart asset management',
    description: 'Manage holdings easily',
  },
  {
    id: '3',
    icon: FolderLock,
    title: 'Secure transactions',
    description: 'Trade with confidence',
  },
];

export default function PortfolioManagementFeatureShowcase() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <div className='flex flex-col items-center 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='lighter'
                className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
              >
                Trusted by investors
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550] lg:text-center'>
                Monitor portfolios with complete control
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 lg:max-w-[570px] lg:text-center'>
              Track performance, manage assets, and execute trades. All from one
              transparent dashboard built for{' '}
              <span className='text-label-md text-text-sub-600'>accuracy</span>{' '}
              and{' '}
              <span className='text-label-md text-text-sub-600'>insight.</span>
            </p>
          </div>

          <div className='flex w-full flex-col items-center gap-8'>
            <div className='relative w-full'>
              <div className='bg-stroke-soft-200 h-px w-full' />
              <div className='absolute inset-x-0 -top-px hidden gap-12 lg:flex'>
                <div className='flex flex-1 justify-center'>
                  <div className='bg-primary-base mt-px h-px w-6' />
                </div>
                <div className='w-px shrink-0' />
                <div className='flex-1' />
                <div className='w-px shrink-0' />
                <div className='flex-1' />
              </div>
            </div>

            <div className='border-stroke-soft-200 relative flex w-full flex-col gap-8 border-l pl-6 lg:flex-row lg:items-stretch lg:gap-12 lg:border-l-0 lg:pl-0'>
              <div className='bg-primary-base absolute top-0 left-0 -ml-px h-12 w-px lg:hidden' />
              {tabs.map((tab, index) => (
                <div key={tab.id} className='contents'>
                  {index > 0 ? (
                    <div className='bg-stroke-soft-200 hidden w-px shrink-0 self-stretch lg:block' />
                  ) : null}
                  <div className='flex flex-col items-start gap-4 lg:flex-1 lg:items-center'>
                    <tab.icon
                      className={cn(
                        'hidden size-6 lg:block',
                        tab.active ? 'text-primary-base' : 'text-text-soft-400',
                      )}
                    />
                    <div className='flex flex-col items-start gap-1 lg:items-center lg:text-center'>
                      <span
                        className={cn(
                          'text-label-md lg:text-label-lg',
                          tab.active
                            ? 'text-text-strong-950'
                            : 'text-text-sub-600',
                        )}
                      >
                        {tab.title}
                      </span>
                      <span
                        className={cn(
                          'text-paragraph-sm lg:text-paragraph-md',
                          tab.active
                            ? 'text-text-sub-600'
                            : 'text-text-soft-400',
                        )}
                      >
                        {tab.description}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className='hidden w-full lg:block'>
              <Image
                src='https://alignui.com/images/blocks/features-08.png'
                alt='Portfolio dashboard'
                width={2452}
                height={1374}
                className='h-auto w-full dark:hidden'
              />
              <Image
                src='https://alignui.com/images/blocks/features-08-dark.png'
                alt='Portfolio dashboard'
                width={2452}
                height={1356}
                className='hidden h-auto w-full dark:block'
              />
            </div>

            <div className='mx-auto w-full max-w-[540px] lg:hidden'>
              <Image
                src='https://alignui.com/images/blocks/features-08-mobile.png'
                alt='Portfolio dashboard'
                width={736}
                height={1640}
                className='h-auto w-full dark:hidden'
              />
              <Image
                src='https://alignui.com/images/blocks/features-08-mobile-dark.png'
                alt='Portfolio dashboard'
                width={736}
                height={1640}
                className='hidden h-auto w-full dark:block'
              />
            </div>

            <p className='text-paragraph-sm text-text-soft-400 hidden text-center lg:block'>
              A reliable way to manage portfolios and <br />
              <span className='text-text-sub-600'>
                trade securely with full visibility.
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}