'use client';

import * as React from 'react';
import NextLink from 'next/link';

import { goToCloudSignupClick } from '@/components/GTM';
import { CoreValueFastBoostrap, AIDBIcon, AIIcon } from '@/components/Icon';

import SQLTyper from '@/app/ai/_components/SQLTyper';
import { CoreValueItem } from '@/app/_components/sections/CoreValue';

import { CLOUD_FREE_TRIAL, DOC_VECTOR_SEARCH } from '@/constant/url';

const coreValueList = [
  {
    id: 'all-in-one',
    icon: AIDBIcon,
    title: 'MySQL & Vector All in One',
    description:
      'Eliminate redundancy. Store vector embeddings alongside MySQL data directly. No new DB, no data duplication. Just SQL simplicity.',
  },
  {
    id: 'join-multi-model',
    icon: CoreValueFastBoostrap,
    title: 'Join Multi-model Data with Ease',
    description:
      'Leverage familiar SQL to join, index, and query operational and vector data together, enabling advanced semantic searches with ease.',
  },
  {
    id: 'use-case',
    icon: AIIcon,
    title: 'Vast Array of Use Cases',
    description:
      'Powering RAG, semantic searches and more, with integrations like OpenAI, Hugging Face, LangChain, and LlamaIndex, etc.',
  },
];

export default function Hero(props: any) {
  return (
    <section className="mx-auto grid min-h-screen max-w-[1512px] grid-cols-12 items-center justify-between px-4 sm:px-8 lg:px-12">
      <div className="col-span-12 my-10 lg:col-span-7 lg:pr-8">
        <h1
          className="mb-6 items-center justify-center bg-clip-text font-lexend text-[2.5rem] leading-snug text-transparent"
          style={{
            backgroundImage: 'var(--Ad-bar-Gradient)',
          }}
        >
          The Most Advanced SQL-compatible Vector Solution
          <span className="ml-2 whitespace-nowrap rounded-[18px] border border-[#11A6ED] px-3 py-2 align-middle text-xs font-normal text-[#0CA6F2]">
            Public Beta
          </span>
        </h1>
        <p className="mb-10 text-base text-darkgrey-300">
          TiDB is introducing a built-in vector search to the SQL database
          family, enabling support for your AI applications without requiring a
          new database or additional technical stacks. With vectors as a new
          data type in MySQL, you can now store and search for vectors directly
          using SQL.
        </p>
        <div className="flex gap-4">
          <NextLink
            href={CLOUD_FREE_TRIAL}
            target="_blank"
            className="flex text-base font-semibold sm:block"
            onClick={goToCloudSignupClick({
              page_category: '',
              page_category2: '',
              button_name: 'Start Free',
              position: 'hero',
            })}
          >
            <span className="custom-style-button">Start Free</span>
          </NextLink>
          <NextLink
            href={DOC_VECTOR_SEARCH}
            target="_blank"
            className="flex items-center"
          >
            <span className="pr-1 underline">Documentation</span>→
          </NextLink>
        </div>
      </div>
      <div className="col-span-12 my-10 lg:col-span-5">
        <SQLTyper />
      </div>
      <div className="col-span-12 grid gap-4 gap-y-16 py-14 sm:grid-cols-1 sm:gap-y-8 lg:grid-cols-3 lg:gap-y-4">
        {coreValueList.map((item) => (
          <CoreValueItem
            key={item.id}
            icon={<item.icon className="h-8" />}
            title={item.title}
            description={item.description}
          />
        ))}
      </div>
    </section>
  );
}