Modo Noturno

[augustosapalo05-ai]

import { useState } from 'react';

const bookData = {
title: "MODO",
titleLine2: "NOTURNO",
subtitle: "O Protocolo para Reprogramar Sua Mente Enquanto Você Dorme",
author: "Seu Nome Aqui",
tagline: "87% das pessoas nunca usam 1/3 da sua vida. Você está prestes a mudar isso.",
description: "Você passa cerca de 26 anos dormindo ao longo da vida — e provavelmente nunca usou esse tempo de forma intencional. A neurociência já provou: o cérebro não desliga quando você dorme. Ele processa, reorganiza e consolida tudo o que você viveu, sentiu e aprendeu. O Modo Noturno é um protocolo prático e baseado em evidências para você começar a usar esse tempo com intenção. Sem misticismo. Sem promessas impossíveis. Só ciência, método e resultado.",
stats: [
{ value: "26 anos", label: "é quanto você dorme na vida" },
{ value: "4–6 ciclos", label: "de processamento mental por noite" },
{ value: "40%", label: "das decisões são influenciadas pelo sono" },
{ value: "3 semanas", label: "para notar as primeiras mudanças" },
],
chapters: [
{
part: "PARTE I",
partTitle: "O Sistema Oculto",
items: [
{ num: "01", title: "O que acontece quando você fecha os olhos", sub: "A arquitetura do sono e o que ninguém te contou" },
{ num: "02", title: "O Estado Hipnagógico", sub: "A janela entre vigília e sonho — e como aproveitá-la" },
{ num: "03", title: "Memória, emoção e consolidação noturna", sub: "Como o cérebro reescreve suas experiências à noite" },
],
},
{
part: "PARTE II",
partTitle: "O Protocolo",
items: [
{ num: "04", title: "Rotina Pré-sono: os 47 minutos que mudam tudo", sub: "O que fazer antes de dormir para preparar o terreno" },
{ num: "05", title: "Intenção Noturna", sub: "Como programar o que seu cérebro vai processar" },
{ num: "06", title: "Diário de Despertar", sub: "A ferramenta mais subestimada da autoconscência" },
{ num: "07", title: "Ancoragem Cognitiva", sub: "Técnicas para fixar o aprendizado profundo" },
],
},
],
};

const faqData = [
{ q: "Como vou receber o acesso?", a: "Imediatamente após a aprovação do pagamento, a Hotmart enviará os dados de acesso por e-mail para download e leitura na plataforma." },
{ q: "Preciso de algum equipamento ou app?", a: "Não. O protocolo é 100% focado em técnicas cognitivas e comportamentais. Só precisa de papel, caneta e consistência." },
{ q: "O método envolve hipnose ou misticismo?", a: "Absolutamente não. Todo o protocolo é baseado em estudos modernos de neurobiologia, consolidação de memória e arquitetura do sono." },
];

export default function BookLandingPage() {
const [activeTab, setActiveTab] = useState(0);
const [openFaq, setOpenFaq] = useState(null);

// Substitua pelo seu link real de checkout da Hotmart
const HOTMART_LINK = "https://hotmart.com";

return (

  {/* Alerta de Escassez */}
  <div className="bg-gradient-to-r from-indigo-950 via-indigo-900 to-indigo-950 text-center py-2 px-4 text-xs font-mono text-indigo-200 border-b border-indigo-500/20">
    🔥 Condição especial de lançamento ativa por tempo limitado.
  </div>

  {/* Hero Section */}
  <header className="relative overflow-hidden py-16 lg:py-24 px-4 sm:px-6 lg:px-8">
    <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_var(--tw-gradient-stops))] from-indigo-950/40 via-transparent to-transparent pointer-events-none" />
    
    <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10">
      <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
        <span className="inline-flex items-center text-xs font-semibold tracking-widest uppercase bg-indigo-500/10 text-indigo-400 px-3 py-1 rounded-full border border-indigo-500/20">
          ⚡ Neurociência Aplicada à Performance
        </span>
        <h1 className="text-5xl sm:text-7xl font-black tracking-tight leading-none text-white">
          {bookData.title} <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">
            {bookData.titleLine2}
          </span>
        </h1>
        <p className="text-xl text-slate-300 font-medium leading-relaxed max-w-2xl mx-auto lg:mx-0">
          {bookData.subtitle}
        </p>
        <p className="text-sm text-indigo-300/80 font-mono">Por {bookData.author}</p>
        
        <div className="pt-4 max-w-sm mx-auto lg:mx-0">
          <a href={HOTMART_LINK} className="block w-full bg-gradient-to-r from-indigo-500 via-purple-600 to-pink-600 hover:from-indigo-600 hover:to-pink-700 text-white font-bold py-4 px-8 rounded-xl shadow-lg shadow-indigo-500/20 transition-all transform hover:-translate-y-0.5 text-center text-lg">
            Quero o Método Agora
          </a>
          <p className="text-xs text-slate-500 text-center mt-2 flex items-center justify-center gap-1">
            🔒 Ambiente de pagamento 100% seguro Hotmart
          </p>
        </div>
      </div>

      {/* Book Mockup */}
      <div className="lg:col-span-5 flex justify-center">
        <div className="relative group">
          <div className="w-64 h-96 bg-gradient-to-b from-slate-900 to-black rounded-r-2xl border border-slate-800 shadow-2xl shadow-indigo-500/10 p-6 flex flex-col justify-between transform transition-all duration-500 group-hover:rotate-y-12 ring-1 ring-white/10">
            <div className="space-y-2">
              <div className="h-1 w-12 bg-indigo-500 rounded" />
              <p className="text-4xl font-black tracking-tighter text-white">{bookData.title}</p>
              <p className="text-4xl font-black tracking-tighter text-indigo-400 -mt-2">{bookData.titleLine2}</p>
              <p className="text-[10px] text-slate-400 uppercase tracking-widest mt-4 leading-tight">{bookData.subtitle}</p>
            </div>
            <div className="space-y-4">
              <p className="text-[9px] text-slate-500 border-t border-slate-800/80 pt-2 leading-relaxed">{bookData.tagline}</p>
              <p className="text-xs font-mono tracking-widest text-slate-400">{bookData.author}</p>
            </div>
          </div>
          <div className="absolute top-0 left-0 w-3 h-full bg-slate-950 rounded-l border-y border-l border-slate-800 shadow-inner origin-right transform -rotate-y-90" />
        </div>
      </div>
    </div>
  </header>

  {/* Stats Section */}
  <section className="py-12 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
      {bookData.stats.map((stat, idx) => (
        <div key={idx} className="bg-slate-900/40 p-6 rounded-2xl border border-slate-900/60 text-center">
          <p className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight bg-gradient-to-r from-indigo-200 to-slate-200 bg-clip-text text-transparent">{stat.value}</p>
          <p className="text-xs text-slate-400 mt-2 font-medium">{stat.label}</p>
        </div>
      ))}
    </div>
  </section>

  {/* Copywriting / Pitch Section */}
  <section className="py-16 bg-slate-900/20 border-y border-slate-900/40">
    <div className="max-w-3xl mx-auto px-4 text-center space-y-6">
      <h2 className="text-2xl sm:text-3xl font-bold text-white tracking-tight">{bookData.tagline}</h2>
      <p className="text-slate-400 leading-relaxed text-base sm:text-lg whitespace-pre-line text-justify lg:text-center">{bookData.description}</p>
    </div>
  </section>

  {/* Dynamic Summary Section */}
  <section className="py-20 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="text-center mb-12">
      <h2 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">O Conteúdo do Protocolo</h2>
      <p className="mt-3 text-slate-400 text-sm sm:text-base">Clique nas abas para explorar a estrutura do livro por dentro.</p>
    </div>

    <div className="flex justify-center space-x-2 mb-10 border-b border-slate-900 pb-4">
      {bookData.chapters.map((chap, idx) => (
        <button
          key={idx}
          onClick={() => setActiveTab(idx)}
          className={`px-4 py-2.5 rounded-xl font-medium text-sm transition-all ${activeTab === idx ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-slate-200'}`}
        >
          {chap.part}
        </button>
      ))}
    </div>

    <div className="space-y-4 min-h-[280px]">
      {bookData.chapters[activeTab].items.map((item, idx) => (
        <div key={idx} className="group bg-slate-900/20 hover:bg-slate-900/50 border border-slate-900 p-5 rounded-2xl flex items-start space-x-4 transition-all">
          <span className="text-sm font-mono font-bold text-indigo-400 bg-indigo-500/5 px-2.5 py-1 rounded-lg border border-indigo-500/10">{item.num}</span>
          <div>
            <h3 className="text-base font-bold text-white group-hover:text-indigo-300 transition-colors">{item.title}</h3>
            <p className="text-xs sm:text-sm text-slate-400 mt-0.5">{item.sub}</p>
          </div>
        </div>
      ))}
    </div>
  </section>

  {/* Offer / Pricing Section (Hotmart Optimized) */}
  <section className="py-16 bg-gradient-to-b from-slate-950 to-slate-900 border-t border-slate-900">
    <div className="max-w-md mx-auto px-4 text-center border border-indigo-500/30 rounded-3xl p-8 bg-black/40 relative shadow-2xl shadow-indigo-500/5">
      <span className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-[10px] uppercase font-mono px-3 py-1 rounded-full font-bold tracking-widest shadow"> Oferta Exclusiva </span>
      <p className="text-sm font-mono text-slate-400 uppercase tracking-widest mt-2">Acesso Vitalício + Atualizações</p>
      
      <div className="my-6">
        <span className="text-sm text-slate-500 line-through">R$ 197,00</span>
        <div className="flex items-center justify-center gap-1 mt-1">
          <span className="text-xs text-slate-400 font-medium">12x de</span>
          <span className="text-5xl font-black text-white tracking-tight">R$ 9,74</span>
        </div>
        <p className="text-xs text-indigo-400 font-medium mt-1">ou R$ 97,00 à vista</p>
      </div>

      <a href={HOTMART_LINK} className="block w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg text-lg">
        Quero Comprar via Hotmart
      </a>

      <div className="mt-6 space-y-2 border-t border-slate-900 pt-4 text-left text-xs text-slate-400">
        <p className="flex items-center gap-2">✅ Liberado para e-readers e telemóveis</p>
        <p className="flex items-center gap-2">✅ Garantia incondicional de 7 dias</p>
        <p className="flex items-center gap-2">✅ Certificado e entregue por Hotmart</p>
      </div>
    </div>
  </section>

  {/* Guarantee Section */}
  <section className="py-16 max-w-3xl mx-auto px-4 text-center space-y-4">
    <div className="text-4xl">🛡️</div>
    <h2 className="text-xl font-bold text-white">Risco Zero: Garantia Incondicional de 7 Dias</h2>
    <p className="text-sm text-slate-400 max-w-xl mx-auto leading-relaxed">
      Leia o material, aplique o protocolo por uma semana. Se achar que a ciência por trás do método não serve para si, basta solicitar o reembolso na plataforma Hotmart com um clique. Devolvemos 100% do valor.
    </p>
  </section>

  {/* FAQ Section */}
  <section className="py-16 max-w-2xl mx-auto px-4 border-t border-slate-900">
    <h2 className="text-2xl font-bold text-white text-center mb-8">Perguntas Frequentes</h2>
    <div className="space-y-4">
      {faqData.map((item, idx) => (
        <div key={idx} className="border border-slate-900 rounded-xl bg-slate-900/10 overflow-hidden">
          <button onClick={() => setOpenFaq(openFaq === idx ? null : idx)} className="w-full text-left p-4 font-medium text-sm sm:text-base text-white flex justify-between items-center hover:bg-slate-900/30 transition-colors">
            <span>{item.q}</span>
            <span className="text-indigo-400 text-xs">{openFaq === idx ? '▲' : '▼'}</span>
          </button>
          {openFaq === idx && (
            <div className="p-4 pt-0 text-xs sm:text-sm text-slate-400 border-t border-slate-900/40 bg-slate-950/40 leading-relaxed">
              {item.a}
            </div>
          )}
        </div>
      ))}
    </div>
  </section>

  {/* Footer */}
  <footer className="py-12 border-t border-slate-900 text-center text-xs text-slate-500 px-4 space-y-2">
    <p>Copyright © {new Date().getFullYear()} • Modo Noturno. Todos os direitos reservados.</p>
    <p className="max-w-md mx-auto text-[10px] leading-relaxed">Aviso: Os resultados podem variar de pessoa para pessoa. Este produto não substitui acompanhamento médico especializado para distúrbios crónicos do sono.</p>
  </footer>

</div>

);
}