import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { PublicLayout } from '@/components/layout/public-layout'
import { Server, HardDrive, Network } from 'lucide-react'

export default function CoreInfrastructurePage() {
  const products = [
    {
      name: 'PhoenixCore Compute',
      icon: Server,
      description: 'Core compute engine powered by Phoenix fire',
      features: [
        'Virtual machines and containers',
        'Serverless functions',
        'Auto-scaling capabilities',
        'Multi-region deployment',
      ],
    },
    {
      name: 'OkraVault Storage',
      icon: HardDrive,
      description: 'Storage for the soul of your data',
      features: [
        'Object and block storage',
        'High-performance NVMe storage',
        'Multi-region replication',
        'S3-compatible API',
      ],
    },
    {
      name: 'SankofaGrid Global Mesh',
      icon: Network,
      description: 'Global network mesh that remembers',
      features: [
        '325-region global network',
        'Low-latency routing',
        'Private network connections',
        'DDoS protection',
      ],
    },
  ]

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black">
        {/* Hero Section */}
        <section className="relative flex min-h-[50vh] flex-col items-center justify-center overflow-hidden px-4">
          <div className="absolute inset-0 bg-gradient-to-br from-phoenix-fire/20 via-transparent to-sankofa-gold/20" />
          
          <div className="relative z-10 max-w-4xl text-center">
            <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
              Core Infrastructure
            </h1>
            
            <p className="mb-8 text-xl text-gray-300 md:text-2xl">
              The foundation of sovereign cloud infrastructure
            </p>
            
            <p className="mb-12 text-lg text-gray-400">
              Compute, storage, and networking services that power the Phoenix Nexus Cloud
            </p>
          </div>
        </section>

        {/* Products Grid */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-7xl">
            <div className="grid gap-8 md:grid-cols-3">
              {products.map((product) => {
                const Icon = product.icon
                return (
                  <Card key={product.name} className="hover:border-phoenix-fire transition-colors">
                    <CardHeader>
                      <Icon className="mb-4 h-12 w-12 text-phoenix-fire" />
                      <CardTitle className="text-xl">{product.name}</CardTitle>
                      <CardDescription className="text-gray-400">
                        {product.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2 text-sm text-gray-300 mb-6">
                        {product.features.map((feature, idx) => (
                          <li key={idx} className="flex items-start gap-2">
                            <span className="text-phoenix-fire mt-1">•</span>
                            <span>{feature}</span>
                          </li>
                        ))}
                      </ul>
                      <Button variant="outline" className="w-full" asChild>
                        <Link href={`/products/${product.name.toLowerCase().replace(/\s+/g, '-')}`}>
                          Learn More
                        </Link>
                      </Button>
                    </CardContent>
                  </Card>
                )
              })}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-24 px-4 bg-studio-dark">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="mb-6 text-4xl font-bold text-white">
              Ready to Get Started?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Build on sovereign cloud infrastructure
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/portal">Get Started</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/docs">View Documentation</Link>
              </Button>
            </div>
          </div>
        </section>
      </div>
    </PublicLayout>
  )
}

