'use client';

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

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

import { CLOUD_FREE_TRIAL } from '@/constant/url';
import { goToCloudSignupClick } from '@/components/GTM';

export default function Hero(props: any) {
  return (
    <section className="max-w-[1512px] mb-4 grid w-full grid-cols-12 gap-4 items-center px-4 sm:px-8 sm:mb-8 lg:px-12">
      <div className="col-span-12 lg:col-span-7">
        <h1 className="flex items-center justify-center md:justify-start text-4xl font-bold leading-tight lg:text-[52px] pt-8">
          TiDB Cloud Serverless
        </h1>
        <h3 className="mt-4 hidden font-bold leading-tight md:block">
          Make your Next-Gen Application
        </h3>
        <h3 className="custom-style-clip-text mt-2 hidden bg-clip-text font-bold leading-tight text-transparent md:block">
          Cost-Efficient, Simple, Modern
        </h3>
        <p className="mt-2 px-6 text-center text-base text-darkgrey-300 md:hidden">
        A fully managed distributed SQL database with 25GiB free storage. 
        </p>
        <div className="mt-4 hidden flex-col items-center gap-2.5 md:mt-12 md:flex md:flex-row">
          <NextLink
            href={CLOUD_FREE_TRIAL}
            target="_blank"
            className="w-full py-4 text-base font-semibold sm:block sm:w-auto"
            onClick={goToCloudSignupClick({
              page_category: '',
              page_category2: '',
              button_name: 'Started Free',
              position: 'hero',
            })}
          >
            <span className="custom-style-button md">Start Free</span>
          </NextLink>
          <p className="hidden text-xs leading-5 text-darkgrey-500 sm:block">
            25GiB Free Storage, No Credit Card Required.
          </p>
        </div>
        <div className="mt-4 flex flex-col items-center gap-2.5 md:mt-12 md:hidden md:flex-row">
          <NextLink
            href={CLOUD_FREE_TRIAL}
            target="_blank"
            className="custom-style-button w-full py-4 text-center text-base font-semibold sm:block sm:w-auto"
            onClick={goToCloudSignupClick({
              page_category: '',
              page_category2: '',
              button_name: 'Started Free',
              position: 'hero',
            })}
          >
            Start Free
          </NextLink>
        </div>
      </div>
      <div className="col-span-12 lg:col-span-5">
        <VideoMockUp />
      </div>
    </section>
  );
}

const VideoMockUp = (props: any) => {
  return (
    <div
      className={clsx(
        'my-4 hidden sm:my-8 sm:block md:my-12 lg:my-16',
        styles.heroVideo,
      )}
    >
      <div className={clsx(styles.heroVideoBackdrop, '')}>
        <div className={styles.heroVideoMock} />
        <video
          className={clsx('z-[1] h-full w-full rounded-[30px]')}
          loop
          autoPlay
          muted
        >
          <source src="https://static.pingcap.com/files/2024/06/26065139/hero-video.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  );
};