'use client'

import { User, Mail, Calendar, Shield } from 'lucide-react'

export default function Profile() {
  return (
    <div className="flex justify-center p-8">
      <div className="max-w-[1100px] w-full">
        <div 
          className="relative rounded-2xl border p-8 mb-6 overflow-hidden"
          style={{
            backgroundColor: 'rgba(10, 10, 10, 0.6)',
            borderColor: '#1a1a1a',
            backdropFilter: 'blur(20px)',
          }}
        >
          <div 
            className="absolute inset-0 opacity-30"
            style={{
              background: 'radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15), transparent 50%), radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.15), transparent 50%)',
            }}
          />
          
          <div className="relative z-10">
            <h1 
              className="text-4xl font-bold mb-2"
              style={{ 
                color: '#ffffff',
                textShadow: '0 0 30px rgba(255, 255, 255, 0.1)',
              }}
            >
              Profile
            </h1>
            <p 
              className="text-sm"
              style={{ color: '#6b7280' }}
            >
              Manage your account settings
            </p>
          </div>
        </div>

        <div className="flex flex-col items-center justify-center py-32">
          <div 
            className="w-24 h-24 rounded-full flex items-center justify-center mb-6"
            style={{
              backgroundColor: 'rgba(59, 130, 246, 0.1)',
              border: '2px solid rgba(59, 130, 246, 0.3)',
            }}
          >
            <User 
              className="h-12 w-12"
              style={{ color: '#3b82f6' }}
            />
          </div>

          <h2 
            className="text-2xl font-bold mb-2"
            style={{ color: '#ffffff' }}
          >
            Profile Coming Soon
          </h2>
          
          <p 
            className="text-sm mb-8 text-center max-w-md"
            style={{ color: '#6b7280' }}
          >
            We're working on bringing you a comprehensive profile management system. Stay tuned!
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl">
            <div 
              className="rounded-2xl border p-6 text-center"
              style={{
                backgroundColor: 'rgba(10, 10, 10, 0.6)',
                borderColor: '#1a1a1a',
                backdropFilter: 'blur(20px)',
              }}
            >
              <div 
                className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"
                style={{
                  backgroundColor: 'rgba(59, 130, 246, 0.1)',
                  border: '1px solid rgba(59, 130, 246, 0.3)',
                }}
              >
                <User className="h-6 w-6" style={{ color: '#3b82f6' }} />
              </div>
              <div 
                className="text-sm font-semibold mb-1"
                style={{ color: '#ffffff' }}
              >
                Account Info
              </div>
              <div 
                className="text-xs"
                style={{ color: '#6b7280' }}
              >
                View and edit your details
              </div>
            </div>

            <div 
              className="rounded-2xl border p-6 text-center"
              style={{
                backgroundColor: 'rgba(10, 10, 10, 0.6)',
                borderColor: '#1a1a1a',
                backdropFilter: 'blur(20px)',
              }}
            >
              <div 
                className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"
                style={{
                  backgroundColor: 'rgba(168, 85, 247, 0.1)',
                  border: '1px solid rgba(168, 85, 247, 0.3)',
                }}
              >
                <Shield className="h-6 w-6" style={{ color: '#a855f7' }} />
              </div>
              <div 
                className="text-sm font-semibold mb-1"
                style={{ color: '#ffffff' }}
              >
                Security
              </div>
              <div 
                className="text-xs"
                style={{ color: '#6b7280' }}
              >
                Manage your security settings
              </div>
            </div>

            <div 
              className="rounded-2xl border p-6 text-center"
              style={{
                backgroundColor: 'rgba(10, 10, 10, 0.6)',
                borderColor: '#1a1a1a',
                backdropFilter: 'blur(20px)',
              }}
            >
              <div 
                className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3"
                style={{
                  backgroundColor: 'rgba(34, 197, 94, 0.1)',
                  border: '1px solid rgba(34, 197, 94, 0.3)',
                }}
              >
                <Calendar className="h-6 w-6" style={{ color: '#22c55e' }} />
              </div>
              <div 
                className="text-sm font-semibold mb-1"
                style={{ color: '#ffffff' }}
              >
                Activity
              </div>
              <div 
                className="text-xs"
                style={{ color: '#6b7280' }}
              >
                Track your usage history
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
