---
import { ScrollingBookCard } from './ScrollingBookCard';

const books = [
  {
    number: 1,
    title: "The Dreamer and the Marked",
    description:
      "In a world where dreams can kill and marks determine destiny, one young woman must navigate the treacherous politics of Arai while unraveling the mystery of her own power.",
    coverImage: "/fantasy-book-cover-with-fire-and-mystical-symbols-.jpg",
    comingSoon: false,
  },
  {
    number: 2,
    title: "The Curse of Orias",
    description: "The curse spreads. The marked fall. And in the shadows, something ancient awakens.",
    comingSoon: true,
  },
  {
    number: 3,
    title: "Title to be Revealed",
    description: "The final chapter of the trilogy awaits...",
    comingSoon: true,
  },
];
---

<section id="books" class="relative">
  <div class="flex flex-col lg:flex-row">
    <div class="lg:w-1/2 lg:sticky lg:top-0 lg:h-screen flex items-center lg:items-start justify-center py-24 lg:pt-48 lg:pb-0">
      <div class="text-center lg:text-left px-8 lg:px-16 max-w-lg">
        <span class="text-amber-500/60 text-xs tracking-[0.3em] uppercase">The Series</span>
        <h2 class="mt-4 font-serif text-4xl md:text-5xl lg:text-6xl text-amber-100/90 tracking-[0.05em] leading-tight">
          The Arai Chronicles
        </h2>
        <p class="mt-6 text-amber-200/50 leading-relaxed">
          A dark fantasy trilogy exploring dreams, destiny, and the price of power in the mystical realm of Arai.
        </p>
        <div class="mt-8 flex items-center gap-4 justify-center lg:justify-start">
          <div class="w-12 h-px bg-amber-600/40" />
          <span class="text-amber-400/50 text-sm tracking-wider">3 Books</span>
          <div class="w-12 h-px bg-amber-600/40" />
        </div>
      </div>
    </div>

    <div class="lg:w-1/2">
      {books.map((book, index) => (
        <div
          key={book.number}
          class="min-h-screen flex items-center justify-center py-24 lg:py-0 px-8 lg:px-16"
        >
          <ScrollingBookCard
            client:visible
            number={book.number}
            title={book.title}
            description={book.description}
            coverImage={book.coverImage}
            comingSoon={book.comingSoon}
            isLast={index === books.length - 1}
          />
        </div>
      ))}
    </div>
  </div>
</section>
