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'

export default function Home() {
  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black">
      {/* Hero Section */}
      <section className="relative flex min-h-screen 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">
            <span className="bg-gradient-to-r from-phoenix-fire to-sankofa-gold bg-clip-text text-transparent">
              Sankofa's
            </span>{' '}
            Phoenix{' '}
            <span className="bg-gradient-to-r from-phoenix-fire to-sankofa-gold bg-clip-text text-transparent">
              Nexus
            </span>{' '}
            Cloud
          </h1>
          
          <p className="mb-8 text-xl text-gray-300 md:text-2xl">
            The sovereign cloud born of fire and ancestral wisdom.
          </p>
          
          <p className="mb-12 text-lg text-gray-400">
            Remember → Retrieve → Restore → Rise
          </p>
          
          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
            <Link href="/about">
              <Button variant="phoenix" size="lg">Learn More</Button>
            </Link>
            <Link href="/products">
              <Button variant="outline" size="lg">Products</Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-24 px-4">
        <div className="mx-auto max-w-6xl">
          <h2 className="mb-12 text-center text-4xl font-bold text-white">
            Sovereign. Ancestral. Transformative.
          </h2>
          
          <div className="grid gap-8 md:grid-cols-3">
            <Card>
              <CardHeader>
                <CardTitle className="text-phoenix-fire">Phoenix Fire</CardTitle>
                <CardDescription>
                  Rebirth through transformation
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300">
                  Infrastructure that continuously transforms and renews, rising from every challenge like the Phoenix.
                </p>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <CardTitle className="text-sankofa-gold">Sankofa Memory</CardTitle>
                <CardDescription>
                  Return to origin, rise forward
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300">
                  Systems that remember their origins, retrieve ancestral wisdom, and rise forward with purpose.
                </p>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <CardTitle className="text-neon-cyan">Sovereign Power</CardTitle>
                <CardDescription>
                  True technological sovereignty
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300">
                  Complete control over infrastructure, data, and destiny across 325 global regions.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-4">
        <div className="mx-auto max-w-4xl text-center">
          <h2 className="mb-6 text-4xl font-bold text-white">
            Join the Sovereign Cloud Movement
          </h2>
          <p className="mb-8 text-xl text-gray-400">
            Build infrastructure that honors identity and serves sovereignty.
          </p>
          <Link href="/manifesto">
            <Button variant="phoenix" size="lg">Read the Manifesto</Button>
          </Link>
        </div>
      </section>
      </div>
    </PublicLayout>
  )
}

