'use client';

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

import Compliance from '@/app/_components/sections/Compliance';

import {
  DOC,
  DOC_TIDB_ARCHITECTURE,
  ASK,
} from '@/constant/url';

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

const discoverItem = [
  {
    id: 'discover-1',
    type: 'Documentation',
    title: 'Access tutorials, guides, example applications, and much more.',
    link_text: 'Read',
    link: DOC,
  },
  {
    id: 'discover-2',
    type: 'Architecture',
    title: 'Peer under the hood and discover how TiDB works.',
    link_text: 'Learn',
    link: DOC_TIDB_ARCHITECTURE,
  },
  {
    id: 'discover-3',
    type: 'Join the Community',
    title: 'Stay connected, get help, and contribute.',
    link_text: 'Join',
    link: ASK,
  },
];

export default function Discover(props: any) {
  return (
    <section>
      <div className="mx-auto max-w-[1512px] px-4 sm:px-8 pt-20 lg:px-12">
        <h3 className="text-center leading-tight">Discover More</h3>
        <p className="text-center text-base">
          Want to dive deeper into distributed SQL, TiDB, and TiDB Dedicated?
        </p>
        <div className="mt-16 grid grid-cols-1 gap-12 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
          {discoverItem.map((item) => (
            <NextLink href={item.link} target="_blank" key={item.id}>
              <div
                className={clsx(
                  styles.card,
                  'h-full duration-300 ease-in-out hover:-translate-y-4',
                )}
              >
                <div className={clsx(styles.cardContainer)}>
                  <div className="text-[#00AEEF;]">{item.type}</div>
                  <h5 className="my-4 text-xl font-bold">{item.title}</h5>
                  <div className="flex items-center">
                    <span className="pr-1 underline">{item.link_text}</span>→
                  </div>
                </div>
              </div>
            </NextLink>
          ))}
        </div>
        <div className="flex justify-center">
          <Compliance />
        </div>
      </div>
    </section>
  );
}