import { Link } from 'react-router-dom';
import { Trophy, ChevronRight, Settings } from 'lucide-react';

export default function Home() {
  return (
    <div className="glass-panel animate-fade-in flex flex-col items-center justify-center text-center py-10">
      <Trophy size={64} className="mb-6" style={{ color: 'var(--secondary-color)' }} />
      <h1 className="text-2xl mb-2">A Seleção de Talentos</h1>
      <h2 className="text-4xl font-bold mb-6 text-gradient-ceunsp">CEUNSP</h2>
      <p className="text-muted mb-8 text-lg">
        Entre em campo, teste seus conhecimentos e concorra ao Kit Oficial da Seleção e bolsas de estudo!
      </p>
      
      <Link 
        to="/cadastro" 
        className="btn-primary w-full max-w-sm"
        onClick={() => {
          const audio = document.querySelector('audio');
          if (audio && audio.paused) {
            audio.volume = 0.3;
            audio.play().catch(e => console.log(e));
          }
        }}
      >
        Entrar no Estádio <ChevronRight size={20} />
      </Link>

      {/* Link de Administração Discreto */}
      <div style={{ marginTop: '2.5rem' }}>
        <Link 
          to="/admin" 
          style={{ 
            display: 'inline-flex', 
            alignItems: 'center', 
            gap: '0.4rem', 
            color: 'var(--text-muted)', 
            fontSize: '0.75rem', 
            textDecoration: 'none', 
            opacity: 0.3,
            transition: 'opacity 0.2s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.opacity = 0.9}
          onMouseLeave={(e) => e.currentTarget.style.opacity = 0.3}
        >
          <Settings size={12} /> Painel do Stand
        </Link>
      </div>
    </div>
  );
}
