import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Plus, Upload, ChevronDown, ChevronRight, Eye, Heart } from "lucide-react"

export default function Home() {
  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="sticky top-0 z-50 flex items-center justify-between border-b border-border bg-white px-8 h-[60px]">
        <div className="flex items-center gap-12">
          {/* Logo */}
          <a href="#" className="flex items-center gap-1 text-base font-semibold text-foreground">
            <span>v0</span>
            <span className="text-xs font-normal text-muted-foreground">by Vercel</span>
          </a>
          
          {/* New Chat Button */}
          <Button variant="outline" size="sm" className="gap-2">
            <Plus className="w-4 h-4" />
            New Chat
          </Button>
          
          {/* Nav Links */}
          <div className="flex items-center gap-6">
            <button className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              Templates
              <ChevronDown className="w-3 h-3" />
            </button>
            <button className="flex items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              Resources
              <ChevronDown className="w-3 h-3" />
            </button>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              Enterprise
            </a>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              Pricing
            </a>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              iOS
            </a>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              Students
            </a>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
              FAQ
            </a>
          </div>
        </div>
        
        {/* Auth Buttons */}
        <div className="flex items-center gap-4">
          <Button variant="outline" size="sm" className="text-sm font-medium">
            Sign In
          </Button>
          <Button variant="outline" size="sm" className="text-sm font-medium">
            Sign Up
          </Button>
        </div>
      </nav>

      {/* Main Container */}
      <main className="max-w-[1200px] mx-auto px-8">
        {/* Hero Section */}
        <section className="relative text-center py-16">
          {/* Large Watermark */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[240px] font-bold text-foreground/[0.02] tracking-tighter leading-none select-none pointer-events-none">
            v0
          </div>
          
          <div className="relative z-10">
            <h1 className="text-5xl font-semibold tracking-tight mb-4">
              What do you want to create?
            </h1>
            <p className="text-base text-muted-foreground mb-8">
              Start building with a single prompt. No coding needed.
            </p>
            
            {/* Input Field */}
            <div className="max-w-[600px] mx-auto flex items-center gap-2 p-2 border border-input rounded-xl bg-background hover:border-muted-foreground/20 focus-within:border-ring transition-colors">
              <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                <Plus className="w-5 h-5 text-muted-foreground" />
              </button>
              <Input 
                placeholder="Ask v0 to build..."
                className="border-0 shadow-none focus-visible:ring-0 text-sm bg-transparent"
              />
              <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                <Upload className="w-5 h-5 text-muted-foreground" />
              </button>
            </div>
          </div>
        </section>

        {/* Community Section */}
        <section className="py-12">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h2 className="text-lg font-semibold mb-1">From the Community</h2>
              <p className="text-sm text-muted-foreground">
                Explore what the community is building with v0.
              </p>
            </div>
            <a href="#" className="flex items-center gap-1 text-sm font-medium text-foreground hover:underline">
              Browse All
              <ChevronRight className="w-4 h-4" />
            </a>
          </div>

          {/* Template Grid */}
          <div className="grid grid-cols-3 gap-6">
            {/* Template Card 1 */}
            <div className="group cursor-pointer">
              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-gray-50">
                <div className="p-6">
                  <h3 className="text-sm font-medium mb-4">
                    Effortless custom contract billing by Brilliance
                  </h3>
                  <div className="mt-8 space-y-2">
                    <div className="h-2 bg-gray-200 rounded w-full"></div>
                    <div className="h-2 bg-gray-200 rounded w-3/4"></div>
                    <div className="h-8 bg-black rounded w-24 mt-4"></div>
                  </div>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1">Brilliance SaaS Landing Page</h4>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />
                      2.1k
                    </span>
                    <span className="flex items-center gap-1">
                      <Heart className="w-3 h-3" />
                      662
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Template Card 2 */}
            <div className="group cursor-pointer">
              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-black">
                <div className="flex items-center justify-center h-full">
                  <div className="text-white text-sm">3D Gallery Photography Template</div>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1">3D Gallery Photography Template</h4>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />
                      5.14k
                    </span>
                    <span className="flex items-center gap-1">
                      <Heart className="w-3 h-3" />
                      403
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Template Card 3 */}
            <div className="group cursor-pointer">
              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-black">
                <div className="absolute top-3 right-3">
                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black text-white text-xs font-medium border border-white/20">
                    AI
                  </span>
                </div>
                <div className="flex items-center justify-center h-full">
                  <h3 className="text-white text-lg font-semibold">AI Gateway Starter</h3>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1">AI Gateway Starter</h4>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />
                      4.42k
                    </span>
                    <span className="flex items-center gap-1">
                      <Heart className="w-3 h-3" />
                      188
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Template Card 4 */}
            <div className="group cursor-pointer">
              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-gradient-to-br from-blue-500 to-purple-600">
                <div className="flex flex-col items-center justify-center h-full text-white px-6">
                  <h3 className="text-lg font-semibold mb-3">
                    Unleash the Power of AI Agents
                  </h3>
                  <Button size="sm" variant="secondary" className="bg-white text-black hover:bg-gray-100">
                    Learn More
                  </Button>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1">Pointer AI landing page</h4>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />
                      14.8k
                    </span>
                    <span className="flex items-center gap-1">
                      <Heart className="w-3 h-3" />
                      1.1k
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Template Card 5 */}
            <div className="group cursor-pointer">
              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-black">
                <div className="flex items-center justify-center h-full">
                  <div className="w-16 h-16 rounded-lg bg-gradient-to-br from-green-400 to-emerald-500"></div>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1">Dashboard – M.O.N.K.Y</h4>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />
                      7.76k
                    </span>
                    <span className="flex items-center gap-1">
                      <Heart className="w-3 h-3" />
                      725
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Template Card 6 */}
            <div className="group cursor-pointer">
              <div className="relative aspect-[4/3] rounded-lg border border-border overflow-hidden mb-3 bg-gradient-to-br from-slate-900 to-slate-800">
                <div className="flex items-center justify-center h-full">
                  <h3 className="text-white text-lg font-semibold">
                    Unlock your future growth
                  </h3>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <div className="w-6 h-6 rounded-full bg-purple-500 flex-shrink-0"></div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1">Skal Ventures Template</h4>
                  <div className="flex items-center gap-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />
                      3.23k
                    </span>
                    <span className="flex items-center gap-1">
                      <Heart className="w-3 h-3" />
                      495
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}