import Image from 'next/image';
import type { Metadata } from 'next';

import AnnouncementBar from '@/app/_components/AnnouncementBar';
import Header from '@/app/_components/Header';
import Footer from '@/app/_components/Footer';
import Hero from '@/app/_components/sections/Hero';
import Company from '@/app/_components/sections/Company';
import CoreValue from '@/app/_components/sections/CoreValue';
import Feature from '@/app/_components/sections/Feature';
import Developer from '@/app/_components/sections/Developer';
import Integration from '@/app/_components/sections/Integration';
import UserStory from '@/app/_components/sections/UserStory';
import Resource from '@/app/_components/sections/Resource';
import { PayAsYouGo } from '@/app/_components/Flag';
import Compliance from '@/app/_components/sections/Compliance';
import { SITE_URL } from '@/constant/url';
import { GTMPageView } from '@/components/GTM';

const meta = {
  title:
    'TiDB Cloud Serverless: Cost-Efficient, Simple, Modern MySQL That Scales Effortlessly',
  description:
    'Build MySQL apps faster and cheaper with TiDB Serverless. Enjoy a generous free tier, auto-scaling, AI-assisted SQL, built-in monitoring, and seamless integrations. Start free today — no credit card required!',
  url:
    (process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
      ? SITE_URL
      : process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
        ? process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL &&
          `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
        : 'http://localhost:3000') ?? SITE_URL,
};

export const metadata: Metadata = {
  metadataBase: new URL(meta.url),
  title: meta.title,
  description: meta.description,
  openGraph: {
    title: meta.title,
    description: meta.description,
    url: '/',
    type: 'website',
    images: [
      {
        url: '/twitter-image.jpeg',
        width: 2108,
        height: 1107,
        alt: 'TiDB Serverless',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    site: '@PingCAP',
    creator: '@PingCAP',
    images: '/twitter-image.jpeg',
  },
  other: {
    ['google-site-verification']: 'P3pfjfor9enouJKAAdaBFRH-oglcSVdSgh6fbJaF4Og', // <meta name="google-site-verification" content="P3pfjfor9enouJKAAdaBFRH-oglcSVdSgh6fbJaF4Og" />
  },
};

export default function Home() {
  return (
    <>
      <GTMPageView />

      <main className="flex min-h-screen flex-col items-center justify-between">
        <Hero />
        <Company />
        <CoreValue />
        <Feature />
        <Developer />
        <Integration />
        <UserStory />
        <Resource />
        <PayAsYouGo className="pt-6 md:pt-12 lg:pt-24" />
        <Compliance />
      </main>
    </>
  );
}