"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function HomePage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <div className="w-full max-w-2xl space-y-6">
        {/* Logo */}
        <div className="flex justify-center">
          <img 
            src="/vibn-black-circle-logo.png" 
            alt="Vib'n" 
            className="h-24 w-24"
          />
        </div>

        {/* Welcome Card */}
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-3xl font-bold text-center">
              Welcome to Vib'n
            </CardTitle>
            <CardDescription className="text-center text-lg">
              Your AI-powered development platform
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="text-center space-y-4">
              <p className="text-muted-foreground">
                Track, manage, and deploy your AI-coded projects with ease.
              </p>
              
              <div className="grid gap-4 md:grid-cols-3">
                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <div className="text-3xl mb-2">🚀</div>
                    <h3 className="font-semibold mb-1">Fast Deployment</h3>
                    <p className="text-xs text-muted-foreground">
                      Deploy to Coolify with one click
                    </p>
                  </CardContent>
                </Card>
                
                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <div className="text-3xl mb-2">🤖</div>
                    <h3 className="font-semibold mb-1">AI-Powered</h3>
                    <p className="text-xs text-muted-foreground">
                      Track AI coding sessions
                    </p>
                  </CardContent>
                </Card>

                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <div className="text-3xl mb-2">📊</div>
                    <h3 className="font-semibold mb-1">Analytics</h3>
                    <p className="text-xs text-muted-foreground">
                      Monitor project progress
                    </p>
                  </CardContent>
                </Card>
              </div>

              <div className="pt-6 flex gap-4 justify-center">
                <Button size="lg" asChild>
                  <Link href="/auth">
                    Get Started
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <a href={process.env.NEXT_PUBLIC_PROXY_URL || "#"} target="_blank" rel="noopener noreferrer">
                    API Docs
                  </a>
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Features */}
        <div className="text-center text-sm text-muted-foreground">
          <p>✅ Self-hosted • ✅ Open source • ✅ Powered by Coolify</p>
        </div>
      </div>
    </div>
  );
}