import React, { useState } from 'react';
import { 
  Sun, 
  Moon, 
  Waves, 
  Flame, 
  Skull, 
  Heart, 
  TreePine, 
  Shield, 
  Dice5, 
  Syringe, 
  Sword, 
  Wine, 
  Gem, 
  Zap, 
  Crown,
  BookOpen,
  Info
} from 'lucide-react';

const App = () => {
  const [activeFaith, setActiveFaith] = useState('genesism');

  const faiths = {
    genesism: {
      name: "Genesism",
      subtitle: "The One",
      color: "from-blue-900 to-indigo-950",
      accent: "text-blue-400",
      content: {
        intro: "''Before the TEN and the FOUR, there was ONE.''",
        likelyWorshippers: "Traditionalists, Spiritualists, Accelerationists, and the Hopeful.",
        deities: [
          {
            name: "Psydon",
            domain: "Otava, Naledi, Rockhill, and most of Psydonia's outermost fiefs.",
            background: "",
            likelyWorshippers: "Commonfolk, Zealots, Heroes, and the Esoteric."
          }
        ]
      }
    },
    theTen: {
      name: "Divine Pantheon Of The Ten",
      subtitle: "The Ten",
      color: "from-amber-900 to-yellow-950",
      accent: "text-amber-400",
      content: {
        background: "The TEN, holy and eternal. The most accepted religion in Azure Peak. The TEN became active in the lives of mortals after Psydon sent the Comet Syon to defeat the rampaging Archdevil and vanished from the world.\nThe Holy See, recently rocked by a violent schism, controls diosces across the world.The splinter church, the Holy Ecclesial, recognize the heretical 'Ascendants' - better known as INHUMEN GODS- as True Divinity. But it is only through faith of the TRUE DIVINE that hope can be found in this world.",
        likelyWorshippers: "Citizens of Azure Peak, conservative religious-folk, many commonfolk.",
        deities: [
          {
            name: "Abyssor",
            domain: "The great dreamer, primordial father of the tides. The ancient one, the most warped and potent of the ten.",
            background: "The strongest of the Ten; when awakened, the world flooded for a thousand daes and a thousand nights before he was put to slumber. Resting fitfully did Dendor split from his skull like a gaping wound. Communes rarely with his followers, only offering glimpses in dreams. Gifted primordial Man water.",
            likelyWorshippers: "Men of the Sea, Primitive Aquatics"
          },
          {
            name: "Astrata",
            domain: "Goddess of the Sun, Day, and Order",
            background: "The Tyrant of the Ten, sister and rival to Noc - and the eldest of them all. Her radiance keeps the evils at bay during the dae'. Nite', however, is a different tale.",
            likelyWorshippers: "The Noble Hearted, Zealots and Farmers"
          },
          {
            name: "Dendor",
            domain: "God of the Earth and Nature",
            background: "The God of Wilds, born from Abyssor's feverish dreams. Spilt forth life from the oceans to land in a wild craze. The Father of Ground-Lyfe. Treefather.",
            likelyWorshippers: "Druids, Beasts, Madmen"
          },
          {
            name: "Eora",
            domain: "Goddess of Love, Life and Beauty",
            background: "Baotha's fairer half, made from blind, unconditional love. She is without a shred of hate in her heart and taught mankind that true love that even transcends Necra's grasp.",
            likelyWorshippers: "Lovers, the romantically inclined, and Doting Grandparents"
          },
          {
            name: "Malum",
            domain: "God of Fire, Destruction and Rebirth",
            background: "Opinionless god of the crafts. He teaches that great works for killing or saving are great works, either way. The well-oiled guillotine and the well-sharpened axe are tools, and there is no good and evil to their craft.",
            likelyWorshippers: "Smiths, Miners, Engineers"
          },
          {
            name: "Necra",
            domain: "Goddess of Death and the Afterlife",
            background: "Veiled Lady of the underworld, equally feared and respected by mortals. She taught mortals the inevitability of death and cares for them as they reach the afterlife.",
            likelyWorshippers: "The Dead, Mourners, Gravekeepers"
          },
          {
            name: "Noc",
            domain: "God of the Moon, Night, Knowledge and Arcyne",
            background: "The Nite-Scholar, brother and rival to Astrata. His wisdom paves the way in the moonlight. Tales of esoteric magicka at the destination are sung - in the words of decaying scripts.",
            likelyWorshippers: "Wizards and Scholars"
          },
          {
            name: "Pestra",
            domain: "Goddess of Decay, Disease and Medicine",
            background: "Goddess that blessed many a saint with healing hands, Pestra taught man the arts of medicine and its benefits.",
            likelyWorshippers: "The Sick, Phyicians, Apothecaries"
          },
          {
            name: "Ravox",
            domain: "God of Justice, Glory, Battle",
            background: "Stalwart warrior, glorious justicier; legends say he came down to the Basin to repel the vile hordes of demons with his own hands, and that he seeks warriors for his divine army among mortals.",
            likelyWorshippers: "Warriors, Sellswords & those who seek Justice"
          },
          {
            name: "Xylix",
            domain: "God of Trickery, Freedom and Inspiration",
            background: "The Laughing God, both famous and infamous for his sway over the forces of luck. Xylix is known for the inspiration of many a bards lyric. Speaks through his gift to man; the Tarot deck.",
            likelyWorshippers: "Gamblers, Bards, Artists, and the Silver-Tongued"
          }
        ]
      }
    },
    ascendants: {
      name: "Ascendents",
      subtitle: "The Four",
      color: "from-purple-900 to-red-950",
      accent: "text-purple-400",
      content: {
        background: "The Holy Ecclesial is a series of sects formed by a violent schism with the Holy See that split the church in twain.\nThe Holy Ecclesial accepts the Four Ascendents as True Divinity, proof that Mortals can ascend past their limits. So close to the seat of the Holy See, worship of the Four is considered heretical, and they are denounced as the INHUMEN. But we laugh, and spit in their face.",
        likelyWorshippers: "Cultists, those spurned by the Ten.",
        deities: [
          {
            name: "Baotha",
            domain: "Goddess of Hedonism, Addiction, Anguish, and Heartbreak",
            background: "The twin sister of Eora, fallen to disgrace. She brings comfort to those who can't find it elsewhere but the bottom of a bottle; and she tempts those who have lost much into her fold through offers of relief and pleasure, yet they soon find themselves unable to escape her grasp. Seen as a scorned lover by many, and followed by such.",
            likelyWorshippers: "Widows, Gamblers, Addicts, and Scorned Lovers"
          },
          {
            name: "Graggar",
            domain: "God of Conquest, War, Strategy, Bind-Breaking",
            background: "Slave orc turned deity, said by the Holy Ecclesial to have been blessed by Ravox himself. He took his blessings to wage a bloody war against his once-captors, and then continued his conquest in his own name. Some Graggarites might care for honor, however many do not- what matters are results, and victory at a reasonable cost.",
            likelyWorshippers: "Prisoners, Slaves, Militants, and the Cruel"
          },
          {
            name: "Matthios",
            domain: "God of Exchange, Alchemy, Theft, and Greed",
            background: "The Man who stole fire from the sun and used it in his pursuit of immortality; exchanging the knowledge of how to make fire with the lessers for safety in doing so. He guides those who live in the dark, away from the flame of civilization; and those who believe in his cause bring the wealth of the undeserving in the light to the deserving in the dark.",
            likelyWorshippers: "Highwaymen, Alchemists, Downtrodden Peasants, and Merchants"
          },
          {
            name: "Zizo",
            domain: "Progress, Undeath, Hubris, Left Hand Magicks",
            background: "A once-mortal snow elf turned god. Her hubris in thinking she could harvest lux from the planet itself led to the elimination of her entire race. Her works are still used to this dae in some cases.",
            likelyWorshippers: "Necromancers, Researchers, Warlocks, and the Undead"
          }
        ]
      }
    }
  };

  const getIcon = (name) => {
    const icons = {
      "Psydon": <Crown className="w-6 h-6" />,
      "Abyssor": <Waves className="w-6 h-6" />,
      "Astrata": <Sun className="w-6 h-6" />,
      "Dendor": <TreePine className="w-6 h-6" />,
      "Eora": <Heart className="w-6 h-6" />,
      "Malum": <Flame className="w-6 h-6" />,
      "Necra": <Skull className="w-6 h-6" />,
      "Noc": <Moon className="w-6 h-6" />,
      "Pestra": <Syringe className="w-6 h-6" />,
      "Ravox": <Shield className="w-6 h-6" />,
      "Xylix": <Dice5 className="w-6 h-6" />,
      "Baotha": <Wine className="w-6 h-6" />,
      "Graggar": <Sword className="w-6 h-6" />,
      "Matthios": <Gem className="w-6 h-6" />,
      "Zizo": <Zap className="w-6 h-6" />,
    };
    return icons[name] || <Info className="w-6 h-6" />;
  };

  const current = faiths[activeFaith];

  return (
    <div className="flex flex-col md:flex-row min-h-screen bg-neutral-950 text-neutral-100 font-sans selection:bg-neutral-500 selection:text-white">
      {/* Sidebar Navigation */}
      <nav className="w-full md:w-64 bg-neutral-900 border-b md:border-b-0 md:border-r border-neutral-800 p-6 flex flex-col gap-8 shrink-0">
        <div>
          <h1 className="text-xl font-bold tracking-tighter uppercase mb-2">Pantheons</h1>
          <div className="h-1 w-12 bg-neutral-700"></div>
        </div>
        
        <div className="flex flex-col gap-4">
          {Object.entries(faiths).map(([key, faith]) => (
            <button
              key={key}
              onClick={() => setActiveFaith(key)}
              className={`text-left p-3 rounded-lg transition-all duration-200 border border-transparent ${
                activeFaith === key 
                ? 'bg-neutral-800 border-neutral-700 shadow-lg translate-x-1' 
                : 'hover:bg-neutral-800/50 text-neutral-400 hover:text-neutral-100'
              }`}
            >
              <div className="text-xs font-semibold uppercase tracking-widest opacity-50">{faith.subtitle}</div>
              <div className="text-lg font-bold">{faith.name}</div>
            </button>
          ))}
        </div>

        <div className="mt-auto hidden md:block opacity-30">
          <p className="text-xs italic">Azure Peak Archives</p>
        </div>
      </nav>

      {/* Main Content Area */}
      <main className={`flex-1 overflow-y-auto transition-all duration-500 bg-gradient-to-br ${current.color} p-4 md:p-12`}>
        <div className="max-w-4xl mx-auto space-y-12 pb-24">
          
          {/* Header Section */}
          <header className="space-y-6">
            <div className="inline-block px-3 py-1 rounded bg-black/30 backdrop-blur-md border border-white/10 text-xs font-bold uppercase tracking-[0.2em]">
              {current.subtitle}
            </div>
            <h2 className="text-5xl md:text-7xl font-black tracking-tight leading-none italic uppercase">
              {current.name}
            </h2>
            
            {current.content.intro && (
              <p className="text-2xl md:text-3xl font-serif italic text-white/90 border-l-4 border-white/20 pl-6 py-2">
                {current.content.intro}
              </p>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
              {current.content.background && (
                <div className="space-y-3">
                  <h4 className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest opacity-70">
                    <BookOpen className="w-4 h-4" /> Background
                  </h4>
                  <p className="text-lg leading-relaxed text-white/80 whitespace-pre-wrap">
                    {current.content.background}
                  </p>
                </div>
              )}
              <div className="space-y-3">
                <h4 className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest opacity-70">
                  <Info className="w-4 h-4" /> Likely Worshippers
                </h4>
                <p className="text-lg font-medium text-white/90">
                  {current.content.likelyWorshippers}
                </p>
              </div>
            </div>
          </header>

          <hr className="border-white/10" />

          {/* Deities Section */}
          <section className="space-y-8">
            <h3 className="text-3xl font-black italic uppercase tracking-tighter">Patrons</h3>
            <div className="grid grid-cols-1 gap-6">
              {current.content.deities.map((deity, idx) => (
                <div 
                  key={idx} 
                  className="group bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/5 p-6 md:p-8 rounded-2xl transition-all duration-300 hover:shadow-2xl"
                >
                  <div className="flex flex-col md:flex-row md:items-start gap-6">
                    <div className={`p-4 rounded-xl bg-neutral-900 border border-white/10 transition-transform group-hover:scale-110 ${current.accent}`}>
                      {getIcon(deity.name)}
                    </div>
                    
                    <div className="flex-1 space-y-4">
                      <div>
                        <h4 className="text-3xl font-bold uppercase tracking-tight">{deity.name}</h4>
                        <div className="text-sm font-bold text-white/60 mt-1 uppercase tracking-widest">
                          Domain: {deity.domain}
                        </div>
                      </div>

                      {deity.background && (
                        <p className="text-white/80 leading-relaxed text-lg">
                          {deity.background}
                        </p>
                      )}

                      <div className="pt-4 mt-4 border-t border-white/5">
                        <span className="text-xs font-bold uppercase tracking-widest opacity-50 block mb-1">Likely Worshippers</span>
                        <p className="text-sm text-white/70 italic font-medium">
                          {deity.likelyWorshippers}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </main>
    </div>
  );
};

export default App;