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

export default function ProductsPage() {
  const products = [
    {
      category: 'Compute',
      items: [
        { name: 'PhoenixCore Compute', description: 'Core compute engine powered by Phoenix fire' },
        { name: 'SankofaEdge Nodes', description: 'Edge nodes that remember and return data' },
        { name: 'AkanFire VM Engine', description: 'High-performance VMs with Akan heritage' },
      ],
    },
    {
      category: 'Storage',
      items: [
        { name: 'OkraVault Storage', description: 'Storage for the soul of your data' },
        { name: 'Nananom Archive', description: 'Long-term archival with ancestral memory' },
        { name: 'Egg of the Phoenix Object Store', description: 'Object storage for transformation' },
      ],
    },
    {
      category: 'Networking',
      items: [
        { name: 'SankofaGrid Global Mesh', description: 'Global network mesh that remembers' },
        { name: 'AkanSphere Edge Routing', description: 'Edge routing with cultural intelligence' },
        { name: 'PhoenixFlight Network Fabric', description: 'High-performance network fabric' },
      ],
    },
    {
      category: 'AI & Machine Learning',
      items: [
        { name: 'Firebird AI Engine', description: 'AI that transforms like fire' },
        { name: 'Sankofa Memory Model', description: 'AI models that remember and learn' },
        { name: 'Ancestral Neural Fabric', description: 'Distributed AI with ancestral patterns' },
      ],
    },
    {
      category: 'Security',
      items: [
        { name: 'Aegis of Akan Shield', description: 'Comprehensive security platform' },
        { name: 'PhoenixGuard IAM', description: 'Identity and access management' },
        { name: 'Nsamankom Sentinel', description: 'Security monitoring with ancestral protection' },
      ],
    },
    {
      category: 'Identity',
      items: [
        { name: 'OkraID', description: 'Soul-powered identity framework' },
        { name: 'AkanAuth Sovereign Identity Plane', description: 'Sovereign authentication platform' },
      ],
    },
  ]

  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="/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">
            Product Architecture
          </h1>
          <p className="text-xl text-gray-300">
            Infrastructure services themed in Phoenix + Akan cosmology
          </p>
        </div>
      </section>

      {/* Products Grid */}
      <section className="py-16 px-4">
        <div className="mx-auto max-w-7xl space-y-16">
          {products.map((category) => (
            <div key={category.category}>
              <h2 className="mb-8 text-3xl font-bold text-white">
                {category.category}
              </h2>
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {category.items.map((item) => {
                  const slug = item.name.toLowerCase().replace(/\s+/g, '-')
                  return (
                    <Card key={item.name} className="hover:border-phoenix-fire transition-colors">
                      <CardHeader>
                        <CardTitle className="text-lg">{item.name}</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <CardDescription className="text-gray-400 mb-4">
                          {item.description}
                        </CardDescription>
                        <Link href={`/products/${slug}`}>
                          <Button variant="outline" size="sm" className="w-full">
                            Learn More
                          </Button>
                        </Link>
                      </CardContent>
                    </Card>
                  )
                })}
              </div>
            </div>
          ))}
        </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">
            Ready to Build?
          </h2>
          <p className="mb-8 text-xl text-gray-400">
            Start your sovereign cloud journey today.
          </p>
          <Link href="/manifesto">
            <Button variant="phoenix" size="lg">Learn More</Button>
          </Link>
        </div>
      </section>
    </main>
  )
}

