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

<section id="stories" class="py-32 md:py-48 px-6 relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-b from-transparent via-amber-950/[0.03] to-transparent pointer-events-none" />

  <div class="max-w-5xl mx-auto relative">
    <AnimatedSection client:visible>
      <div class="mb-24 md:mb-32">
        <span class="text-amber-500/40 text-[10px] tracking-[0.35em] uppercase block mb-5 font-sans">
          Tales from the Void
        </span>
        <h2 class="font-serif text-5xl md:text-7xl lg:text-8xl text-amber-100/85 tracking-wide">
          Short Stories
        </h2>
        <p class="mt-8 text-amber-200/35 text-lg max-w-lg leading-relaxed font-sans">
          Fragments of myth and memory from the world of Arai
        </p>
      </div>
    </AnimatedSection>

    <AnimatedSection client:visible delay={200}>
      <div class="space-y-0">
        <StoryCard
          title="I Am Not Orias"
          tagline="A tale of identity"
          excerpt="In the shadow of the Dread Clans, a young scribe discovers that the name she carries belongs to someone far more dangerous than she ever imagined..."
          href="#"
          index={0}
        />
        <StoryCard
          title="The Stars Are Drowning"
          tagline="A cosmic lament"
          excerpt="When the night sky begins to weep, the seers of Talmeya speak of an ancient prophecy—one that foretells the end of all light..."
          href="#"
          index={1}
        />
      </div>
    </AnimatedSection>
  </div>
</section>
