import { Link } from "wouter";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Music, Calendar, Users, Settings } from "lucide-react";

export default function Landing() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Music className="w-8 h-8 text-primary-600 mr-3" />
              <div>
                <h1 className="text-xl font-bold text-slate-800">DJ Management</h1>
                <p className="text-sm text-slate-500">Professional Dashboard</p>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <Button 
                onClick={() => window.location.href = "/api/login"}
                className="bg-primary-600 hover:bg-primary-700"
              >
                Sign In
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-4xl font-bold text-slate-800 mb-6">
              Professional DJ Management System
            </h2>
            <p className="text-xl text-slate-600 mb-8">
              Streamline your DJ operations with our comprehensive management platform. 
              Handle schedules, events, and team coordination all in one place.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button 
                size="lg"
                onClick={() => window.location.href = "/api/login"}
                className="bg-primary-600 hover:bg-primary-700"
              >
                Get Started
              </Button>
              <Button 
                size="lg" 
                variant="outline"
              >
                Learn More
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-slate-800 mb-4">
              Everything You Need to Manage Your DJ Team
            </h3>
            <p className="text-lg text-slate-600">
              Powerful tools designed for modern DJ management
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card>
              <CardHeader>
                <Calendar className="w-8 h-8 text-primary-600 mb-2" />
                <CardTitle>Event Management</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-600">
                  Create, manage, and track all your events with intuitive scheduling tools and automated assignments.
                </p>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <Users className="w-8 h-8 text-primary-600 mb-2" />
                <CardTitle>DJ Profiles</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-600">
                  Comprehensive DJ profiles with social links, availability management, and performance tracking.
                </p>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <Settings className="w-8 h-8 text-primary-600 mb-2" />
                <CardTitle>Admin Tools</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-600">
                  Advanced admin controls for user management, schedule templates, and automated DJ assignments.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            <div>
              <div className="text-3xl font-bold text-primary-600 mb-2">500+</div>
              <div className="text-slate-600">Events Managed</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-primary-600 mb-2">50+</div>
              <div className="text-slate-600">Active DJs</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-primary-600 mb-2">99.9%</div>
              <div className="text-slate-600">Uptime</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-primary-600">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="max-w-2xl mx-auto">
            <h3 className="text-3xl font-bold text-white mb-4">
              Ready to Transform Your DJ Management?
            </h3>
            <p className="text-primary-100 mb-8">
              Join hundreds of event organizers who trust our platform to manage their DJ operations.
            </p>
            <Button 
              size="lg" 
              variant="secondary"
              onClick={() => window.location.href = "/api/login"}
            >
              Start Managing Today
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-800 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center mb-4 md:mb-0">
              <Music className="w-6 h-6 mr-2" />
              <span className="text-lg font-semibold">DJ Management System</span>
            </div>
            <div className="text-slate-400">
              © 2024 DJ Management System. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}