import React from "react";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Ship, Scroll, Users, Sparkles } from "lucide-react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function Inicio() {
  const teamMembers = [
    { name: "Marina", deity: "Las Musas", icon: "🎵", url: createPageUrl("Musas") },
    { name: "Clara", deity: "Hékate", icon: "🌙", url: createPageUrl("Hekate") },
    { name: "David", deity: "Apolo", icon: "☀️", url: createPageUrl("Apolo") },
    { name: "Coke", deity: "Hestia", icon: "🔥", url: createPageUrl("Hestia") },
  ];

  return (
    <div className="relative min-h-screen" style={{ background: 'linear-gradient(180deg, #1a1410 0%, #0f0a08 100%)' }}>
      <div className="absolute inset-0 opacity-5"
           style={{ 
             backgroundImage: `url('https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/user_68f136a490d9b0b42f8aa3b7/b5fb25c60_argonautas1.jpg')`,
             backgroundSize: 'cover',
             backgroundPosition: 'center'
           }} />

      <div className="relative z-10 max-w-6xl mx-auto px-6 py-12">
        {/* Hero Section */}
        <div className="text-center mb-16 relative">
          <div className="absolute inset-0 -z-10 opacity-20"
               style={{ 
                 background: 'radial-gradient(circle, var(--gold) 0%, transparent 70%)',
                 filter: 'blur(60px)'
               }} />
          
          <Ship className="w-24 h-24 mx-auto mb-6 golden-glow" style={{ color: 'var(--gold)' }} />
          
          <h1 className="text-6xl md:text-7xl font-bold mb-6 golden-glow"
              style={{ 
                color: 'var(--gold)', 
                fontFamily: 'serif',
                textShadow: '0 0 30px rgba(212,175,55,0.5)'
              }}>
            Los Argonautas
          </h1>
          
          <div className="h-1 w-64 mx-auto mb-6 greek-border" 
               style={{ background: 'linear-gradient(90deg, transparent, var(--gold), transparent)' }} />
          
          <p className="text-2xl mb-4" style={{ color: 'var(--cream)', fontStyle: 'italic' }}>
            En busca del conocimiento mitológico
          </p>
        </div>

        {/* Main Content */}
        <div className="grid md:grid-cols-2 gap-8 mb-12">
          <Card className="greek-border p-8 relative overflow-hidden golden-glow"
                style={{ background: 'rgba(42, 24, 16, 0.8)' }}>
            <div className="absolute top-0 right-0 w-32 h-32 -mr-8 -mt-8 opacity-10">
              <Scroll className="w-full h-full" style={{ color: 'var(--gold)' }} />
            </div>
            
            <h2 className="text-3xl font-bold mb-6 flex items-center gap-3"
                style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
              <Sparkles className="w-8 h-8" />
              ¿Quiénes fueron?
            </h2>
            
            <div className="space-y-4" style={{ color: 'var(--cream)' }}>
              <p className="leading-relaxed text-lg">
                Los Argonautas conformaban una <strong style={{ color: 'var(--gold)' }}>tripulación de héroes griegos</strong> que 
                navegaban en la <em>Argo</em> en busca del <strong style={{ color: 'var(--gold)' }}>vellocino de oro</strong> 
                (la piel dorada de un carnero alado).
              </p>
              
              <p className="leading-relaxed text-lg">
                Esta épica aventura fue propuesta por el <strong style={{ color: 'var(--gold)' }}>Oráculo de Delfos</strong> y 
                se encuentra documentada en textos de <em>Homero</em> y <em>Hesíodo</em>, entre otros grandes autores de la 
                antigüedad clásica.
              </p>

              <div className="mt-6 p-4 rounded-lg"
                   style={{ background: 'rgba(212,175,55,0.1)', border: '1px solid var(--gold)' }}>
                <p className="text-sm" style={{ color: 'var(--gold)', fontStyle: 'italic' }}>
                  "Como los héroes que navegaron hacia lo desconocido, nuestro grupo se embarca en la exploración 
                  del fascinante mundo de la mitología griega."
                </p>
              </div>
            </div>
          </Card>

          <Card className="greek-border p-8 relative overflow-hidden golden-glow"
                style={{ background: 'rgba(42, 24, 16, 0.8)' }}>
            <div className="absolute bottom-0 left-0 w-full h-32 opacity-5"
                 style={{ 
                   backgroundImage: `url('https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/user_68f136a490d9b0b42f8aa3b7/939d4abbe_argonautas2.jpg')`,
                   backgroundSize: 'cover'
                 }} />
            
            <h2 className="text-3xl font-bold mb-6 flex items-center gap-3"
                style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
              <Users className="w-8 h-8" />
              Nuestro Grupo
            </h2>
            
            <p className="mb-6 text-lg" style={{ color: 'var(--cream)' }}>
              Somos un equipo de cuatro estudiantes apasionados por la mitología, cada uno investigando 
              una divinidad diferente:
            </p>

            <div className="space-y-3">
              {teamMembers.map((member, index) => (
                <Link key={index} to={member.url}>
                  <div className="p-4 rounded-lg transition-all duration-300 hover:scale-105 cursor-pointer"
                       style={{ 
                         background: 'rgba(212,175,55,0.1)',
                         border: '1px solid var(--gold)'
                       }}>
                    <div className="flex items-center gap-4">
                      <span className="text-3xl">{member.icon}</span>
                      <div>
                        <p className="font-bold" style={{ color: 'var(--gold)' }}>
                          {member.name}
                        </p>
                        <p className="text-sm" style={{ color: 'var(--cream)' }}>
                          {member.deity}
                        </p>
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
            </div>

            <div className="mt-6 p-4 rounded-lg"
                 style={{ background: 'rgba(205,127,50,0.2)' }}>
              <p className="text-sm font-semibold mb-2" style={{ color: 'var(--gold)' }}>
                Proyecto Colaborativo
              </p>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>
                Además, todos hemos trabajado juntos en el dios <strong>Hermes</strong>, 
                donde cada miembro aportó una parte diferente de su historia.
              </p>
            </div>
          </Card>
        </div>

        {/* Navigation Cards */}
        <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
          <Link to={createPageUrl("Musas")} className="group">
            <Card className="greek-border p-6 text-center transition-all duration-300 hover:scale-105 golden-glow relative overflow-hidden"
                  style={{ background: 'rgba(42, 24, 16, 0.9)' }}>
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity"
                   style={{ background: 'var(--gold)' }} />
              <div className="text-5xl mb-3">🎵</div>
              <h3 className="font-bold text-xl mb-2" style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
                Las Musas
              </h3>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>Marina</p>
            </Card>
          </Link>

          <Link to={createPageUrl("Hekate")} className="group">
            <Card className="greek-border p-6 text-center transition-all duration-300 hover:scale-105 golden-glow relative overflow-hidden"
                  style={{ background: 'rgba(42, 24, 16, 0.9)' }}>
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity"
                   style={{ background: 'var(--gold)' }} />
              <div className="text-5xl mb-3">🌙</div>
              <h3 className="font-bold text-xl mb-2" style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
                Hékate
              </h3>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>Clara</p>
            </Card>
          </Link>

          <Link to={createPageUrl("Apolo")} className="group">
            <Card className="greek-border p-6 text-center transition-all duration-300 hover:scale-105 golden-glow relative overflow-hidden"
                  style={{ background: 'rgba(42, 24, 16, 0.9)' }}>
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity"
                   style={{ background: 'var(--gold)' }} />
              <div className="text-5xl mb-3">☀️</div>
              <h3 className="font-bold text-xl mb-2" style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
                Apolo
              </h3>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>David</p>
            </Card>
          </Link>

          <Link to={createPageUrl("Hestia")} className="group">
            <Card className="greek-border p-6 text-center transition-all duration-300 hover:scale-105 golden-glow relative overflow-hidden"
                  style={{ background: 'rgba(42, 24, 16, 0.9)' }}>
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity"
                   style={{ background: 'var(--gold)' }} />
              <div className="text-5xl mb-3">🔥</div>
              <h3 className="font-bold text-xl mb-2" style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
                Hestia
              </h3>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>Coke</p>
            </Card>
          </Link>

          <Link to={createPageUrl("Hermes")} className="group">
            <Card className="greek-border p-6 text-center transition-all duration-300 hover:scale-105 golden-glow relative overflow-hidden"
                  style={{ background: 'rgba(42, 24, 16, 0.9)' }}>
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity"
                   style={{ background: 'var(--gold)' }} />
              <div className="text-5xl mb-3">✨</div>
              <h3 className="font-bold text-xl mb-2" style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
                Hermes
              </h3>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>Todos</p>
            </Card>
          </Link>

          <Link to={createPageUrl("Actas")} className="group">
            <Card className="greek-border p-6 text-center transition-all duration-300 hover:scale-105 golden-glow relative overflow-hidden"
                  style={{ background: 'rgba(42, 24, 16, 0.9)' }}>
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity"
                   style={{ background: 'var(--gold)' }} />
              <div className="text-5xl mb-3">📜</div>
              <h3 className="font-bold text-xl mb-2" style={{ color: 'var(--gold)', fontFamily: 'serif' }}>
                Actas
              </h3>
              <p className="text-sm" style={{ color: 'var(--cream)' }}>Nuestro trabajo</p>
            </Card>
          </Link>
        </div>

        {/* Footer Quote */}
        <div className="mt-16 text-center">
          <div className="greek-border p-8 rounded-lg relative overflow-hidden golden-glow"
               style={{ background: 'rgba(42, 24, 16, 0.8)' }}>
            <p className="text-xl italic mb-2" style={{ color: 'var(--gold)' }}>
              "El conocimiento de los dioses ilumina el camino del mortal"
            </p>
            <p className="text-sm" style={{ color: 'var(--cream)' }}>
              Proyecto de Mitología - Asignatura Escolar
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}