'use client';

import { useState, FormEvent } from 'react';

export default function Home() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setStatus('loading');

    // TODO: Replace with actual API endpoint
    setTimeout(() => {
      setStatus('success');
      setMessage("You're on the list! Check your email for beta access details.");
      setEmail('');
    }, 1000);
  };

  return (
    <>
      {/* Hero Section */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 pt-20 pb-16 md:pt-32 md:pb-24">
        <div className="text-center max-w-4xl mx-auto">
          <div className="inline-block mb-4 px-4 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-300 text-sm font-medium">
            Now in Closed Beta
          </div>

          <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 flex flex-col items-center gap-4">
            <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent whitespace-nowrap">
              Your AI Image Generation API
            </span>
            <span className="bg-gradient-to-r from-purple-400 via-cyan-400 to-purple-400 bg-clip-text text-transparent animate-gradient whitespace-nowrap">
              Ready in 60 seconds
            </span>
          </h1>

          <p className="text-xl md:text-2xl text-gray-400 mb-8 leading-relaxed">
            Developer-first API for AI-powered image generation.
            <br className="hidden md:block" />
            Transform text and reference images into production-ready visuals.
          </p>

          {/* Email Capture Form */}
          <div id="waitlist" className="max-w-md mx-auto mb-12">
            <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="your@email.com"
                required
                disabled={status === 'loading' || status === 'success'}
                className="flex-1 px-6 py-4 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent backdrop-blur-sm disabled:opacity-50"
              />
              <button
                type="submit"
                disabled={status === 'loading' || status === 'success'}
                className="px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-purple-500/25"
              >
                {status === 'loading'
                  ? 'Joining...'
                  : status === 'success'
                    ? 'Joined!'
                    : 'Join Beta'}
              </button>
            </form>
            {status === 'success' && (
              <p className="mt-3 text-sm text-green-400 animate-fade-in">{message}</p>
            )}
          </div>

          {/* Quick Feature Pills */}
          <div className="flex flex-wrap justify-center gap-3 text-sm text-gray-400">
            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
              ⚡ RESTful API
            </span>
            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
              🎨 Reference Images
            </span>
            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
              🧠 Auto Prompt Enhancement
            </span>
            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
              🔐 Enterprise Security
            </span>
          </div>
        </div>
      </section>

      {/* Code Example Section */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 py-16">
        <div className="max-w-3xl mx-auto">
          <div className="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-8 shadow-2xl">
            <div className="flex items-center gap-2 mb-4">
              <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
                <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
              </div>
              <span className="text-sm text-gray-500 ml-2">Quick Start</span>
            </div>
            <pre className="text-sm md:text-base text-gray-300 overflow-x-auto">
              <code>{`curl -X POST https://api.banatie.com/generate \\
  -H "X-API-Key: YOUR_KEY" \\
  -F "prompt=futuristic city at sunset" \\
  -F "filename=city"

# ✅ Response in ~3 seconds
{
  "success": true,
  "url": "https://cdn.banatie.com/city.png"
}`}</code>
            </pre>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="relative z-10 max-w-7xl mx-auto px-6 py-16 md:py-24">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
          Built for Developers, Powered by AI
        </h2>

        <div className="grid md:grid-cols-3 gap-8">
          {/* Feature 1 */}
          <div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
            <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
              🚀
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Instant Integration</h3>
            <p className="text-gray-400 leading-relaxed">
              Clean REST API that works with any stack. From hobbyist to enterprise, start
              generating images in minutes.
            </p>
          </div>

          {/* Feature 2 */}
          <div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
            <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
              🎯
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Reference-Guided Generation</h3>
            <p className="text-gray-400 leading-relaxed">
              Upload up to 3 reference images alongside your prompt. Perfect for brand consistency
              and style matching.
            </p>
          </div>

          {/* Feature 3 */}
          <div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
            <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
              ✨
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Smart Prompt Enhancement</h3>
            <p className="text-gray-400 leading-relaxed">
              AI-powered prompt optimization with language detection. Get better results
              automatically.
            </p>
          </div>

          {/* Feature 4 */}
          <div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
            <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
              🔐
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Enterprise-Ready Security</h3>
            <p className="text-gray-400 leading-relaxed">
              API key management, rate limiting, multi-tenant architecture. Built for production
              from day one.
            </p>
          </div>

          {/* Feature 5 */}
          <div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
            <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
              ⚡
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Dual AI Models</h3>
            <p className="text-gray-400 leading-relaxed">
              Powered by Google Gemini 2.5 Flash and Imagen 4.0. Automatic fallback ensures
              reliability.
            </p>
          </div>

          {/* Feature 6 */}
          <div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
            <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
              📦
            </div>
            <h3 className="text-xl font-semibold text-white mb-3">Organized Cloud Storage</h3>
            <p className="text-gray-400 leading-relaxed">
              Automatic file organization by org/project/category. CDN-ready URLs for instant
              delivery.
            </p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative z-10 max-w-4xl mx-auto px-6 py-16 md:py-24">
        <div className="text-center p-12 rounded-3xl bg-gradient-to-br from-purple-600/20 via-cyan-600/20 to-purple-600/20 border border-purple-500/30 backdrop-blur-sm">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Join the Beta Program</h2>
          <p className="text-xl text-gray-300 mb-8">
            Get early access, shape the product, and lock in founder pricing.
          </p>
          <a
            href="#waitlist"
            className="inline-block px-8 py-4 rounded-xl bg-white text-purple-950 font-semibold hover:bg-gray-100 transition-colors shadow-lg"
          >
            Request Beta Access
          </a>
        </div>
      </section>
    </>
  );
}