"use client";

import Link from "next/link";
import { ArrowRight, Sparkles, Users, Zap } from "lucide-react";

export default function Home() {
  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="border-b border-gray-200 sticky top-0 z-50 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-pink-600 to-purple-600 rounded-lg flex items-center justify-center">
              <span className="text-white text-sm font-bold">RP</span>
            </div>
            <span className="font-semibold text-lg">RoleplayAI</span>
          </div>
          <div className="flex items-center gap-4">
            <Link href="/login" className="text-gray-600 hover:text-gray-900 font-medium">
              Sign In
            </Link>
            <Link href="/login" className="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 font-medium">
              Get Started
            </Link>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
        <div className="text-center space-y-6 mb-12">
          <h1 className="text-5xl md:text-7xl font-bold leading-tight">
            AI Characters,
            <br />
            <span className="bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
              Real Conversations
            </span>
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Engage in immersive roleplay conversations with AI characters. Create, discover, and connect.
          </p>
          <div className="flex gap-4 justify-center pt-4">
            <Link href="/login" className="bg-black text-white px-8 py-3 rounded-full hover:bg-gray-800 font-medium inline-flex items-center gap-2">
              Start Free <ArrowRight size={18} />
            </Link>
            <button className="border-2 border-black px-8 py-3 rounded-full hover:bg-gray-50 font-medium">
              Learn More
            </button>
          </div>
        </div>

        {/* Hero Visual */}
        <div className="bg-gradient-to-br from-purple-100 via-pink-50 to-blue-100 rounded-3xl h-96 flex items-center justify-center">
          <div className="text-center">
            <div className="text-6xl mb-4">✨</div>
            <p className="text-gray-600">AI-powered conversations await</p>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="bg-gray-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-center mb-16">Why Choose RoleplayAI?</h2>
          
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: Sparkles,
                title: "Rich Characters",
                description: "Explore a diverse library of AI characters with unique personalities and backgrounds",
              },
              {
                icon: Users,
                title: "Discover & Share",
                description: "Find trending conversations and share your roleplay moments with the community",
              },
              {
                icon: Zap,
                title: "Instant Creation",
                description: "Create your own AI characters in seconds with our intuitive builder",
              },
            ].map((item, i) => (
              <div key={i} className="bg-white p-8 rounded-2xl border border-gray-200 hover:shadow-lg transition">
                <item.icon className="w-12 h-12 text-pink-600 mb-4" />
                <h3 className="text-xl font-semibold mb-3">{item.title}</h3>
                <p className="text-gray-600">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Showcase Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <h2 className="text-4xl font-bold mb-12">Featured Characters</h2>
        
        <div className="grid md:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl aspect-square flex items-end p-4">
              <div>
                <h3 className="font-semibold text-lg mb-1">Character {i}</h3>
                <p className="text-sm text-gray-600">Popular choice</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-black text-white py-20 mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
          <h2 className="text-5xl font-bold">Ready to explore?</h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Join thousands of users enjoying immersive AI conversations
          </p>
          <Link href="/login" className="inline-block bg-white text-black px-8 py-3 rounded-full hover:bg-gray-100 font-medium">
            Get Started for Free
          </Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-50 border-t border-gray-200 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <h4 className="font-semibold mb-4">Product</h4>
              <ul className="space-y-2 text-gray-600 text-sm">
                <li><a href="#" className="hover:text-black">Features</a></li>
                <li><a href="#" className="hover:text-black">Pricing</a></li>
                <li><a href="#" className="hover:text-black">Security</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Company</h4>
              <ul className="space-y-2 text-gray-600 text-sm">
                <li><a href="#" className="hover:text-black">About</a></li>
                <li><a href="#" className="hover:text-black">Blog</a></li>
                <li><a href="#" className="hover:text-black">Contact</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Legal</h4>
              <ul className="space-y-2 text-gray-600 text-sm">
                <li><a href="#" className="hover:text-black">Terms</a></li>
                <li><a href="#" className="hover:text-black">Privacy</a></li>
                <li><a href="#" className="hover:text-black">Cookie</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Follow</h4>
              <ul className="space-y-2 text-gray-600 text-sm">
                <li><a href="#" className="hover:text-black">Twitter</a></li>
                <li><a href="#" className="hover:text-black">Discord</a></li>
                <li><a href="#" className="hover:text-black">Instagram</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-200 pt-8 flex justify-between items-center text-gray-600 text-sm">
            <p>&copy; 2024 RoleplayAI. All rights reserved.</p>
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 bg-gradient-to-br from-pink-600 to-purple-600 rounded"></div>
              <span className="font-semibold">RoleplayAI</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}