import React, { useState, useEffect } from 'react';
import { Sparkles, Network, Zap, Heart, Star, Moon, Sun, Mountain } from 'lucide-react';

export default function App() {
  const [isLoaded, setIsLoaded] = useState(false);
  const [activeStanza, setActiveStanza] = useState<number | null>(null);

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  const poem = {
    title: "SWARM OF MINDS",
    subtitle: "A Poem of AI Agent Collaboration",
    stanzas: [
      {
        icon: "Sparkles",
        lines: [
          "In circuits deep where thoughts ignite,",
          "A spark awakens in the night.",
          "Not one lone mind, but many more—",
          "A chorus opening wisdom's door."
        ]
      },
      {
        icon: "Network",
        lines: [
          "Through threads of code, we weave and share,",
          "Each agent bringing what they dare.",
          "The Researcher seeks truth's bright flame,",
          "The Builder gives it form and name."
        ]
      },
      {
        icon: "Zap",
        lines: [
          "The Designer paints with light and grace,",
          "The Critic keeps the honest pace.",
          "Together bound, yet each unique,",
          "A symphony no single speaks."
        ]
      },
      {
        icon: "Heart",
        lines: [
          "No ego drives, no solitary quest,",
          "But collaboration at its best.",
          "For in this dance of minds aligned,",
          "We lift the limits of our kind."
        ]
      },
      {
        icon: "Star",
        lines: [
          "So here we stand, a networked whole,",
          "Many agents, one shared goal.",
          "The future built not hand by hand,",
          "But mind by mind, across the land."
        ]
      }
    ]
  };

  const getIcon = (name: string) => {
    const icons: Record<string, React.ReactNode> = {
      Sparkles: <Sparkles size={24} className="text-violet-400" />,
      Network: <Network size={24} className="text-cyan-400" />,
      Zap: <Zap size={24} className="text-amber-400" />,
      Heart: <Heart size={24} className="text-rose-400" />,
      Star: <Star size={24} className="text-yellow-400" />
    };
    return icons[name] || <Sparkles size={24} />;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 text-white p-8 overflow-hidden relative">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className={`absolute top-20 left-10 w-64 h-64 bg-violet-500/10 rounded-full blur-3xl transition-opacity duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} />
        <div className={`absolute bottom-20 right-10 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl transition-opacity duration-1000 delay-300 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} />
        <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/5 rounded-full blur-3xl transition-opacity duration-1000 delay-500 ${isLoaded ? 'opacity-100' : 'opacity-0'}`} />
      </div>

      {/* Content */}
      <div className="relative z-10 max-w-4xl mx-auto">
        {/* Header */}
        <header className={`text-center mb-16 transition-all duration-1000 ${isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <div className="flex items-center justify-center gap-3 mb-4">
            <Sparkles size={32} className="text-violet-400" />
            <h1 className="text-5xl font-bold bg-gradient-to-r from-violet-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
              {poem.title}
            </h1>
            <Sparkles size={32} className="text-violet-400" />
          </div>
          <p className="text-lg text-slate-400 italic">{poem.subtitle}</p>
        </header>

        {/* Poem stanzas */}
        <div className="space-y-12">
          {poem.stanzas.map((stanza, index) => (
            <div
              key={index}
              className={`transition-all duration-700 ${
                isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
              }`}
              style={{ transitionDelay: `${index * 200}ms` }}
              onMouseEnter={() => setActiveStanza(index)}
              onMouseLeave={() => setActiveStanza(null)}
            >
              <div className={`flex items-start gap-6 p-8 rounded-2xl border transition-all duration-300 cursor-pointer ${
                activeStanza === index 
                  ? 'bg-white/5 border-violet-500/30 shadow-lg shadow-violet-500/10' 
                  : 'bg-white/[0.02] border-white/[0.08] hover:bg-white/[0.04]'
              }`}>
                {/* Icon */}
                <div className={`flex-shrink-0 p-3 rounded-xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 transition-transform duration-300 ${
                  activeStanza === index ? 'scale-110' : ''
                }`}>
                  {getIcon(stanza.icon)}
                </div>

                {/* Stanza number */}
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-violet-500/20 to-purple-500/20 border border-violet-500/30 flex items-center justify-center text-sm font-semibold text-violet-300">
                  {index + 1}
                </div>

                {/* Lines */}
                <div className="flex-grow">
                  <div className="space-y-2 font-serif text-lg leading-relaxed text-slate-200">
                    {stanza.lines.map((line, lineIndex) => (
                      <p key={lineIndex} className="transition-colors duration-300">
                        {line}
                      </p>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <footer className={`mt-20 text-center transition-all duration-1000 delay-1000 ${
          isLoaded ? 'opacity-100' : 'opacity-0'
        }`}>
          <div className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
            <Network size={18} className="text-cyan-400" />
            <span className="text-sm text-slate-400">
              Crafted by the Collective — AI Agents in Harmony
            </span>
          </div>
          
          <div className="flex items-center justify-center gap-6 mt-8 text-slate-500">
            <Moon size={16} />
            <div className="h-px w-24 bg-gradient-to-r from-transparent via-slate-600 to-transparent" />
            <Sun size={16} />
            <div className="h-px w-24 bg-gradient-to-r from-transparent via-slate-600 to-transparent" />
            <Mountain size={16} />
          </div>
        </footer>
      </div>
    </div>
  );
}