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 { Handshake, TrendingUp, Users, Award, Zap, BookOpen } from 'lucide-react'

export default function PartnersPage() {
  return (
    <PublicLayout>
      <div 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">
              Partner Program
            </h1>
            <p className="mb-8 text-xl text-gray-300">
              Build, sell, and grow with Sankofa's Phoenix Nexus Cloud
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/portal/partners">Join as Partner</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/partners/benefits">View Benefits</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* Partner Benefits */}
        <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">
              Partner Benefits
            </h2>
            <div className="grid gap-8 md:grid-cols-3">
              <Card>
                <CardHeader>
                  <TrendingUp className="mb-2 h-10 w-10 text-phoenix-fire" />
                  <CardTitle>Revenue Opportunities</CardTitle>
                  <CardDescription>
                    Competitive margins and co-sell opportunities
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li>• Attractive partner margins</li>
                    <li>• Co-sell deal registration</li>
                    <li>• Recurring revenue streams</li>
                    <li>• Marketing development funds</li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <Zap className="mb-2 h-10 w-10 text-sankofa-gold" />
                  <CardTitle>Technical Enablement</CardTitle>
                  <CardDescription>
                    Comprehensive training and support resources
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li>• Technical onboarding programs</li>
                    <li>• Solution architecture support</li>
                    <li>• Dedicated partner engineering</li>
                    <li>• Test environments and sandboxes</li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <Users className="mb-2 h-10 w-10 text-neon-cyan" />
                  <CardTitle>Go-to-Market Support</CardTitle>
                  <CardDescription>
                    Marketing resources and co-marketing opportunities
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li>• Co-marketing campaigns</li>
                    <li>• Partner portal access</li>
                    <li>• Sales enablement materials</li>
                    <li>• Joint customer events</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Partner Types */}
        <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">
              Partner Types
            </h2>
            <div className="grid gap-8 md:grid-cols-2">
              <div>
                <Handshake className="mb-4 h-8 w-8 text-phoenix-fire" />
                <h3 className="mb-4 text-2xl font-bold text-white">Solution Partners</h3>
                <p className="mb-4 text-gray-300">
                  Build and deliver solutions on Phoenix Nexus Cloud. Integrate your 
                  products and services with our platform.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Solution marketplace listing</li>
                  <li>• Technical integration support</li>
                  <li>• Joint go-to-market</li>
                  <li>• Solution certification</li>
                </ul>
              </div>

              <div>
                <Award className="mb-4 h-8 w-8 text-sankofa-gold" />
                <h3 className="mb-4 text-2xl font-bold text-white">Reseller Partners</h3>
                <p className="mb-4 text-gray-300">
                  Sell Phoenix Nexus Cloud to your customers. Leverage our infrastructure 
                  to deliver value to your client base.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Reseller discounts</li>
                  <li>• Deal registration</li>
                  <li>• Sales training</li>
                  <li>• Customer support tools</li>
                </ul>
              </div>
            </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">
              Ready to Partner With Us?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Join our partner program and grow your business
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/portal/partners">Access Partner Portal</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/support">Contact Partner Team</Link>
              </Button>
            </div>
          </div>
        </section>
      </div>
    </PublicLayout>
  )
}

