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

export default function AboutPage() {
  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="/products" className="text-gray-400 hover:text-white">
              Products
            </Link>
            <Link href="/manifesto" className="text-gray-400 hover:text-white">
              Manifesto
            </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 Deeper Meaning
          </h1>
          <p className="text-xl text-gray-300">
            Understanding the Akan philosophy of Sankofa and the Phoenix transformation
          </p>
        </div>
      </section>

      {/* Philosophy Section */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-4xl space-y-12">
          <Card>
            <CardHeader>
              <CardTitle className="text-phoenix-fire">Sankofa and Akan Cosmology</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-300">
              <p>
                In Akan cosmology, the universe is circular, not linear; interconnected, not hierarchical; 
                ancestrally governed, not isolated. Sankofa represents the return to origin to complete the cycle.
              </p>
              <p>
                It echoes the Akan belief that life, identity, and destiny (nkrabea) must be aligned with 
                source (kra), ancestral memory (nananom nsamanfoɔ), and lineage (abusua).
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-sankofa-gold">Sankofa and Time</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-300">
              <p>
                Western time is linear. Akan time is recursive — events are patterns that return.
              </p>
              <p className="text-lg font-semibold text-white">
                Progress is a spiral, not a straight line.
              </p>
              <p>
                The future is found in the past; the past informs the future. This is why a bird looking 
                back while flying forward is perfect as the symbol.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-neon-cyan">Sankofa and the Soul</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-300">
              <p>
                In Akan thought, "Kra" is the divine soul, given by Nyame (Creator). It comes from a 
                spiritual origin place, and its mission is learned by reflecting on where it came from.
              </p>
              <p className="text-lg font-semibold text-white">
                Sankofa is the soul's act of remembering itself.
              </p>
              <p>It is spiritual self-retrieval.</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-phoenix-fire">Sankofa as Technology</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-300">
              <p>
                Sankofa is an algorithm. A cosmological protocol. A recursive pattern of:
              </p>
              <p className="text-2xl font-bold text-center text-white">
                Remember → Retrieve → Restore → Rise
              </p>
              <p>
                Sankofa is how individuals, families, nations, and civilizations rebuild themselves.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-sankofa-gold">The Phoenix–Sankofa Integration</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-300">
              <p>
                <strong className="text-white">Phoenix</strong> = fire, rebirth, immortality
              </p>
              <p>
                <strong className="text-white">Sankofa</strong> = return, reclaim, rise forward
              </p>
              <p className="text-xl font-semibold text-center text-white mt-6">
                Together, they form: <span className="text-phoenix-fire">Rebirth + Ancestral Return = Sovereign Global Power</span>
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-4xl text-center">
          <Link href="/manifesto">
            <Button variant="phoenix" size="lg">Read the Full Manifesto</Button>
          </Link>
        </div>
      </section>
    </main>
  )
}

