import Noise from '@/components/elements/noise';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

const COLUMNS_DATA = [
  {
    image: '/images/benefits-showcase/1.webp',
    imageAlt: 'Global Users',
    cardTitle: '21M',
    cardSubtitle: 'Global Users',
    cardContent:
      'Achieve greater accuracy and efficiency with our advanced toolkit.',
    cardPosition: 'bottom' as const,
  },
  {
    image: '/images/benefits-showcase/2.webp',
    imageAlt: 'Open AI.',
    cardTitle: 'Open AI.',
    name: 'Grace Young',
    title: 'CMO at Open AI.',
    cardContent:
      'Clear task ownership, fast collaboration, and better visibility lead to better decisions and faster delivery.',
    cardPosition: 'inside' as const,
  },
  {
    image: '/images/benefits-showcase/3.webp',
    imageAlt: 'Minimized Errors',
    cardTitle: '97%',
    cardSubtitle: 'Minimized Errors',
    cardContent:
      'Achieve greater accuracy and efficiency with our advanced toolkit.',
    cardPosition: 'top' as const,
  },
];

export default function BenefitsShowcase() {
  return (
    <section className="section-padding relative">
      <Noise />
      <div className="bigger-container">
        <h2 className="mb-12 text-center text-4xl leading-none font-medium tracking-tight lg:mb-16 lg:text-5xl">
          See the Benefits Firsthand
        </h2>

        {/* Three Column Grid */}
        <div className="mx-auto grid max-w-sm gap-6 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8">
          {COLUMNS_DATA.map((column, index) => {
            if (column.cardPosition === 'inside') {
              return <InsideCardColumn key={index} {...column} />;
            }

            return <TopBottomCardColumn key={index} {...column} />;
          })}
        </div>
      </div>
    </section>
  );
}

// Column Components
interface ColumnProps {
  image: string;
  imageAlt: string;
  cardTitle?: string;
  cardSubtitle?: string;
  cardContent: string;
  cardFooter?: string;
  cardPosition: 'top' | 'inside' | 'bottom';
  name?: string;
  title?: string;
}

function TopBottomCardColumn({
  image,
  imageAlt,
  cardTitle,
  cardSubtitle,
  cardContent,
  cardPosition,
}: ColumnProps) {
  return (
    <div className="flex flex-col gap-6">
      {cardPosition === 'bottom' && (
        <div className="relative aspect-[389/384] w-full">
          <img
            src={image}
            alt={imageAlt}
            className="size-full rounded-xl border object-cover"
          />
        </div>
      )}
      <Card className="">
        <CardHeader>
          <CardTitle className="text-4xl font-medium">{cardTitle}</CardTitle>
          <p className="text-base font-semibold">{cardSubtitle}</p>
        </CardHeader>
        <CardContent>
          <CardDescription className="">{cardContent}</CardDescription>
        </CardContent>
      </Card>
      {cardPosition === 'top' && (
        <div className="relative aspect-[389/384] w-full">
          <img
            src={image}
            alt={imageAlt}
            className="size-full rounded-xl border object-cover"
          />
        </div>
      )}
    </div>
  );
}

function InsideCardColumn({
  image,
  imageAlt,
  cardTitle,
  name,
  title,
  cardContent,
}: ColumnProps) {
  return (
    <div className="flex h-full flex-col">
      <div className="relative aspect-[326/576] w-full flex-1 overflow-hidden rounded-xl border lg:aspect-auto">
        <img src={image} alt={imageAlt} className="size-full object-cover" />
        {/* Overlay card */}
        <Card className="absolute right-6 bottom-6 left-6 gap-4">
          <CardHeader className="gap-0">
            <CardTitle className="flex items-center gap-2 text-sm font-medium">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="currentColor"
                className="text-foreground"
              >
                <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
              </svg>
              {cardTitle}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <CardDescription className="">{cardContent}</CardDescription>
          </CardContent>
          <CardFooter className="mt-2 block">
            <span className="font-medium">{name}</span>{' '}
            <span className="text-sm">{title}</span>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}
