import React, { useEffect, useMemo, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  BookOpen,
  ChevronLeft,
  ChevronRight,
  Moon,
  Stars,
  Sparkles,
  Volume2,
  Pause,
  Play,
  User,
  Wand2,
  Music2,
  Image as ImageIcon,
  Castle,
  Trees,
  Crown,
  Heart,
  Bird,
  Gem,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Slider } from "@/components/ui/slider";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";

const PAGE_COUNT = 100;
const CHAPTERS = 10;

const kingdoms = [
  "Bosque da Lua Dourada",
  "Vale das Névoas Azuis",
  "Castelo das Estrelas",
  "Jardim das Fadas de Cristal",
  "Montanhas do Coração Antigo",
  "Rio de Prata Cantante",
  "Floresta dos Segredos Suaves",
  "Ilha do Sol Adormecido",
  "Campos da Aurora",
  "Torre do Vento Encantado",
];

const guardians = [
  "uma loba celestial",
  "um cervo de vidro",
  "uma coruja dourada",
  "um dragão gentil",
  "uma raposa luminosa",
  "um cavaleiro de musgo",
  "uma sereia dos lagos",
  "um gato mágico",
  "uma princesa viajante",
  "um relojoeiro encantado",
];

const treasures = [
  "a chave do amanhecer",
  "o rubi da coragem",
  "a rosa eterna",
  "o mapa dos desejos",
  "a ampulheta do destino",
  "o colar das marés",
  "a lanterna dos sonhos",
  "o espelho da verdade",
  "o sino de prata",
  "a pena das memórias",
];

const moods = [
  "misteriosa",
  "acolhedora",
  "brilhante",
  "poética",
  "encantadora",
  "suave",
  "heróica",
  "sonhadora",
  "radiante",
  "mágica",
];

const illustrations = [
  { icon: Castle, label: "Castelo encantado" },
  { icon: Trees, label: "Floresta mágica" },
  { icon: Crown, label: "Reino dourado" },
  { icon: Heart, label: "Coração do destino" },
  { icon: Bird, label: "Mensageira celestial" },
  { icon: Gem, label: "Tesouro antigo" },
];

const chapterThemes = [
  "O Chamado da Primeira Estrela",
  "A Floresta dos Sussurros",
  "O Portal das Rosas",
  "As Torres do Reino Antigo",
  "O Segredo do Lago de Cristal",
  "A Coroa da Aurora",
  "A Travessia do Vento",
  "Os Guardiões do Coração",
  "A Última Chave Encantada",
  "O Reino que Aprendeu a Sonhar",
];

function makePages() {
  return Array.from({ length: PAGE_COUNT }, (_, i) => {
    const chapter = Math.floor(i / 10) + 1;
    const kingdom = kingdoms[i % kingdoms.length];
    const guardian = guardians[(i * 3) % guardians.length];
    const treasure = treasures[(i * 7) % treasures.length];
    const mood = moods[(i * 5) % moods.length];
    const chapterTheme = chapterThemes[chapter - 1];
    const illustration = illustrations[i % illustrations.length];

    const title =
      i === 0
        ? "Prólogo: A Primeira Luz"
        : i === PAGE_COUNT - 1
          ? "Epílogo: O Reino que Aprendeu a Sonhar"
          : `Capítulo ${chapter} · Página ${i + 1}`;

    const text =
      i === 0
        ? `Era uma vez, além das nuvens cor de mel, um reino chamado ${kingdom}. Em cada janela brilhava uma esperança antiga, e em cada caminho de pedra havia o eco de um novo destino. Numa noite especialmente ${mood}, uma pequena centelha desceu do céu e escolheu o coração de quem abrisse este livro.`
        : i === PAGE_COUNT - 1
          ? `Quando a última estrela tocou o horizonte, o povo de ${kingdom} entendeu que a verdadeira magia nunca esteve apenas em coroas, torres ou feitiços. Ela morava em gestos de bondade, em promessas cumpridas e na coragem de continuar. E assim, o conto terminou do jeito mais bonito: com espaço para um novo começo.`
          : `No coração de ${kingdom}, ${guardian} guardava ${treasure}. A trilha daquela página era ${mood}, feita de brilhos, música distante e escolhas delicadas. A cada passo, a personagem principal aprendia que a magia mais forte nasce quando o medo encontra coragem, quando a dúvida encontra ternura e quando o impossível finalmente decide florescer.`;

    const choiceA = i % 3 === 0 ? "Seguir a luz da lanterna encantada" : "Conversar com o guardião do caminho";
    const choiceB = i % 2 === 0 ? "Abrir o portal escondido entre as flores" : "Esperar a canção do vento revelar um segredo";

    const accent = [
      "from-rose-200 via-amber-100 to-fuchsia-200",
      "from-sky-200 via-cyan-100 to-indigo-200",
      "from-violet-200 via-purple-100 to-pink-200",
      "from-emerald-200 via-lime-100 to-teal-200",
      "from-yellow-200 via-orange-100 to-rose-200",
    ][i % 5];

    return {
      id: i + 1,
      chapter,
      chapterTheme,
      title,
      text,
      kingdom,
      guardian,
      treasure,
      choiceA,
      choiceB,
      accent,
      quote: `"Toda página guarda um milagre para quem continua lendo."`,
      illustration,
    };
  });
}

function MagicalIllustration({ icon: Icon, label, accent }) {
  return (
    <div className={`relative overflow-hidden rounded-[2rem] border border-white/50 bg-gradient-to-br ${accent} p-6 shadow-xl`}>
      <motion.div
        className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-white/35 blur-2xl"
        animate={{ scale: [1, 1.15, 1], opacity: [0.4, 0.8, 0.4] }}
        transition={{ duration: 5, repeat: Infinity }}
      />
      <motion.div
        className="absolute bottom-4 left-4 h-24 w-24 rounded-full bg-white/30 blur-2xl"
        animate={{ y: [0, -10, 0], opacity: [0.3, 0.6, 0.3] }}
        transition={{ duration: 4.5, repeat: Infinity }}
      />

      <div className="relative z-10 flex min-h-[250px] flex-col items-center justify-center rounded-[1.6rem] border border-white/40 bg-white/25 p-6 text-center backdrop-blur-sm">
        <motion.div
          animate={{ y: [0, -10, 0], rotate: [0, 4, -4, 0] }}
          transition={{ duration: 6, repeat: Infinity }}
          className="mb-4 rounded-full bg-white/65 p-6 shadow-2xl"
        >
          <Icon className="h-16 w-16 text-slate-700" />
        </motion.div>
        <div className="text-xs font-bold uppercase tracking-[0.35em] text-slate-700/70">Ilustração do capítulo</div>
        <div className="mt-3 text-2xl font-black text-slate-800">{label}</div>
        <p className="mt-3 max-w-sm text-sm leading-7 text-slate-700">
          Arte simbólica para representar o clima visual desta parte do conto, com brilho mágico, relevo suave e atmosfera cinematográfica.
        </p>
      </div>
    </div>
  );
}

export default function LivroContoDeFadasLuxuoso() {
  const pages = useMemo(() => makePages(), []);
  const [page, setPage] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [voiceMode, setVoiceMode] = useState("feminina");
  const [rate, setRate] = useState([0.95]);
  const [pitch, setPitch] = useState([1.08]);
  const [autoNarrate, setAutoNarrate] = useState(false);
  const [voices, setVoices] = useState([]);
  const [bookOpen, setBookOpen] = useState(false);
  const [musicOn, setMusicOn] = useState(false);
  const [musicVolume, setMusicVolume] = useState([22]);
  const utteranceRef = useRef(null);
  const audioContextRef = useRef(null);
  const bgNodesRef = useRef([]);

  const current = pages[page];
  const progress = ((page + 1) / PAGE_COUNT) * 100;
  const chapterProgress = (((page % 10) + 1) / 10) * 100;

  useEffect(() => {
    const loadVoices = () => {
      const list = window.speechSynthesis?.getVoices?.() || [];
      setVoices(list);
    };

    loadVoices();
    if (window.speechSynthesis) {
      window.speechSynthesis.onvoiceschanged = loadVoices;
    }

    return () => {
      if (window.speechSynthesis) window.speechSynthesis.cancel();
      if (audioContextRef.current) audioContextRef.current.close().catch(() => {});
    };
  }, []);

  useEffect(() => {
    bgNodesRef.current.forEach((node) => {
      if (node?.gain) {
        node.gain.gain.value = musicOn ? musicVolume[0] / 100 / 8 : 0;
      }
    });
  }, [musicOn, musicVolume]);

  const initMusic = async () => {
    if (audioContextRef.current) return;
    const AudioCtx = window.AudioContext || window.webkitAudioContext;
    if (!AudioCtx) return;

    const ctx = new AudioCtx();
    audioContextRef.current = ctx;

    const createOsc = (type, frequency, gainValue) => {
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.type = type;
      osc.frequency.value = frequency;
      gain.gain.value = musicOn ? gainValue : 0;
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start();
      return { osc, gain };
    };

    bgNodesRef.current = [
      createOsc("sine", 261.63, musicVolume[0] / 100 / 10),
      createOsc("triangle", 329.63, musicVolume[0] / 100 / 16),
      createOsc("sine", 392.0, musicVolume[0] / 100 / 20),
    ];
  };

  const toggleMusic = async () => {
    await initMusic();
    if (audioContextRef.current?.state === "suspended") {
      await audioContextRef.current.resume();
    }
    setMusicOn((prev) => !prev);
  };

  const preferredVoice = useMemo(() => {
    if (!voices.length) return null;

    const femaleHints = ["female", "woman", "mulher", "feminina", "luciana", "maria", "helena", "samantha", "victoria", "google português do brasil"];
    const maleHints = ["male", "man", "homem", "masculina", "daniel", "felipe", "antonio", "jorge"];
    const hints = voiceMode === "feminina" ? femaleHints : maleHints;

    const exact = voices.find((v) => hints.some((hint) => `${v.name} ${v.lang}`.toLowerCase().includes(hint)));
    if (exact) return exact;

    const portuguese = voices.find((v) => v.lang?.toLowerCase().includes("pt-br") || v.lang?.toLowerCase().includes("pt"));
    return portuguese || voices[0];
  }, [voices, voiceMode]);

  const narrationText = useMemo(() => {
    return `${current.title}. ${current.text} Escolha um caminho. Opção 1: ${current.choiceA}. Opção 2: ${current.choiceB}.`;
  }, [current]);

  const speak = () => {
    if (!window.speechSynthesis) return;
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(narrationText);
    if (preferredVoice) utterance.voice = preferredVoice;
    utterance.lang = preferredVoice?.lang || "pt-BR";
    utterance.rate = rate[0];
    utterance.pitch = pitch[0];
    utterance.onend = () => setIsPlaying(false);
    utterance.onerror = () => setIsPlaying(false);
    utteranceRef.current = utterance;
    window.speechSynthesis.speak(utterance);
    setIsPlaying(true);
  };

  const stopSpeaking = () => {
    if (!window.speechSynthesis) return;
    window.speechSynthesis.cancel();
    setIsPlaying(false);
  };

  const nextPage = () => setPage((p) => Math.min(PAGE_COUNT - 1, p + 1));
  const prevPage = () => setPage((p) => Math.max(0, p - 1));
  const jumpToChoice = (choice) => {
    const offset = choice === "A" ? 2 : 3;
    setPage((p) => Math.min(PAGE_COUNT - 1, p + offset));
  };

  useEffect(() => {
    if (autoNarrate && bookOpen) {
      const t = setTimeout(() => speak(), 450);
      return () => clearTimeout(t);
    }
    stopSpeaking();
  }, [page, autoNarrate, preferredVoice, bookOpen]);

  const currentIllustrationIcon = current.illustration.icon;

  return (
    <div className="min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.9),_rgba(251,191,36,0.10),_rgba(244,114,182,0.10),_rgba(59,130,246,0.10),_rgba(15,23,42,1))] text-slate-800">
      <div className="pointer-events-none absolute inset-0">
        {Array.from({ length: 42 }).map((_, i) => (
          <motion.div
            key={i}
            className="absolute text-white/75"
            initial={{ opacity: 0.15, y: 8, scale: 0.8 }}
            animate={{ opacity: [0.2, 0.9, 0.2], y: [8, -12, 8], scale: [0.8, 1.1, 0.8] }}
            transition={{ repeat: Infinity, duration: 4 + (i % 6), delay: i * 0.14 }}
            style={{ top: `${(i * 9) % 100}%`, left: `${(i * 11) % 100}%` }}
          >
            <Stars className="h-4 w-4" />
          </motion.div>
        ))}

        <motion.div
          className="absolute -left-20 top-16 h-72 w-72 rounded-full bg-fuchsia-300/20 blur-3xl"
          animate={{ x: [0, 50, 0], y: [0, 20, 0] }}
          transition={{ duration: 14, repeat: Infinity }}
        />
        <motion.div
          className="absolute bottom-10 right-0 h-80 w-80 rounded-full bg-amber-300/20 blur-3xl"
          animate={{ x: [0, -60, 0], y: [0, -25, 0] }}
          transition={{ duration: 16, repeat: Infinity }}
        />
      </div>

      <div className="relative z-10 mx-auto max-w-7xl px-4 py-8 md:px-8 lg:px-10">
        {!bookOpen ? (
          <div className="flex min-h-[92vh] items-center justify-center">
            <motion.div
              initial={{ opacity: 0, scale: 0.92, y: 40 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              transition={{ duration: 1 }}
              className="relative w-full max-w-4xl"
            >
              <motion.div
                className="absolute inset-0 rounded-[3rem] bg-gradient-to-r from-amber-300/20 via-white/20 to-fuchsia-300/20 blur-3xl"
                animate={{ scale: [1, 1.05, 1], opacity: [0.5, 0.9, 0.5] }}
                transition={{ duration: 5.5, repeat: Infinity }}
              />

              <motion.div
                className="relative overflow-hidden rounded-[3rem] border border-white/30 bg-[linear-gradient(135deg,rgba(88,28,135,0.95),rgba(120,53,15,0.95),rgba(30,41,59,0.98))] p-5 shadow-[0_30px_120px_rgba(0,0,0,0.45)]"
                initial={{ rotateY: -10 }}
                animate={{ rotateY: [0, 2, 0, -2, 0] }}
                transition={{ duration: 7, repeat: Infinity }}
                style={{ transformStyle: "preserve-3d" }}
              >
                <div className="rounded-[2.4rem] border border-amber-200/30 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.25),rgba(255,255,255,0.06),rgba(0,0,0,0.15))] px-8 py-12 md:px-14 md:py-16">
                  <div className="mb-8 flex items-center justify-center gap-3 text-amber-200">
                    <motion.div animate={{ rotate: [0, 12, 0, -12, 0] }} transition={{ duration: 6, repeat: Infinity }}>
                      <Sparkles className="h-7 w-7" />
                    </motion.div>
                    <div className="text-xs font-bold uppercase tracking-[0.6em]">Edição Luxuosa</div>
                    <motion.div animate={{ rotate: [0, -12, 0, 12, 0] }} transition={{ duration: 6, repeat: Infinity }}>
                      <Sparkles className="h-7 w-7" />
                    </motion.div>
                  </div>

                  <div className="mx-auto mb-10 flex h-28 w-28 items-center justify-center rounded-full border border-white/25 bg-white/10 shadow-2xl backdrop-blur-sm">
                    <BookOpen className="h-14 w-14 text-amber-100" />
                  </div>

                  <h1 className="text-center text-4xl font-black leading-tight text-white md:text-6xl">
                    O Grande Livro
                    <span className="block bg-gradient-to-r from-amber-200 via-rose-200 to-fuchsia-200 bg-clip-text text-transparent">
                      dos Contos Encantados
                    </span>
                  </h1>

                  <p className="mx-auto mt-6 max-w-2xl text-center text-base leading-8 text-white/80 md:text-lg">
                    Uma experiência digital luxuosa com capa animada, trilha sonora suave, ilustrações por capítulo, narração selecionável e efeito visual realista de páginas sendo reveladas como um verdadeiro tomo mágico.
                  </p>

                  <div className="mx-auto mt-10 grid max-w-3xl gap-4 md:grid-cols-4">
                    {[
                      "Capa cinematográfica",
                      "Virada de páginas",
                      "Trilha sonora suave",
                      "Ilustrações mágicas",
                    ].map((item) => (
                      <div key={item} className="rounded-2xl border border-white/20 bg-white/10 px-4 py-4 text-center text-sm font-semibold text-white/90 backdrop-blur-sm">
                        {item}
                      </div>
                    ))}
                  </div>

                  <div className="mt-12 flex justify-center">
                    <Button
                      onClick={() => setBookOpen(true)}
                      className="h-14 rounded-full px-10 text-lg shadow-2xl"
                    >
                      <BookOpen className="mr-3 h-5 w-5" /> Abrir o livro encantado
                    </Button>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          </div>
        ) : (
          <motion.div initial={{ opacity: 0, y: 25 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }} className="grid gap-6 lg:grid-cols-[350px,1fr]">
            <Card className="overflow-hidden rounded-[2rem] border-white/40 bg-white/70 shadow-2xl backdrop-blur-xl">
              <div className={`bg-gradient-to-br ${current.accent} p-6 text-slate-800`}>
                <div className="mb-4 flex items-center gap-3">
                  <div className="rounded-2xl bg-white/70 p-3 shadow-lg">
                    <BookOpen className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-sm uppercase tracking-[0.3em] opacity-70">Livro encantado</p>
                    <h1 className="text-2xl font-black leading-tight">Versão Luxuosa Interativa</h1>
                  </div>
                </div>
                <p className="text-sm leading-6 opacity-80">
                  Experiência premium com narração, ambientação sonora, ilustrações de capítulo e navegação cinematográfica entre as páginas do conto.
                </p>
              </div>

              <CardContent className="space-y-6 p-6">
                <div>
                  <div className="mb-2 flex items-center justify-between text-sm font-medium">
                    <span>Progresso do livro</span>
                    <span>{page + 1} / {PAGE_COUNT}</span>
                  </div>
                  <Progress value={progress} className="h-3" />
                </div>

                <div>
                  <div className="mb-2 flex items-center justify-between text-sm font-medium">
                    <span>Capítulo {current.chapter}</span>
                    <span>{current.chapterTheme}</span>
                  </div>
                  <Progress value={chapterProgress} className="h-2" />
                </div>

                <div className="space-y-3">
                  <label className="flex items-center gap-2 text-sm font-semibold">
                    <User className="h-4 w-4" /> Narração
                  </label>
                  <Select value={voiceMode} onValueChange={setVoiceMode}>
                    <SelectTrigger className="rounded-2xl bg-white">
                      <SelectValue placeholder="Escolha a voz" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="feminina">Voz feminina</SelectItem>
                      <SelectItem value="masculina">Voz masculina</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-4">
                  <div>
                    <div className="mb-2 text-sm font-medium">Velocidade da voz: {rate[0].toFixed(2)}</div>
                    <Slider value={rate} onValueChange={setRate} min={0.7} max={1.2} step={0.05} />
                  </div>
                  <div>
                    <div className="mb-2 text-sm font-medium">Tom da voz: {pitch[0].toFixed(2)}</div>
                    <Slider value={pitch} onValueChange={setPitch} min={0.8} max={1.4} step={0.05} />
                  </div>
                </div>

                <div className="rounded-3xl border bg-slate-50 px-4 py-4">
                  <div className="mb-3 flex items-center justify-between">
                    <div>
                      <div className="font-semibold">Narração automática</div>
                      <div className="text-xs text-slate-500">Lê cada página ao abrir</div>
                    </div>
                    <Switch checked={autoNarrate} onCheckedChange={setAutoNarrate} />
                  </div>
                </div>

                <div className="rounded-3xl border bg-slate-50 px-4 py-4">
                  <div className="mb-3 flex items-center justify-between">
                    <div className="flex items-center gap-2 font-semibold">
                      <Music2 className="h-4 w-4" /> Trilha sonora
                    </div>
                    <Switch checked={musicOn} onCheckedChange={toggleMusic} />
                  </div>
                  <div className="text-xs text-slate-500">Ambiente musical suave em tempo real</div>
                  <div className="mt-4">
                    <div className="mb-2 text-sm font-medium">Volume: {musicVolume[0]}%</div>
                    <Slider value={musicVolume} onValueChange={setMusicVolume} min={0} max={100} step={1} />
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <Button onClick={isPlaying ? stopSpeaking : speak} className="h-12 rounded-2xl text-base">
                    {isPlaying ? <Pause className="mr-2 h-4 w-4" /> : <Volume2 className="mr-2 h-4 w-4" />}
                    {isPlaying ? "Parar" : "Narrar"}
                  </Button>
                  <Button variant="secondary" onClick={() => setBookOpen(false)} className="h-12 rounded-2xl text-base">
                    <Moon className="mr-2 h-4 w-4" /> Capa
                  </Button>
                </div>

                <div className="rounded-3xl border bg-gradient-to-br from-violet-100 to-rose-100 p-4">
                  <div className="mb-2 flex items-center gap-2 font-semibold">
                    <Wand2 className="h-4 w-4" /> Destaques desta edição
                  </div>
                  <ul className="space-y-2 text-sm text-slate-700">
                    <li>• Capa animada de abertura</li>
                    <li>• Revelação cinematográfica das páginas</li>
                    <li>• Trilha sonora ambiente</li>
                    <li>• Ilustrações simbólicas por capítulo</li>
                  </ul>
                </div>
              </CardContent>
            </Card>

            <div className="relative">
              <motion.div
                key={page}
                initial={{ opacity: 0, scale: 0.985 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.55 }}
                className="relative rounded-[2rem] border border-white/30 bg-white/20 p-3 shadow-[0_20px_80px_rgba(15,23,42,0.35)] backdrop-blur-md"
                style={{ perspective: 2200 }}
              >
                <div className="absolute inset-y-6 left-1/2 hidden w-px -translate-x-1/2 bg-gradient-to-b from-transparent via-slate-300/70 to-transparent lg:block" />
                <div className="grid min-h-[780px] gap-3 lg:grid-cols-2">
                  <AnimatePresence mode="wait">
                    <motion.div
                      key={`page-left-${current.id}`}
                      initial={{ rotateY: -72, opacity: 0.25, x: 70, transformOrigin: "left center" }}
                      animate={{ rotateY: 0, opacity: 1, x: 0, transformOrigin: "left center" }}
                      exit={{ rotateY: 72, opacity: 0, x: -60, transformOrigin: "left center" }}
                      transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
                      className={`relative overflow-hidden rounded-[1.6rem] border border-amber-100 bg-gradient-to-br ${current.accent} p-8 shadow-xl lg:p-10`}
                      style={{ transformStyle: "preserve-3d", backfaceVisibility: "hidden" }}
                    >
                      <div className="absolute right-6 top-6 rounded-full bg-white/60 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-slate-700">
                        Página {current.id}
                      </div>

                      <div className="absolute inset-0 bg-[linear-gradient(transparent_96%,rgba(255,255,255,0.35)_100%)] bg-[length:100%_34px] opacity-35" />
                      <div className="absolute left-0 top-0 h-full w-8 bg-gradient-to-r from-black/10 to-transparent" />

                      <div className="relative z-10 flex h-full flex-col">
                        <div className="mb-6 flex items-center gap-3 text-slate-700">
                          <Sparkles className="h-5 w-5" />
                          <span className="text-sm uppercase tracking-[0.35em]">{current.chapterTheme}</span>
                        </div>

                        <h2 className="mb-5 text-3xl font-black leading-tight text-slate-800 md:text-4xl">
                          {current.title}
                        </h2>

                        <div className="mb-6 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-700/80">
                          <span className="rounded-full bg-white/60 px-3 py-1">{current.kingdom}</span>
                          <span className="rounded-full bg-white/60 px-3 py-1">{current.guardian}</span>
                          <span className="rounded-full bg-white/60 px-3 py-1">{current.treasure}</span>
                        </div>

                        <p className="flex-1 whitespace-pre-line text-lg leading-9 text-slate-800/90">
                          {current.text}
                        </p>

                        <blockquote className="mt-6 rounded-3xl border border-white/50 bg-white/45 p-5 italic text-slate-700 shadow-inner">
                          {current.quote}
                        </blockquote>
                      </div>
                    </motion.div>
                  </AnimatePresence>

                  <AnimatePresence mode="wait">
                    <motion.div
                      key={`page-right-${current.id}`}
                      initial={{ rotateY: 72, opacity: 0.25, x: -70, transformOrigin: "right center" }}
                      animate={{ rotateY: 0, opacity: 1, x: 0, transformOrigin: "right center" }}
                      exit={{ rotateY: -72, opacity: 0, x: 60, transformOrigin: "right center" }}
                      transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
                      className="relative overflow-hidden rounded-[1.6rem] border border-amber-100 bg-[linear-gradient(180deg,rgba(255,251,235,0.98),rgba(255,255,255,0.96))] p-8 shadow-xl lg:p-10"
                      style={{ transformStyle: "preserve-3d", backfaceVisibility: "hidden" }}
                    >
                      <div className="absolute inset-0 bg-[linear-gradient(transparent_96%,rgba(226,232,240,0.9)_100%)] bg-[length:100%_34px] opacity-70" />
                      <div className="absolute right-0 top-0 h-full w-8 bg-gradient-to-l from-black/10 to-transparent" />

                      <div className="relative z-10 flex h-full flex-col">
                        <div className="mb-5 flex items-center gap-3 text-slate-700">
                          <ImageIcon className="h-5 w-5" />
                          <span className="text-sm uppercase tracking-[0.35em]">Ilustração e escolhas</span>
                        </div>

                        <MagicalIllustration
                          icon={currentIllustrationIcon}
                          label={current.illustration.label}
                          accent={current.accent}
                        />

                        <div className="mt-6 grid gap-4">
                          <button
                            onClick={() => jumpToChoice("A")}
                            className="group rounded-3xl border border-violet-200 bg-violet-50/90 p-5 text-left shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
                          >
                            <div className="mb-2 text-xs font-bold uppercase tracking-[0.3em] text-violet-600">Escolha 1</div>
                            <div className="text-lg font-semibold text-slate-800">{current.choiceA}</div>
                            <div className="mt-2 text-sm text-slate-600 group-hover:text-slate-800">Avança duas páginas pela trilha encantada.</div>
                          </button>

                          <button
                            onClick={() => jumpToChoice("B")}
                            className="group rounded-3xl border border-rose-200 bg-rose-50/90 p-5 text-left shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
                          >
                            <div className="mb-2 text-xs font-bold uppercase tracking-[0.3em] text-rose-600">Escolha 2</div>
                            <div className="text-lg font-semibold text-slate-800">{current.choiceB}</div>
                            <div className="mt-2 text-sm text-slate-600 group-hover:text-slate-800">Avança três páginas rumo a um novo segredo.</div>
                          </button>
                        </div>

                        <div className="mb-6 mt-6 rounded-3xl bg-slate-900 p-6 text-white shadow-2xl">
                          <div className="mb-3 flex items-center gap-2 font-semibold text-amber-300">
                            <Play className="h-4 w-4" /> Prévia da narração
                          </div>
                          <p className="text-sm leading-7 text-slate-200">{narrationText}</p>
                        </div>

                        <div className="mt-auto flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                          <Button variant="secondary" onClick={prevPage} disabled={page === 0} className="h-12 rounded-2xl px-6">
                            <ChevronLeft className="mr-2 h-4 w-4" /> Página anterior
                          </Button>

                          <div className="text-center text-sm text-slate-500">
                            Vire as páginas e descubra um novo pedaço do conto.
                          </div>

                          <Button onClick={nextPage} disabled={page === PAGE_COUNT - 1} className="h-12 rounded-2xl px-6">
                            Próxima página <ChevronRight className="ml-2 h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </motion.div>
                  </AnimatePresence>
                </div>
              </motion.div>
            </div>
          </motion.div>
        )}
      </div>
    </div>
  );
}