import Head from 'next/head'
import Link from 'next/link'
import Layout from '@/components/layout'

export default function EmailVerified() {
  return (
    <Layout>
      <Head>
        <title>Email Verified | LocalGreenChain</title>
      </Head>

      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8 text-center">
          <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-8 rounded-lg">
            <div className="flex justify-center mb-4">
              <svg
                className="h-16 w-16 text-green-500"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <h2 className="text-2xl font-bold mb-2">Email Verified!</h2>
            <p className="mb-4">
              Your email address has been successfully verified. You now have full access to LocalGreenChain.
            </p>
          </div>

          <div className="space-y-3">
            <Link href="/">
              <a className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 w-full justify-center">
                Go to Dashboard
              </a>
            </Link>
            <Link href="/plants/register">
              <a className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 w-full justify-center">
                Register a Plant
              </a>
            </Link>
          </div>
        </div>
      </div>
    </Layout>
  )
}
