---
import { CharacterAccordion } from './CharacterAccordion';
import AnimatedSection from './AnimatedSection';
---

<section id="characters" class="py-32 px-6">
  <div class="max-w-2xl mx-auto">
    <AnimatedSection client:visible>
      <div class="text-center mb-16">
        <span class="text-amber-500/40 text-[10px] tracking-[0.35em] uppercase font-sans">Meet</span>
        <h2 class="mt-4 font-serif text-4xl md:text-5xl lg:text-6xl text-amber-100/85 tracking-wide">
          The Characters
        </h2>
      </div>
    </AnimatedSection>

    <AnimatedSection client:visible delay={200}>
      <div class="bg-amber-950/10 border border-amber-900/15 rounded-sm overflow-hidden">
        <CharacterAccordion
          client:visible
          name="Krystal Monraais"
          description="A young dreamer marked by forces beyond her understanding, navigating the treacherous politics of Arai while uncovering the truth of her power."
        />
        <CharacterAccordion
          client:visible
          name="Drarja"
          description="A mysterious figure from the Dread Clans, whose loyalty is as shifting as the shadows they inhabit."
        />
        <CharacterAccordion
          client:visible
          name="Javis Zevos"
          description="A scholar of ancient texts, seeking answers in the forgotten corners of history."
        />
        <CharacterAccordion
          client:visible
          name="Talara"
          description="Guardian of secrets older than the realm itself, bound by oaths that transcend mortal understanding."
        />
        <CharacterAccordion
          client:visible
          name="Averil"
          description="A warrior whose blade has tasted the blood of legends, now seeking redemption in unlikely places."
        />
      </div>
    </AnimatedSection>
  </div>
</section>
