'use client';

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

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

export function PayAsYouGo(props: { className?: string }) {
  const { className } = props;

  return (
    <div
      className={clsx(
        'flex w-full flex-col items-center justify-center',
        className,
      )}
    >
      <div
        className="mx-6 flex w-auto max-w-7xl flex-col items-start rounded-2xl p-8 lg:mx-8 lg:p-12"
        style={{
          background: `linear-gradient(97deg, #496EBE -11.01%, #269CD6 -5.23%, #0BC0B0 2.97%, #5CE2B6 7.54%, #3C9FAB 17.59%, #236DA0 25.49%, #1F5492 35.14%, #0CA6F2 74.14%, #4BBABE 89.64%, #3569B6 100.41%, #445AAB 112.62%, #01B1BB 124.11%, #048AB5 133.13%)`,
        }}
      >
        <h3 className="">Start free, pay as you grow</h3>
        <p className="mb-12 text-lg leading-10">
          TiDB Serverless provides the most generous FREE plan in the industry.
          We aim to support turning all the great ideas from you into reality,
          by eliminating financial constraints.
        </p>
        <div className="flex flex-wrap items-center gap-4">
          <NextLink
            href={CLOUD_FREE_TRIAL}
            target="_blank"
            className="relative border-none bg-none px-6 py-2 text-xl font-semibold leading-8 text-black mix-blend-screen outline-none before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0 before:rounded-3xl before:bg-white before:mix-blend-color-burn hover:opacity-90"
            onClick={goToCloudSignupClick({
              page_category: '',
              page_category2: '',
              button_name: 'Get Started',
              position: 'card',
            })}
          >
            Get Started
          </NextLink>
          <NextLink
            href={WEBSITE_SERVERLESS_DISCOUNT}
            target="_blank"
            className="rounded-3xl border-2 border-white bg-transparent px-6 py-2 text-xl font-semibold text-white hover:opacity-90"
          >
            Startup Discounts
          </NextLink>
          <NextLink
            href={PRODUCT_TIDB_PRICING}
            target="_blank"
            className="ml-3 py-2 text-xl text-white hover:opacity-90"
          >
            View Pricing →
          </NextLink>
        </div>
      </div>
    </div>
  );
}