import React, { useState } from 'react';

export default function SemVoltaApp() {
  // Estados da máquina de fluxo: 'status' | 'question' | 'burn' | 'certificate'
  const [screen, setScreen] = useState('status');
  const [status, setStatus] = useState(null); // 'casado' | 'solteiro'
  const [selectedBoat, setSelectedBoat] = useState('');
  const [matchProgress, setMatchProgress] = useState(0);
  const [isBurned, setIsBurned] = useState(false);
  const [memorialInput1, setMemorialInput1] = useState('');
  const [memorialInput2, setMemorialInput2] = useState('');

  // Banco de perguntas dinâmico baseado no status
  const flowData = {
    casado: {
      title: "O Porto Oculto do Casamento",
      subtitle: "Qual rota de fuga secreta você tem mantido ancorada na praia da sua vida?",
      boats: [
        { id: "divorcio", text: "⛵ O Barco do Divórcio (Pensar em desistir ou voltar para a casa dos pais nas crises)" },
        { id: "recuo", text: "⛵ O Barco do Recuo Financeiro (Chutar o balde no trabalho/negócio na primeira tempestade)" },
        { id: "isolamento", text: "⛵ O Barco do Isolamento (Se afastar da comunidade e focar apenas nas falhas do sistema)" },
        { id: "comparacao", text: "⛵ O Barco da Comparação (Medir seu lar pelo palco dos outros nas redes sociais)" }
      ],
      inputLabel1: "Escrevam aqui um pacto real e prático de blindagem para o casamento de vocês:",
      inputPlaceholder1: "Ex: Tirar a palavra divórcio do nosso vocabulário...",
      inputLabel2: "Qual projeto ou negócio vocês decidiram que vai dar certo ou dar certo?",
      inputPlaceholder2: "Ex: Fazer a nossa empresa crescer sem depender de terceiros..."
    },
    solteiro: {
      title: "O Porto Oculto da Preparação",
      subtitle: "Qual âncora do passado ou rota de fuga tem impedido você de avançar para o seu futuro?",
      boats: [
        { id: "relacoes", text: "⛵ O Barco das Relações Líquidas (Manter um pé atrás nos compromissos, pronto para fugir)" },
        { id: "dependencia", text: "⛵ O Barco da Dependência (Esperar passivamente pelos pais em vez de assumir o próprio destino)" },
        { id: "omissao", text: "⛵ O Barco da Omissão na Igreja (Viver como mero espectador sem criar raízes ou servir)" },
        { id: "procrastinacao", text: "⛵ O Barco da Zona de Conforto (Adiar decisões profissionais por medo de falhar)" }
      ],
      inputLabel1: "Qual hábito ou postura imatura você decide queimar definitivamente hoje?",
      inputPlaceholder1: "Ex: Parar de fugir das responsabilidades e assumir minha carreira...",
      inputLabel2: "Qual compromisso com Deus e com o seu futuro você sela a partir desta noite?",
      inputPlaceholder2: "Ex: Me posicionar como um homem/mulher de aliança e focar em Jesus..."
    }
  };

  const currentFlow = flowData[status];

  // Gerencia o arraste do fósforo
  const handleMatchSlider = (e) => {
    const value = parseInt(e.target.value);
    setMatchProgress(value);
    if (value >= 100 && !isBurned) {
      setIsBurned(true);
      // Feedback tátil ou sonoro seria disparado aqui na infra nativa
      setTimeout(() => {
        setScreen('certificate');
      }, 1500);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 flex flex-col justify-between p-6 font-sans antialiased selection:bg-orange-500 selection:text-white">
      
      {/* HEADER GLOBAL */}
      <header className="w-full max-w-md mx-auto text-center pt-4">
        <div className="inline-flex items-center gap-2 bg-slate-900/80 border border-slate-800 px-3 py-1.5 rounded-full backdrop-blur-sm shadow-xl">
          <span className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span>
          <span className="text-xs font-semibold tracking-widest uppercase text-slate-400">Dinâmica Sem Volta</span>
        </div>
      </header>

      {/* CONTEÚDO PRINCIPAL COM TRANSIÇÕES DE TELA */}
      <main className="w-full max-w-md mx-auto flex-1 flex flex-col justify-center my-8">
        
        {/* TELA 1: SELEÇÃO DE STATUS */}
        {screen === 'status' && (
          <div className="space-y-8 animate-fadeIn">
            <div className="text-center space-y-3">
              <h1 className="text-4xl font-black tracking-tight bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
                Qual o seu Status?
              </h1>
              <p className="text-slate-400 text-sm max-w-xs mx-auto">
                Para direcionar seus alvos de maturidade, selecione sua fase de vida atual.
              </p>
            </div>

            <div className="space-y-4">
              <button 
                onClick={() => { setStatus('casado'); setScreen('question'); }}
                className="w-full group relative overflow-hidden bg-slate-900 hover:bg-slate-850 border border-slate-800 hover:border-slate-700 p-6 rounded-2xl transition-all duration-300 text-left shadow-lg hover:shadow-orange-950/10"
              >
                <div className="flex justify-between items-center">
                  <div>
                    <h3 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Casados / Recém-Casados</h3>
                    <p className="text-xs text-slate-500 mt-1">Foco em blindagem do lar, finanças unificadas e constância.</p>
                  </div>
                  <span className="text-2xl opacity-60 group-hover:opacity-100 transition-opacity">💍</span>
                </div>
              </button>

              <button 
                onClick={() => { setStatus('solteiro'); setScreen('question'); }}
                className="w-full group relative overflow-hidden bg-slate-900 hover:bg-slate-850 border border-slate-800 hover:border-slate-700 p-6 rounded-2xl transition-all duration-300 text-left shadow-lg hover:shadow-orange-950/10"
              >
                <div className="flex justify-between items-center">
                  <div>
                    <h3 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Solteiros / Jovens</h3>
                    <p className="text-xs text-slate-500 mt-1">Foco em auto-responsabilidade, posicionamento e preparação.</p>
                  </div>
                  <span className="text-2xl opacity-60 group-hover:opacity-100 transition-opacity">🎯</span>
                </div>
              </button>
            </div>
          </div>
        )}

        {/* TELA 2: IDENTIFICAÇÃO DO BARCO */}
        {screen === 'question' && currentFlow && (
          <div className="space-y-6 animate-fadeIn">
            <div className="space-y-2">
              <h2 className="text-2xl font-extrabold text-slate-100 tracking-tight">{currentFlow.title}</h2>
              <p className="text-sm text-slate-400 leading-relaxed">{currentFlow.subtitle}</p>
            </div>

            <div className="space-y-3">
              {currentFlow.boats.map((boat) => (
                <label 
                  key={boat.id}
                  className={`flex items-start gap-4 p-4 rounded-xl border cursor-pointer transition-all duration-200 ${
                    selectedBoat === boat.id 
                    ? 'bg-orange-950/20 border-orange-500/50 shadow-[0_0_15px_rgba(249,115,22,0.05)]' 
                    : 'bg-slate-900/60 border-slate-800/80 hover:border-slate-700'
                  }`}
                >
                  <input 
                    type="radio" 
                    name="boat" 
                    value={boat.id}
                    checked={selectedBoat === boat.id}
                    onChange={(e) => setSelectedBoat(e.target.value)}
                    className="mt-1 accent-orange-500 h-4 w-4"
                  />
                  <span className="text-sm text-slate-300 font-medium leading-snug">{boat.text}</span>
                </label>
              ))}
            </div>

            <button 
              disabled={!selectedBoat}
              onClick={() => setScreen('burn')}
              className="w-full bg-gradient-to-r from-orange-600 to-amber-500 disabled:from-slate-800 disabled:to-slate-800 disabled:text-slate-500 text-slate-950 font-bold py-4 px-6 rounded-xl shadow-lg transition-all duration-300 hover:brightness-110 active:scale-[0.99] mt-4 tracking-wide uppercase text-sm"
            >
              Avançar para a Praia
            </button>
          </div>
        )}

        {/* TELA 3: INTERAÇÃO DE QUEIMAR OS BARCOS */}
        {screen === 'burn' && (
          <div className="space-y-8 text-center animate-fadeIn">
            <div className="space-y-2">
              <h2 className="text-3xl font-black text-slate-100 tracking-tight uppercase">Hora de Decidir</h2>
              <p className="text-sm text-slate-400 max-w-xs mx-auto">
                Não há Plano B. Não há rota de fuga. Arraste o fósforo para incendiar o porto do retrocesso.
              </p>
            </div>

            {/* CONTAINER VISUAL DO BARCO PEGANDO FOGO */}
            <div className="relative w-full aspect-video bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-center overflow-hidden shadow-inner">
              
              {/* Glow de Fundo Condicional */}
              <div className={`absolute inset-0 bg-gradient-to-t from-orange-600/20 to-transparent transition-opacity duration-1000 ${isBurned ? 'opacity-100' : 'opacity-0'}`} />

              {!isBurned ? (
                <div className="text-center p-4 space-y-2 z-10">
                  <span className="text-6xl block transform animate-bounce">⛵</span>
                  <span className="text-xs uppercase tracking-widest text-slate-500 font-bold">Barco Ancorado</span>
                </div>
              ) : (
                <div className="text-center p-4 space-y-2 z-10 animate-pulse">
                  <span className="text-6xl block">🔥</span>
                  <span className="text-sm font-black uppercase tracking-widest text-orange-500">Barcos Queimados!</span>
                  <span className="text-xs text-slate-400 block font-medium">Gerando Memorial de Aliança...</span>
                </div>
              )}

              {/* Partículas de Fumaça/Fogo Simuladas com CSS */}
              {isBurned && (
                <div className="absolute inset-x-0 bottom-0 h-full bg-orange-600/10 mix-blend-screen animate-pulse pointer-events-none" />
              )}
            </div>

            {/* CONTROLE INTERATIVO DO FÓSFORO */}
            {!isBurned && (
              <div className="space-y-4 bg-slate-900/60 border border-slate-800/80 p-6 rounded-xl backdrop-blur-sm">
                <div className="flex justify-between items-center text-xs font-bold uppercase tracking-wider text-slate-500 px-1">
                  <span>Riscando o Fósforo</span>
                  <span className="text-orange-500">{matchProgress}%</span>
                </div>
                
                <div className="relative flex items-center">
                  {/* Trilha do Fósforo */}
                  <div className="absolute left-0 right-0 h-1.5 bg-gradient-to-r from-amber-900 to-orange-600 rounded-full pointer-events-none" />
                  
                  <input 
                    type="range" 
                    min="0" 
                    max="100" 
                    value={matchProgress}
                    onChange={handleMatchSlider}
                    className="w-full appearance-none bg-transparent h-6 cursor-pointer relative z-10
                      focus:outline-none
                      [&::-webkit-slider-thumb]:appearance-none 
                      [&::-webkit-slider-thumb]:h-6 
                      [&::-webkit-slider-thumb]:w-6 
                      [&::-webkit-slider-thumb]:rounded-full 
                      [&::-webkit-slider-thumb]:bg-gradient-to-b from-amber-400 to-orange-600 
                      [&::-webkit-slider-thumb]:border-2 
                      [&::-webkit-slider-thumb]:border-slate-950
                      [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(249,115,22,0.8)]
                      [&::-moz-range-thumb]:h-6 
                      [&::-moz-range-thumb]:w-6 
                      [&::-moz-range-thumb]:rounded-full 
                      [&::-moz-range-thumb]:bg-gradient-to-b from-amber-400 to-orange-600 
                      [&::-moz-range-thumb]:border-2 
                      [&::-moz-range-thumb]:border-slate-950"
                  />
                </div>
                <p className="text-[11px] text-slate-500 font-medium">Arraste totalmente o círculo luminoso para a direita.</p>
              </div>
            )}
          </div>
        )}

        {/* TELA 4: MEMORIAL / CERTIFICADO DE ALIANÇA */}
        {screen === 'certificate' && currentFlow && (
          <div className="space-y-6 animate-scaleUp">
            <div className="text-center space-y-2">
              <span className="text-4xl">📜</span>
              <h2 className="text-2xl font-black text-slate-100 tracking-tight">Memorial de Aliança</h2>
              <p className="text-xs text-slate-400">Insira suas convicções. Elas ficarão salvas como o seu marco de não-retorno.</p>
            </div>

            <div className="space-y-4 bg-slate-900/40 border border-slate-800/80 p-5 rounded-xl space-y-4 shadow-2xl">
              <div className="space-y-2">
                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider">{currentFlow.inputLabel1}</label>
                <textarea 
                  value={memorialInput1}
                  onChange={(e) => setMemorialInput1(e.target.value)}
                  placeholder={currentFlow.inputPlaceholder1}
                  rows={2}
                  className="w-full bg-slate-950 border border-slate-800 focus:border-orange-500/50 focus:ring-1 focus:ring-orange-500/30 rounded-lg p-3 text-sm text-slate-200 placeholder:text-slate-600 focus:outline-none resize-none transition-all"
                />
              </div>

              <div className="space-y-2">
                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider">{currentFlow.inputLabel2}</label>
                <textarea 
                  value={memorialInput2}
                  onChange={(e) => setMemorialInput2(e.target.value)}
                  placeholder={currentFlow.inputPlaceholder2}
                  rows={2}
                  className="w-full bg-slate-950 border border-slate-800 focus:border-orange-500/50 focus:ring-1 focus:ring-orange-500/30 rounded-lg p-3 text-sm text-slate-200 placeholder:text-slate-600 focus:outline-none resize-none transition-all"
                />
              </div>
            </div>

            <div className="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-orange-500/20 p-4 rounded-xl text-center space-y-1">
              <p className="text-xs font-bold italic text-amber-400">"Ninguém que lança mão do arado e olha para trás é apto para o Reino de Deus."</p>
              <span className="text-[10px] uppercase font-bold tracking-widest text-slate-500 block">Lucas 9:62</span>
            </div>

            <button 
              disabled={!memorialInput1 || !memorialInput2}
              onClick={() => {
                alert("Memorial Selado! Integrar aqui com a rota do Supabase/n8n para disparar o PDF via WhatsApp.");
              }}
              className="w-full bg-gradient-to-r from-emerald-600 to-teal-500 disabled:from-slate-800 disabled:to-slate-800 disabled:text-slate-500 text-slate-950 font-black py-4 px-6 rounded-xl shadow-lg transition-all duration-300 hover:brightness-110 active:scale-[0.99] uppercase text-sm tracking-wide"
            >
              Selar Compromisso na Nuvem
            </button>
          </div>
        )}

      </main>

      {/* FOOTER GLOBAL */}
      <footer className="w-full max-w-md mx-auto text-center pb-2 text-[10px] text-slate-600 font-semibold tracking-wider uppercase">
        © {new Date().getFullYear()} — Comunidade & Discipulado Prático
      </footer>

      {/* CLASSES INJETADAS DE ANIMAÇÃO CORE (Caso use Tailwind puro) */}
      <style jsx global>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes scaleUp {
          from { opacity: 0; transform: scale(0.96); }
          to { opacity: 1; transform: scale(1); }
        }
        .animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
        .animate-scaleUp { animation: scaleUp 0.3s ease-out forwards; }
      `}</style>

    </div>
  );
}