import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export default function ManifestoPage() {
  const principles = [
    {
      title: 'Sovereignty',
      description: 'Infrastructure must serve sovereignty, not subvert it. Every region, nation, and community has the right to control its own data, govern its own infrastructure, and determine its own technological destiny.',
    },
    {
      title: 'Ancestral Wisdom',
      description: 'Technology must remember its origins. The cloud must learn from the past, honor ancestral knowledge, and integrate traditional wisdom with modern innovation.',
    },
    {
      title: 'Identity',
      description: 'Infrastructure must reflect identity. Technology is not neutral. We build infrastructure that reflects our cultural identity, honors our heritage, and serves our communities.',
    },
    {
      title: 'Recursive Learning',
      description: 'Progress is a spiral, not a straight line. We build systems that remember what came before, learn from history, and return to origin to complete cycles.',
    },
    {
      title: 'Global Cultural Intelligence',
      description: 'The cloud must understand culture. Across 325 regions, we build infrastructure that respects cultural contexts, adapts to local needs, and honors diverse traditions.',
    },
    {
      title: 'Rebirth and Transformation',
      description: 'Like the Phoenix, we rise from fire. We build infrastructure that transforms continuously, renews itself, and emerges stronger from every cycle.',
    },
  ]

  return (
    <main className="min-h-screen bg-studio-black">
      {/* Header */}
      <header className="border-b border-studio-medium bg-studio-dark">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
          <Link href="/" className="text-2xl font-bold text-white">
            <span className="text-sankofa-gold">Sankofa's</span> Phoenix <span className="text-phoenix-fire">Nexus</span> Cloud
          </Link>
          <nav className="flex gap-4">
            <Link href="/" className="text-gray-400 hover:text-white">
              Home
            </Link>
            <Link href="/about" className="text-gray-400 hover:text-white">
              About
            </Link>
            <Link href="/products" className="text-gray-400 hover:text-white">
              Products
            </Link>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="py-24 px-4">
        <div className="mx-auto max-w-4xl text-center">
          <h1 className="mb-6 text-5xl font-bold text-white md:text-6xl">
            The Sovereign Cloud Manifesto
          </h1>
          <p className="text-xl text-gray-300">
            A declaration of technological sovereignty
          </p>
        </div>
      </section>

      {/* Declaration */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-4xl">
          <Card className="border-phoenix-fire/50 bg-gradient-to-br from-phoenix-fire/10 to-sankofa-gold/10">
            <CardContent className="pt-6">
              <div className="space-y-4 text-lg text-white">
                <p className="text-2xl font-bold">We declare the right to technological sovereignty.</p>
                <p className="text-2xl font-bold">We declare the right to infrastructure that reflects our identity.</p>
                <p className="text-2xl font-bold">We declare the right to cloud computing that honors our ancestors.</p>
                <p className="text-2xl font-bold">We declare the right to AI that remembers where it came from.</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Principles */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-6xl">
          <h2 className="mb-12 text-center text-4xl font-bold text-white">
            Principles
          </h2>
          <div className="grid gap-8 md:grid-cols-2">
            {principles.map((principle) => (
              <Card key={principle.title}>
                <CardHeader>
                  <CardTitle className="text-phoenix-fire">{principle.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-300">{principle.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* The Promise */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-4xl">
          <Card>
            <CardHeader>
              <CardTitle className="text-3xl text-center text-sankofa-gold">The Promise</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6 pt-6">
              <p className="text-center text-2xl font-bold text-white">
                We promise infrastructure that:
              </p>
              <div className="space-y-4 text-lg text-gray-300">
                <p className="flex items-center gap-3">
                  <span className="text-phoenix-fire text-2xl">→</span>
                  <strong className="text-white">Remembers</strong> its origins
                </p>
                <p className="flex items-center gap-3">
                  <span className="text-phoenix-fire text-2xl">→</span>
                  <strong className="text-white">Retrieves</strong> ancestral wisdom
                </p>
                <p className="flex items-center gap-3">
                  <span className="text-phoenix-fire text-2xl">→</span>
                  <strong className="text-white">Restores</strong> identity and sovereignty
                </p>
                <p className="flex items-center gap-3">
                  <span className="text-phoenix-fire text-2xl">→</span>
                  <strong className="text-white">Rises</strong> forward with purpose
                </p>
              </div>
              <p className="mt-8 text-center text-3xl font-bold text-white">
                Remember → Retrieve → Restore → Rise
              </p>
              <p className="text-center text-gray-400">
                This is the Sankofa cycle. This is the Phoenix transformation.
              </p>
              <p className="text-center text-2xl font-bold text-phoenix-fire">
                This is Sankofa.
              </p>
              <p className="text-center text-2xl font-bold text-phoenix-fire">
                This is Sankofa Phoenix.
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-4xl text-center">
          <h2 className="mb-6 text-3xl font-bold text-white">
            Join the Movement
          </h2>
          <p className="mb-8 text-xl text-gray-400">
            If you believe in technological sovereignty, ancestral wisdom, and identity-based infrastructure,
          </p>
          <p className="mb-8 text-xl font-semibold text-white">
            Join us. Build with us. Rise with us.
          </p>
          <Link href="/">
            <Button variant="phoenix" size="lg">Get Started</Button>
          </Link>
        </div>
      </section>
    </main>
  )
}

