import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@the-order/ui';

export default function Home(): JSX.Element {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      <div className="container mx-auto px-4 py-16">
        <div className="text-center mb-12">
          <h1 className="text-5xl font-bold text-gray-900 mb-4">The Order</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-6">
            Order of Military Hospitallers - Digital Identity & Governance Platform
          </p>
          <p className="text-lg text-gray-500 max-w-2xl mx-auto">
            Apply for eResidency, verify credentials, and access our services
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
          <Card>
            <CardHeader>
              <CardTitle>Apply for eResidency</CardTitle>
              <CardDescription>Start your application for eResidency with The Order</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/apply" className="text-primary hover:underline font-medium">
                Begin Application →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Check Application Status</CardTitle>
              <CardDescription>View the status of your eResidency application</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/status" className="text-primary hover:underline font-medium">
                Check Status →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Verify Credential</CardTitle>
              <CardDescription>Verify a verifiable credential issued by The Order</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/verify" className="text-primary hover:underline font-medium">
                Verify Credential →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>About The Order</CardTitle>
              <CardDescription>Learn about The Order and our mission</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/about" className="text-primary hover:underline font-medium">
                Learn More →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Documentation</CardTitle>
              <CardDescription>Access documentation and help resources</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/docs" className="text-primary hover:underline font-medium">
                View Docs →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Contact</CardTitle>
              <CardDescription>Get in touch with our support team</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/contact" className="text-primary hover:underline font-medium">
                Contact Us →
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
