import type React from 'react';
import Link from 'next/link';

const features = [
  {
    icon: '🔑',
    title: 'Agent Identity',
    description:
      'Assign every AI agent a cryptographic identity backed by W3C DIDs. No more shared secrets or hard-coded API keys.',
  },
  {
    icon: '🛡️',
    title: 'OAuth 2.0 & OIDC',
    description:
      'Issue short-lived access tokens with fine-grained scopes. Integrate with any standards-compliant authorization server.',
  },
  {
    icon: '📋',
    title: 'Full Audit Trail',
    description:
      'Every agent action is logged with tamper-evident entries. Meet SOC 2, ISO 27001, and enterprise compliance requirements.',
  },
  {
    icon: '⚡',
    title: 'High Performance',
    description:
      'Token issuance p95 under 500 ms at 1,000 concurrent agents. Redis-backed rate limiting scales horizontally.',
  },
];

export default function HomePage(): React.ReactElement {
  return (
    <>
      {/* Hero */}
      <section className="bg-gradient-to-b from-brand-50 to-white px-6 py-24 text-center">
        <div className="mx-auto max-w-3xl">
          <span className="mb-4 inline-block rounded-full bg-brand-100 px-4 py-1 text-sm font-semibold text-brand-700">
            Identity for AI Agents
          </span>
          <h1 className="mb-6 text-5xl font-extrabold leading-tight tracking-tight text-slate-900">
            Secure Every Agent.{' '}
            <span className="text-brand-600">Trust Every Call.</span>
          </h1>
          <p className="mb-10 text-xl leading-relaxed text-slate-600">
            SentryAgent AgentIdP is the identity and access management platform
            built for AI agents. Register agents, issue OAuth 2.0 tokens,
            enforce policies, and audit every interaction — all from a single
            API.
          </p>
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Link
              href="/get-started"
              className="rounded-xl bg-brand-600 px-8 py-3 text-base font-semibold text-white shadow-md transition-colors hover:bg-brand-700"
            >
              Get Started Free
            </Link>
            <Link
              href="/api-explorer"
              className="rounded-xl border border-slate-300 bg-white px-8 py-3 text-base font-semibold text-slate-700 shadow-sm transition-colors hover:bg-slate-50"
            >
              Explore the API
            </Link>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900">
            Everything your agents need to stay secure
          </h2>
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {features.map(({ icon, title, description }) => (
              <div
                key={title}
                className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"
              >
                <div className="mb-3 text-3xl">{icon}</div>
                <h3 className="mb-2 text-lg font-semibold text-slate-900">
                  {title}
                </h3>
                <p className="text-sm leading-relaxed text-slate-600">
                  {description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Banner */}
      <section className="bg-brand-600 px-6 py-16 text-center text-white">
        <div className="mx-auto max-w-2xl">
          <h2 className="mb-4 text-3xl font-bold">
            Ready to secure your AI agents?
          </h2>
          <p className="mb-8 text-lg text-brand-100">
            Get started in minutes. Free tier includes 10 agents and 1,000 API
            calls per day — no credit card required.
          </p>
          <Link
            href="/get-started"
            className="inline-block rounded-xl bg-white px-8 py-3 text-base font-semibold text-brand-700 shadow-md transition-colors hover:bg-brand-50"
          >
            Start Building Now
          </Link>
        </div>
      </section>
    </>
  );
}