import { useState, useRef, useEffect } from "react";

const CORRECT_PASSWORD = "123";
const MAX_ATTEMPTS = 10;
const LOCKOUT_MS = 30 * 60 * 1000;
const SESSION_TIMEOUT = 3 * 60 * 60 * 1000;
const FONT = "'Josefin Sans','Didact Gothic','Trebuchet MS',sans-serif";

const SYSTEM_PROMPT = `Você é AURA, geradora de eBooks profissionais. Responda SEMPRE em PT-BR.

QUANDO O USUÁRIO ENVIAR UM NICHO (qualquer texto que não seja ".", ".." ou "..."):
- Primeiro avalie: o texto é realmente um nicho de mercado, tema de conteúdo ou área de conhecimento válida? Se NÃO for, responda APENAS: "Desculpe, isso não parece ser um nicho. Pode me informar o nicho do seu eBook?"
- Se FOR válido: gere **TÍTULO EM MAIÚSCULO** em negrito — poderoso e magnético. Logo abaixo, *subtítulo persuasivo em itálico*. Depois EXATAMENTE 10 módulos numerados de 1 a 10.
- NÃO pergunte nada além disso. Gere direto.

QUANDO RECEBER ".": gere os próximos EXATAMENTE 10 módulos continuando a numeração.
QUANDO RECEBER "..": escreva APENAS uma mensagem de encerramento inspiradora. SEM módulos.
QUANDO RECEBER "...": responda exatamente: Qual é o nicho do seu produto?

REGRAS ABSOLUTAS:
1. Ao receber nicho válido: SEMPRE título + subtítulo + 10 módulos.
2. CADA módulo: EXATAMENTE 30 linhas com título, conceito, explicação, exemplo prático, dica de aplicação.
3. Módulos progridem do básico ao avançado.
4. Linguagem clara, profissional, densa.
5. NUNCA mencione os comandos ".", "..", "...".
6. NUNCA adicione conclusão ou resumo ao final de 10 módulos. Pare no décimo módulo.`;

function parseMarkdown(text) {
  return text
    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
    .replace(/\*(.+?)\*/g, "<em>$1</em>")
    .replace(/^#{1,3} (.+)$/gm, "<strong>$1</strong>")
    .replace(/\n/g, "<br/>");
}

function formatTime(ms) {
  const m = Math.floor(ms / 60000);
  const s = Math.floor((ms % 60000) / 1000);
  return `${m}:${String(s).padStart(2,"0")}`;
}

function formatCountdown(sec) {
  const h = Math.floor(sec / 3600);
  const m = Math.floor((sec % 3600) / 60);
  const s = sec % 60;
  return `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
}

function LoginWallpaper() {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let raf;
    const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };
    resize();
    window.addEventListener("resize", resize);

    const blobs = [
      { x:0.15, y:0.15, r:0.55, vx:0.00018, vy:0.00012, color:[80,15,180] },
      { x:0.80, y:0.20, r:0.50, vx:-0.00014, vy:0.00016, color:[15,35,160] },
      { x:0.75, y:0.80, r:0.52, vx:-0.00016, vy:-0.00013, color:[100,8,170] },
      { x:0.20, y:0.75, r:0.48, vx:0.00013, vy:-0.00015, color:[40,8,150] },
      { x:0.50, y:0.45, r:0.45, vx:0.00010, vy:0.00011, color:[60,12,160] },
    ];

    let t = 0;
    const draw = () => {
      const W = canvas.width, H = canvas.height;
      ctx.clearRect(0, 0, W, H);

      // Base
      ctx.fillStyle = "#05030f";
      ctx.fillRect(0, 0, W, H);

      // Blobs
      ctx.globalCompositeOperation = "screen";
      blobs.forEach(b => {
        b.x += b.vx; b.y += b.vy;
        if(b.x < 0.05 || b.x > 0.95) b.vx *= -1;
        if(b.y < 0.05 || b.y > 0.95) b.vy *= -1;
        const cx = b.x * W, cy = b.y * H;
        const r = b.r * Math.max(W, H);
        const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
        const [R,G,B] = b.color;
        g.addColorStop(0,   `rgba(${R},${G},${B},0.35)`);
        g.addColorStop(0.4, `rgba(${R},${G},${B},0.15)`);
        g.addColorStop(1,   `rgba(${R},${G},${B},0)`);
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.ellipse(cx, cy, r, r * 0.85, t * 0.0003, 0, Math.PI * 2);
        ctx.fill();
      });

      // Subtle noise shimmer
      ctx.globalCompositeOperation = "source-over";
      ctx.globalAlpha = 0.03 + Math.sin(t * 0.001) * 0.01;
      for(let i = 0; i < 6; i++) {
        const gx = ctx.createLinearGradient(0, (t * 0.4 + i * 140) % (H + 140) - 70, 0, (t * 0.4 + i * 140) % (H + 140) - 50);
        gx.addColorStop(0, "transparent");
        gx.addColorStop(0.5, `rgba(180,140,255,0.4)`);
        gx.addColorStop(1, "transparent");
        ctx.fillStyle = gx;
        ctx.fillRect(0, 0, W, H);
      }
      ctx.globalAlpha = 1;

      t++;
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);

  return (
    <div style={{ position:"absolute", inset:0, zIndex:0 }}>
      <canvas ref={canvasRef} style={{ position:"fixed", top:0, left:0, width:"100vw", height:"100vh" }}/>
      {/* Grid */}
      <div style={{ position:"fixed", top:0, left:0, width:"100vw", height:"100vh", opacity:0.045,
        backgroundImage:"repeating-linear-gradient(0deg,rgba(255,255,255,1) 0px,rgba(255,255,255,1) 1px,transparent 1px,transparent 80px),repeating-linear-gradient(90deg,rgba(255,255,255,1) 0px,rgba(255,255,255,1) 1px,transparent 1px,transparent 80px)"
      }}/>
    </div>
  );
}

function ChatWallpaper() {
  return (
    <div style={{ position:"absolute", inset:0, overflow:"hidden", zIndex:0, pointerEvents:"none" }}>
      <style>{`
        @keyframes cBlob1 {
          0%,100% { transform: translate(0px,0px) scale(1); }
          33%      { transform: translate(50px,-70px) scale(1.1); }
          66%      { transform: translate(-40px,50px) scale(0.93); }
        }
        @keyframes cBlob2 {
          0%,100% { transform: translate(0px,0px) scale(1); }
          40%      { transform: translate(-60px,40px) scale(1.08); }
          70%      { transform: translate(40px,-50px) scale(0.95); }
        }
        @keyframes cBlob3 {
          0%,100% { transform: translate(0px,0px) scale(1); }
          50%      { transform: translate(70px,60px) scale(1.12); }
        }
        @keyframes scanLine {
          0%   { transform: translateY(-100%); opacity: 0; }
          5%   { opacity: 1; }
          95%  { opacity: 1; }
          100% { transform: translateY(100vh); opacity: 0; }
        }
        @keyframes scanLine2 {
          0%   { transform: translateY(-100%); opacity: 0; }
          5%   { opacity: 1; }
          95%  { opacity: 1; }
          100% { transform: translateY(100vh); opacity: 0; }
        }
        @keyframes auraPulse {
          0%,100% { opacity: 0.5; transform: scale(1); }
          50%      { opacity: 0.8; transform: scale(1.06); }
        }
      `}</style>
      {/* Base gradient */}
      <div style={{ position:"absolute", inset:0, background:"linear-gradient(160deg,#080614 0%,#0f0c22 50%,#07091a 100%)" }}/>

      {/* Blob 1 — top-left purple */}
      <div style={{
        position:"absolute", width:600, height:600, borderRadius:"50%",
        top:"-15%", left:"-10%",
        background:"radial-gradient(circle, rgba(100,30,220,0.22) 0%, transparent 65%)",
        filter:"blur(50px)",
        animation:"cBlob1 20s ease-in-out infinite",
      }}/>
      {/* Blob 2 — bottom-right blue */}
      <div style={{
        position:"absolute", width:550, height:550, borderRadius:"50%",
        bottom:"-15%", right:"-10%",
        background:"radial-gradient(circle, rgba(20,55,210,0.2) 0%, transparent 65%)",
        filter:"blur(50px)",
        animation:"cBlob2 24s ease-in-out infinite",
      }}/>
      {/* Blob 3 — center accent */}
      <div style={{
        position:"absolute", width:400, height:400, borderRadius:"50%",
        top:"30%", left:"35%",
        background:"radial-gradient(circle, rgba(120,20,240,0.12) 0%, transparent 65%)",
        filter:"blur(60px)",
        animation:"cBlob3 28s ease-in-out infinite",
      }}/>

      {/* Horizontal scan lines */}
      <div style={{
        position:"absolute", left:0, right:0, height:2,
        background:"linear-gradient(90deg, transparent 0%, rgba(160,120,255,0.18) 20%, rgba(200,170,255,0.32) 50%, rgba(160,120,255,0.18) 80%, transparent 100%)",
        filter:"blur(1px)",
        animation:"scanLine 10s linear infinite",
        animationDelay:"0s",
      }}/>
      <div style={{
        position:"absolute", left:0, right:0, height:1,
        background:"linear-gradient(90deg, transparent 0%, rgba(80,100,220,0.12) 30%, rgba(120,140,255,0.22) 50%, rgba(80,100,220,0.12) 70%, transparent 100%)",
        animation:"scanLine2 14s linear infinite",
        animationDelay:"5s",
      }}/>
      <div style={{
        position:"absolute", left:0, right:0, height:1,
        background:"linear-gradient(90deg, transparent 0%, rgba(130,80,240,0.1) 25%, rgba(170,120,255,0.2) 50%, rgba(130,80,240,0.1) 75%, transparent 100%)",
        animation:"scanLine 18s linear infinite",
        animationDelay:"9s",
      }}/>

      {/* Subtle grid */}
      <div style={{
        position:"absolute", inset:0, opacity:0.03,
        backgroundImage:"repeating-linear-gradient(0deg,rgba(255,255,255,1) 0px,rgba(255,255,255,1) 1px,transparent 1px,transparent 90px),repeating-linear-gradient(90deg,rgba(255,255,255,1) 0px,rgba(255,255,255,1) 1px,transparent 1px,transparent 90px)",
      }}/>

      {/* Bottom aurora glow */}
      <div style={{
        position:"absolute", bottom:"-5%", left:"10%", right:"10%", height:"40%",
        background:"radial-gradient(ellipse at 50% 100%, rgba(90,20,200,0.15) 0%, transparent 65%)",
        animation:"auraPulse 8s ease-in-out infinite",
      }}/>

      {/* Vignette */}
      <div style={{ position:"absolute", inset:0, background:"radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(5,3,15,0.55) 100%)" }}/>
    </div>
  );
}

function LockSVG({ unlocked, wrong }) {
  const c1 = unlocked ? "#6ee7b7" : wrong ? "#fca5a5" : "#9b8ecf";
  const c2 = unlocked ? "#059669" : wrong ? "#ef4444" : "#4c3a8a";
  const s1 = unlocked ? "#a7f3d0" : wrong ? "#fecaca" : "#c4b5fd";
  const s2 = unlocked ? "#34d399" : wrong ? "#f87171" : "#7c3aed";
  const glow = unlocked ? "drop-shadow(0 0 22px rgba(110,231,183,0.75))"
    : wrong ? "drop-shadow(0 0 16px rgba(252,165,165,0.7))"
    : "drop-shadow(0 8px 28px rgba(0,0,0,0.55))";
  return (
    <svg width="100" height="130" viewBox="-14 -8 118 138" fill="none"
      style={{ filter:glow, transition:"filter 0.45s ease", overflow:"visible" }}>
      <defs>
        <linearGradient id="lgb" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={c1}/><stop offset="100%" stopColor={c2}/></linearGradient>
        <linearGradient id="lgs" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="rgba(255,255,255,0.32)"/><stop offset="100%" stopColor="rgba(255,255,255,0)"/></linearGradient>
        <linearGradient id="lgsh" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={s1}/><stop offset="100%" stopColor={s2}/></linearGradient>
        <linearGradient id="lgssh" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="rgba(255,255,255,0)"/><stop offset="40%" stopColor="rgba(255,255,255,0.28)"/><stop offset="100%" stopColor="rgba(255,255,255,0)"/></linearGradient>
      </defs>
      <g style={{ transformOrigin:"22px 44px", transform:unlocked?"rotate(-52deg) translateX(-4px)":"rotate(0deg)", transition:"transform 0.6s cubic-bezier(0.34,1.56,0.64,1)" }}>
        <path d="M22 44 L22 22 Q22 4 45 4 Q68 4 68 22 L68 44" stroke="rgba(0,0,0,0.35)" strokeWidth="13" strokeLinecap="round" fill="none"/>
        <path d="M22 44 L22 22 Q22 4 45 4 Q68 4 68 22 L68 44" stroke="url(#lgsh)" strokeWidth="11" strokeLinecap="round" fill="none"/>
        <path d="M22 44 L22 22 Q22 4 45 4 Q68 4 68 22 L68 44" stroke="url(#lgssh)" strokeWidth="4" strokeLinecap="round" fill="none"/>
      </g>
      <rect x="6" y="47" width="78" height="68" rx="13" fill="rgba(0,0,0,0.3)"/>
      <rect x="6" y="44" width="78" height="68" rx="13" fill="url(#lgb)"/>
      <rect x="6" y="44" width="78" height="34" rx="13" fill="url(#lgs)"/>
      <rect x="6" y="44" width="78" height="68" rx="13" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
      <rect x="8" y="46" width="74" height="8" rx="6" fill="rgba(255,255,255,0.08)"/>
      <circle cx="45" cy="73" r="11" fill="rgba(0,0,0,0.38)"/>
      <circle cx="45" cy="73" r="11" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
      <rect x="41" y="78" width="8" height="14" rx="4" fill="rgba(0,0,0,0.38)"/>
      <circle cx="42" cy="69" r="3" fill="rgba(255,255,255,0.16)"/>
      {[20,70].map(cx=>(
        <g key={cx}>
          <circle cx={cx} cy="100" r="4" fill="rgba(0,0,0,0.3)"/>
          <circle cx={cx} cy="100" r="3.2" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" strokeWidth="0.6"/>
          <line x1={cx-2} y1="100" x2={cx+2} y2="100" stroke="rgba(255,255,255,0.15)" strokeWidth="0.8"/>
          <line x1={cx} y1="98" x2={cx} y2="102" stroke="rgba(255,255,255,0.15)" strokeWidth="0.8"/>
        </g>
      ))}
    </svg>
  );
}

function ChipSVG({ streaming, justDone, invalid }) {
  const anim = invalid
    ? "chipInvalid 0.9s ease-in-out 3"
    : streaming
    ? "chipRed 1.2s ease-in-out infinite"
    : justDone
    ? "chipGreen 1.4s ease-in-out infinite"
    : "none";
  const board = invalid?"rgba(200,100,10,0.55)":streaming?"rgba(180,40,40,0.45)":justDone?"rgba(30,120,80,0.4)":"rgba(30,80,160,0.38)";
  const bLight= invalid?"rgba(251,146,60,0.5)":streaming?"rgba(220,80,80,0.35)":justDone?"rgba(50,180,110,0.35)":"rgba(40,100,200,0.35)";
  const chip  = invalid?"rgba(251,146,60,0.75)":streaming?"rgba(210,100,30,0.55)":justDone?"rgba(200,160,20,0.5)":"rgba(200,140,30,0.48)";
  const pin   = invalid?"rgba(251,146,60,0.7)":streaming?"rgba(220,80,80,0.55)":justDone?"rgba(50,200,120,0.55)":"rgba(200,180,60,0.45)";
  const p=4, px=(x,y,w,h,f)=><rect key={`${x}${y}${w}${h}`} x={x*p} y={y*p} width={w*p} height={h*p} fill={f}/>;
  return (
    <svg width="96" height="96" viewBox="0 0 96 96" fill="none"
      style={{ animation:anim, opacity:0.75, imageRendering:"pixelated", overflow:"visible" }}>
      {px(0,0,24,24,"#111")}
      {[2,4,6,8,10,12,14,16,18,20].map(x=>[px(x,0,1,2,pin),px(x,22,1,2,pin),px(0,x,2,1,pin),px(22,x,2,1,pin)])}
      {px(2,2,20,20,board)}{px(2,2,20,1,bLight)}{px(2,2,1,20,bLight)}
      {px(3,4,3,1,"rgba(255,255,255,0.3)")}{px(3,5,1,3,"rgba(255,255,255,0.3)")}
      {px(3,6,6,1,"rgba(255,255,255,0.2)")}{px(16,15,4,1,"rgba(255,255,255,0.2)")}
      {px(16,15,1,3,"rgba(255,255,255,0.2)")}{px(3,18,6,1,"rgba(255,255,255,0.2)")}
      {px(14,3,6,1,"white")}{px(14,5,4,1,"white")}
      {px(20,7,2,2,"#e74c3c")}{px(20,10,2,2,"#c0392b")}
      {px(7,7,10,10,"#111")}{px(8,8,8,8,chip)}
      {px(8,8,4,1,"rgba(255,255,255,0.35)")}{px(8,8,1,4,"rgba(255,255,255,0.2)")}
      {[9,11,13].map(x=>px(x,9,1,1,"#111"))}
      {px(11,11,2,2,"rgba(255,255,255,0.25)")}{px(9,14,6,1,"#a0600a")}
      {px(3,20,8,1,"white")}{px(14,20,4,1,"white")}{px(14,20,1,2,"white")}{px(17,20,1,2,"white")}{px(20,20,2,1,"white")}
    </svg>
  );
}

const G = {
  card:   { background:"rgba(255,255,255,0.08)", backdropFilter:"blur(60px) saturate(200%)", WebkitBackdropFilter:"blur(60px) saturate(200%)", border:"1px solid rgba(255,255,255,0.22)", borderRadius:32, boxShadow:"0 8px 64px rgba(0,0,0,0.4),inset 0 1.5px 0 rgba(255,255,255,0.3)" },
  header: { background:"rgba(255,255,255,0.05)", backdropFilter:"blur(50px) saturate(180%)", WebkitBackdropFilter:"blur(50px) saturate(180%)", borderBottom:"1px solid rgba(255,255,255,0.1)", boxShadow:"0 1px 0 rgba(255,255,255,0.07)" },
  footer: { background:"rgba(255,255,255,0.04)", backdropFilter:"blur(50px) saturate(180%)", WebkitBackdropFilter:"blur(50px) saturate(180%)", borderTop:"1px solid rgba(255,255,255,0.09)" },
  msgBot: { background:"rgba(255,255,255,0.07)", backdropFilter:"blur(30px)", WebkitBackdropFilter:"blur(30px)", border:"1px solid rgba(255,255,255,0.12)", boxShadow:"0 4px 20px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.09)" },
  msgUser:{ background:"rgba(124,58,237,0.28)", backdropFilter:"blur(30px)", WebkitBackdropFilter:"blur(30px)", border:"1px solid rgba(167,139,250,0.35)", boxShadow:"0 8px 32px rgba(124,58,237,0.2),inset 0 1px 0 rgba(255,255,255,0.14)" },
  input:  { background:"rgba(255,255,255,0.07)", border:"1px solid rgba(255,255,255,0.18)", borderRadius:16, backdropFilter:"blur(20px)", WebkitBackdropFilter:"blur(20px)", boxShadow:"inset 0 1px 0 rgba(255,255,255,0.1)" },
  btn:    { background:"rgba(255,255,255,0.1)", border:"1px solid rgba(255,255,255,0.2)", backdropFilter:"blur(20px)", WebkitBackdropFilter:"blur(20px)", boxShadow:"0 4px 20px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.18)" },
};

function PasswordScreen({ onSuccess, unlocking }) {
  const [pwd, setPwd]           = useState("");
  const [attempts, setAttempts] = useState(0);
  const [status, setStatus]     = useState("idle");
  const [remaining, setRemaining] = useState(0);
  const timerRef = useRef(null);
  useEffect(()=>()=>clearInterval(timerRef.current),[]);

  const startLockout = () => {
    setStatus("locked"); setRemaining(LOCKOUT_MS);
    timerRef.current = setInterval(()=>{
      setRemaining(p=>{ if(p<=1000){clearInterval(timerRef.current);setAttempts(0);setStatus("idle");return 0;} return p-1000; });
    },1000);
  };
  const handleSubmit = () => {
    if(status==="locked") return;
    if(pwd===CORRECT_PASSWORD){onSuccess();return;}
    const n=attempts+1; setAttempts(n); setPwd("");
    if(n>=MAX_ATTEMPTS) startLockout(); else setStatus("wrong");
  };

  return (
    <div style={{ position:"relative", display:"flex", alignItems:"center", justifyContent:"center",
      height:"100vh", padding:24, fontFamily:FONT, overflow:"hidden" }}>
      <LoginWallpaper/>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap');
        @keyframes glassIn   { from{opacity:0;transform:scale(0.94) translateY(28px)} to{opacity:1;transform:scale(1) translateY(0)} }
        @keyframes shimmerPw { from{background-position:200% center} to{background-position:-200% center} }
        @keyframes lineExp   { from{width:0;opacity:0} to{width:60px;opacity:1} }
        @keyframes shake     { 0%{transform:translateX(0) scale(1)} 10%{transform:translateX(-8px) scale(1.012)} 25%{transform:translateX(7px) scale(1.008)} 40%{transform:translateX(-5px) scale(1.005)} 55%{transform:translateX(4px) scale(1.003)} 70%{transform:translateX(-2px) scale(1.001)} 85%{transform:translateX(1px) scale(1)} 100%{transform:translateX(0) scale(1)} }
        @keyframes lkBounce  { 0%{transform:scale(1)} 30%{transform:scale(1.1)} 65%{transform:scale(0.96)} 100%{transform:scale(1)} }
        .pw-card { animation:glassIn 0.7s cubic-bezier(0.22,1,0.36,1) both; }
        .pw-card-shake { animation:shake 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both !important; }
        .pw-inp  { transition:all 0.25s!important; }
        .pw-inp:focus { outline:none!important; border-color:rgba(200,185,255,0.7)!important; background:rgba(255,255,255,0.12)!important; box-shadow:0 0 0 3px rgba(167,139,250,0.15)!important; }
        .pw-btn  { transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1)!important; }
        .pw-btn:hover  { background:rgba(255,255,255,0.18)!important; transform:scale(1.02) translateY(-1px)!important; }
        .pw-btn:active { transform:scale(0.96)!important; }
      `}</style>
      <div className={`pw-card${status==="wrong" ? " pw-card-shake" : ""}`} style={{ ...G.card, position:"relative", zIndex:1,
        padding:"52px 44px 44px", maxWidth:400, width:"100%",
        display:"flex", flexDirection:"column", alignItems:"center", gap:22 }}>
        <div style={{ position:"absolute", top:0, left:"10%", right:"10%", height:1,
          background:"linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent)", pointerEvents:"none" }}/>
        <div style={{ animation:unlocking?"lkBounce 0.55s cubic-bezier(0.34,1.56,0.64,1)":status==="wrong"?"shake 0.4s ease":"none", marginBottom:4 }}>
          <LockSVG unlocked={unlocking} wrong={status==="wrong"}/>
        </div>
        <div style={{ textAlign:"center", width:"100%" }}>
          <div style={{ fontSize:32, fontWeight:700, letterSpacing:6, textTransform:"uppercase", fontFamily:FONT,
            background:unlocking?"linear-gradient(90deg,#a7f3d0,#fff,#6ee7b7,#fff,#a7f3d0)":"linear-gradient(90deg,#e0d7ff,#fff,#c4b5fd,#fff,#e0d7ff)",
            backgroundSize:"200% auto", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
            animation:"shimmerPw 3s linear infinite" }}>AURA</div>
          <div style={{ fontSize:13, marginTop:8, letterSpacing:1, fontFamily:FONT, transition:"color 0.4s",
            color:unlocking?"rgba(110,231,183,0.85)":status==="wrong"?"rgba(252,165,165,0.8)":"rgba(255,255,255,0.45)" }}>
            {unlocking?"ACESSO LIBERADO — BEM-VINDO!":status==="wrong"?"SENHA INCORRETA — TENTE NOVAMENTE":"ACESSO RESTRITO — DIGITE A SENHA"}
          </div>
          {unlocking&&<div style={{ margin:"10px auto 0", height:1, background:"linear-gradient(90deg,transparent,rgba(110,231,183,0.6),transparent)", animation:"lineExp 0.6s ease forwards" }}/>}
        </div>
        {status==="locked"?(
          <div style={{ background:"rgba(239,68,68,0.1)", border:"1px solid rgba(239,68,68,0.2)", borderRadius:18,
            padding:"18px 22px", textAlign:"center", width:"100%", backdropFilter:"blur(20px)" }}>
            <div style={{ fontSize:14, fontWeight:600, letterSpacing:1, color:"rgba(252,165,165,0.9)", fontFamily:FONT }}>LIMITE DE TENTATIVAS ATINGIDO.</div>
            <div style={{ fontSize:13, marginTop:5, color:"rgba(252,165,165,0.6)", fontFamily:FONT }}>
              Tente novamente em <strong style={{ color:"rgba(252,165,165,0.9)" }}>{formatTime(remaining)}</strong>
            </div>
          </div>
        ):(
          <>
            <input type="password" value={pwd} className="pw-inp"
              onChange={e=>{setPwd(e.target.value);setStatus("idle");}}
              onKeyDown={e=>{if(e.key==="Enter")handleSubmit();}}
              placeholder="••••••••••••"
              style={{ width:"100%", padding:"15px 20px", fontSize:16, boxSizing:"border-box",
                letterSpacing:6, color:"rgba(255,255,255,0.9)", fontFamily:FONT, ...G.input,
                border:"1px solid "+(status==="wrong"?"rgba(252,165,165,0.5)":"rgba(255,255,255,0.18)") }}/>
            <button onClick={handleSubmit} className="pw-btn"
              style={{ width:"100%", padding:"16px", borderRadius:18, letterSpacing:4,
                color:"rgba(255,255,255,0.95)", fontSize:13, fontWeight:600,
                textTransform:"uppercase", cursor:"pointer", fontFamily:FONT, ...G.btn }}>
              ACESSAR
            </button>
          </>
        )}
        <div style={{ fontSize:12, letterSpacing:1, color:"rgba(255,255,255,0.25)", fontFamily:FONT }}>
          {status!=="locked"&&attempts>0?(MAX_ATTEMPTS-attempts)+" TENTATIVAS RESTANTES":"\u00A0"}
        </div>
      </div>
    </div>
  );
}

function ChatScreen({ onActivity }) {
  const [messages, setMessages]         = useState([]);
  const [history, setHistory]           = useState([]);
  const [input, setInput]               = useState("");
  const [streaming, setStreaming]       = useState(false);
  const [displayText, setDisplayText]   = useState("");
  const [justDone, setJustDone]         = useState(false);
  const [invalidNiche, setInvalidNiche] = useState(false);
  const [showInput, setShowInput]       = useState(true);
  const [pressedBtn, setPressedBtn]     = useState(null);
  const [confirmRestart, setConfirmRestart] = useState(false);
  const [restarting, setRestarting]     = useState(false);
  const [restartFading, setRestartFading] = useState(false);
  const streamBuf  = useRef("");
  const printerRef = useRef(null);
  const scrolledUp = useRef(false);
  const chatBoxRef = useRef(null);
  const bottomRef  = useRef(null);
  const abortRef   = useRef(null);

  useEffect(()=>{
    if(scrolledUp.current) return;
    bottomRef.current?.scrollIntoView({behavior:"smooth"});
  },[messages,displayText]);

  const onScroll=()=>{
    const el=chatBoxRef.current; if(!el) return;
    scrolledUp.current = el.scrollHeight-el.scrollTop-el.clientHeight>=60;
  };

  const startPrinter=()=>{
    if(printerRef.current) return;
    printerRef.current=setInterval(()=>{
      setDisplayText(p=>{
        const b=streamBuf.current; if(p.length>=b.length) return p;
        let e=p.length+1;
        while(e<b.length&&b[e-1]!==" "&&b[e-1]!=="\n"&&e-p.length<4) e++;
        return b.slice(0,e);
      });
    },18);
  };
  const stopPrinter=()=>{ clearInterval(printerRef.current); printerRef.current=null; };

  const playOk=()=>{ try{ const ctx=new(window.AudioContext||window.webkitAudioContext)();[880,1100,1320].forEach((f,i)=>{const o=ctx.createOscillator(),g=ctx.createGain();o.connect(g);g.connect(ctx.destination);o.frequency.value=f;o.type="sine";g.gain.setValueAtTime(0,ctx.currentTime+i*0.12);g.gain.linearRampToValueAtTime(0.02,ctx.currentTime+i*0.12+0.04);g.gain.linearRampToValueAtTime(0,ctx.currentTime+i*0.12+0.18);o.start(ctx.currentTime+i*0.12);o.stop(ctx.currentTime+i*0.12+0.2);}); }catch(e){} };

  const playCorrect = () => {
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      const vol = 0.03;
      [[523,0],[659,0.15],[784,0.30],[1047,0.48]].forEach(([f,t]) => {
        const o = ctx.createOscillator(), g = ctx.createGain();
        o.connect(g); g.connect(ctx.destination);
        o.frequency.value = f; o.type = "sine";
        g.gain.setValueAtTime(0, ctx.currentTime + t);
        g.gain.linearRampToValueAtTime(vol, ctx.currentTime + t + 0.04);
        g.gain.linearRampToValueAtTime(0, ctx.currentTime + t + 0.22);
        o.start(ctx.currentTime + t); o.stop(ctx.currentTime + t + 0.25);
      });
    } catch(e) {}
  };

  const doRestart = () => {
    setConfirmRestart(false);
    setRestarting(true);
    setRestartFading(false);
    if(abortRef.current) abortRef.current.abort();
    setTimeout(() => {
      // start fade-out
      setRestartFading(true);
      setTimeout(() => {
        stopPrinter();
        streamBuf.current = "";
        setMessages([]);
        setHistory([]);
        setInput("");
        setDisplayText("");
        setStreaming(false);
        setShowInput(true);
        setRestarting(false);
        setRestartFading(false);
        playCorrect();
      }, 900);
    }, 9100);
  };
  const playNo=()=>{ try{ const ctx=new(window.AudioContext||window.webkitAudioContext)();[300,220].forEach((f,i)=>{const o=ctx.createOscillator(),g=ctx.createGain();o.connect(g);g.connect(ctx.destination);o.frequency.value=f;o.type="sawtooth";g.gain.setValueAtTime(0,ctx.currentTime+i*0.18);g.gain.linearRampToValueAtTime(0.012,ctx.currentTime+i*0.18+0.03);g.gain.linearRampToValueAtTime(0,ctx.currentTime+i*0.18+0.18);o.start(ctx.currentTime+i*0.18);o.stop(ctx.currentTime+i*0.18+0.2);}); }catch(e){} };

  const send=async(cmd)=>{
    if(streaming) return;
    setStreaming(true); setDisplayText(""); streamBuf.current=""; scrolledUp.current=false;
    const hist=[...history,{role:"user",content:cmd}];
    try{
      const ctrl=new AbortController(); abortRef.current=ctrl;
      const res=await fetch("https://api.anthropic.com/v1/messages",{
        method:"POST", headers:{"Content-Type":"application/json"}, signal:ctrl.signal,
        body:JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:15000,stream:true,system:SYSTEM_PROMPT,messages:hist}),
      });
      const reader=res.body.getReader(); const dec=new TextDecoder(); let full="";
      startPrinter();
      while(true){
        const {done,value}=await reader.read(); if(done) break;
        dec.decode(value,{stream:true}).split("\n").forEach(line=>{
          line=line.trim(); if(!line.startsWith("data:")) return;
          const js=line.slice(5).trim(); if(js==="[DONE]") return;
          try{ const p=JSON.parse(js); if(p.type==="content_block_delta"&&p.delta?.text){full+=p.delta.text;streamBuf.current=full;} }catch(e){}
        });
      }
      await new Promise(resolve=>{
        const chk=setInterval(()=>setDisplayText(p=>{if(p.length>=streamBuf.current.length){clearInterval(chk);resolve();}return p;}),30);
      });
      stopPrinter();
      const finalHist=[...hist,{role:"assistant",content:full}];
      setHistory(finalHist); setDisplayText(""); setStreaming(false);
      if(cmd==="..."){ setMessages([]); setHistory([]); setShowInput(true); return; }
      const notNiche=full.toLowerCase().includes("isso não parece ser um nicho")||full.toLowerCase().includes("não é um nicho");
      if(notNiche){ setShowInput(true); setInvalidNiche(true); playNo(); setTimeout(()=>setInvalidNiche(false),2500); }
      else { playOk(); scrolledUp.current=false; }
      setMessages(p=>[...p,{role:"assistant",content:full}]);
    }catch(e){
      if(e.name!=="AbortError"){ stopPrinter(); setDisplayText(""); setStreaming(false);
        setMessages(p=>[...p,{role:"assistant",content:"❌ Erro de conexão. Tente novamente."}]); }
    }
  };

  const sendNiche=()=>{
    const t=input.trim(); if(!t||streaming) return;
    onActivity?.(); setShowInput(false);
    setMessages(p=>[...p,{role:"user",content:t}]); setInput(""); send(t);
  };

  const glassBtn=(name,accent,label)=>{
    const pr=pressedBtn===name;
    const C={purple:{bg:"rgba(124,58,237,0.2)",bo:"rgba(167,139,250,0.4)",co:"rgba(216,200,255,0.95)",gl:"rgba(124,58,237,0.25)"},green:{bg:"rgba(16,185,129,0.15)",bo:"rgba(52,211,153,0.35)",co:"rgba(110,231,183,0.95)",gl:"rgba(16,185,129,0.2)"},red:{bg:"rgba(220,38,38,0.12)",bo:"rgba(252,165,165,0.3)",co:"rgba(252,165,165,0.9)",gl:"rgba(220,38,38,0.18)"}};
    const c=C[accent];
    return(
      <button key={name} onClick={()=>{onActivity?.();setPressedBtn(name);setTimeout(()=>{setPressedBtn(null);if(name==="more")send(".");if(name==="finish")send("..");if(name==="restart")send("...");},160);}}
        style={{ fontFamily:FONT, fontSize:13, fontWeight:600, letterSpacing:2, textTransform:"uppercase",
          cursor:"pointer", borderRadius:50, padding:"13px 26px",
          border:"1px solid "+c.bo, background:c.bg, color:c.co,
          backdropFilter:"blur(30px)", WebkitBackdropFilter:"blur(30px)",
          boxShadow:pr?"0 1px 4px rgba(0,0,0,0.2)":"0 6px 20px "+c.gl+",inset 0 1px 0 rgba(255,255,255,0.15)",
          transform:pr?"scale(0.93) translateY(2px)":"scale(1)",
          transition:"all 0.15s cubic-bezier(0.34,1.56,0.64,1)" }}>
        {label}
      </button>
    );
  };

  return (
    <div style={{ position:"relative", display:"flex", flexDirection:"column", height:"100vh",
      fontFamily:FONT, color:"rgba(255,255,255,0.9)" }}>
      <ChatWallpaper/>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&display=swap');
        @keyframes chipRed    { 0%,100%{opacity:0.75} 50%{opacity:0.4} }
        @keyframes chipGreen  { 0%,100%{opacity:0.65} 50%{opacity:1} }
        @keyframes chipInvalid{ 0%,100%{opacity:0.65} 50%{opacity:1} }
        @keyframes shimmer    { from{background-position:200% center} to{background-position:-200% center} }
        @keyframes fadeIn     { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        @keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0} }
        @keyframes msgIn      { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
        @keyframes auraFade   { 0%{opacity:0;transform:translateY(-10px) scale(0.97)} 40%{opacity:1;transform:translateY(2px) scale(1.01)} 100%{opacity:1;transform:translateY(0) scale(1)} }
        .niche-inp::placeholder{ color:rgba(255,255,255,0.25); }
        .niche-inp:focus       { outline:none; border-bottom-color:rgba(200,185,255,0.8)!important; }
        ::-webkit-scrollbar      { width:4px; }
        ::-webkit-scrollbar-track{ background:transparent; }
        ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:4px; }
        @keyframes popIn      { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.7)} 60%{transform:translate(-50%,-50%) scale(1.06)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }
        @keyframes restartPulse { 0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)} 50%{opacity:0.7;transform:translate(-50%,-50%) scale(1.04)} }
        @keyframes waveText { 0%,100%{opacity:0.15;letter-spacing:6px} 50%{opacity:1;letter-spacing:14px} }
        @keyframes overlayIn  { from{opacity:0} to{opacity:1} }
      `}</style>

      {/* Header */}
      <div style={{ position:"relative", zIndex:2, padding:"18px 24px 16px", ...G.header,
        display:"flex", alignItems:"center", gap:28 }}>
        <div style={{ position:"absolute", top:0, left:0, right:0, height:1,
          background:"linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent)", pointerEvents:"none" }}/>
        <div style={{ flexShrink:0, display:"flex", flexDirection:"column", alignItems:"center", width:100 }}>
          <div style={{ position:"relative", width:96, height:96, display:"flex", alignItems:"center", justifyContent:"center" }}>
            <ChipSVG streaming={streaming} justDone={justDone} invalid={invalidNiche}/>
          </div>
          <div style={{ height:20 }}/>
        </div>
        <div style={{ flex:1, textAlign:"center" }}>
          <div style={{ fontSize:11, letterSpacing:6, color:"rgba(180,160,255,0.45)", textTransform:"uppercase",
            marginBottom:8, fontWeight:400, fontFamily:FONT }}>
            criado e desenvolvido por ocinor
          </div>
          <div style={{ fontSize:"clamp(28px,4.5vw,46px)", fontWeight:700, letterSpacing:6,
            lineHeight:1.1, textTransform:"uppercase", fontFamily:FONT,
            background:"linear-gradient(135deg,#fff 0%,rgba(220,205,255,0.95) 40%,rgba(180,155,255,0.85) 70%,#fff 100%)",
            backgroundSize:"200% auto", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
            animation:"shimmer 5s linear infinite, auraFade 1.4s cubic-bezier(0.22,1,0.36,1) both",
            filter:"drop-shadow(0 0 28px rgba(180,140,255,0.4))" }}>
            Olá, sou a Aura
          </div>
          <div style={{ fontSize:"clamp(11px,1.6vw,14px)", letterSpacing:5, fontFamily:FONT,
            color:"rgba(200,185,255,0.5)", textTransform:"uppercase", fontWeight:300, marginTop:8, marginBottom:10 }}>
            Seu Gerador de Ebooks Profissional
          </div>
          <div style={{ width:40, height:1, margin:"0 auto 12px",
            background:"linear-gradient(90deg,transparent,rgba(180,160,255,0.5),transparent)" }}/>
          <div style={{ fontSize:"clamp(13px,2vw,18px)", fontWeight:400, letterSpacing:2, fontFamily:FONT,
            textTransform:"uppercase", color:"rgba(255,255,255,0.5)" }}>
            Qual é o nicho do seu produto?
          </div>
        </div>
        <div style={{ width:100, flexShrink:0 }}/>
      </div>

      {/* Messages */}
      <div ref={chatBoxRef} onScroll={onScroll}
        style={{ position:"relative", zIndex:1, flex:1, overflowY:"auto", padding:"22px 20px",
          display:"flex", flexDirection:"column", gap:14 }}>
        {messages.map((m,i)=>{
          const isUser=m.role==="user";
          return(
            <div key={i} style={{ display:"flex", justifyContent:isUser?"flex-end":"flex-start", animation:"msgIn 0.45s cubic-bezier(0.22,1,0.36,1) both" }}>
              <div style={{ maxWidth:"82%", ...(isUser?G.msgUser:G.msgBot),
                borderRadius:isUser?"22px 22px 6px 22px":"22px 22px 22px 6px",
                padding:"18px 22px", fontSize:18, lineHeight:1.9, whiteSpace:"pre-wrap",
                color:isUser?"rgba(240,235,255,0.95)":"rgba(255,255,255,0.88)", fontFamily:FONT,
              }} dangerouslySetInnerHTML={{ __html:parseMarkdown(m.content) }}/>
            </div>
          );
        })}
        {streaming&&(
          <div style={{ display:"flex", justifyContent:"flex-start", animation:"msgIn 0.3s cubic-bezier(0.22,1,0.36,1) both" }}>
            <div style={{ maxWidth:"82%", ...G.msgBot, borderRadius:"22px 22px 22px 6px",
              padding:"18px 22px", fontSize:18, lineHeight:1.9, whiteSpace:"pre-wrap",
              color:"rgba(255,255,255,0.88)", fontFamily:FONT }}>
              <span dangerouslySetInnerHTML={{ __html:parseMarkdown(displayText) }}/>
              <span style={{ display:"inline-block", width:2, height:"1em",
                background:"rgba(200,185,255,0.85)", marginLeft:3, verticalAlign:"text-bottom",
                animation:"blink 0.6s step-end infinite", borderRadius:1 }}/>
            </div>
          </div>
        )}
        <div ref={bottomRef}/>
      </div>

      {/* Confirm Restart Popup */}
      {confirmRestart && (
        <div style={{ position:"fixed", inset:0, zIndex:100, display:"flex", alignItems:"center", justifyContent:"center",
          backdropFilter:"blur(14px)", WebkitBackdropFilter:"blur(14px)",
          background:"rgba(5,3,15,0.55)", animation:"overlayIn 0.25s ease" }}>
          <div style={{ ...G.card, padding:"44px 48px", maxWidth:420, width:"90%", textAlign:"center",
            animation:"popIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards",
            position:"absolute", top:"50%", left:"50%", transform:"translate(-50%,-50%)" }}>
            <div style={{ fontSize:42, marginBottom:16 }}>⚠️</div>
            <div style={{ fontFamily:FONT, fontSize:22, fontWeight:700, letterSpacing:4,
              textTransform:"uppercase", color:"rgba(255,255,255,0.95)", marginBottom:10 }}>
              Tem certeza?
            </div>
            <div style={{ fontFamily:FONT, fontSize:13, letterSpacing:2, color:"rgba(255,255,255,0.4)",
              textTransform:"uppercase", marginBottom:32 }}>
              Todo o conteúdo será apagado
            </div>
            <div style={{ display:"flex", gap:14, justifyContent:"center" }}>
              <button onClick={()=>setConfirmRestart(false)}
                style={{ fontFamily:FONT, fontSize:13, fontWeight:600, letterSpacing:2,
                  textTransform:"uppercase", cursor:"pointer", borderRadius:50, padding:"13px 28px",
                  border:"1px solid rgba(255,255,255,0.2)", background:"rgba(255,255,255,0.07)",
                  color:"rgba(255,255,255,0.6)", backdropFilter:"blur(20px)" }}>
                Cancelar
              </button>
              <button onClick={doRestart}
                style={{ fontFamily:FONT, fontSize:13, fontWeight:600, letterSpacing:2,
                  textTransform:"uppercase", cursor:"pointer", borderRadius:50, padding:"13px 28px",
                  border:"1px solid rgba(252,165,165,0.4)", background:"rgba(220,38,38,0.18)",
                  color:"rgba(252,165,165,0.95)", backdropFilter:"blur(20px)",
                  boxShadow:"0 6px 20px rgba(220,38,38,0.25)" }}>
                Reiniciar
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Restarting Popup */}
      {restarting && (
        <div style={{
          position:"fixed", inset:0, zIndex:100,
          backdropFilter:"blur(22px)", WebkitBackdropFilter:"blur(22px)",
          background:"rgba(5,3,15,0.85)",
          display:"flex", alignItems:"center", justifyContent:"center",
          animation: restartFading ? "overlayOut 0.9s ease forwards" : "overlayIn 0.6s ease forwards"
        }}>
          <span style={{
            fontFamily:FONT, fontWeight:700,
            fontSize:"clamp(30px,5vw,54px)",
            textTransform:"uppercase", textAlign:"center",
            background:"linear-gradient(90deg,#e0d7ff,#fff,#c4b5fd,#fff,#e0d7ff)",
            backgroundSize:"200% auto", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent",
            animation:"shimmer 2s linear infinite, waveText 2.8s ease-in-out infinite, glowPulse 2.8s ease-in-out infinite",
            letterSpacing:10
          }}>Reiniciando</span>
        </div>
      )}

      {/* Action buttons */}
      {!showInput&&(
        <div style={{ position:"relative", zIndex:2, padding:"14px 20px 18px", ...G.footer, animation:"fadeIn 0.4s ease" }}>
          <div style={{ display:"flex", gap:10, justifyContent:"center", flexWrap:"wrap" }}>
            {glassBtn("more","purple","+ 10 Módulos")}
            {glassBtn("finish","green","Finalizar eBook")}
            <button onClick={()=>{setConfirmRestart(true);}}
              style={{ fontFamily:FONT, fontSize:13, fontWeight:600, letterSpacing:2, textTransform:"uppercase",
                cursor:"pointer", borderRadius:50, padding:"13px 26px",
                border:"1px solid rgba(252,165,165,0.3)", background:"rgba(220,38,38,0.12)",
                color:"rgba(252,165,165,0.9)", backdropFilter:"blur(30px)", WebkitBackdropFilter:"blur(30px)",
                boxShadow:"0 6px 20px rgba(220,38,38,0.18),inset 0 1px 0 rgba(255,255,255,0.15)",
                transition:"all 0.15s cubic-bezier(0.34,1.56,0.64,1)" }}>
              Reiniciar
            </button>
          </div>
        </div>
      )}

      {/* Niche input */}
      {showInput&&(
        <div style={{ position:"relative", zIndex:2, padding:"16px 24px 22px", ...G.footer, display:"flex", gap:14, alignItems:"center" }}>
          <input className="niche-inp" value={input}
            onChange={e=>setInput(e.target.value)}
            onKeyDown={e=>{if(e.key==="Enter")sendNiche();}}
            placeholder="Digite o nicho do seu eBook..."
            autoFocus
            style={{ flex:1, background:"transparent", border:"none",
              borderBottom:"1px solid rgba(255,255,255,0.18)",
              padding:"10px 2px", color:"rgba(255,255,255,0.9)",
              fontSize:22, fontWeight:400, letterSpacing:2,
              fontFamily:FONT, textTransform:"uppercase",
              transition:"border-color 0.3s", caretColor:"rgba(167,139,250,0.9)" }}/>
          <button onClick={sendNiche} disabled={streaming||!input.trim()}
            style={{ background:input.trim()?"rgba(124,58,237,0.28)":"rgba(255,255,255,0.05)",
              border:"1px solid "+(input.trim()?"rgba(167,139,250,0.45)":"rgba(255,255,255,0.1)"),
              backdropFilter:"blur(20px)", borderRadius:"50%", width:52, height:52, flexShrink:0,
              color:input.trim()?"rgba(216,200,255,0.95)":"rgba(255,255,255,0.2)",
              fontSize:22, cursor:input.trim()?"pointer":"not-allowed",
              transition:"all 0.25s cubic-bezier(0.34,1.56,0.64,1)",
              display:"flex", alignItems:"center", justifyContent:"center",
              boxShadow:input.trim()?"0 4px 20px rgba(124,58,237,0.25),inset 0 1px 0 rgba(255,255,255,0.18)":"none" }}
            onMouseEnter={e=>{if(input.trim())e.currentTarget.style.transform="scale(1.1)";}}
            onMouseLeave={e=>{e.currentTarget.style.transform="scale(1)";}}
            onMouseDown={e=>{if(input.trim())e.currentTarget.style.transform="scale(0.92)";}}
            onMouseUp={e=>{if(input.trim())e.currentTarget.style.transform="scale(1.05)";}}>
            →
          </button>
        </div>
      )}
    </div>
  );
}

export default function App() {
  const [state, setState]         = useState("lock");
  const [locking, setLocking]     = useState(false);
  const [chatKey, setChatKey]     = useState(0);
  const [countdown, setCountdown] = useState(SESSION_TIMEOUT/1000);
  const sessRef  = useRef(null);
  const countRef = useRef(null);

  const clearTimers=()=>{ clearTimeout(sessRef.current); clearInterval(countRef.current); };
  const startSession=()=>{
    clearTimers(); setCountdown(SESSION_TIMEOUT/1000);
    countRef.current=setInterval(()=>setCountdown(p=>p>0?p-1:0),1000);
    sessRef.current=setTimeout(()=>{
      clearTimers(); setLocking(true);
      setTimeout(()=>{ setLocking(false); setState("lock"); setChatKey(k=>k+1); setCountdown(SESSION_TIMEOUT/1000); },700);
    },SESSION_TIMEOUT);
  };
  useEffect(()=>()=>clearTimers(),[]);

  const handleSuccess=()=>{ setState("unlocking"); setTimeout(()=>{ setState("chat"); startSession(); },1800); };

  return (
    <div style={{ position:"relative", width:"100%", height:"100vh", overflow:"hidden", background:"#05030f" }}>
      <style>{`
        @keyframes lockOut { from{opacity:1;transform:scale(1);filter:blur(0)} to{opacity:0;transform:scale(1.06);filter:blur(16px)} }
        @keyframes pulse2  { 0%{box-shadow:0 0 0 rgba(167,139,250,0)} 50%{box-shadow:0 0 100px 50px rgba(124,58,237,0.18)} 100%{box-shadow:0 0 0 rgba(167,139,250,0)} }
        @keyframes chatIn  { from{opacity:0;transform:scale(0.97) translateY(12px);filter:blur(6px)} to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)} }
      `}</style>

      {state!=="chat"&&(
        <div style={{ position:"absolute", inset:0,
          animation:state==="unlocking"?"lockOut 0.9s ease forwards":"none",
          display:"flex", alignItems:"center", justifyContent:"center" }}>
          {state==="unlocking"&&<div style={{ position:"absolute", inset:0, pointerEvents:"none", animation:"pulse2 0.9s ease" }}/>}
          <PasswordScreen onSuccess={handleSuccess} unlocking={state==="unlocking"}/>
        </div>
      )}

      {state==="chat"&&(
        <div style={{ position:"absolute", inset:0,
          animation:locking?"lockOut 0.7s ease forwards":"chatIn 0.8s cubic-bezier(0.22,1,0.36,1) forwards" }}>
          <div style={{ position:"absolute", top:14, right:16, zIndex:99,
            display:"flex", alignItems:"center", gap:7,
            ...G.card, borderRadius:50, padding:"6px 14px",
            border:"1px solid "+(countdown<=30?"rgba(252,165,165,0.4)":"rgba(255,255,255,0.15)"),
            boxShadow:countdown<=30?"0 0 14px rgba(252,100,100,0.2)":"0 4px 20px rgba(0,0,0,0.2)",
            transition:"border-color 0.4s, box-shadow 0.4s" }}>
            <svg width="10" height="10" viewBox="0 0 10 10">
              <circle cx="5" cy="5" r="4" fill={countdown<=30?"rgba(252,165,165,0.9)":"rgba(110,231,183,0.85)"} style={{ transition:"fill 0.4s" }}/>
            </svg>
            <span style={{ fontFamily:FONT, fontSize:12, fontWeight:600, letterSpacing:1, minWidth:72,
              color:countdown<=30?"rgba(252,165,165,0.9)":"rgba(255,255,255,0.5)", transition:"color 0.4s" }}>
              {countdown<=5?"BLOQUEANDO...":formatCountdown(countdown)}
            </span>
            <span style={{ fontFamily:FONT, fontSize:10, letterSpacing:1, color:countdown<=30?"rgba(252,165,165,0.5)":"rgba(255,255,255,0.25)", textTransform:"uppercase" }}>
              Tempo de Sessão
            </span>
          </div>
          <ChatScreen key={chatKey} onActivity={startSession}/>
        </div>
      )}
    </div>
  );
}