---
import { Feather } from 'lucide-react';
import AnimatedSection from './AnimatedSection';

---

<section class="relative min-h-screen flex items-center justify-center pt-32">
  <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
    <AnimatedSection client:visible>
      <div
        class="transition-all duration-1000 delay-300 opacity-100 translate-y-0"
      >
        <div class="inline-flex items-center gap-3 mb-8">
          <div class="w-16 h-px bg-gradient-to-r from-transparent to-amber-600/40" />
          <Feather class="w-5 h-5 text-amber-500/50" />
          <div class="w-16 h-px bg-gradient-to-l from-transparent to-amber-600/40" />
        </div>
      </div>

      <h2 class="font-serif text-4xl md:text-6xl lg:text-7xl text-amber-100/90 tracking-[0.06em] leading-tight transition-all duration-1000 delay-500 opacity-100 translate-y-0">
        <span class="block">The Arai</span>
        <span class="block mt-2">Chronicles</span>
      </h2>

      <p class="mt-8 text-amber-200/40 text-lg md:text-xl max-w-xl mx-auto leading-relaxed font-sans transition-all duration-1000 delay-700 opacity-100 translate-y-0">
        A fantasy saga of dreams, curses, and the marked souls caught between fate and freedom
      </p>

      <div class="mt-14 flex flex-col sm:flex-row gap-4 justify-center transition-all duration-1000 delay-900 opacity-100 translate-y-0">
        <a
          href="#books"
          class="group px-8 py-4 bg-amber-800/70 hover:bg-amber-700/80 text-amber-50 font-serif tracking-[0.12em] uppercase text-sm transition-all duration-500 hover:shadow-xl hover:shadow-amber-900/20 hover:-translate-y-1"
        >
          <span class="relative">
            Explore the Books
            <span class="absolute -bottom-1 left-0 w-0 h-px bg-amber-200/50 transition-all duration-500 group-hover:w-full" />
          </span>
        </a>
        <a
          href="#map"
          class="group px-8 py-4 bg-transparent hover:bg-amber-900/20 text-amber-200/60 hover:text-amber-100 font-serif tracking-[0.12em] uppercase text-sm border border-amber-700/20 hover:border-amber-600/40 transition-all duration-500"
        >
          View the Realm
        </a>
      </div>
    </AnimatedSection>
  </div>

  <div class="absolute bottom-16 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4 text-amber-200/25">
    <span class="text-[10px] tracking-[0.25em] uppercase font-serif">Scroll</span>
    <div class="relative w-px h-16">
      <div class="absolute inset-0 bg-gradient-to-b from-amber-500/40 to-transparent" />
      <div class="absolute top-0 w-px h-8 bg-amber-400/60 animate-[scrollPulse_2s_ease-in-out_infinite]" />
    </div>
  </div>
</section>
