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

export default function TutorialsPage() {
  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-4xl">
          <h1 className="mb-8 text-4xl font-bold text-white">Tutorials & Quickstarts</h1>
          
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-white">Getting Started</CardTitle>
                <CardDescription>
                  Your first deployment on Sankofa Phoenix
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300 mb-4">
                  Get up and running in minutes with our step-by-step getting started guide. 
                  Deploy your first application and learn the basics.
                </p>
                <Button variant="outline" asChild>
                  <Link href="/docs/tutorials/getting-started">Start Tutorial →</Link>
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-white">Step-by-Step Tutorials</CardTitle>
                <CardDescription>
                  Comprehensive tutorials for common scenarios
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300 mb-4">
                  Follow along with detailed tutorials covering infrastructure provisioning, 
                  application deployment, monitoring, and more.
                </p>
                <Button variant="outline" asChild>
                  <Link href="/docs/tutorials/step-by-step">Browse Tutorials →</Link>
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-white">Sample Code</CardTitle>
                <CardDescription>
                  Ready-to-use code samples and examples
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300 mb-4">
                  Explore sample code, configuration files, and complete examples that you 
                  can use as starting points for your projects.
                </p>
                <Button variant="outline" asChild>
                  <Link href="/docs/tutorials/samples">View Samples →</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </PublicLayout>
  )
}

