"use client";

import Link from "next/link";
import { useState } from "react";
import { api } from "@/lib/api";

export default function Home() {
  const [isAuthenticated] = useState(() => {
    if (typeof window !== 'undefined') {
      return api.isAuthenticated();
    }
    return false;
  });

  return (
    <div className="flex-1 flex flex-col justify-center items-center px-4 relative overflow-hidden bg-background">
      {/* Background neon blur graphics */}
      <div className="absolute top-1/4 left-1/4 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/20 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-1/4 right-1/4 translate-x-1/2 translate-y-1/2 w-96 h-96 bg-accent/20 rounded-full blur-3xl pointer-events-none" />

      <main className="max-w-3xl text-center z-10 animate-fade-in">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-card/60 backdrop-blur-md mb-6">
          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
          <span className="text-xs font-semibold text-muted-foreground">Version 2.0 Live - License Manager</span>
        </div>

        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
          Supercharge Your Plugins with <br />
          <span className="gradient-text">NanoBuild Licensing</span>
        </h1>

        <p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
          The ultimate developer platform to license, monitor, and distribute WordPress plugins. Access API credentials, track activations, and scale your SaaS business.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          {isAuthenticated ? (
            <Link
              href="/dashboard"
              className="glow-btn bg-primary hover:bg-primary/95 text-white font-semibold px-8 py-3.5 rounded-lg shadow-lg hover:shadow-primary/20"
            >
              Go to Dashboard
            </Link>
          ) : (
            <>
              <Link
                href="/login"
                className="glow-btn bg-primary hover:bg-primary/95 text-white font-semibold px-8 py-3.5 rounded-lg shadow-lg hover:shadow-primary/20 text-center w-full sm:w-auto"
              >
                Sign In
              </Link>
              <Link
                href="/register"
                className="bg-secondary hover:bg-secondary/80 text-foreground border border-border font-semibold px-8 py-3.5 rounded-lg text-center w-full sm:w-auto transition-colors"
              >
                Create Account
              </Link>
            </>
          )}
        </div>
      </main>

      <footer className="absolute bottom-6 text-center text-xs text-muted-foreground z-10">
        &copy; {new Date().getFullYear()} NanoBuild. All rights reserved.
      </footer>
    </div>
  );
}