import { PublicLayout } from '@/components/layout/public-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Palette, Globe, Shield, CheckCircle } from 'lucide-react'

export default function WhiteLabelPage() {
  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-7xl">
          <div className="mb-12 text-center">
            <h1 className="mb-4 text-5xl font-bold text-white">White-Label Solution</h1>
            <p className="text-xl text-gray-400">
              Customize Phoenix with your brand for enterprise deployments
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <Card>
              <CardHeader>
                <Palette className="h-8 w-8 text-phoenix-fire mb-2" />
                <CardTitle className="text-white">Custom Branding</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-300">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Custom logo and colors</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Custom domain</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Branded email templates</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <Globe className="h-8 w-8 text-sankofa-gold mb-2" />
                <CardTitle className="text-white">Multi-Tenant</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-300">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Isolated tenant environments</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Custom subdomains</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Tenant-specific branding</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <Shield className="h-8 w-8 text-neon-cyan mb-2" />
                <CardTitle className="text-white">Enterprise Features</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-300">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>SLA guarantees</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Dedicated support</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <span>Custom integrations</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

          <Card className="bg-studio-dark border-studio-medium">
            <CardHeader>
              <CardTitle className="text-white">Get Started with White-Label</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-300 mb-6">
                Contact our enterprise sales team to discuss white-label options for your organization.
              </p>
              <Button variant="phoenix" size="lg" asChild>
                <a href="/enterprise">Contact Sales</a>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </PublicLayout>
  )
}

