'use client'

import { useState, useEffect } from 'react'

export default function Home() {
  const [apiData, setApiData] = useState<any>(null)

  useEffect(() => {
    // Call Go API
    fetch('/api/health')
      .then(res => res.json())
      .then(data => setApiData(data))
      .catch(err => console.error(err))
  }, [])

  return (
    <main className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 flex items-center justify-center p-6">
      <div className="max-w-2xl w-full">
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl shadow-lg mb-6">
            <span className="text-5xl">🐱</span>
          </div>
          <h1 className="text-5xl font-bold text-gray-900 mb-4">
            NekoFlow
          </h1>
          <p className="text-xl text-gray-600 mb-8">
            Go + Next.js Single Binary
          </p>
        </div>

        <div className="bg-white rounded-3xl shadow-2xl p-8 space-y-6">
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border-2 border-blue-100">
              <h3 className="text-lg font-bold text-gray-900 mb-2">Frontend</h3>
              <p className="text-sm text-gray-600">Next.js 14 + React 18</p>
              <p className="text-xs text-blue-600 mt-2">✅ Static Export</p>
            </div>

            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 border-2 border-green-100">
              <h3 className="text-lg font-bold text-gray-900 mb-2">Backend</h3>
              <p className="text-sm text-gray-600">Go 1.21+</p>
              <p className="text-xs text-green-600 mt-2">✅ Embedded</p>
            </div>
          </div>

          <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 border-2 border-purple-100">
            <h3 className="text-lg font-bold text-gray-900 mb-3">API Status</h3>
            {apiData ? (
              <div className="space-y-2 text-sm">
                <p>✅ Status: <span className="font-mono text-green-600">{apiData.status}</span></p>
                <p>⏰ Time: <span className="font-mono text-gray-600">{apiData.timestamp}</span></p>
                <p>🐹 Server: <span className="font-mono text-blue-600">{apiData.message}</span></p>
              </div>
            ) : (
              <p className="text-sm text-gray-500">Loading...</p>
            )}
          </div>

          <div className="text-center pt-4">
            <a 
              href="/setup" 
              className="inline-block px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl shadow-lg transition-all"
            >
              Setup Wizard →
            </a>
          </div>
        </div>
      </div>
    </main>
  )
}