import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { HelpCircle, Book, MessageSquare, FileText, Search, Headphones } from 'lucide-react'

export default function SupportPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        {/* Hero */}
        <section className="relative border-b border-studio-medium bg-gradient-to-br from-phoenix-fire/10 via-transparent to-sankofa-gold/10 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">
              Support Center
            </h1>
            <p className="mb-8 text-xl text-gray-300">
              Get help when you need it
            </p>
          </div>
        </section>

        {/* Support Options */}
        <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">
              How Can We Help?
            </h2>
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/developers/docs">
                  <CardHeader>
                    <Book className="mb-2 h-10 w-10 text-phoenix-fire" />
                    <CardTitle>Documentation</CardTitle>
                    <CardDescription>
                      Comprehensive guides, API references, and tutorials
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/support/kb">
                  <CardHeader>
                    <FileText className="mb-2 h-10 w-10 text-sankofa-gold" />
                    <CardTitle>Knowledge Base</CardTitle>
                    <CardDescription>
                      Search articles, FAQs, and troubleshooting guides
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/support/contact">
                  <CardHeader>
                    <MessageSquare className="mb-2 h-10 w-10 text-neon-cyan" />
                    <CardTitle>Contact Support</CardTitle>
                    <CardDescription>
                      Get in touch with our support team
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/support/status">
                  <CardHeader>
                    <Search className="mb-2 h-10 w-10 text-phoenix-fire" />
                    <CardTitle>System Status</CardTitle>
                    <CardDescription>
                      Check service status and incident reports
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/support/community">
                  <CardHeader>
                    <Headphones className="mb-2 h-10 w-10 text-sankofa-gold" />
                    <CardTitle>Community</CardTitle>
                    <CardDescription>
                      Connect with other users and experts
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/support/training">
                  <CardHeader>
                    <HelpCircle className="mb-2 h-10 w-10 text-neon-cyan" />
                    <CardTitle>Training</CardTitle>
                    <CardDescription>
                      Learn through courses and workshops
                    </CardDescription>
                  </CardHeader>
                </Link>
              </Card>
            </div>
          </div>
        </section>

        {/* Support Tiers */}
        <section className="border-t border-studio-medium bg-studio-dark py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-12 text-center text-4xl font-bold text-white">
              Support Plans
            </h2>
            <div className="grid gap-8 md:grid-cols-3">
              <Card>
                <CardHeader>
                  <CardTitle>Community Support</CardTitle>
                  <CardDescription>Free</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li>• Community forums</li>
                    <li>• Documentation access</li>
                    <li>• Knowledge base</li>
                    <li>• Best effort responses</li>
                  </ul>
                </CardContent>
              </Card>

              <Card className="border-phoenix-fire">
                <CardHeader>
                  <CardTitle>Standard Support</CardTitle>
                  <CardDescription>Included with subscription</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li>• Email support (24-48h response)</li>
                    <li>• Priority documentation access</li>
                    <li>• System status notifications</li>
                    <li>• Business hours support</li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Enterprise Support</CardTitle>
                  <CardDescription>Premium</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li>• 24/7 phone and email support</li>
                    <li>• Dedicated support engineer</li>
                    <li>• SLA guarantees</li>
                    <li>• On-site support available</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* CTA */}
        <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">
              Need Immediate Help?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Contact our support team
            </p>
            <Button variant="phoenix" size="lg" asChild>
              <Link href="/support/contact">Contact Support</Link>
            </Button>
          </div>
        </section>
      </main>
    </>
  )
}

