const { useState, useEffect, useRef } = React;

function trackInitiateCheckout() {
  if (typeof window !== "undefined" && typeof window.fbq === "function") {
    window.fbq("track", "InitiateCheckout");
  }
}

// ============== ICONS ==============
const Icon = {
  Play: () => <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>,
  Pause: () => <svg viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z" /></svg>,
  Prev: () => <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zM9.5 12l8.5 6V6z" /></svg>,
  Next: () => <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6h2v12h-2z" /></svg>,
  Shuffle: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 3 21 3 21 8" /><line x1="4" y1="20" x2="21" y2="3" /><polyline points="21 16 21 21 16 21" /><line x1="15" y1="15" x2="21" y2="21" /><line x1="4" y1="4" x2="9" y2="9" /></svg>,
  Repeat: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="17 1 21 5 17 9" /><path d="M3 11V9a4 4 0 0 1 4-4h14" /><polyline points="7 23 3 19 7 15" /><path d="M21 13v2a4 4 0 0 1-4 4H3" /></svg>,
  Note: () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" /></svg>,
  Check: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>,
  Plus: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>,
  Brain: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3 2.5 2.5 0 0 1 2.46-2.04Z" /><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" /></svg>,
  Clock: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>,
  Frown: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M16 16s-1.5-2-4-2-4 2-4 2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></svg>,
  Book: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></svg>,
  Dumbbell: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6.5 6.5 17.5 17.5" /><path d="m21 21-1-1" /><path d="m3 3 1 1" /><path d="m18 22 4-4" /><path d="m2 6 4-4" /><path d="m3 10 7-7" /><path d="m14 21 7-7" /></svg>,
  Car: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2" /><circle cx="6.5" cy="16.5" r="2.5" /><circle cx="16.5" cy="16.5" r="2.5" /></svg>,
  Home: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" /></svg>,
  Coffee: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 8h1a4 4 0 1 1 0 8h-1" /><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" /><line x1="6" y1="2" x2="6" y2="4" /><line x1="10" y1="2" x2="10" y2="4" /><line x1="14" y1="2" x2="14" y2="4" /></svg>,
  Phone: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2" /><line x1="12" y1="18" x2="12.01" y2="18" /></svg>,
  Headphones: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6" /><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" /></svg>,
  Devices: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>,
  Arrow: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>,
  Sparkle: () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 5.5L19 9l-5.5 1.5L12 16l-1.5-5.5L5 9l5.5-1.5z" /></svg>,
  Zap: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
};

// ============== DATA ==============
const SONG_EXAMPLES = [
{ id: "cf-art5", title: "Art. 5º - Direitos e Deveres", subject: "Direito Constitucional", badge: "Mais ouvida", cover: "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?auto=format&fit=crop&w=900&q=80", src: "../folders/assets/artigo5.mp3" },
{ id: "adm-principios", title: "Vacância", subject: "Direito Administrativo", badge: "Top revisão", cover: "https://images.unsplash.com/photo-1507838153414-b4b713384a76?auto=format&fit=crop&w=900&q=80", src: "../folders/assets/vacancia.mp3" },
{ id: "penal-crimes", title: "Uso dos Porquês", subject: "Português", badge: "Novo", cover: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=900&q=80", src: "../folders/assets/usodospoques.mp3" }];

const LYRICS_BY_TRACK = {
  "cf-art5": [
  { time: 0, text: "Na base da nação começa a verdade" },
  { time: 5, text: "O que nos protege?" },
  { time: 8, text: "O que nos dá igualdade?" },
  { time: 12, text: "Todos são iguais perante a lei" },
  { time: 15, text: "Sem distinção, eu já sei" },
  { time: 18, text: "Direito à vida, à liberdade" },
  { time: 21, text: "Igualdade é a base da sociedade" },
  { time: 24, text: "Ninguém será obrigado" },
  { time: 27, text: "A fazer ou deixar de fazer" },
  { time: 30, text: "Se a lei não mandar, isso é viver com saber" },
  { time: 35, text: "É a Constituição dizendo pra valer" },
  { time: 39, text: "O que é direito e o que é dever" },
  { time: 42, text: "Direitos e deveres, lado a lado" },
  { time: 45, text: "Liberdade com responsabilidade no Estado" },
  { time: 48, text: "Artigo 5º vem afirmar" },
  { time: 51, text: "O cidadão deve respeitar" },
  { time: 53, text: "Pra também poder cobrar" },
  { time: 57, text: "Livre o pensamento pode se expressar" },
  { time: 60, text: "Mas sem ferir, sem machucar" },
  { time: 63, text: "A fé é livre, a crença também" },
  { time: 66, text: "O Estado é laico, respeita quem crer" },
  { time: 69, text: "Casa é asilo inviolável" },
  { time: 72, text: "Só entra a lei quando é inevitável" },
  { time: 75, text: "Prova ilícita não tem valor" },
  { time: 78, text: "Justiça se faz com rigor" },
  { time: 81, text: "Não é só pedir, é também cumprir" },
  { time: 84, text: "Direito anda junto com agir" },
  { time: 87, text: "Direitos e deveres, lado a lado" },
  { time: 90, text: "Liberdade com responsabilidade no Estado" },
  { time: 93, text: "Artigo 5º vem ensinar" },
  { time: 96, text: "Pra viver em sociedade é preciso reinventar" },
  { time: 104, text: "Oh, oh, oh" },
  { time: 110, text: "Ninguém será torturado" },
  { time: 114, text: "Tratamento desumano é proibido por Estado" },
  { time: 117, text: "A lei protege, a lei conduz" },
  { time: 120, text: "A dignidade é o que nos reduz" },
  { time: 124, text: "Não nos produz" },
  { time: 126, text: "Oh, oh, oh" },
  { time: 130, text: "Direitos e deveres, fundamento real" },
  { time: 133, text: "Da cidadania constitucional" },
  { time: 136, text: "Artigo 5º pra nunca esquecer" },
  { time: 139, text: "Direito se garante quando todos cumprem o dever" },
  { time: 147, text: "Conhecer a lei é se libertar" },
  { time: 151, text: "Constituição é pra viver" },
  { time: 153, text: "Respeitar" }],
  "penal-crimes": [
  { time: 0, text: "Quando eu quero perguntar eu uso por que separado" },
  { time: 5, text: "Por que você não veio? Tá certo, tá explicado" },
  { time: 8, text: "É pergunta, é dúvida, é só questionar" },
  { time: 12, text: "Por que separado é assim que vai usar" },
  { time: 16, text: "Mas se eu vou justificar é porque junto que se usa" },
  { time: 21, text: "Porque eu estava doente, sem erro, sem confusão nenhuma" },
  { time: 30, text: "É resposta, é motivo, é razão pra explicar" },
  { time: 37, text: "Porque junto e sem acento pode confiar" },
  { time: 43, text: "Se a pergunta vem no fim, atenção ao sinal" },
  { time: 48, text: "A frase termina forte, é porquê no final" },
  { time: 51, text: "Você não veio hoje, porquê?" },
  { time: 55, text: "Separado e com acento não tem como errar, pode crer" },
  { time: 60, text: "Por que separado é pra perguntar" },
  { time: 64, text: "Porque junto é pra justificar" },
  { time: 67, text: "Porquê com acento no final da frase" },
  { time: 71, text: "Porque junto e com acento é o nome" },
  { time: 74, text: "É substantivo, é a base" }],
  "adm-principios": [
  { time: 0, text: "A vacância do cargo público decorrerá de" },
  { time: 6, text: "Exoneração, demissão, promoção" },
  { time: 12, text: "Readaptação, aposentadoria" },
  { time: 18, text: "Posse em outro cargo inacumulável" },
  { time: 22, text: "Falecimento" },
  { time: 27, text: "A vacância do cargo público decorrerá de" },
  { time: 33, text: "Exoneração, demissão, promoção" },
  { time: 40, text: "Readaptação, aposentadoria" },
  { time: 46, text: "Posse em outro cargo inacumulável" },
  { time: 48, text: "Inacumulável, falecimento" }]
};


const PROBLEMS = [
{ icon: <Icon.Frown />, title: "Estuda horas e não retém nada", desc: "Você lê o mesmo artigo cinco vezes e na hora da prova trava. O conteúdo entra e sai." },
{ icon: <Icon.Clock />, title: "Não tem tempo pra sentar e estudar", desc: "Trabalho, casa, trânsito, família. Quando sobra um tempo, a cabeça já não rende mais." },
{ icon: <Icon.Book />, title: "Conteúdo seco e desmotivador", desc: "Lei é palavra técnica empilhada. Cinco páginas depois você já está pensando em outra coisa." },
{ icon: <Icon.Brain />, title: "Leis que parecem impossíveis", desc: "Princípios, prazos, competências, exceções. Tudo se mistura e nada gruda na memória." }];


const SOLUTION_USE_CASES = [
{ icon: <Icon.Dumbbell />, label: "Academia", sub: "Treino + música + revisão", image: "../folders/assets/academia.webp", alt: "Pessoa treinando com fones de ouvido na academia" },
{ icon: <Icon.Car />, label: "Trânsito", sub: "Tempo parado vira estudo", image: "../folders/assets/onibus.avif", alt: "Pessoa ouvindo música no ônibus durante o trânsito" },
{ icon: <Icon.Home />, label: "Em casa", sub: "Rotina doméstica produtiva", image: "../folders/assets/casa.jpg", alt: "Pessoa ouvindo áudio enquanto organiza a casa" },
{ icon: <Icon.Coffee />, label: "Intervalos", sub: "Aprende sem esgotar a mente", image: "../folders/assets/estudo.webp", alt: "Pessoa estudando com fones em um intervalo" }];


const SUBJECTS = [
{ name: "Direito Constitucional", count: "847 músicas", cover: "Const.", colorA: "#1f5f6b", colorB: "#0e2a30", areas: ["fed", "trib", "pol"] },
{ name: "Direito Administrativo", count: "1.124 músicas", cover: "Adm.", colorA: "#2a7a88", colorB: "#143a42", areas: ["fed", "trib", "muni"] },
{ name: "Direito Penal", count: "612 músicas", cover: "Penal", colorA: "#3d4f57", colorB: "#1a262b", areas: ["pol", "trib"] },
{ name: "Direito Civil", count: "489 músicas", cover: "Civil", colorA: "#1f5f6b", colorB: "#0e2a30", areas: ["trib"] },
{ name: "Direito Eleitoral", count: "201 músicas", cover: "Eleitoral", colorA: "#2a7a88", colorB: "#143a42", areas: ["trib"] },
{ name: "Direito Tributário", count: "356 músicas", cover: "Tributário", colorA: "#1f5f6b", colorB: "#0e2a30", areas: ["fed", "banc"] },
{ name: "Direito Trabalhista", count: "287 músicas", cover: "Trab.", colorA: "#3d4f57", colorB: "#1a262b", areas: ["trib"] },
{ name: "Direito Previdenciário", count: "194 músicas", cover: "Previd.", colorA: "#2a7a88", colorB: "#143a42", areas: ["fed"] },
{ name: "Português", count: "523 músicas", cover: "Português", colorA: "#1f5f6b", colorB: "#0e2a30", areas: ["fed", "trib", "pol", "muni", "banc"] },
{ name: "Informática", count: "172 músicas", cover: "Informática", colorA: "#3d4f57", colorB: "#1a262b", areas: ["fed", "trib", "banc"] },
{ name: "Raciocínio Lógico", count: "148 músicas", cover: "Rac. Lógico", colorA: "#2a7a88", colorB: "#143a42", areas: ["banc", "fed"] },
{ name: "Atualidades", count: "94 músicas", cover: "Atualidades", colorA: "#1f5f6b", colorB: "#0e2a30", areas: ["fed", "pol", "trib"] }];

const CONCURSOS_ROW_1 = [
{ name: "Banco do Brasil", image: "../folders/assets/concurso-banco-do-brasil.png" },
{ name: "Caixa", image: "../folders/assets/concurso-caixa.png" },
{ name: "Câmara dos Deputados", image: "../folders/assets/concurso-camara.png" },
{ name: "IBAMA", image: "../folders/assets/concurso-ibama.png" },
{ name: "Educação", image: "../folders/assets/concurso-educacao.png" },
{ name: "Cartórios", image: "../folders/assets/concurso-cartorios.png" },
{ name: "Concurso Nacional Unificado", image: "../folders/assets/concurso-cnu.png" },
{ name: "IBGE", image: "../folders/assets/concurso-ibge.png" },
{ name: "OAB", image: "../folders/assets/concurso-oab.png" }
];

const CONCURSOS_ROW_2 = [
{ name: "Polícia Federal (PF)", image: "../folders/assets/concurso-pf.png" },
{ name: "INSS", image: "../folders/assets/concurso-inss.png" },
{ name: "Prefeituras", image: "../folders/assets/concurso-prefeituras.png" },
{ name: "Saúde", image: "../folders/assets/concurso-saude.png" },
{ name: "Professor", image: "../folders/assets/concurso-professor.png" },
{ name: "Polícia Rodoviária Federal (PRF)", image: "../folders/assets/concurso-prf.png" },
{ name: "Tribunais de Justiça", image: "https://images.unsplash.com/photo-1589216532372-1c2a367900d9?auto=format&fit=crop&w=1200&q=80" },
{ name: "Concursos Policiais", image: "../folders/assets/concurso-policiais.png" },
{ name: "Tribunais Eleitorais", image: "../folders/assets/concurso-tse.png" }
];

const repeatCarouselItems = (items, repeat = 4) =>
Array.from({ length: repeat }).flatMap(() => items);


const TESTIMONIALS = [
{ src: "../folders/assets/depoimento-1.jpg", source: "ig", quote: "Decorei vários artigos de ontem pra hoje" },
{ src: "../folders/assets/depoimento-2.jpg", source: "wa", quote: "Consegui absorver o conteúdo muito mais rápido, sem nem perceber" },
{ src: "../folders/assets/depoimento-3.jpg", source: "ig", quote: "No meu carro só toca leis cantadas" },
{ src: "../folders/assets/depoimento-4.jpg", source: "ig", quote: "Estudo mais leve e divertido" },
{ src: "../folders/assets/depoimento-5.jpg", source: "ig", quote: "Já estou indicando pra outras pessoas" },
{ src: "../folders/assets/depoimento-6.jpg", source: "wa", quote: "Seu material já fez toda diferença" },
{ src: "../folders/assets/depoimento-7.jpg", source: "ig", quote: "A música colou na mente" },
{ src: "../folders/assets/depoimento-8.jpg", source: "fb", quote: "Os sambas sobre crimes do CP são impagáveis" },
{ src: "../folders/assets/depoimento-9.jpg", source: "fb", quote: "Que página maravilhosa! Amei" }];


const FAQ = [
{ q: "Funciona mesmo? Música ajuda a memorizar?",
  a: "Funciona, e tem ciência por trás. A música ativa áreas do cérebro ligadas à memória de longo prazo — é o mesmo motivo de você lembrar de letras de músicas que ouviu uma vez na adolescência. A gente aplica isso no conteúdo que você precisa decorar." },
{ q: "O que é Leis Cantadas e como a plataforma funciona?",
  a: "Leis Cantadas é uma plataforma de estudo para concursos públicos que transforma leis, artigos e conteúdos cobrados em músicas fáceis de memorizar. Na prática, funciona como um Spotify focado em concursos: você acessa playlists por matéria, escolhe o que quer revisar e estuda ouvindo no celular ou no computador. Além do catálogo com milhares de músicas organizadas por área, a plataforma também oferece busca por conteúdos, trilhas para diferentes concursos e o LC Studio IA, que transforma seus próprios resumos e editais em música." },
{ q: "Quais conteúdos eu encontro na plataforma?",
  a: "Você encontra conteúdos de todas as áreas do Direito e também dos assuntos mais cobrados em concursos e exames. Isso inclui, por exemplo, Direito Constitucional, Administrativo, Penal, Civil, Tributário, Eleitoral, Trabalhista e Previdenciário, além de Português, Informática, Raciocínio Lógico, Atualidades e temas voltados para áreas como saúde e carreiras policiais. A plataforma é pensada para cobrir desde bases teóricas até tópicos que mais aparecem em editais, com atualização frequente conforme as cobranças das bancas." },
{ q: "Preciso ter conhecimento musical pra usar?",
  a: "Não precisa. Você só ouve. As músicas já vêm prontas, com letras claras e ritmos que ajudam a fixar. Não tem que cantar, não tem que estudar música — é igual ouvir Spotify." },
{ q: "Roda no celular e no computador?",
  a: "Roda. A plataforma funciona em qualquer celular (Android e iPhone), tablet e computador. Você acessa pelo navegador, sem precisar baixar app." },
{ q: "Quando recebo o acesso depois da compra?",
  a: "Imediato. Assim que o pagamento é confirmado, você recebe os dados de acesso por e-mail e já pode começar a ouvir." },
{ q: "Posso cancelar quando quiser?",
  a: "Pode. No plano mensal você cancela a qualquer momento. No plano anual, o acesso vale por 12 meses e você decide se renova depois." },
{ q: "O que é o LC Studio IA?",
  a: "É uma ferramenta dentro da plataforma onde você cola seu próprio resumo, edital ou material e a IA transforma em música. No plano anual você ganha 150 créditos pra usar." }];


// ============== HERO PLAYER ==============
function HeroPlayer() {
  const [playing, setPlaying] = useState(false);
  const [activeIdx, setActiveIdx] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const audioRef = useRef(null);
  const autoplayOnTrackChangeRef = useRef(false);
  const track = SONG_EXAMPLES[activeIdx];

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) {return;}
    audio.pause();
    setPlaying(false);
    setCurrentTime(0);
    setDuration(0);
    audio.load();
    if (autoplayOnTrackChangeRef.current) {
      autoplayOnTrackChangeRef.current = false;
      audio.play().then(() => setPlaying(true)).catch(() => setPlaying(false));
    }
  }, [activeIdx]);

  const formatTime = (seconds = 0) => {
    const safe = Number.isFinite(seconds) ? seconds : 0;
    const minutes = Math.floor(safe / 60);
    const remaining = Math.floor(safe % 60);
    return `${minutes}:${String(remaining).padStart(2, "0")}`;
  };

  const togglePlay = async () => {
    const audio = audioRef.current;
    if (!audio) {return;}
    try {
      if (playing) {
        audio.pause();
        setPlaying(false);
      } else {
        await audio.play();
        setPlaying(true);
      }
    } catch (_error) {
      setPlaying(false);
    }
  };

  const handleTimeUpdate = () => {
    const audio = audioRef.current;
    if (!audio) {return;}
    setCurrentTime(audio.currentTime || 0);
  };

  const handleLoadedMetadata = () => {
    const audio = audioRef.current;
    if (!audio) {return;}
    setDuration(Number.isFinite(audio.duration) ? audio.duration : 0);
  };

  const handleEnded = () => {
    setPlaying(false);
    setCurrentTime(0);
  };

  const progress = duration > 0 ? currentTime / duration * 100 : 0;
  const lyrics = LYRICS_BY_TRACK[track.id] || [];
  const activeLyricIdx = lyrics.reduce((active, line, idx) => currentTime >= line.time ? idx : active, -1);
  const currentLyric = activeLyricIdx >= 0 ? lyrics[activeLyricIdx].text : "Dê play para acompanhar a letra em tempo real.";

  const handleProgressClick = (e) => {
    const audio = audioRef.current;
    if (!audio || !duration) {return;}
    const rect = e.currentTarget.getBoundingClientRect();
    const pct = (e.clientX - rect.left) / rect.width;
    const nextTime = Math.max(0, Math.min(duration, pct * duration));
    audio.currentTime = nextTime;
    setCurrentTime(nextTime);
  };

  const next = () => {
    autoplayOnTrackChangeRef.current = true;
    setActiveIdx((i) => (i + 1) % SONG_EXAMPLES.length);
  };
  const prev = () => {
    autoplayOnTrackChangeRef.current = true;
    setActiveIdx((i) => (i - 1 + SONG_EXAMPLES.length) % SONG_EXAMPLES.length);
  };
  const pickTrack = (i) => {
    if (i === activeIdx) {return;}
    autoplayOnTrackChangeRef.current = true;
    setActiveIdx(i);
  };

  return (
    <div className={"player " + (playing ? "playing" : "")}>
      <div className="player-top">
        <div className="player-top-label">Tocando agora · Leis Cantadas</div>
        <div className="player-top-icons">
          <span className="dot-btn"></span>
          <span className="dot-btn"></span>
          <span className="dot-btn"></span>
        </div>
      </div>

      <div className="now-playing">
        <div className="album">
          <img src={track.cover} alt={track.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} loading="lazy" />
        </div>
        <div className="track-info">
          <div className="track-title">{track.title}</div>
          <div className="track-artist">Leis Cantadas · {track.subject}</div>
          <span className="track-tag">★ {track.badge}</span>
        </div>
      </div>

      <div className="progress">
        <audio
          ref={audioRef}
          src={track.src}
          onTimeUpdate={handleTimeUpdate}
          onLoadedMetadata={handleLoadedMetadata}
          onEnded={handleEnded}
          preload="metadata" />
        <div className="progress-bar" onClick={handleProgressClick}>
          <div className="progress-fill" style={{ width: `${progress}%` }}></div>
        </div>
        <div className="progress-times">
          <span>{formatTime(currentTime)}</span>
          <span>{formatTime(duration)}</span>
        </div>
      </div>

      <div className="controls">
        <button className="ctrl" aria-label="Aleatório"><Icon.Shuffle /></button>
        <button className="ctrl" onClick={prev} aria-label="Anterior"><Icon.Prev /></button>
        <button className="play-btn" onClick={togglePlay} aria-label={playing ? "Pausar" : "Tocar"}>
          {playing ? <Icon.Pause /> : <Icon.Play />}
        </button>
        <button className="ctrl" onClick={next} aria-label="Próxima"><Icon.Next /></button>
        <button className="ctrl" aria-label="Repetir"><Icon.Repeat /></button>
      </div>

      <div className="queue">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div className="queue-label">Exemplos de leis cantadas</div>
          {playing &&
          <div className="equalizer">
              <span></span><span></span><span></span><span></span>
            </div>
          }
        </div>
        {SONG_EXAMPLES.map((t, i) =>
        <div key={i} className={"queue-row " + (i === activeIdx ? "active" : "")} onClick={() => pickTrack(i)}>
            <div className="queue-num">{String(i + 1).padStart(2, "0")}</div>
            <div>
              <div className="qr-title">{t.title}</div>
              <div className="qr-sub">{t.subject}</div>
            </div>
            <div className="qr-time">demo</div>
          </div>
        )}
      </div>

      <div className="lyrics-box" aria-live="polite">
        <div className="lyrics-title">Letra em tempo real</div>
        {lyrics.length === 0 &&
        <div className="lyrics-empty">Letra sincronizada em preparação para esta música.</div>
        }
        {lyrics.length > 0 &&
        <div className="lyrics-current">{currentLyric}</div>
        }
      </div>
    </div>);

}

// ============== HERO SECTION ==============
function Hero({ headline, ctaLabel }) {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="pill">
            <span className="dot"></span> Mais de 10.000 concurseiros ouvindo agora
          </div>
          <h1 className="hero-title">
            {headline === 0 && <>Chega de decorar lei. Comece a <em>ouvir</em>.</>}
            {headline === 1 && <>Estude leis <em>ouvindo música</em>. Sem ler, sem decorar.</>}
            {headline === 2 && <>Sua aprovação está em uma <em>playlist</em>.</>}
          </h1>
          <p className="hero-sub">
            Mais de 5.000 músicas que transformam Direito Constitucional, Administrativo, Penal e tudo que cai em concurso em letras que grudam na cabeça. Você ouve no trânsito, na academia, lavando louça — e aprende sem perceber.
          </p>
          <div className="hero-cta-row">
            <a href="#planos" className="btn-primary">
              {ctaLabel} <Icon.Arrow />
            </a>
            <a href="#como-funciona" className="btn-ghost">Como funciona</a>
          </div>
          <div className="social-proof">
            <div className="sp-item">
              <div>
                <div className="sp-num">+10.000</div>
                <div className="sp-label">alunos ativos</div>
              </div>
            </div>
            <div className="sp-divider"></div>
            <div className="sp-item">
              <div>
                <div className="sp-num">+5.000</div>
                <div className="sp-label">músicas no catálogo</div>
              </div>
            </div>
            <div className="sp-divider"></div>
            <div className="sp-item">
              <div>
                <div className="sp-num">Todas as áreas</div>
                <div className="sp-label">de Direito e temas mais cobrados</div>
              </div>
            </div>
          </div>
        </div>
        <div className="player-wrap">
          <div className="hero-player-intro">
            <div className="hero-player-kicker">Ouça agora</div>
            <p>Clique em play e escute algumas músicas reais do Leis Cantadas.</p>
          </div>
          <HeroPlayer />
        </div>
      </div>
    </section>);

}

// ============== PROBLEMS ==============
function Problems() {
  return (
    <section className="section-pad" data-screen-label="problems">
      <div className="container">
        <div className="eyebrow">Você reconhece isso?</div>
        <h2 className="section-title">Estudar concurso virou <em>guerra de paciência</em>.</h2>
        <p className="section-sub">A gente sabe — porque a maioria dos nossos alunos chegou aqui depois de tentar de tudo.</p>
        <div className="problem-grid">
          {PROBLEMS.map((p, i) =>
          <div key={i} className="problem-card">
              <div className="problem-icon">{p.icon}</div>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============== SOLUTION ==============
function Solution() {
  return (
    <section className="section-pad" style={{ background: 'var(--bg-2)' }} data-screen-label="solution">
      <div className="container">
        <div>
          <div className="eyebrow">A solução</div>
          <h2 className="section-title">Transforme qualquer momento em <em>hora de estudo</em>.</h2>
          <p className="section-sub">
            Você não precisa parar sua rotina para estudar. Com Leis Cantadas, o conteúdo vai com você na academia, no trânsito, em casa e nos intervalos do dia.
          </p>
        </div>
        <div className="solution-visual-grid">
          {SOLUTION_USE_CASES.map((item, i) =>
          <article key={i} className="solution-visual-card">
              <img src={item.image} alt={item.alt} loading="lazy" />
              <div className="solution-visual-overlay"></div>
              <div className="solution-visual-content">
                <div className="solution-visual-icon">{item.icon}</div>
                <div className="solution-visual-text">{item.label}<small>{item.sub}</small></div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function AIDifferential() {
  const demoTitle = "Artigo 5 da Constituição Federal";
  const demoText = "Art. 5 - Todos são iguais perante a lei, sem distinção de qualquer natureza...";
  const demoStyle = "Rock";
  const [demoFrame, setDemoFrame] = useState(0);

  const titleFrames = demoTitle.length + 8;
  const textFrames = demoText.length + 8;
  const styleFrames = demoStyle.length + 8;
  const clickFrames = 12;
  const creatingFrames = 28;
  const successFrames = 70;
  const totalFrames = titleFrames + textFrames + styleFrames + clickFrames + creatingFrames + successFrames;

  useEffect(() => {
    const id = setInterval(() => {
      setDemoFrame((f) => (f + 1) % totalFrames);
    }, 70);
    return () => clearInterval(id);
  }, [totalFrames]);

  const titleEnd = titleFrames;
  const textEnd = titleEnd + textFrames;
  const styleEnd = textEnd + styleFrames;
  const clickEnd = styleEnd + clickFrames;
  const creatingEnd = clickEnd + creatingFrames;

  const typedTitle = demoFrame < titleEnd ? demoTitle.slice(0, Math.max(0, demoFrame)) : demoTitle;
  const typedText = demoFrame < titleEnd ? "" :
  demoFrame < textEnd ? demoText.slice(0, Math.max(0, demoFrame - titleEnd)) : demoText;
  const typedStyle = demoFrame < textEnd ? "" :
  demoFrame < styleEnd ? demoStyle.slice(0, Math.max(0, demoFrame - textEnd)) : demoStyle;

  const isClicking = demoFrame >= styleEnd && demoFrame < clickEnd;
  const isCreating = demoFrame >= clickEnd && demoFrame < creatingEnd;
  const isSuccess = demoFrame >= creatingEnd;
  const creatingProgress = isCreating ? Math.min(100, Math.round((demoFrame - clickEnd + 1) / creatingFrames * 100)) : 0;
  const successProgress = isSuccess ? Math.min(100, ((demoFrame - creatingEnd + 1) * 2.2) % 100) : 0;

  return (
    <section className="section-pad ai-section" data-screen-label="ai-differential">
      <div className="container">
        <div className="ai-section-head">
          <div className="eyebrow">Diferencial exclusivo</div>
          <h2 className="section-title">LC Studio IA: o aluno vira <em>criador da própria música</em>.</h2>
          <p className="section-sub">
            Isso vai muito além de ouvir conteúdo pronto. Com o LC Studio IA, cada aluno cria músicas sob medida para seu edital, seu resumo e seu jeito de memorizar.
          </p>
        </div>
        <div className="ai-card">
          <div className="ai-badge"><Icon.Sparkle /> Inovação real</div>
          <h3>Seu conteúdo, seu gênero, sua memorização</h3>
          <p>
            Cole qualquer material e escolha como quer estudar: gênero musical, ritmo e estilo. Em segundos, a IA transforma seu texto em uma música que facilita a revisão e fixa o conteúdo com muito mais velocidade.
          </p>
          <div className="ai-live-demo" aria-label="Demonstração do LC Studio IA em tempo real">
            <div className="ai-live-top">
              <span>LC Studio IA</span>
              <span className="ai-live-status">{isSuccess ? "Música criada" : isCreating ? "Criando..." : "Preenchendo dados"}</span>
            </div>

            <div className="ai-live-field">
              <label>Título da música</label>
              <div className="ai-live-input">{typedTitle}<span className={"ai-caret " + (demoFrame < titleEnd ? "show" : "")}>|</span></div>
            </div>

            <div className="ai-live-field">
              <label>Seu texto</label>
              <div className="ai-live-input ai-live-textarea">{typedText}<span className={"ai-caret " + (demoFrame >= titleEnd && demoFrame < textEnd ? "show" : "")}>|</span></div>
            </div>

            <div className="ai-live-field">
              <label>Estilo musical</label>
              <div className="ai-live-input">{typedStyle}<span className={"ai-caret " + (demoFrame >= textEnd && demoFrame < styleEnd ? "show" : "")}>|</span></div>
            </div>

            <button type="button" className={"ai-create-btn " + (isClicking ? "clicking" : "") + " " + (isCreating ? "loading" : "") + " " + (isSuccess ? "done" : "")}>
              {isSuccess ? "Música criada com sucesso" : isCreating ? `Criando música... ${creatingProgress}%` : "Criar música"}
            </button>

            {isSuccess &&
            <div className="ai-success-panel">
                <div className="ai-success-head">
                  <span className="ai-success-check"><Icon.Check /></span>
                  <strong>música criada por você!</strong>
                </div>
                <div className="ai-player-bar">
                  <button type="button" className="ai-player-play" aria-label="Tocar música criada"><Icon.Play /></button>
                  <div className="ai-player-track">
                    <div className="ai-player-fill" style={{ width: `${successProgress}%` }}></div>
                  </div>
                  <span className="ai-player-time">2:14</span>
                </div>
              </div>
            }
          </div>
          <div className="ai-flow">
            <span className="ai-step">Cola resumo ou edital</span>
            <span className="ai-arrow">→</span>
            <span className="ai-step">Escolhe gênero e estilo</span>
            <span className="ai-arrow">→</span>
            <span className="ai-step">IA compõe na hora</span>
            <span className="ai-arrow">→</span>
            <span className="ai-step">Você aprende ouvindo</span>
          </div>
        </div>
      </div>
    </section>);

}

// ============== VIDEO ==============
function VideoSection() {
  const [isPlaying, setIsPlaying] = useState(false);
  const videoId = "18za7xLzUAY";
  const poster = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
  const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`;
  return (
    <section className="section-pad" data-screen-label="video">
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <div className="eyebrow">Veja em 2 minutos</div>
          <h2 className="section-title">Como o Leis Cantadas <em>funciona na prática</em>.</h2>
        </div>
        <div className="video-wrap">
          <div className="video-frame" style={{ backgroundImage: `url(${poster})` }}>
            {!isPlaying &&
            <button type="button" className="video-poster" onClick={() => setIsPlaying(true)} aria-label="Reproduzir vídeo de apresentação">
                <div className="play-big">
                  <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
                </div>
                <div className="video-caption">
                  <div className="video-caption-eyebrow">Apresentação oficial</div>
                  <div className="video-caption-title">Conheça o Leis Cantadas</div>
                </div>
              </button>
            }
            {isPlaying &&
            <iframe
              src={embedUrl}
              title="Apresentação Leis Cantadas"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen>
              </iframe>
            }
          </div>
        </div>
      </div>
    </section>);

}

// ============== CATALOG ==============
function Catalog() {
  const [songsRows, setSongsRows] = useState([]);
  const [search, setSearch] = useState("");
  const [showAllCategories, setShowAllCategories] = useState(false);
  const [openCategories, setOpenCategories] = useState({});

  useEffect(() => {
    let mounted = true;
    fetch("../data/songs-catalog.json")
      .then((res) => res.json())
      .then((data) => {
        if (!mounted || !Array.isArray(data)) {return;}
        setSongsRows(data);
      })
      .catch(() => {
        // Fail silently and preserve current page rendering.
      });
    return () => {
      mounted = false;
    };
  }, []);

  const normalizeText = (value) =>
  (value || "").toString().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();

  const sourceRows = songsRows.length > 0 ?
  songsRows :
  SUBJECTS.map((s) => ({ category: s.name, law: s.name, subtopic: null }));

  const groupedMap = new Map();
  sourceRows.forEach((row) => {
    const category = (row.category || "Outros").toString().trim() || "Outros";
    const lawValue = (row.law || "").toString().trim();
    const subtopicValue = (row.subtopic || "").toString().trim();
    const law = lawValue && lawValue !== "[]" ? lawValue : "Sem lei/assunto específico";
    const subtopic = subtopicValue && subtopicValue !== "[]" ? subtopicValue : null;

    if (!groupedMap.has(category)) {
      groupedMap.set(category, { laws: new Map(), itemCount: 0 });
    }
    const categoryNode = groupedMap.get(category);
    categoryNode.itemCount += 1;

    if (!categoryNode.laws.has(law)) {
      categoryNode.laws.set(law, new Set());
    }
    if (subtopic) {
      categoryNode.laws.get(law).add(subtopic);
    }
  });

  const categories = Array.from(groupedMap.entries()).map(([name, data]) => {
    const laws = Array.from(data.laws.entries()).map(([lawName, subtopicsSet]) => ({
      name: lawName,
      subtopics: Array.from(subtopicsSet).sort((a, b) => a.localeCompare(b, "pt-BR"))
    })).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"));
    return {
      name,
      itemCount: data.itemCount,
      lawCount: laws.length,
      laws
    };
  }).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"));

  const query = normalizeText(search);
  const priorityTerms = [
  "direito constitucional",
  "direito administrativo",
  "direito penal",
  "direito civil",
  "lingua portuguesa",
  "informatica"];

  const filteredCategories = !query ? categories : categories.map((category) => {
    const categoryMatch = normalizeText(category.name).includes(query);
    const filteredLaws = category.laws.map((law) => {
      const lawMatch = normalizeText(law.name).includes(query);
      if (categoryMatch || lawMatch) {
        return law;
      }
      return null;
    }).filter(Boolean);

    if (categoryMatch || filteredLaws.length > 0) {
      return { ...category, laws: filteredLaws };
    }
    return null;
  }).filter(Boolean);

  const prioritizedCategories = !query ? [...filteredCategories].sort((a, b) => {
    const aName = normalizeText(a.name);
    const bName = normalizeText(b.name);
    const aPriority = priorityTerms.findIndex((term) => aName.includes(term));
    const bPriority = priorityTerms.findIndex((term) => bName.includes(term));
    const aRank = aPriority === -1 ? 999 : aPriority;
    const bRank = bPriority === -1 ? 999 : bPriority;
    if (aRank !== bRank) {return aRank - bRank;}
    return a.name.localeCompare(b.name, "pt-BR");
  }) : filteredCategories;

  const visibleCategories = showAllCategories ? prioritizedCategories : prioritizedCategories.slice(0, 6);
  const hiddenCategoriesCount = Math.max(0, filteredCategories.length - visibleCategories.length);

  return (
    <section className="section-pad" data-screen-label="catalog">
      <div className="container">
        <div className="eyebrow">O que tem dentro</div>
        <h2 className="section-title">Matérias essenciais e <em>muito mais</em>.</h2>
        <p className="section-sub">Mais de 5.000 músicas em um catálogo organizado por Matéria, Lei/Assunto e Tópicos. As trilhas são pensadas para os concursos mais disputados, ajudando você a revisar o conteúdo que realmente cai no edital.</p>

        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 20, marginBottom: 18 }}>
          <div className="area-tag"><strong>+5.000</strong> músicas no catálogo</div>
          <div className="area-tag"><strong>Mais de 30</strong> matérias</div>
          <div className="area-tag"><strong>{sourceRows.length}</strong> conteúdos mapeados</div>
        </div>

        <div className="catalog-search-wrap">
          <input
            type="text"
            className="catalog-search"
            placeholder="Buscar área, matéria ou lei (ex: Constitucional)"
            value={search}
            onChange={(e) => setSearch(e.target.value)} />
        </div>

        <div className="catalog-tree">
          {visibleCategories.map((category) =>
          <div key={category.name} className="catalog-category">
              <button
              type="button"
              className="catalog-category-btn"
              onClick={() => setOpenCategories((prev) => ({ ...prev, [category.name]: !prev[category.name] }))}>
                <span className="catalog-caret">{openCategories[category.name] ? "−" : "+"}</span>
                <span className="catalog-category-name">{category.name}</span>
                <span className="catalog-meta">{category.lawCount} leis/assuntos</span>
              </button>

              {openCategories[category.name] &&
            <div className="catalog-laws">
                  {category.laws.map((law) => {
                const lawKey = `${category.name}__${law.name}`;
                return (
                  <div key={lawKey} className="catalog-law">
                        <div className="catalog-law-btn">
                          <span className="catalog-caret">•</span>
                          <span className="catalog-law-name">{law.name}</span>
                        </div>
                      </div>);
              })}
                </div>
            }
            </div>
          )}
          {filteredCategories.length === 0 &&
          <div className="catalog-empty">
              Nenhum resultado para a busca. Tente outro termo.
            </div>
          }
        </div>

        {filteredCategories.length > 6 &&
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 18 }}>
            <button className="btn-ghost" onClick={() => setShowAllCategories((v) => !v)}>
              {showAllCategories ? "Mostrar menos matérias" : `Ver todas as matérias (+${hiddenCategoriesCount})`}
            </button>
          </div>
        }

        <div className="concurso-section" aria-label="Concursos atendidos pela plataforma">
          <div className="concurso-title">As músicas também atendem concursos como:</div>

          <div className="concurso-carousel">
            <div className="concurso-track concurso-track-left">
              {repeatCarouselItems(CONCURSOS_ROW_1).map((item, i) =>
              <article key={`row1-${i}`} className="concurso-card">
                  <img src={item.image} alt={item.name} loading="lazy" />
                  <div className="concurso-overlay"></div>
                  <div className="concurso-name">{item.name}</div>
                </article>
              )}
            </div>

            <div className="concurso-track concurso-track-right">
              {repeatCarouselItems(CONCURSOS_ROW_2).map((item, i) =>
              <article key={`row2-${i}`} className="concurso-card">
                  <img src={item.image} alt={item.name} loading="lazy" />
                  <div className="concurso-overlay"></div>
                  <div className="concurso-name">{item.name}</div>
                </article>
              )}
            </div>

            <div className="concurso-fade concurso-fade-left"></div>
            <div className="concurso-fade concurso-fade-right"></div>
          </div>
        </div>
      </div>
    </section>);

}

// ============== TESTIMONIALS ==============
function Testimonials() {
  const sourceLabel = { wa: 'WhatsApp', ig: 'Instagram', fb: 'Direct' };
  return (
    <section className="section-pad" style={{ background: 'var(--bg-2)' }} data-screen-label="testimonials">
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <div className="eyebrow">Quem já tá ouvindo</div>
          <h2 className="section-title">+10.000 concurseiros. <em>Prints reais.</em></h2>
          <p className="section-sub" style={{ margin: '0 auto' }}>Não inventamos depoimento. Esses são prints reais que a gente recebe todo dia.</p>
        </div>
        <div className="wa-grid">
          {TESTIMONIALS.map((t, i) =>
          <div key={i} className="wa-card">
              <img src={t.src} alt={t.quote} loading="lazy" />
              <div className="wa-meta">
                <div className="wa-meta-left">
                  <Icon.Check /> Mensagem real de aluno
                </div>
                <span className={"wa-source " + t.source}>{sourceLabel[t.source]}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============== ABOUT CREATOR ==============
function AboutCreator() {
  return (
    <section className="section-pad about-creator" data-screen-label="about-creator">
      <div className="container about-creator-grid">
        <div className="about-photo-card">
          <div className="about-photo-frame-wrap about-story-collage">
            <img
              className="about-photo-frame about-main-photo"
              src="../folders/assets/renan-dutra.jpg"
              alt="Renan Dutra" />
            <img
              className="about-proof-photo"
              src="../folders/assets/renan-aprovacao.png"
              alt="Comprovante de aprovação em concurso de Renan Dutra" />
            <div className="about-floating-card top proof">
              <strong>Passei ouvindo música</strong>
              <span>estudo no dia a dia</span>
            </div>
            <div className="about-floating-card bottom">
              <strong>Ônibus + academia + rotina</strong>
              <span>viraram horas reais de estudo</span>
            </div>
          </div>
        </div>
        <div className="about-copy">
          <div className="eyebrow">Feito por quem foi aprovado estudando com música</div>
          <h2 className="section-title">
            Eu sou <em>Renan Dutra</em>, criador do Leis Cantadas.
          </h2>
          <p className="section-sub">
            Antes, meu dia era corrido e eu mal conseguia sentar por longos períodos para estudar. O tempo no ônibus, o treino na
            academia e várias tarefas da rotina pareciam "tempo morto".
          </p>
          <p className="section-sub">
            Quando transformei esses momentos em horas de estudo com música, minha retenção melhorou e o conteúdo começou a fixar de verdade.
            Foi assim que eu passei no concurso. Essa é a base do Leis Cantadas: te ajudar a estudar com constância, mesmo na rotina corrida.
          </p>
        </div>
      </div>
    </section>);
}

// ============== HOW IT WORKS ==============
function HowItWorks({ ctaLabel }) {
  return (
    <section id="como-funciona" className="section-pad" data-screen-label="how-it-works">
      <div className="container">
        <div className="eyebrow">Como funciona</div>
        <h2 className="section-title">3 passos simples para <em>estudar ouvindo</em>.</h2>
        <div className="steps">
          <div className="step">
            <div className="step-icon"><Icon.Note /></div>
            <div className="step-num">PASSO 01</div>
            <h3>Escolha seu plano</h3>
            <p>Você escolhe entre mensal ou anual. No anual, além do melhor custo-benefício, você também recebe créditos para usar o LC Studio IA.</p>
          </div>
          <div className="step">
            <div className="step-icon"><Icon.Zap /></div>
            <div className="step-num">PASSO 02</div>
            <h3>Receba o acesso imediato</h3>
            <p>Após a confirmação da compra, seu login chega no e-mail na hora. Em poucos minutos, você já entra na plataforma sem burocracia.</p>
          </div>
          <div className="step">
            <div className="step-icon"><Icon.Headphones /></div>
            <div className="step-num">PASSO 03</div>
            <h3>Estude no modo "Spotify para concursos"</h3>
            <p>Dentro da plataforma, funciona como um Spotify focado em concursos: você abre no celular ou computador, escolhe a matéria, playlist ou lei, favoríta as músicas que mais ajudam e cria suas próprias playlists de revisão para estudar do seu jeito.</p>
          </div>
        </div>
        <div className="devices-note">
          <Icon.Devices /> Funciona em celular, tablet e computador · sem app pra baixar
        </div>
      </div>
    </section>);

}

// ============== PRICING ==============
function Pricing({ ctaLabel }) {
  return (
    <section id="planos" className="section-pad pricing" data-screen-label="pricing">
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <div className="eyebrow">Escolha seu plano</div>
          <h2 className="section-title">Menos do que <em>um lanche por mês</em>.</h2>
          <p className="section-sub" style={{ margin: '0 auto' }}>Acesso completo desde o primeiro dia. Cancela quando quiser.</p>
        </div>
        <div className="price-grid">
          <div className="price-card">
            <div className="price-name">Mensal</div>
            <div className="price-amount">
              <span className="price-currency">R$</span>
              <span className="price-value">67,90</span>
              <span className="price-period">/mês</span>
            </div>
            <div className="price-installments">Cobrado mensalmente</div>
            <ul className="features">
              <li><Icon.Check /> Acesso completo a 5.000+ músicas</li>
              <li><Icon.Check /> Matérias atualizadas toda semana</li>
              <li><Icon.Check /> Celular, tablet e computador</li>
              <li><Icon.Check /> Cancela quando quiser</li>
            </ul>
            <a
              href="https://pay.hotmart.com/F103050965M?off=as294uo0&checkoutMode=10"
              className="price-cta"
              onClick={trackInitiateCheckout}>
              Começar mensal
            </a>
          </div>

          <div className="price-card featured">
            <div className="price-badge">★ Melhor custo-benefício</div>
            <div className="price-name">Anual</div>
            <div className="price-amount">
              <span className="price-currency">R$</span>
              <span className="price-value">197,90</span>
              <span className="price-period">/ano</span>
            </div>
            <div className="price-installments">
              ou <strong>10x de R$ 19,70</strong> · <span className="price-old">de R$ 814,80</span>
            </div>
            <ul className="features">
              <li className="highlight"><Icon.Check /> Tudo do plano mensal</li>
              <li><Icon.Check /> <strong>150 créditos LC Studio IA</strong> — crie suas próprias músicas</li>
              <li><Icon.Check /> Acesso antecipado a novas músicas</li>
              <li><Icon.Check /> 12 meses de acesso garantido</li>
              <li className="highlight"><Icon.Check /> Economia de R$ 616,90 no ano</li>
            </ul>
            <a
              href="https://pay.hotmart.com/F103050965M?off=kzdmvbyf&checkoutMode=10"
              className="price-cta featured-cta"
              onClick={trackInitiateCheckout}>
              {ctaLabel} →
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// ============== FAQ ==============
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section-pad" data-screen-label="faq">
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <div className="eyebrow">Dúvidas</div>
          <h2 className="section-title">Perguntas que <em>todo mundo faz</em>.</h2>
        </div>
        <div className="faq-list">
          {FAQ.map((item, i) =>
          <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
              <button className="faq-question" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="faq-icon"><Icon.Plus /></span>
              </button>
              <div className="faq-answer" style={{ maxHeight: open === i ? '300px' : '0' }}>
                <div className="faq-answer-inner">{item.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============== FINAL CTA ==============
function FinalCTA({ ctaLabel }) {
  return (
    <section className="section-pad final-cta" data-screen-label="final-cta">
      <div className="container final-cta-inner">
        <div className="eyebrow">Comece hoje</div>
        <h2 className="section-title">Daqui a um ano você quer estar <em>aprovado</em> ou <em>tentando de novo</em>?</h2>
        <p className="section-sub">Mais de 10.000 concurseiros já trocaram o livro pesado pela playlist. A diferença começa agora.</p>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
          <a href="#planos" className="btn-primary">{ctaLabel} <Icon.Arrow /></a>
        </div>
        <div className="final-stats">
          <div className="final-stat">
            <div className="final-stat-num">+10.000</div>
            <div className="final-stat-label">alunos</div>
          </div>
          <div className="final-stat">
            <div className="final-stat-num">+5.000</div>
            <div className="final-stat-label">músicas</div>
          </div>
          <div className="final-stat">
            <div className="final-stat-num">Todas as áreas</div>
            <div className="final-stat-label">de Direito e temas mais cobrados</div>
          </div>
          <div className="final-stat">
            <div className="final-stat-num">150</div>
            <div className="final-stat-label">créditos IA</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============== NAV / FOOTER ==============
function Logo({ inFooter }) {
  const size = inFooter ? 56 : 44;
  return (
    <a href="#" className="logo" aria-label="Leis Cantadas">
      <img src="../folders/assets/logo-icon.png" alt="" className="nav-logo-icon" style={{ width: size, height: size }} />
      <div className="logo-text">Leis<span>Cantadas</span></div>
    </a>);

}

function Nav({ ctaLabel }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <Logo />
        <a href="#planos" className="nav-cta">{ctaLabel}</a>
      </div>
    </nav>);

}

function Footer() {
  return (
    <footer>
      <div className="container">
        <Logo inFooter />
        <div style={{ marginTop: 16 }}>© 2026 Leis Cantadas — Concurso público em forma de música.</div>
      </div>
    </footer>);

}

// ============== APP ==============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "yellow",
  "headlineVariant": 0,
  "ctaLabel": "Quero estudar com música agora"
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply theme accent
  useEffect(() => {
    const root = document.documentElement;
    if (t.theme === 'teal') {
      root.style.setProperty('--accent', '#2a7a88');
      root.style.setProperty('--accent-2', '#3a95a5');
      root.style.setProperty('--accent-soft', 'rgba(42,122,136,0.18)');
    } else {
      root.style.setProperty('--accent', '#f0c14b');
      root.style.setProperty('--accent-2', '#ffd66e');
      root.style.setProperty('--accent-soft', 'rgba(240,193,75,0.14)');
    }
  }, [t.theme]);

  return (
    <>
      <Nav ctaLabel={t.ctaLabel} />
      <Hero headline={t.headlineVariant} ctaLabel={t.ctaLabel} />
      <Problems />
      <Solution />
      <AIDifferential />
      <VideoSection />
      <Catalog />
      <Testimonials />
      <HowItWorks ctaLabel={t.ctaLabel} />
      <Pricing ctaLabel={t.ctaLabel} />
      <AboutCreator />
      <FAQSection />
      <FinalCTA ctaLabel={t.ctaLabel} />
      <Footer />

      <window.TweaksPanel>
        <window.TweakSection title="Visual">
          <window.TweakRadio
            label="Acento"
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
            { value: 'yellow', label: 'Amarelo (oficial)' },
            { value: 'teal', label: 'Petróleo' }]
            } />
          
        </window.TweakSection>
        <window.TweakSection title="Copy">
          <window.TweakRadio
            label="Headline do hero"
            value={t.headlineVariant}
            onChange={(v) => setTweak('headlineVariant', v)}
            options={[
            { value: 0, label: "Chega de decorar" },
            { value: 1, label: "Estude ouvindo" },
            { value: 2, label: "Sua aprovação" }]
            } />
          
          <window.TweakText label="Texto do CTA" value={t.ctaLabel} onChange={(v) => setTweak('ctaLabel', v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);