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

export default function AboutPage(): JSX.Element {
  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-4xl">
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">About The Order</h1>
          <p className="text-xl text-gray-600">
            The Order of Military Hospitallers - A constitutional sovereign structure
          </p>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Our Mission</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-700">
              <p>
                The Order of Military Hospitallers is a constitutional sovereign structure dedicated to
                providing digital identity, legal services, and governance frameworks for the modern era.
              </p>
              <p>
                We operate as a decentralized sovereign body (DSB), offering eResidency and eCitizenship
                programs that provide individuals with verifiable digital credentials and access to our
                services.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>What We Offer</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-3 text-gray-700">
                <li className="flex items-start">
                  <span className="mr-2">•</span>
                  <span>
                    <strong>eResidency:</strong> Digital residency credentials for individuals seeking
                    to participate in The Order's ecosystem
                  </span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">•</span>
                  <span>
                    <strong>eCitizenship:</strong> Full citizenship credentials with governance rights
                    and responsibilities
                  </span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">•</span>
                  <span>
                    <strong>Verifiable Credentials:</strong> Secure, tamper-proof digital credentials
                    based on W3C standards
                  </span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">•</span>
                  <span>
                    <strong>Legal Services:</strong> Access to the International Criminal Court of
                    Commerce (ICCC)
                  </span>
                </li>
                <li className="flex items-start">
                  <span className="mr-2">•</span>
                  <span>
                    <strong>Financial Services:</strong> Digital Bank of International Settlements
                    (DBIS) infrastructure
                  </span>
                </li>
              </ul>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Governance</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-700">
              <p>
                The Order operates under a constitutional framework with:
              </p>
              <ul className="list-disc list-inside space-y-2 ml-4">
                <li>Founding Council for strategic decisions</li>
                <li>Judicial arm (ICCC) for legal matters</li>
                <li>Administrative structures for day-to-day operations</li>
                <li>Transparent governance and audit processes</li>
              </ul>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Technology</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-700">
              <p>
                Our platform is built on modern, secure technologies:
              </p>
              <ul className="list-disc list-inside space-y-2 ml-4">
                <li>Decentralized Identifiers (DIDs) for identity management</li>
                <li>Verifiable Credentials (VCs) following W3C standards</li>
                <li>eIDAS-compliant qualified signatures</li>
                <li>Blockchain and cryptographic security</li>
                <li>Open-source and transparent systems</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

