'use client';

import * as React from 'react';
import clsx from 'clsx';
import NextLink from 'next/link';
import styles from './section.module.css';

import {
  FeatAutoScale,
  ElasticWorkload,
} from '@/app/_components/sections/Svg';
import { VercelLogoFilled, OpenAILogo, CheckIcon } from '@/components/Icon';
import { CLOUD_FREE_TRIAL } from '@/constant/url';
import { goToCloudSignupClick } from '@/components/GTM';

export default function Feature(props: any) {
  return (
    <section
      className="mb-8 flex w-full flex-col items-center justify-center gap-4 bg-center bg-repeat sm:gap-8 md:gap-12 lg:gap-16 xl:gap-20"
      style={{
        // backgroundImage: `url(/bg-vector.svg)`,
        backgroundImage: `linear-gradient(to bottom, transparent 0%, #000000bd 70%, #0e0e0e 95%), url("https://static.pingcap.com/files/2024/06/26065103/bg-vector.svg")`,
      }}
    >
      <ContentWithPic
        pic={
          <FeatAutoScale
            className={clsx(
              styles.svgAutoScale,
              'h-auto max-h-[256px] w-full max-w-[415px]',
            )}
          />
        }
        className="pt-8 md:pt-24"
      >
        <h3 className="pb-2 md:pb-4 lg:pb-8">Bigger & Better</h3>
        <ul className="list-inside list-none text-base leading-8 lg:text-lg lg:leading-10">
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Fully managed
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Scale from{' '}
            <span className="bg-action px-1 font-bold text-black">
              0
            </span> to{' '}
            <span className="bg-action px-1 font-bold text-black">PB</span>{' '}
            without changing your app
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Non-blocking schema changes
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Support high-performance analytics queries
          </li>
        </ul>
      </ContentWithPic>

      <ContentWithPic
        pic={
          <ElasticWorkload
            className={clsx(
              styles.svgElasticWorkload,
              'h-auto max-h-[300px] w-full',
            )}
          />
        }
        reverse
        className="pt-8 md:pt-24"
      >
        <h3 className="pb-2 md:pb-4 lg:pb-8">Faster & Easier Serverless</h3>
        <ul className="list-inside list-none text-base leading-8 lg:text-lg lg:leading-10">
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Free for 25GiB storage and 250 million reads{' '}
            {/* <a
              href={PRODUCT_TIDB_PRICING}
              target="_blank"
              className="text-action"
            >
              → View Pricing
            </a> */}
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Only pay for what you use beyond
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Scale instantly in response to your workload
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Integrate with modern stack easily like{' '}
            <span>
              <VercelLogoFilled className="hidden w-5" /> Vercel
            </span>
            ,{' '}
            <span>
              <OpenAILogo className="hidden w-5" /> ChatGPT
            </span>
            , etc.
          </li>
        </ul>
      </ContentWithPic>

      <ContentWithPic
        pic={<embed src="https://static.pingcap.com/files/2024/06/26065432/vector-animation.svg" type="image/svg+xml" className='h-auto max-h-[300px] w-full' />}
        className="pt-8 md:pt-24"
      >
        <h3 className="pb-2 md:pb-4 lg:pb-8">
          Smarter & Scalable
          <br />
          AI-powered Apps
        </h3>
        <ul className="list-inside list-none text-base leading-8 lg:text-lg lg:leading-10">
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Leverage vector search to build intelligent AI applications
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Implement Graph-based RAG for high-accuracy results
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Native integrations with leading AI vendors and frameworks
          </li>
          <li>
            <CheckIcon className="mr-2 inline-block h-5 w-auto" />
            Single database for both vector search and data embeddings
          </li>
        </ul>
      </ContentWithPic>

      <TryBtn />
    </section>
  );
}

const ContentWithPic = (props: {
  children: React.ReactNode;
  pic: React.ReactNode;
  reverse?: boolean;
  className?: string;
}) => {
  const { children, pic, reverse, className } = props;

  return (
    <div
      className={clsx(
        'flex w-full max-w-7xl flex-col items-center justify-center gap-4 p-8 md:gap-8 lg:gap-16',
        {
          ['md:flex-row-reverse']: reverse,
          ['md:flex-row']: !reverse,
        },
        className,
      )}
    >
      <div className="flex-1">{children}</div>
      <div className="flex flex-1 items-start">{pic}</div>
    </div>
  );
};

const TryBtn = () => {
  return (
    <div className="flex w-full items-center justify-center border-y border-[#474747] px-6 py-12 lg:px-8">
      <div
        className="hidden h-[1px] w-full max-w-[180px] lg:block"
        style={{
          background: `linear-gradient(270deg, #FFF 0%, rgba(34, 34, 34, 0.00) 100%)`,
        }}
      />
      <NextLink
        href={CLOUD_FREE_TRIAL}
        target="_blank"
        onClick={goToCloudSignupClick({
          page_category: '',
          page_category2: '',
          button_name: 'Start Free. Explore now →',
          position: 'body',
        })}
      >
        <div
          className={clsx(
            'relative grid overflow-hidden rounded-[32px] px-4 py-3 hover:opacity-90 md:px-8 lg:px-12 lg:py-4',
            styles.featureBtn,
          )}
        >
          <span className="hidden md:block">
            <span
              className={clsx(
                'absolute inset-0 rotate-0 overflow-hidden rounded-[32px]',
                styles.featureBtnSpark,
              )}
            />
          </span>
          <span
            className={clsx(
              'absolute inset-[1px] hidden rounded-[32px] md:z-[1] md:block',
              styles.featureBtnBackdrop,
            )}
          />
          <span className={clsx('text-xl leading-8 text-white md:z-[2]')}>
            Start Free. Explore now →
          </span>
        </div>
      </NextLink>
      <div
        className="hidden h-[1px] w-full max-w-[180px] rotate-180 lg:block"
        style={{
          background: `linear-gradient(270deg, #FFF 0%, rgba(34, 34, 34, 0.00) 100%)`,
        }}
      />
    </div>
  );
};