import Link from "next/link";
import { ArrowRight, Zap, Layers, Globe, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
              <Zap className="w-4 h-4 text-white" />
            </div>
            <span className="font-bold text-lg gradient-text">PromptMotion AI</span>
          </div>
          <div className="flex items-center gap-4">
            <Link
              href="/auth/login"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Masuk
            </Link>
            <Link
              href="/auth/register"
              className="text-sm px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
            >
              Mulai Gratis
            </Link>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="container mx-auto px-4 py-24 text-center">
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-sm mb-8">
          <Star className="w-3.5 h-3.5" />
          <span>Platform Prompt Generator AI #1 Indonesia</span>
        </div>
        <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
          Generate Prompt AI
          <br />
          <span className="gradient-text">Profesional & Instan</span>
        </h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
          Buat prompt berkualitas studio untuk Seedance, Gemini Omni Flash, Kling Motion Control,
          Higgsfield, dan UGC TikTok — dalam hitungan detik.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link
            href="/auth/register"
            className="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:opacity-90 transition-opacity text-lg"
          >
            Coba Gratis Sekarang
            <ArrowRight className="w-5 h-5" />
          </Link>
          <Link
            href="/auth/login"
            className="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border hover:bg-accent transition-colors text-lg"
          >
            Sudah punya akun? Masuk
          </Link>
        </div>
      </section>

      {/* Platforms */}
      <section className="container mx-auto px-4 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">
          5 Platform Didukung
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          {[
            { name: "Seedance", icon: "🎬", color: "from-purple-500/20 to-indigo-500/20", border: "border-purple-500/30" },
            { name: "Gemini Omni", icon: "✨", color: "from-blue-500/20 to-cyan-500/20", border: "border-blue-500/30" },
            { name: "Kling Motion", icon: "🎯", color: "from-orange-500/20 to-red-500/20", border: "border-orange-500/30" },
            { name: "Higgsfield", icon: "🌊", color: "from-teal-500/20 to-emerald-500/20", border: "border-teal-500/30" },
            { name: "UGC TikTok", icon: "📱", color: "from-pink-500/20 to-rose-500/20", border: "border-pink-500/30" },
          ].map((p) => (
            <div
              key={p.name}
              className={`p-6 rounded-2xl bg-gradient-to-br ${p.color} border ${p.border} text-center`}
            >
              <div className="text-4xl mb-3">{p.icon}</div>
              <div className="font-semibold text-sm">{p.name}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Features */}
      <section className="container mx-auto px-4 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">Fitur Lengkap</h2>
        <div className="grid md:grid-cols-3 gap-6">
          {[
            { icon: <Layers className="w-6 h-6" />, title: "Simple & Advanced Mode", desc: "Pilih level detail sesuai kebutuhan — dari prompt cepat hingga breakdown shot list lengkap." },
            { icon: <Globe className="w-6 h-6" />, title: "Indonesia ↔ English", desc: "Input dalam Bahasa Indonesia, output otomatis di-translate ke English yang optimal." },
            { icon: <Zap className="w-6 h-6" />, title: "Hingga 5 Variasi", desc: "Generate 1, 3, atau 5 variasi prompt berbeda sekaligus untuk lebih banyak pilihan kreatif." },
          ].map((f, i) => (
            <div key={i} className="glass-card rounded-2xl p-6">
              <div className="w-12 h-12 rounded-xl bg-primary/20 text-primary flex items-center justify-center mb-4">
                {f.icon}
              </div>
              <h3 className="font-bold text-lg mb-2">{f.title}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border/50 py-8 text-center text-sm text-muted-foreground">
        <p>© {new Date().getFullYear()} PromptMotion AI. Built with ❤️ for creators.</p>
      </footer>
    </div>
  );
}
