export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold text-gray-900">MoreThanADiagnosis</h1>
            <nav className="flex gap-6">
              <a href="/docs" className="text-gray-600 hover:text-blue-600 transition-colors">API Docs</a>
              <a href="/redoc" className="text-gray-600 hover:text-blue-600 transition-colors">ReDoc</a>
              <a href="/health" className="text-gray-600 hover:text-blue-600 transition-colors">Health</a>
            </nav>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="text-center mb-16">
          <h2 className="text-5xl font-extrabold text-gray-900 mb-6">
            Welcome to MoreThanADiagnosis
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
            A community platform for health advocacy and support. Connect, share, and find resources for your health journey.
          </p>
          <div className="flex gap-4 justify-center">
            <a
              href="/docs"
              className="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl"
            >
              Explore API
            </a>
            <a
              href="/api/v1"
              className="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg border-2 border-blue-600 hover:bg-blue-50 transition-colors"
            >
              API Endpoints
            </a>
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
          {/* API Status */}
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <h3 className="ml-4 text-lg font-semibold text-gray-900">API Status</h3>
            </div>
            <p className="text-gray-600 mb-4">Backend API is live and operational</p>
            <a href="/health" className="text-blue-600 hover:text-blue-700 font-medium">
              Check Health →
            </a>
          </div>

          {/* Interactive Docs */}
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <h3 className="ml-4 text-lg font-semibold text-gray-900">Documentation</h3>
            </div>
            <p className="text-gray-600 mb-4">Interactive API documentation with Swagger UI</p>
            <a href="/docs" className="text-blue-600 hover:text-blue-700 font-medium">
              View Docs →
            </a>
          </div>

          {/* ReDoc */}
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
              </div>
              <h3 className="ml-4 text-lg font-semibold text-gray-900">ReDoc</h3>
            </div>
            <p className="text-gray-600 mb-4">Beautiful API reference documentation</p>
            <a href="/redoc" className="text-blue-600 hover:text-blue-700 font-medium">
              View ReDoc →
            </a>
          </div>

          {/* Authentication */}
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <h3 className="ml-4 text-lg font-semibold text-gray-900">Authentication</h3>
            </div>
            <p className="text-gray-600 mb-4">Secure JWT-based authentication (HS256)</p>
            <span className="text-gray-500">Access & Refresh tokens</span>
          </div>

          {/* Rate Limiting */}
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 className="ml-4 text-lg font-semibold text-gray-900">Rate Limiting</h3>
            </div>
            <p className="text-gray-600 mb-4">Protected endpoints with intelligent rate limiting</p>
            <span className="text-gray-500">10 req/sec for API</span>
          </div>

          {/* HTTPS Secure */}
          <div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h3 className="ml-4 text-lg font-semibold text-gray-900">HTTPS Enabled</h3>
            </div>
            <p className="text-gray-600 mb-4">Cloudflare SSL with full security headers</p>
            <span className="text-gray-500">Production ready</span>
          </div>
        </div>

        {/* API Info */}
        <div className="mt-16 bg-white rounded-xl shadow-md p-8 border border-gray-100">
          <h3 className="text-2xl font-bold text-gray-900 mb-4">API Information</h3>
          <div className="grid md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-gray-900 mb-2">Base URL</h4>
              <code className="bg-gray-100 px-3 py-1 rounded text-sm text-gray-800">
                https://mtd.runfoo.run/api/v1
              </code>
            </div>
            <div>
              <h4 className="font-semibold text-gray-900 mb-2">Authentication</h4>
              <code className="bg-gray-100 px-3 py-1 rounded text-sm text-gray-800">
                Bearer {'{'}token{'}'}
              </code>
            </div>
            <div>
              <h4 className="font-semibold text-gray-900 mb-2">Protocol</h4>
              <span className="text-gray-600">HTTPS (Cloudflare Flexible SSL)</span>
            </div>
            <div>
              <h4 className="font-semibold text-gray-900 mb-2">Database</h4>
              <span className="text-gray-600">PostgreSQL 15 + Redis 7</span>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center text-gray-600">
            <p className="mb-2">MoreThanADiagnosis Platform</p>
            <p className="text-sm text-gray-500">Backend API v1.0 • Deployed on nexus-vector</p>
          </div>
        </div>
      </footer>
    </main>
  )
}