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 { GraduationCap, Users, Shield, BookOpen, CheckCircle } from 'lucide-react'

export default function InstitutionalPage() {
  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">
              Institutional Cloud Infrastructure
            </h1>
            <p className="mb-8 text-xl text-gray-300">
              Sovereign cloud infrastructure for educational institutions, research organizations, and non-profits
            </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">Get Started</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/solutions/institutional/pricing">View Pricing</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* Institutional Features */}
        <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">
              Built for Institutions
            </h2>
            <div className="grid gap-8 md:grid-cols-3">
              <Card>
                <CardHeader>
                  <GraduationCap className="mb-2 h-10 w-10 text-phoenix-fire" />
                  <CardTitle>Education-Focused</CardTitle>
                  <CardDescription>
                    Designed for universities, colleges, and research institutions
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-phoenix-fire" />
                      <span>Student and faculty management</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-phoenix-fire" />
                      <span>Research computing resources</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-phoenix-fire" />
                      <span>Academic pricing and discounts</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <Users className="mb-2 h-10 w-10 text-sankofa-gold" />
                  <CardTitle>Multi-Tenant Support</CardTitle>
                  <CardDescription>
                    Manage multiple departments, schools, or research groups
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-sankofa-gold" />
                      <span>Department-level isolation</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-sankofa-gold" />
                      <span>Budget allocation and tracking</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-sankofa-gold" />
                      <span>Usage reporting by department</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <Shield className="mb-2 h-10 w-10 text-neon-cyan" />
                  <CardTitle>Privacy & Security</CardTitle>
                  <CardDescription>
                    FERPA and HIPAA considerations for educational data
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 text-sm text-gray-300">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-neon-cyan" />
                      <span>Data privacy controls</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-neon-cyan" />
                      <span>Secure research environments</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-neon-cyan" />
                      <span>Compliance with educational regulations</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Use Cases */}
        <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">
              Institutional Use Cases
            </h2>
            <div className="grid gap-8 md:grid-cols-2">
              <div>
                <BookOpen className="mb-4 h-8 w-8 text-phoenix-fire" />
                <h3 className="mb-4 text-2xl font-bold text-white">Research Computing</h3>
                <p className="mb-4 text-gray-300">
                  High-performance computing resources for research projects, 
                  data analysis, and computational research.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• GPU clusters for ML/AI research</li>
                  <li>• Large-scale data processing</li>
                  <li>• Collaborative research environments</li>
                  <li>• Research data management</li>
                </ul>
              </div>

              <div>
                <Users className="mb-4 h-8 w-8 text-sankofa-gold" />
                <h3 className="mb-4 text-2xl font-bold text-white">Campus IT Infrastructure</h3>
                <p className="mb-4 text-gray-300">
                  Modern cloud infrastructure for campus-wide IT services, 
                  student portals, and administrative systems.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Student information systems</li>
                  <li>• Learning management systems</li>
                  <li>• Campus-wide applications</li>
                  <li>• Administrative computing</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 Modernize Your Institution?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Contact our institutional team to learn more
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/support">Contact Institutional Team</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/developers">View Documentation</Link>
              </Button>
            </div>
          </div>
        </section>
      </main>
    </>
  )
}

