'use client';

import * as React from 'react';
import clsx from 'clsx';

import {
  RealTimeIcon,
  ChatbotIcon,
  ImageIcon,
  NLPIcon,
  AdIcon,
} from '@/components/Icon';

import styles from './section.module.css';

const caseItem = [
  {
    id: 'case-1',
    icon: <RealTimeIcon />,
    title: 'Real-Time Recommendation Systems',
    desc: 'Understand user preferences and similarities between products to deliver accurate recommendations',
  },
  {
    id: 'case-2',
    icon: <ChatbotIcon />,
    title: 'Chatbots and Virtual Assistants',
    desc: 'Handle numerous concurrent customer interactions using vector search to provide quick and accurate responses',
  },
  {
    id: 'case-3',
    icon: <ImageIcon />,
    title: 'Image and Video Recognition',
    desc: 'Implement robust image and video analysis for content moderation',
  },
  {
    id: 'case-4',
    icon: <NLPIcon />,
    title: 'NLP Applications',
    desc: 'Perform sentiment analysis, language translation, and text summarization for more accurate processing',
  },
  {
    id: 'case-5',
    icon: <AdIcon />,
    title: 'Ad Targeting and Personalization',
    desc: 'Analyze user behavior and preferences to serve the most relevant ads',
  },
];

export default function UseCase(props: any) {
  return (
    <section className="custom-style-bg-bar">
      <div className="mx-auto max-w-[1512px] px-4 sm:px-8 py-20 lg:px-12">
        <h3 className="text-center leading-tight">
          Key Use Cases Where Scalability
          <br />
          and Vector Search Meet
        </h3>
        <div className="mt-16 grid grid-cols-1 gap-12 md:grid-cols-4 md:gap-8 lg:gap-x-28 lg:gap-y-12">
          {caseItem.map((item) => (
            <div
              className={clsx(styles.card, 'md:col-span-2', {
                ['md:col-start-2']: item.id === 'case-5',
              })}
              key={item.id}
            >
              <div className={clsx(styles.cardContainer)}>
                {item.icon}
                <div className="my-4 text-xl font-bold">{item.title}</div>
                <p>{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}