'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ArrowRight, Globe, Shield, Zap, Sparkles, Code, Cpu, ExternalLink } from 'lucide-react';

export default function LandingPage() {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);

  useEffect(() => {
    // Check if the user is authenticated
    fetch('/api/auth/login')
      .then((res) => res.json())
      .then((data) => {
        setIsAuthenticated(data.authenticated);
      })
      .catch(() => {
        setIsAuthenticated(false);
      });
  }, []);

  return (
    <div className="relative min-h-screen bg-white overflow-x-hidden flex flex-col justify-between text-slate-800">
      {/* Header */}
      <header className="w-full max-w-7xl mx-auto px-6 py-5 flex items-center justify-between border-b border-slate-200 relative z-10 bg-white">
        <div className="flex items-center gap-2.5">
          <div className="h-9 w-9 rounded-lg bg-blue-600 flex items-center justify-center">
            <Cpu className="h-5 w-5 text-white" />
          </div>
          <span className="text-xl font-bold tracking-tight text-slate-900">
            RemotePress
          </span>
        </div>

        <nav className="flex items-center gap-4">
          {isAuthenticated === null ? (
            <div className="h-9 w-24 rounded bg-slate-100 animate-pulse" />
          ) : isAuthenticated ? (
            <Link
              href="/websites"
              className="px-4 py-2 text-sm font-bold rounded-lg bg-slate-900 text-white hover:bg-slate-800 transition-all flex items-center gap-1.5 cursor-pointer"
            >
              Dashboard <ArrowRight className="h-4 w-4" />
            </Link>
          ) : (
            <>
              <Link
                href="/login"
                className="text-sm font-bold text-slate-600 hover:text-slate-900 transition-colors"
              >
                Sign In
              </Link>
              <Link
                href="/register"
                className="px-4 py-2 text-sm font-bold rounded-lg bg-slate-100 hover:bg-slate-250 text-slate-850 border border-slate-200 transition-all cursor-pointer"
              >
                Create Account
              </Link>
            </>
          )}
        </nav>
      </header>

      {/* Hero Section */}
      <main className="max-w-7xl mx-auto px-6 py-20 lg:py-32 flex-grow relative z-10 w-full">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
          <div className="lg:col-span-7 flex flex-col items-start text-left gap-6">
            <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 border border-blue-200 text-xs font-bold text-blue-600">
              <Sparkles className="h-3.5 w-3.5 text-blue-500" />
              Next-Gen Remote WordPress Management
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-none text-slate-900">
              Manage WordPress Websites{' '}
              <span className="text-blue-600 block sm:inline">
                Remotely. Seamlessly.
              </span>
            </h1>

            <p className="text-lg text-slate-500 max-w-xl leading-relaxed font-medium">
              Login to your WordPress dashboards securely with **a single click**. Connect via admin credentials, application passwords, or our lightweight, zero-overhead API plugin.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto mt-2">
              {isAuthenticated ? (
                <Link
                  href="/websites"
                  className="px-6 py-3.5 rounded-xl bg-slate-900 text-white font-bold text-center hover:bg-slate-800 transition-colors flex items-center justify-center gap-2 group cursor-pointer"
                >
                  Enter Dashboard
                  <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
                </Link>
              ) : (
                <>
                  <Link
                    href="/register"
                    className="px-6 py-3.5 rounded-xl bg-slate-900 text-white font-bold text-center hover:bg-slate-800 transition-colors flex items-center justify-center gap-2 group cursor-pointer"
                  >
                    Get Started For Free
                    <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
                  </Link>
                  <Link
                    href="/login"
                    className="px-6 py-3.5 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-600 font-bold text-center shadow-sm transition-colors flex items-center justify-center gap-2 cursor-pointer"
                  >
                    Sign In
                  </Link>
                </>
              )}
            </div>

            {/* Micro stats */}
            <div className="flex items-center gap-8 mt-6 border-t border-slate-200 pt-6 w-full max-w-md">
              <div>
                <p className="text-2xl font-extrabold text-slate-900">100%</p>
                <p className="text-xs text-slate-400 font-bold">Secure SSO Tokens</p>
              </div>
              <div className="h-8 w-px bg-slate-200" />
              <div>
                <p className="text-2xl font-extrabold text-slate-900">Zero</p>
                <p className="text-xs text-slate-400 font-bold">Configuration Overhead</p>
              </div>
              <div className="h-8 w-px bg-slate-200" />
              <div>
                <p className="text-2xl font-extrabold text-slate-900">Light</p>
                <p className="text-xs text-slate-400 font-bold">12KB Client Plugin</p>
              </div>
            </div>
          </div>

          {/* Graphical Mockup */}
          <div className="lg:col-span-5 relative flex items-center justify-center">
            <div className="w-full max-w-md p-6 rounded-2xl border border-slate-200 bg-white shadow-md relative">
              <div className="absolute top-0 right-0 p-3 flex gap-1.5">
                <span className="w-2.5 h-2.5 rounded-full bg-red-400" />
                <span className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
                <span className="w-2.5 h-2.5 rounded-full bg-green-400" />
              </div>

              <div className="flex items-center gap-3 border-b border-slate-200 pb-4 mb-4">
                <Globe className="h-5 w-5 text-blue-500" />
                <span className="text-xs font-bold text-slate-400">remotepress_dashboard.app</span>
              </div>

              <div className="space-y-4">
                <div className="p-3.5 rounded-lg bg-slate-50 border border-slate-200 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded bg-emerald-50 border border-emerald-200 flex items-center justify-center">
                      <span className="text-emerald-700 text-xs font-extrabold">WP</span>
                    </div>
                    <div>
                      <h4 className="text-xs font-bold text-slate-800">WooCommerce Shop</h4>
                      <p className="text-[10px] text-slate-400">https://mystore.com</p>
                    </div>
                  </div>
                  <button className="px-3 py-1.5 text-[11px] font-bold rounded bg-emerald-50 text-emerald-700 border border-emerald-250 flex items-center gap-1 cursor-pointer">
                    <Zap className="h-3 w-3" /> Auto Login
                  </button>
                </div>

                <div className="p-3.5 rounded-lg bg-slate-50 border border-slate-200 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded bg-blue-50 border border-blue-200 flex items-center justify-center">
                      <span className="text-blue-700 text-xs font-extrabold">WP</span>
                    </div>
                    <div>
                      <h4 className="text-xs font-bold text-slate-800">Personal Blog</h4>
                      <p className="text-[10px] text-slate-400">https://myblog.org</p>
                    </div>
                  </div>
                  <button className="px-3 py-1.5 text-[11px] font-bold rounded bg-blue-50 text-blue-700 border border-blue-250 flex items-center gap-1 cursor-pointer">
                    <Zap className="h-3 w-3" /> Auto Login
                  </button>
                </div>

                <div className="p-4 rounded-lg bg-blue-50 border border-blue-200 text-[11px] text-blue-700 leading-normal flex items-start gap-2">
                  <Shield className="h-4 w-4 text-blue-500 shrink-0" />
                  <span>
                    SSO session generated. Safe server-to-server validation protocol completes in **0.1 seconds**.
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Features Grid */}
        <section className="mt-32 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm space-y-3">
            <div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center border border-blue-200">
              <Zap className="h-5 w-5 text-blue-600" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">Single-Click Access</h3>
            <p className="text-sm text-slate-500 leading-relaxed">
              No need to remember passwords or copy long session keys. Click the 'Auto Login' button and launch into your WordPress panel instantly.
            </p>
          </div>

          <div className="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm space-y-3">
            <div className="w-10 h-10 rounded-xl bg-violet-50 flex items-center justify-center border border-violet-200">
              <Code className="h-5 w-5 text-violet-600" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">Flexible Authentication</h3>
            <p className="text-sm text-slate-500 leading-relaxed">
              Connect using standard WP Admin credentials, safe native Application Passwords, or our secure custom plugin API key integration.
            </p>
          </div>

          <div className="p-6 rounded-2xl border border-slate-200 bg-white shadow-sm space-y-3">
            <div className="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center border border-emerald-200">
              <Shield className="h-5 w-5 text-emerald-600" />
            </div>
            <h3 className="text-lg font-bold text-slate-800">Enterprise-Grade Security</h3>
            <p className="text-sm text-slate-500 leading-relaxed">
              Logins are authenticated via single-use, cryptographically secure 30-second tokens verified server-to-server.
            </p>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="w-full max-w-7xl mx-auto px-6 py-8 border-t border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400 relative z-10 bg-white">
        <p>© {new Date().getFullYear()} RemotePress SaaS. All rights reserved.</p>
        <div className="flex items-center gap-6 font-bold">
          <Link href="/wp-plugin/remotepress.zip" target="_blank" className="hover:text-slate-600 transition-colors flex items-center gap-1">
            Download Client Plugin ZIP <ExternalLink className="h-3 w-3" />
          </Link>
          <span className="h-3 w-px bg-slate-200" />
          <a href="#" className="hover:text-slate-600 transition-colors">Privacy Policy</a>
          <a href="#" className="hover:text-slate-600 transition-colors">Terms of Service</a>
        </div>
      </footer>
    </div>
  );
}