import Link from "next/link";
import { GameWithChapters } from "@/types";
import Emblem from "./Emblem";

export default function BookCover({ game }: { game: GameWithChapters }) {
  return (
    <div className="min-h-screen bg-parchment text-stone-800">
      {/* Hero banner */}
      <div className="relative overflow-hidden"
        style={{
          background: `
            radial-gradient(ellipse at 30% 30%, ${game.color}40 0%, transparent 60%),
            radial-gradient(ellipse at 70% 70%, ${game.colorDark}50 0%, transparent 60%),
            linear-gradient(to bottom, ${game.colorDark} 0%, ${game.color} 40%, ${game.colorDark} 100%)
          `,
        }}
      >
        <div className="relative z-10 p-4 md:p-6 lg:px-12">
          <Link href="/"
            className="inline-flex items-center text-white/60 hover:text-white/90 font-lora text-sm transition-colors"
          >
            <span className="mr-2">&larr;</span> Volver a la estanteria
          </Link>
        </div>

        <div className="relative z-10 flex flex-col items-center text-center px-6 pt-4 pb-16 md:pt-8 md:pb-24">
          <div className="mb-6" style={{ filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.4))" }}>
            <Emblem type={game.emblem} color={game.accentColor} size={72} />
          </div>

          <h1 className="font-playfair text-4xl md:text-6xl lg:text-7xl font-bold mb-3 tracking-wide"
            style={{ color: game.accentColor, textShadow: `0 2px 4px rgba(0,0,0,0.5)` }}
          >
            {game.title}
          </h1>

          <p className="font-lora italic text-lg md:text-xl tracking-[0.15em] uppercase mb-8"
            style={{ color: `${game.accentColor}bb` }}
          >
            {game.subtitle}
          </p>

          <div className="flex items-center gap-3 mb-8">
            <div className="w-12 h-[1px]" style={{ background: `linear-gradient(to right, transparent, ${game.accentColor}60)` }} />
            <div className="w-1.5 h-1.5 rotate-45" style={{ backgroundColor: game.accentColor, opacity: 0.7 }} />
            <div className="w-12 h-[1px]" style={{ background: `linear-gradient(to left, transparent, ${game.accentColor}60)` }} />
          </div>

          <p className="font-lora text-white/70 text-base md:text-lg leading-relaxed max-w-2xl">
            {game.description}
          </p>
        </div>

        <div className="absolute bottom-0 left-0 right-0 h-8 md:h-12"
          style={{ background: "linear-gradient(to bottom, transparent, #f5f0e8)" }}
        />
      </div>

      {/* Table of Contents */}
      <div className="max-w-2xl mx-auto px-6 py-12 md:py-16">
        <div className="text-center mb-10">
          <h2 className="font-playfair text-2xl md:text-3xl font-bold text-stone-800 mb-4">
            Indice de Capitulos
          </h2>
          <div className="flex items-center justify-center gap-3">
            <div className="w-12 h-[1px] bg-stone-300" />
            <div className="w-2 h-2 rotate-45" style={{ backgroundColor: game.accentColor }} />
            <div className="w-12 h-[1px] bg-stone-300" />
          </div>
        </div>

        <div className="space-y-1">
          {game.chapters.map((chapter) => (
            <Link key={chapter.slug} href={`/${game.slug}/${chapter.slug}`}
              className="flex items-baseline gap-4 py-4 px-4 rounded-lg hover:bg-parchment-dark transition-colors group"
            >
              <span className="font-playfair text-2xl md:text-3xl font-bold min-w-[3rem]"
                style={{ color: game.color }}
              >
                {String(chapter.number).padStart(2, "0")}
              </span>
              <span className="font-lora text-stone-700 group-hover:text-stone-900 flex-1 text-base md:text-lg">
                {chapter.title}
              </span>
              <span className="text-stone-300 group-hover:text-stone-500 text-base">&rarr;</span>
            </Link>
          ))}
        </div>

        <div className="flex items-center justify-center gap-3 mt-12">
          <div className="w-16 h-[1px] bg-stone-300" />
          <Emblem type={game.emblem} color={`${game.color}60`} size={24} />
          <div className="w-16 h-[1px] bg-stone-300" />
        </div>
      </div>
    </div>
  );
}
