setPostalText(e.target.value)} rows={5}
              placeholder={mode === 'memory' ? 'Escribe ese recuerdo que quieres preservar…' : 'Escribe lo que le dirías a ' + recipient + '…'}
              className="w-full bg-white/10 rounded-2xl p-4 text-sm outline-none focus:ring-2 focus:ring-[#E74C3C] placeholder:text-gray-500" />
            <div className="flex justify-end gap-3 mt-4">
              <Button variant="ghost" size="sm" className="text-gray-300 hover:bg-white/10" onClick={onClose}>Cancelar</Button>
              <Button size="sm" onClick={savePostal} icon={Send}>Enviar como postal</Button>
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
}
function PlayerModal({ msg, onClose }) {
  const [url, setUrl] = useState(null);
  const [typed, setTyped] = useState(0);
  useEffect(() => {
    let objUrl = null;
    let alive = true;
    if (msg && msg.videoId) {
      idbGet(msg.videoId).then((b) => {
        if (b && alive) { objUrl = URL.createObjectURL(b); setUrl(objUrl); }
      });
    }
    return () => { alive = false; if (objUrl) URL.revokeObjectURL(objUrl); };
  }, [msg]);
  useEffect(() => {
    setTyped(0);
    if (msg && msg.transcript) {
      const iv = setInterval(() => setTyped((t) => (t >= msg.transcript.length ? t : t + 2)), 30);
      return () => clearInterval(iv);
    }
    return undefined;
  }, [msg]);
  if (!msg) return null;
  return (
    <Modal open={!!msg} onClose={onClose} dark wide>
      <div className="p-6 md:p-8">
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-3">
            <Monogram name={msg.from || msg.recipient || 'Tú'} />
            <div>
              <p className="font-bold">{msg.dir === 'out' ? 'Para ' + msg.recipient : 'De ' + msg.from}</p>
              <p className="text-xs text-gray-400">{timeAgo(msg.at)} {msg.tag && <span className="ml-2 text-[#2ECC71] font-bold">{msg.tag}</span>}</p>
            </div>
          </div>
          <button onClick={onClose} className="p-2 rounded-xl hover:bg-white/10"><XIc size={20} /></button>
        </div>
        {url ? (
          <video src={url} controls autoPlay className="w-full rounded-2xl bg-black aspect-video" />
        ) : msg.cover ? (
          <div className="relative rounded-2xl overflow-hidden aspect-video">
            <img src={msg.cover} alt="" className="w-full h-full object-cover da-kenburns" />
            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 to-transparent p-4 pt-10">
              <p className="text-sm text-white leading-relaxed min-h-[3.5rem]">{(msg.transcript || '').slice(0, typed)}</p>
              <div className="h-1 bg-white/20 rounded-full mt-3 overflow-hidden">
                <motion.div initial={{ width: 0 }} animate={{ width: '100%' }} transition={{ duration: Math.max(6, (msg.transcript || '').length / 30), ease: 'linear' }} className="h-full bg-[#E74C3C]" />
              </div>
            </div>
          </div>
        ) : (
          <div className="rounded-2xl aspect-video bg-gradient-to-br from-[#E74C3C] via-[#C0392B] to-[#7f1d1d] p-8 flex flex-col items-center justify-center text-center relative overflow-hidden">
            <motion.div animate={{ scale: [1, 1.15, 1] }} transition={{ repeat: Infinity, duration: 2 }} className="mb-4"><Heart size={40} className="text-white fill-white/30" /></motion.div>
            <p className="text-white font-semibold leading-relaxed max-w-md">{(msg.transcript || '').slice(0, typed)}</p>
            <p className="absolute bottom-3 text-[10px] uppercase tracking-widest text-white/50">Postal animada · Dilo Ahora</p>
          </div>
        )}
      </div>
    </Modal>
  );
}

/* ============================== /views/landing =========================== */
const scrollToId = (id) => {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth' });
};
function useCountUp(target, started, dur = 1400) {
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!started) return undefined;
    let raf = 0;
    const t0 = performance.now();
    const step = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      setV(target * (1 - Math.pow(1 - p, 3)));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [started, target, dur]);
  return v;
}
function StatsBand() {
  const ref = useRef(null);
  const [started, setStarted] = useState(false);
  useEffect(() => {
    const ob = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) { setStarted(true); ob.disconnect(); }
    }, { threshold: 0.3 });
    if (ref.current) ob.observe(ref.current);
    return () => ob.disconnect();
  }, []);
  const fam = useCountUp(12400, started);
  const pct = useCountUp(92, started);
  const rate = useCountUp(4.9, started);
  const mins = useCountUp(38, started);
  const items = [
    { v: Math.round(fam).toLocaleString('es-ES'), l: 'familias ya lo dicen ahora' },
    { v: Math.round(pct) + ' %', l: 'reporta vínculos más cercanos en 30 días' },
    { v: rate.toFixed(1).replace('.', ','), l: 'valoración media de la comunidad' },
    { v: Math.round(mins) + ' min', l: 'de memoria viva preservada al mes' },
  ];
  return (
    <div ref={ref} className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-6xl mx-auto px-6 py-14">
      {items.map((it, i) => (
        <div key={i} className="text-center">
          <p className="text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#E74C3C] to-[#C0392B]">{it.v}</p>
          <p className="text-sm text-gray-500 mt-1">{it.l}</p>
        </div>
      ))}
    </div>
  );
}
function SpotModal({ open, onClose, onCTA }) {
  const scenes = [
    { at: 0, node: <p className="text-2xl md:text-4xl font-extrabold text-white text-center max-w-xl">Hay palabras que no pueden esperar.</p> },
    { at: 3, node: <div className="text-center"><motion.div animate={{ scale: [1, 1.25, 1] }} transition={{ repeat: Infinity, duration: 1.6 }}><Heart size={64} className="text-[#E74C3C] fill-[#E74C3C] mx-auto mb-6" /></motion.div><p className="text-2xl md:text-3xl font-bold text-white max-w-xl">Un «te quiero» a tiempo cambia una vida.</p></div> },
    { at: 6, node: <div className="relative w-56 h-96 rounded-[2rem] overflow-hidden border-4 border-white/20 shadow-2xl"><img src={IMG.hero} alt="" className="w-full h-full object-cover da-kenburns" /><div className="absolute bottom-4 inset-x-0 text-center"><p className="text-white font-extrabold text-xl drop-shadow">Graba hoy.</p></div></div> },
    { at: 9, node: <div className="text-center"><motion.div animate={{ rotate: [0, 6, -6, 0] }} transition={{ repeat: Infinity, duration: 2.4 }} className="inline-block mb-6"><Lock size={56} className="text-[#FCD34D]" /></motion.div><p className="text-2xl md:text-3xl font-bold text-white max-w-xl">Preserva tu esencia para siempre.</p></div> },
    { at: 12, node: <div className="text-center"><div className="flex justify-center mb-5"><LogoMark size={84} /></div><p className="text-2xl font-extrabold text-white">Dilo <span className="text-[#E74C3C]">ahora</span></p><p className="text-gray-400 mt-2">Habla hoy. Deja tu huella. Inspira siempre.</p></div> },
  ];
  const [idx, setIdx] = useState(0);
  const [ended, setEnded] = useState(false);
  useEffect(() => {
    if (!open) { setIdx(0); setEnded(false); return undefined; }
    const timers = scenes.map((s, i) => setTimeout(() => setIdx(i), s.at * 1000));
    const end = setTimeout(() => setEnded(true), 15000);
    return () => { timers.forEach(clearTimeout); clearTimeout(end); };
  }, [open]);
  return (
    <Modal open={open} onClose={onClose} dark wide>
      <div className="relative h-[480px] bg-gray-950 flex items-center justify-center overflow-hidden">
        <div className="absolute top-0 left-0 right-0 h-1 bg-white/10">
          {!ended && <motion.div initial={{ width: '0%' }} animate={{ width: '100%' }} transition={{ duration: 15, ease: 'linear' }} className="h-full bg-gradient-to-r from-[#E74C3C] to-[#FCD34D]" />}
          {ended && <div className="h-full bg-gradient-to-r from-[#E74C3C] to-[#FCD34D]" />}
        </div>
        <button onClick={onClose} className="absolute top-4 right-4 z-10 p-2 rounded-xl hover:bg-white/10"><XIc size={20} /></button>
        <p className="absolute top-4 left-5 text-[10px] uppercase tracking-widest text-gray-500 font-bold">Spot · 15 s</p>
        {ended ? (
          <div className="text-center px-6">
            <p className="text-2xl font-extrabold text-white mb-6">Tu historia merece ser dicha.</p>
            <div className="flex justify-center gap-3 flex-wrap">
              <Button onClick={onCTA} icon={Heart}>Comenzar mi Legado</Button>
              <Button variant="ghost" className="text-gray-300 hover:bg-white/10" onClick={() => { setEnded(false); setIdx(0); }}>Repetir spot</Button>
            </div>
          </div>
        ) : (
          <AnimatePresence mode="wait">
            <motion.div key={idx} initial={{ opacity: 0, y: 24, scale: 0.97 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -24 }} transition={{ duration: 0.6 }} className="px-6 flex justify-center">
              {scenes[idx].node}
            </motion.div>
          </AnimatePresence>
        )}
      </div>
    </Modal>
  );
}
function LegalModal({ type, onClose }) {
  const content = {
    privacidad: { t: 'Privacidad', b: 'Tus videos y recuerdos se cifran y solo tú decides quién los ve y cuándo. En esta demo local, todo permanece en tu dispositivo. En producción usamos cifrado AES-256 en reposo y TLS 1.3 en tránsito, con cumplimiento RGPD y derecho al olvido garantizado.' },
    terminos: { t: 'Términos', b: 'Dilo Ahora es una plataforma de bienestar emocional y preservación de memoria. No sustituye terapia psicológica ni asesoría legal. El Chatbot de Legado es una recreación conmemorativa basada en el contenido que tú decidas preservar, y su uso requiere consentimiento explícito del titular de la esencia.' },
    seguridad: { t: 'Seguridad', b: 'Bóveda con cifrado de extremo a extremo, entregas programadas con doble verificación y contactos de confianza. Ningún tercero —ni siquiera nuestro equipo— puede acceder al contenido de tu Bóveda sin tu llave familiar.' },
  };
  const c = content[type] || content.privacidad;
  return (
    <Modal open={!!type} onClose={onClose}>
      <div className="p-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 rounded-xl bg-red-50 text-[#E74C3C] flex items-center justify-center"><Shield size={20} /></div>
          <h3 className="text-lg font-bold text-gray-900">{c.t}</h3>
        </div>
        <p className="text-sm text-gray-600 leading-relaxed">{c.b}</p>
        <Button variant="outline" size="sm" className="mt-6 w-full" onClick={onClose}>Entendido</Button>
      </div>
    </Modal>
  );
}
function Landing() {
  const app = useApp();
  const [scrolled, setScrolled] = useState(false);
  const [spot, setSpot] = useState(false);
  const [legal, setLegal] = useState(null);
  const [step, setStep] = useState(0);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', f);
    return () => window.removeEventListener('scroll', f);
  }, []);
  useEffect(() => {
    const iv = setInterval(() => setStep((s) => (s + 1) % 3), 4500);
    return () => clearInterval(iv);
  }, []);
  const steps = [
    { icon: Heart, t: 'Mide', d: 'Tu Gimnasio Emocional traduce cómo estás con los tuyos en barras vivas que respiran con tu check-in diario.' },
    { icon: Video, t: 'Conecta', d: 'Envía video-mensajes sin prisa ni doble check: comunicación asíncrona que baja la ansiedad y sube el afecto.' },
    { icon: Lock, t: 'Preserva', d: 'Responde preguntas guiadas, guarda tu voz en la Bóveda y deja que nuestra IA ética la convierta en consuelo futuro.' },
  ];
  const feats = [
    { icon: Heart, color: 'text-[#E74C3C]', bg: 'bg-red-50', t: 'El Gimnasio Emocional', d: 'Mide y entrena tus necesidades afectivas como un juego serio: barras de amor, familia y metas que responden a tus acciones reales.', demo: 'bars' },
    { icon: MessageCircle, color: 'text-purple-600', bg: 'bg-purple-50', t: 'Buzón de Afecto Asíncrono', d: 'Video-mensajes que se abren con calma y quedan guardados para siempre. Sin inmediatismo, con intención.', demo: 'chat' },
    { icon: Sparkles, color: 'text-blue-500', bg: 'bg-blue-50', t: 'Bóveda & Chatbot de Legado', d: 'Una IA ética entrenada con tu esencia para ofrecer consuelo, recuerdos y compañía a tus seres queridos.', demo: 'vault' },
  ];
  const tests = [
    { n: 'Mariana G.', c: '58 · Madrid', g: 'from-[#E74C3C] to-[#C0392B]', q: 'Le grabé a mi hija lo que nunca supe decirle en persona. Ahora lo abre cada domingo, como quien hereda un abrazo.' },
    { n: 'Diego R.', c: '24 · CDMX', g: 'from-[#F39C12] to-[#D97706]', q: 'Mi abuelo falleció en marzo. Su esencia digital me explicó su jugada de ajedrez favorita… y su risa sigue en casa.' },
    { n: 'Jairo M.', c: '35 · Bogotá', g: 'from-[#2ECC71] to-[#16A085]', q: 'Las barras me mostraron que trabajaba mucho y abrazaba poco. Cambié mis tardes, y mi familia lo notó en una semana.' },
  ];
  const plans = [
    { n: 'Gratis', p: '0 €', d: 'Para empezar a sentir', f: ['3 barras emocionales', '10 video-mensajes al mes', '1 persona de legado'], hot: false },
    { n: 'Pro', p: '4,99 €', d: 'Para vivir con intención', f: ['Todo lo del plan Gratis', 'Buzón y check-ins ilimitados', 'Bóveda con 5 h de memoria', 'Rachas y logros dorados'], hot: true },
    { n: 'Legacy+', p: '9,99 €', d: 'Para trascender con amor', f: ['Chatbot de Legado completo', 'Entregas programadas póstumas', 'Cifrado familiar compartido', 'Concierge de memoria'], hot: false },
  ];
  return (
    <div className="min-h-screen bg-[#F9FAFB] text-gray-800">
      <nav className={'fixed top-0 inset-x-0 z-40 transition-all ' + (scrolled ? 'bg-white/80 backdrop-blur-lg shadow-sm' : 'bg-transparent')}>
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}><Logo /></button>
          <div className="hidden md:flex gap-7 text-sm font-medium text-gray-600">
            <button onClick={() => scrollToId('como-funciona')} className="hover:text-[#E74C3C] transition-colors">Cómo funciona</button>
            <button onClick={() => scrollToId('manifiesto')} className="hover:text-[#E74C3C] transition-colors">Manifiesto</button>
            <button onClick={() => scrollToId('testimonios')} className="hover:text-[#E74C3C] transition-colors">Testimonios</button>
            <button onClick={() => scrollToId('precios')} className="hover:text-[#E74C3C] transition-colors">Precios</button>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="sm" onClick={() => app.navigate('#/auth')}>Iniciar sesión</Button>
            <Button size="sm" className="hidden sm:flex" onClick={() => app.navigate('#/auth')}>Comenzar</Button>
          </div>
        </div>
      </nav>
      <main className="max-w-7xl mx-auto px-6 pt-28 md:pt-36 pb-16 grid md:grid-cols-2 gap-14 items-center">
        <motion.div initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8 }} className="space-y-7">
          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white border border-gray-100 shadow-sm text-xs font-bold text-gray-600">
            <Sparkles size={14} className="text-[#F39C12]" /> Bienestar emocional + Legado vivo
          </span>
          <h1 className="text-5xl md:text-6xl font-extrabold leading-[1.05] text-gray-900">
            Tu Legado Vivo.<br /><span className="text-transparent bg-clip-text bg-gradient-to-r from-[#E74C3C] to-[#C0392B]">Tu Bienestar Hoy.</span>
          </h1>
          <p className="text-lg md:text-xl text-gray-600 max-w-lg leading-relaxed">
            Dilo Ahora es el gimnasio donde se entrenan los afectos: conecta profundamente con quienes amas hoy y preserva tu esencia para siempre.
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <Button size="lg" icon={Heart} onClick={() => app.navigate('#/auth')} className="shadow-red-500/25">Comenzar mi Legado</Button>
            <Button variant="outline" size="lg" icon={Play} onClick={() => setSpot(true)}>Ver spot · 15 s</Button>
          </div>
          <div className="flex items-center gap-4 pt-2">
            <div className="flex -space-x-2">
              {['AL', 'DR', 'JM', 'MC'].map((ini, i) => (
                <div key={ini} className={'w-9 h-9 rounded-full border-2 border-white text-[10px] font-bold text-white flex items-center justify-center bg-gradient-to-br ' + ['from-[#E74C3C] to-[#C0392B]', 'from-[#F39C12] to-[#D97706]', 'from-[#2ECC71] to-[#16A085]', 'from-purple-500 to-purple-700'][i]}>{ini}</div>
              ))}
            </div>
            <div>
              <div className="flex gap-0.5">{[0, 1, 2, 3, 4].map((i) => <Star key={i} size={13} className="text-[#F39C12] fill-[#F39C12]" />)}</div>
              <p className="text-xs text-gray-500 mt-0.5">+12.400 familias ya lo dicen ahora</p>
            </div>
          </div>
        </motion.div>
        <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.8, delay: 0.2 }} className="relative h-[520px] hidden sm:block">
          <div className="absolute top-8 right-8 w-64 h-64 bg-red-100 rounded-full mix-blend-multiply blur-3xl opacity-70 da-blob" />
          <div className="absolute top-8 left-8 w-64 h-64 bg-yellow-100 rounded-full mix-blend-multiply blur-3xl opacity-70 da-blob-2" />
          <motion.div className="absolute left-2 top-8 z-10 w-64 bg-white p-3 rounded-[2rem] shadow-2xl -rotate-6" whileHover={{ rotate: -3, scale: 1.04 }}>
            <div className="relative h-96 bg-gray-900 rounded-[1.6rem] overflow-hidden">
              <img src={IMG.hero} alt="Abuela grabando un video-mensaje" className="w-full h-full object-cover da-kenburns" />
              <div className="absolute top-3 left-3 flex items-center gap-1.5 bg-black/50 backdrop-blur px-2.5 py-1 rounded-full">
                <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" /><span className="text-[10px] font-mono font-bold text-white">REC 00:12</span>
              </div>
              <div className="absolute bottom-4 inset-x-0 flex justify-center">
                <motion.div animate={{ scale: [1, 1.12, 1] }} transition={{ repeat: Infinity, duration: 1.6 }} className="w-12 h-12 bg-red-500 rounded-full border-4 border-white flex items-center justify-center">
                  <div className="w-4 h-4 bg-white rounded-sm" />
                </motion.div>
              </div>
            </div>
          </motion.div>
          <motion.div className="absolute right-0 bottom-16 z-20 w-72 bg-white p-5 rounded-3xl shadow-xl rotate-3" initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.6, type: 'spring' }} whileHover={{ rotate: 0, scale: 1.04 }}>
            <div className="flex items-center gap-3 mb-4">
              <div className="p-2 bg-green-100 rounded-lg text-[#2ECC71]"><Trophy size={20} /></div>
              <div><p className="text-xs text-gray-500 font-bold uppercase">Racha actual</p><p className="font-bold text-gray-800">12 días conectando</p></div>
            </div>
            <WellbeingBar label="Tiempo de Familia" percentage={100} status="gold" />
          </motion.div>
          <motion.div animate={{ y: [0, -10, 0] }} transition={{ repeat: Infinity, duration: 4 }} className="absolute right-6 top-4 z-20 bg-white px-4 py-2 rounded-2xl shadow-lg text-sm font-bold text-[#2ECC71]">+15 % Amor</motion.div>
        </motion.div>
      </main>
      <StatsBand />
      <section id="como-funciona" className="bg-white py-20">
        <div className="max-w-6xl mx-auto px-6">
          <p className="text-center text-xs font-bold tracking-widest text-[#E74C3C] uppercase mb-3">El método</p>
          <h2 className="text-3xl md:text-4xl font-extrabold text-center text-gray-900 mb-12">Tres pasos para vivir con intención</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {steps.map((s, i) => (
              <motion.button key={i} onClick={() => setStep(i)} whileHover={{ y: -6 }}
                className={'text-left p-8 rounded-3xl border transition-all ' + (step === i ? 'bg-[#F9FAFB] border-[#E74C3C]/30 shadow-xl ring-2 ring-[#E74C3C]/20' : 'bg-white border-gray-100 shadow-sm')}>
                <div className="flex items-center justify-between mb-6">
                  <div className={'w-14 h-14 rounded-2xl flex items-center justify-center ' + (step === i ? 'bg-[#E74C3C] text-white' : 'bg-red-50 text-[#E74C3C]')}><s.icon size={26} /></div>
                  <span className="text-4xl font-extrabold text-gray-100">0{i + 1}</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-2">{s.t}</h3>
                <p className="text-gray-600 text-sm leading-relaxed">{s.d}</p>
                <div className="h-1 mt-6 bg-gray-100 rounded-full overflow-hidden">
                  {step === i && <motion.div initial={{ width: '0%' }} animate={{ width: '100%' }} transition={{ duration: 4.5, ease: 'linear' }} className="h-full bg-[#E74C3C]" />}
                </div>
              </motion.button>
            ))}
          </div>
        </div>
      </section>
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-6">
          <h2 className="text-3xl md:text-4xl font-extrabold text-center text-gray-900 mb-4">Hecho para sentir, diseñado para durar</h2>
          <p className="text-center text-gray-500 max-w-2xl mx-auto mb-12">Cada módulo nació de una pregunta simple: ¿qué pasaría si dijéramos a tiempo lo que realmente importa?</p>
          <div className="grid md:grid-cols-3 gap-8">
            {feats.map((f, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.12 }}
                whileHover={{ y: -8 }} className="p-8 rounded-3xl bg-white shadow-sm border border-gray-100 hover:shadow-xl transition-shadow">
                <div className={'w-14 h-14 ' + f.bg + ' ' + f.color + ' rounded-2xl flex items-center justify-center mb-6'}><f.icon size={28} /></div>
                <h3 className="text-xl font-bold mb-3 text-gray-900">{f.t}</h3>
                <p className="text-gray-600 leading-relaxed text-sm mb-6">{f.d}</p>
                {f.demo === 'bars' && (
                  <div className="space-y-3">
                    <div className="h-2.5 bg-gray-100 rounded-full overflow-hidden"><motion.div className="h-full bg-[#E74C3C]" animate={{ width: ['40%', '95%', '40%'] }} transition={{ repeat: Infinity, duration: 2.2, ease: 'easeInOut' }} /></div>
                    <div className="h-2.5 bg-gray-100 rounded-full overflow-hidden"><motion.div className="h-full bg-[#2ECC71]" animate={{ width: ['80%', '95%', '80%'] }} transition={{ repeat: Infinity, duration: 3, ease: 'easeInOut' }} /></div>
                  </div>
                )}
                {f.demo === 'chat' && (
                  <div className="space-y-2">
                    <motion.div animate={{ x: [0, 6, 0] }} transition={{ repeat: Infinity, duration: 3 }} className="w-3/4 bg-gray-100 rounded-2xl rounded-tl-none p-2.5 text-[11px] text-gray-600">«Mijo, ¿ya comiste?» ❤</motion.div>
                    <motion.div animate={{ x: [0, -6, 0] }} transition={{ repeat: Infinity, duration: 3, delay: 1 }} className="w-2/3 ml-auto bg-[#E74C3C] text-white rounded-2xl rounded-tr-none p-2.5 text-[11px]">«Sí má, te mando video 😄»</motion.div>
                  </div>
                )}
                {f.demo === 'vault' && (
                  <div className="flex items-center gap-3 bg-gray-900 rounded-2xl p-4">
                    <motion.div animate={{ scale: [1, 1.2, 1] }} transition={{ repeat: Infinity, duration: 2 }}><Lock size={20} className="text-[#FCD34D]" /></motion.div>
                    <div className="flex-1 h-2 bg-white/10 rounded-full overflow-hidden"><motion.div className="h-full bg-gradient-to-r from-[#FCD34D] to-[#D97706]" animate={{ width: ['20%', '90%', '20%'] }} transition={{ repeat: Infinity, duration: 4 }} /></div>
                    <Sparkles size={16} className="text-[#FCD34D]" />
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </section>
      <section id="manifiesto" className="bg-gray-900 py-24 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-[#E74C3C] rounded-full blur-3xl opacity-10" />
        <div className="max-w-4xl mx-auto px-6 text-center space-y-6">
          {['Postergamos los «te quiero».', 'Esperamos al cumpleaños, a la despedida, al abrazo.', 'Guardamos los recuerdos como si el tiempo sobrara.'].map((l, i) => (
            <motion.p key={i} initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.15 }} className="text-2xl md:text-3xl font-bold text-gray-400">{l}</motion.p>
          ))}
          <motion.p initial={{ opacity: 0, scale: 0.9 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ delay: 0.5 }} className="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#F97316] to-[#E74C3C] pt-4">Hoy no. Hoy lo decimos. Ahora.</motion.p>
          <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ delay: 0.8 }}>
            <Button variant="white" size="lg" className="mt-8" onClick={() => app.navigate('#/auth')} icon={Heart}>Empezar hoy, gratis</Button>
          </motion.div>
        </div>
      </section>
      <section id="testimonios" className="py-20">
        <div className="max-w-7xl mx-auto px-6">
          <h2 className="text-3xl md:text-4xl font-extrabold text-center text-gray-900 mb-12">Historias que ya se dijeron a tiempo</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {tests.map((t, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.12 }}
                whileHover={{ y: -6 }} className="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
                <div className="flex gap-1 mb-5">{[0, 1, 2, 3, 4].map((k) => <Star key={k} size={15} className="text-[#F39C12] fill-[#F39C12]" />)}</div>
                <p className="text-gray-700 leading-relaxed mb-6">“{t.q}”</p>
                <div className="flex items-center gap-3">
                  <Monogram name={t.n} grad={t.g} />
                  <div><p className="font-bold text-sm text-gray-900">{t.n}</p><p className="text-xs text-gray-500">{t.c}</p></div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
      <section id="precios" className="bg-white py-20">
        <div className="max-w-6xl mx-auto px-6">
          <h2 className="text-3xl md:text-4xl font-extrabold text-center text-gray-900 mb-4">Un plan para cada etapa del cariño</h2>
          <p className="text-center text-gray-500 mb-12">Sin permanencia. Cancela cuando quieras; tus recuerdos nunca se borran.</p>
          <div className="grid md:grid-cols-3 gap-8 items-stretch">
            {plans.map((p, i) => (
              <motion.div key={i} whileHover={{ y: -8 }} className={'relative p-8 rounded-3xl flex flex-col ' + (p.hot ? 'bg-gray-900 text-white shadow-2xl ring-4 ring-[#E74C3C]/30' : 'bg-[#F9FAFB] border border-gray-100')}>
                {p.hot && <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-[#E74C3C] text-white text-xs font-bold">Más elegido</span>}
                <h3 className="text-lg font-bold">{p.n}</h3>
                <p className={'text-sm mt-1 ' + (p.hot ? 'text-gray-400' : 'text-gray-500')}>{p.d}</p>
                <p className="text-4xl font-extrabold mt-5 mb-6">{p.p}<span className={'text-sm font-medium ' + (p.hot ? 'text-gray-400' : 'text-gray-500')}> /mes</span></p>
                <ul className="space-y-3 mb-8 flex-1">
                  {p.f.map((ft, k) => (
                    <li key={k} className="flex items-start gap-2 text-sm"><Check size={16} className="text-[#2ECC71] mt-0.5 flex-shrink-0" />{ft}</li>
                  ))}
                </ul>
                <Button variant={p.hot ? 'primary' : 'outline'} className="w-full" onClick={() => app.navigate('#/auth')}>Elegir {p.n}</Button>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
      <section className="py-20 bg-gradient-to-r from-[#E74C3C] to-[#C0392B]">
        <div className="max-w-3xl mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-extrabold text-white mb-4">Lo que no se dice hoy, se convierte en silencio mañana.</h2>
          <p className="text-red-100 mb-8">Dos minutos de video hoy valen más que mil mensajes de texto olvidados.</p>
          <Button variant="white" size="lg" icon={Heart} onClick={() => app.navigate('#/auth')}>Comenzar mi Legado</Button>
        </div>
      </section>
      <footer className="bg-gray-950 text-gray-400 pt-16 pb-10">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-10">
          <div className="md:col-span-2">
            <Logo dark tagline />
            <p className="text-sm mt-5 max-w-sm leading-relaxed">Plataforma de bienestar emocional y legado vivo. Cálida por diseño, segura por obligación.</p>
            <div className="flex items-center gap-2 mt-5 text-xs font-semibold text-gray-500"><Shield size={14} className="text-[#2ECC71]" /> Cifrado AES-256 · TLS 1.3 · Cumple RGPD</div>
          </div>
          <div>
            <p className="text-white font-bold text-sm mb-4">Producto</p>
            <ul className="space-y-2.5 text-sm">
              <li><button onClick={() => scrollToId('como-funciona')} className="hover:text-white transition-colors">Cómo funciona</button></li>
              <li><button onClick={() => scrollToId('precios')} className="hover:text-white transition-colors">Precios</button></li>
              <li><button onClick={() => setLegal('seguridad')} className="hover:text-white transition-colors">Seguridad</button></li>
            </ul>
          </div>
          <div>
            <p className="text-white font-bold text-sm mb-4">Legal & contacto</p>
            <ul className="space-y-2.5 text-sm">
              <li><button onClick={() => setLegal('privacidad')} className="hover:text-white transition-colors">Privacidad</button></li>
              <li><button onClick={() => setLegal('terminos')} className="hover:text-white transition-colors">Términos</button></li>
              <li><a href="mailto:hola@diloahora.com" className="hover:text-white transition-colors">hola@diloahora.com</a></li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-6 mt-12 pt-6 border-t border-white/5 flex flex-col md:flex-row justify-between gap-3 text-xs">
          <p>© 2025 Dilo Ahora. Todos los derechos reservados.</p>
          <p>Hecho con <Heart size={11} className="inline text-[#E74C3C] fill-[#E74C3C]" /> para los que aman a tiempo.</p>
        </div>
      </footer>
      <SpotModal open={spot} onClose={() => setSpot(false)} onCTA={() => { setSpot(false); app.navigate('#/auth'); }} />
      <LegalModal type={legal} onClose={() => setLegal(null)} />
    </div>
  );
}

/* ============================== /views/auth ============================== */
function AuthView({ notice }) {
  const app = useApp();
  const [tab, setTab] = useState('login');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [err, setErr] = useState(null);
  const submit = (e) => {
    e.preventDefault();
    const r = tab === 'login' ? app.login(email.trim(), pass) : app.register(name, email.trim(), pass);
    if (r) setErr(r); else app.navigate('#/app');
  };
  return (
    <div className="min-h-screen bg-[#F9FAFB] flex items-center justify-center p-6 relative overflow-hidden">
      <div className="absolute -top-20 -left-20 w-96 h-96 bg-red-100 rounded-full blur-3xl opacity-60 da-blob" />
      <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-yellow-100 rounded-full blur-3xl opacity-60 da-blob-2" />
      <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} className="w-full max-w-md bg-white rounded-3xl shadow-2xl border border-gray-100 p-8 relative z-10">
        <div className="flex justify-center mb-6"><Logo size={44} /></div>
        {notice && <div className="mb-4 text-center text-xs font-semibold text-[#F39C12] bg-orange-50 border border-orange-100 rounded-xl px-4 py-2.5">{notice}</div>}
        <div className="grid grid-cols-2 gap-2 bg-gray-100 p-1.5 rounded-2xl mb-6">
          {['login', 'register'].map((t) => (
            <button key={t} onClick={() => { setTab(t); setErr(null); }} className={'py-2.5 rounded-xl text-sm font-bold transition-all ' + (tab === t ? 'bg-white shadow text-[#E74C3C]' : 'text-gray-500')}>
              {t === 'login' ? 'Iniciar sesión' : 'Crear cuenta'}
            </button>
          ))}
        </div>
        <form onSubmit={submit} className="space-y-4">
          {tab === 'register' && (
            <div><label className="text-xs font-bold text-gray-600 block mb-1.5">Tu nombre</label>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Jairo Martínez" className="w-full px-4 py-3 rounded-2xl border border-gray-200 outline-none focus:ring-2 focus:ring-[#E74C3C]/40 focus:border-[#E74C3C] text-sm" /></div>
          )}
          <div><label className="text-xs font-bold text-gray-600 block mb-1.5">Correo electrónico</label>
            <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="tu@correo.com" className="w-full px-4 py-3 rounded-2xl border border-gray-200 outline-none focus:ring-2 focus:ring-[#E74C3C]/40 focus:border-[#E74C3C] text-sm" /></div>
          <div><label className="text-xs font-bold text-gray-600 block mb-1.5">Contraseña</label>
            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="••••••••" className="w-full px-4 py-3 rounded-2xl border border-gray-200 outline-none focus:ring-2 focus:ring-[#E74C3C]/40 focus:border-[#E74C3C] text-sm" /></div>
          {err && <p className="text-xs font-semibold text-[#E74C3C] bg-red-50 rounded-xl px-4 py-2.5">{err}</p>}
          <Button className="w-full" type="submit">{tab === 'login' ? 'Entrar' : 'Comenzar mi Legado'}</Button>
        </form>
        <div className="flex items-center gap-3 my-5"><div className="h-px bg-gray-200 flex-1" /><span className="text-xs text-gray-400 font-semibold">o continúa con</span><div className="h-px bg-gray-200 flex-1" /></div>
        <div className="grid grid-cols-2 gap-3">
          <button onClick={() => { app.google(); app.navigate('#/app'); }} className="flex items-center justify-center gap-2 py-3 rounded-2xl border border-gray-200 text-sm font-semibold hover:bg-gray-50 transition-colors"><GoogleG size={18} /> Google</button>
          <button onClick={() => { app.demo(); app.navigate('#/app'); }} className="flex items-center justify-center gap-2 py-3 rounded-2xl bg-gray-900 text-white text-sm font-semibold hover:bg-gray-800 transition-colors"><Sparkles size={16} className="text-[#FCD34D]" /> Cuenta demo</button>
        </div>
        <p className="text-[11px] text-gray-400 text-center mt-5 leading-relaxed">Demo local: tus datos viven solo en este dispositivo.<br />En producción: Supabase Auth + OAuth Google reales.</p>
        <button onClick={() => app.navigate('#/')} className="block mx-auto mt-4 text-xs font-semibold text-gray-500 hover:text-[#E74C3C] transition-colors">← Volver al inicio</button>
      </motion.div>
    </div>
  );
}

/* ============================ /views/app shell =========================== */
const NAV = [
  { path: '#/app', label: 'Inicio', icon: HomeIc },
  { path: '#/app/buzon', label: 'Buzón', icon: Video },
  { path: '#/app/memorias', label: 'Memorias', icon: Mic },
  { path: '#/app/boveda', label: 'Bóveda', icon: Lock },
  { path: '#/app/legado', label: 'Legado', icon: Sparkles },
];
function AppShell({ route, children }) {
  const app = useApp();
  return (
    <div className="min-h-screen bg-[#F9FAFB] text-gray-800">
      <aside className="hidden lg:flex w-72 bg-white border-r border-gray-100 flex-col p-6 fixed h-full z-20">
        <button className="flex items-center gap-3 mb-10" onClick={() => app.navigate('#/')}><Logo size={36} /></button>
        <div className="flex items-center gap-3 mb-8 p-3 bg-gray-50 rounded-2xl border border-gray-100">
          <Monogram name={app.user ? app.user.full_name : '?'} />
          <div className="min-w-0"><p className="text-sm font-bold text-gray-900 truncate">Hola, {app.user ? app.user.full_name.split(' ')[0] : ''}</p><p className="text-xs text-gray-500">Plan {app.user && app.user.plan_type === 'legacy_plus' ? 'Legacy+' : app.user && app.user.plan_type === 'pro' ? 'Pro' : 'Gratis'}</p></div>
        </div>
        <nav className="space-y-2 flex-1">
          {NAV.map((item) => (
            <button key={item.path} onClick={() => app.navigate(item.path)}
              className={'w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all ' + (route === item.path ? 'bg-red-50 text-[#E74C3C]' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-900')}>
              <item.icon size={20} /> {item.label}
            </button>
          ))}
        </nav>
        <div className="bg-gradient-to-br from-yellow-50 to-orange-50 p-4 rounded-2xl border border-yellow-100 mb-3">
          <div className="flex items-center gap-2 mb-2 text-yellow-700 font-bold text-sm"><Trophy size={16} /><span>Racha de Oro</span></div>
          <p className="text-xs text-yellow-800 opacity-80 mb-3">{app.data ? app.data.streak.count : 0} días conectando con los tuyos.</p>
          <div className="h-1.5 w-full bg-yellow-200 rounded-full overflow-hidden"><div className="h-full bg-yellow-500" style={{ width: Math.min(100, ((app.data ? app.data.streak.count : 0) / 30) * 100) + '%' }} /></div>
        </div>
        <button onClick={app.logout} className="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-500 hover:bg-gray-50 hover:text-gray-900 transition-all text-sm font-medium"><LogOut size={18} /> Cerrar sesión</button>
      </aside>
      <div className="lg:hidden fixed top-0 inset-x-0 bg-white/90 backdrop-blur z-20 border-b border-gray-100 px-4 py-3 flex justify-between items-center">
        <button onClick={() => app.navigate('#/')}><Logo size={30} /></button>
        <div className="flex items-center gap-2">
          <span className="flex items-center gap-1 text-xs font-bold text-yellow-600 bg-yellow-50 px-2.5 py-1.5 rounded-full"><Flame size={13} /> {app.data ? app.data.streak.count : 0}</span>
          <button onClick={app.logout} className="p-2 rounded-xl text-gray-500 hover:bg-gray-100"><LogOut size={18} /></button>
        </div>
      </div>
      <div className="lg:hidden fixed bottom-4 inset-x-4 z-20 bg-white rounded-3xl shadow-2xl border border-gray-100 flex justify-around py-2">
        {NAV.map((item) => {
          const active = route === item.path;
          return (
            <button key={item.path} onClick={() => app.navigate(item.path)} className="relative px-3 py-2 flex flex-col items-center gap-1">
              {active && <motion.div layoutId="dock-pill" className="absolute inset-0 bg-red-50 rounded-2xl" transition={{ type: 'spring', damping: 25, stiffness: 300 }} />}
              <item.icon size={19} className={'relative z-10 ' + (active ? 'text-[#E74C3C]' : 'text-gray-400')} />
              <span className={'relative z-10 text-[9px] font-bold ' + (active ? 'text-[#E74C3C]' : 'text-gray-400')}>{item.label}</span>
            </button>
          );
        })}
      </div>
      <main className="lg:pl-72 pt-16 lg:pt-0 pb-28 lg:pb-10">
        <div className="p-5 lg:p-10 h-full lg:h-screen lg:overflow-y-auto">{children}</div>
      </main>
    </div>
  );
}

/* ============================ /views/dashboard =========================== */
function CheckinModal({ open, onClose }) {
  const app = useApp();
  const OPTS = [{ v: 20, e: '😶', l: 'Apenas' }, { v: 40, e: '🙁', l: 'Un poco' }, { v: 60, e: '😐', l: 'Regular' }, { v: 80, e: '🙂', l: 'Bastante' }, { v: 100, e: '🤩', l: '¡A tope!' }];
  const QS = [
    { k: 'love', q: '¿Cuánto afecto expresaste o recibiste hoy?' },
    { k: 'family', q: '¿Cuánto tiempo de calidad compartiste con los tuyos?' },
    { k: 'goals', q: '¿Avanzaste hoy en algo que te importa?' },
  ];
  const [sel, setSel] = useState({ love: null, family: null, goals: null });
  const ready = sel.love && sel.family && sel.goals;
  return (
    <Modal open={open} onClose={onClose}>
      <div className="p-8">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-10 h-10 rounded-xl bg-red-50 text-[#E74C3C] flex items-center justify-center"><Flame size={20} /></div>
          <h3 className="text-lg font-bold text-gray-900">Check-in diario</h3>
        </div>
        <p className="text-sm text-gray-500 mb-6">Tres preguntas, treinta segundos. Tus barras respiran contigo.</p>
        <div className="space-y-6">
          {QS.map((q) => (
            <div key={q.k}>
              <p className="text-sm font-semibold text-gray-700 mb-2.5">{q.q}</p>
              <div className="grid grid-cols-5 gap-1.5">
                {OPTS.map((o) => (
                  <button key={o.v} onClick={() => setSel((s) => Object.assign({}, s, { [q.k]: o.v }))}
                    className={'flex flex-col items-center gap-1 py-2 rounded-xl border text-[10px] font-bold transition-all ' + (sel[q.k] === o.v ? 'border-[#E74C3C] bg-red-50 text-[#E74C3C]' : 'border-gray-100 bg-gray-50 text-gray-500 hover:border-gray-200')}>
                    <span className="text-base">{o.e}</span>{o.l}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
        <Button className="w-full mt-7" disabled={!ready} onClick={() => { app.checkin({ love: sel.love, family: sel.family, goals: sel.goals }); setSel({ love: null, family: null, goals: null }); onClose(); }}>
          Registrar y actualizar mis barras
        </Button>
      </div>
    </Modal>
  );
}
function DashboardView() {
  const app = useApp();
  const d = app.data;
  const [checkin, setCheckin] = useState(false);
  const [rec, setRec] = useState(null);
  const [player, setPlayer] = useState(null);
  const doneToday = d.checkin.last === todayStr();
  const dayIdx = Math.floor(Date.now() / 86400000) % MEMORY_QUESTIONS.length;
  const qod = MEMORY_QUESTIONS[dayIdx];
  const lowest = METRICS.map((m) => ({ key: m.key, label: m.label, recipient: m.recipient, v: d.metrics[m.key] })).sort((a, b) => a.v - b.v)[0];
  const fix = (key) => {
    const meta = METRICS.find((m) => m.key === key);
    if (key === 'goals') app.navigate('#/app/memorias');
    else setRec({ mode: 'affect', recipient: meta.recipient });
  };
  const inboxPreview = d.messages.filter((m) => m.dir === 'in').slice(0, 2);
  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="max-w-4xl mx-auto space-y-7">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Hola, {app.user ? app.user.full_name.split(' ')[0] : ''} 👋</h1>
          <p className="text-gray-500">Hoy es un buen día para conectar.</p>
        </div>
        {doneToday ? (
          <span className="inline-flex items-center gap-2 text-sm font-bold text-[#2ECC71] bg-green-50 px-4 py-2.5 rounded-2xl self-start"><Check size={16} /> Check-in de hoy completado</span>
        ) : (
          <Button size="sm" variant="gold" icon={Flame} onClick={() => setCheckin(true)}>Check-in diario · racha {d.streak.count}</Button>
        )}
      </div>
      <div className="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
        <h2 className="text-lg font-bold mb-6 flex items-center gap-2"><Heart className="text-[#E74C3C]" size={20} /> Tus Niveles Emocionales</h2>
        {METRICS.map((m) => (
          <WellbeingBar key={m.key} label={m.label} percentage={d.metrics[m.key]} status={statusOf(d.metrics[m.key])}
            delta={d.metrics[m.key] - (d.prevMetrics ? d.prevMetrics[m.key] : d.metrics[m.key])} onFix={() => fix(m.key)} />
        ))}
      </div>
      {lowest.v < 50 ? (
        <motion.div whileHover={{ scale: 1.01 }} className="bg-gradient-to-r from-orange-50 to-white rounded-3xl p-1 border border-orange-100 shadow-sm">
          <div className="bg-white/60 backdrop-blur rounded-[20px] p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-[#F39C12]/10 text-[#F39C12] rounded-2xl"><Video size={28} /></div>
              <div>
                <h3 className="text-lg font-bold text-gray-900 mb-1">Tu barra de {lowest.label} está en {lowest.v} %</h3>
                <p className="text-gray-600 text-sm">Pequeñas acciones crean grandes vínculos.{lowest.recipient ? ' Envía un video a ' + lowest.recipient + ' hoy.' : ' Graba tu avance de hoy en Memorias.'}</p>
              </div>
            </div>
            <Button onClick={() => (lowest.recipient ? setRec({ mode: 'affect', recipient: lowest.recipient }) : app.navigate('#/app/memorias'))} icon={Camera} className="w-full md:w-auto bg-[#F39C12] hover:bg-orange-600">
              {lowest.recipient ? 'Grabar video-mensaje' : 'Grabar mi avance'}
            </Button>
          </div>
        </motion.div>
      ) : (
        <div className="bg-gradient-to-r from-green-50 to-white rounded-3xl p-6 border border-green-100 flex items-center gap-4">
          <div className="p-3 bg-[#2ECC71]/10 text-[#2ECC71] rounded-2xl"><Trophy size={26} /></div>
          <div><h3 className="font-bold text-gray-900">Estás en zona verde</h3><p className="text-sm text-gray-600">Mantén la racha: un mensaje a tiempo vale oro.</p></div>
        </div>
      )}
      <div className="grid md:grid-cols-2 gap-6">
        <motion.div whileHover={{ y: -5 }} className="rounded-3xl p-8 bg-gray-900 text-white relative overflow-hidden flex flex-col justify-between min-h-[300px]">
          <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500 rounded-full mix-blend-overlay blur-3xl opacity-20" />
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500 rounded-full mix-blend-overlay blur-3xl opacity-20" />
          <div className="relative z-10">
            <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur text-xs font-bold mb-4"><Mic size={12} /> MEMORIA DEL DÍA</span>
            <h3 className="text-2xl font-bold leading-tight mb-3">{qod.q}</h3>
            <p className="text-gray-400 text-sm">Los tuyos querrán escuchar esto algún día. Tómate 2 minutos.</p>
          </div>
          <Button variant="white" className="w-full justify-between group relative z-10 mt-6" onClick={() => setRec({ mode: 'memory', question: qod })}>
            Grabar respuesta
            <span className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-red-50 transition-colors"><span className="w-3 h-3 bg-red-500 rounded-full" /></span>
          </Button>
        </motion.div>
        <div className="bg-white rounded-3xl p-6 border border-gray-100 shadow-sm flex flex-col">
          <div className="flex items-center justify-between mb-5">
            <h3 className="font-bold flex items-center gap-2"><Sparkles size={18} className="text-blue-500" /> Chat de Legado</h3>
            <span className="text-xs font-bold text-gray-400 bg-gray-50 px-2 py-1 rounded-lg">ESENCIA DIGITAL</span>
          </div>
          <div className="flex gap-3 mb-5">
            {d.personas.map((p, i) => (
              <div key={p.id} className="flex flex-col items-center gap-1">
                <img src={p.avatar} alt={p.name} className={'w-12 h-12 rounded-full object-cover border-2 ' + (i === 0 ? 'border-blue-500' : 'border-transparent opacity-70')} />
                <span className="text-[10px] font-bold text-gray-500">{p.name}</span>
              </div>
            ))}
          </div>
          <div className="bg-gray-50 rounded-2xl p-4 text-sm text-gray-600 mb-5 flex-1">
            «{d.personas[0].greet}»
          </div>
          <Button variant="dark" className="w-full" size="sm" onClick={() => app.navigate('#/app/legado')} icon={ChevronRight}>Abrir conversación</Button>
        </div>
      </div>
      <div className="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-lg font-bold flex items-center gap-2"><MessageCircle size={20} className="text-[#E74C3C]" /> Buzón de Afecto</h2>
          <button onClick={() => app.navigate('#/app/buzon')} className="text-sm font-bold text-[#E74C3C] hover:underline flex items-center gap-1">Ver todo <ChevronRight size={14} /></button>
        </div>
        {inboxPreview.length === 0 ? (
          <p className="text-sm text-gray-500">Aún no hay mensajes. Rompe el hielo: graba el primero.</p>
        ) : (
          <div className="grid sm:grid-cols-2 gap-4">
            {inboxPreview.map((m) => (
              <button key={m.id} onClick={() => setPlayer(m)} className="flex items-center gap-4 p-3 rounded-2xl border border-gray-100 hover:border-[#E74C3C]/30 hover:shadow-md transition-all text-left">
                <div className="relative w-20 h-14 rounded-xl overflow-hidden flex-shrink-0">
                  {m.cover ? <img src={m.cover} alt="" className="w-full h-full object-cover" /> : <div className="w-full h-full bg-gradient-to-br from-[#E74C3C] to-[#C0392B] flex items-center justify-center"><Heart size={16} className="text-white" /></div>}
                  <span className="absolute inset-0 flex items-center justify-center"><span className="w-7 h-7 rounded-full bg-white/90 flex items-center justify-center"><Play size={12} className="text-[#E74C3C] fill-[#E74C3C]" /></span></span>
                </div>
                <div className="min-w-0"><p className="font-bold text-sm text-gray-900">De {m.from}</p><p className="text-xs text-gray-500">{timeAgo(m.at)} · <span className="text-[#2ECC71] font-bold">{m.tag}</span></p></div>
              </button>
            ))}
          </div>
        )}
      </div>
      <CheckinModal open={checkin} onClose={() => setCheckin(false)} />
      {rec && <RecorderModal open onClose={() => setRec(null)} mode={rec.mode} question={rec.question} defaultRecipient={rec.recipient} />}
      <PlayerModal msg={player} onClose={() => setPlayer(null)} />
    </motion.div>
  );
}

/* ============================== /views/inbox ============================= */
function InboxView() {
  const app = useApp();
  const [tab, setTab] = useState('in');
  const [rec, setRec] = useState(false);
  const [player, setPlayer] = useState(null);
  const list = app.data.messages.filter((m) => m.dir === tab);
  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="max-w-4xl mx-auto space-y-7">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Buzón de Afecto</h1>
          <p className="text-gray-500">Comunicación asíncrona con intención: sin prisa, con corazón.</p>
        </div>
        <Button icon={Camera} onClick={() => setRec(true)}>Grabar video-mensaje</Button>
      </div>
      <div className="flex gap-2">
        {[{ k: 'in', l: 'Recibidos' }, { k: 'out', l: 'Enviados' }].map((t) => (
          <button key={t.k} onClick={() => setTab(t.k)} className={'px-5 py-2.5 rounded-2xl text-sm font-bold transition-all ' + (tab === t.k ? 'bg-[#E74C3C] text-white shadow-lg shadow-red-500/20' : 'bg-white text-gray-500 border border-gray-100 hover:border-gray-200')}>
            {t.l} · {app.data.messages.filter((m) => m.dir === t.k).length}
          </button>
        ))}
      </div>
      {list.length === 0 ? (
        <div className="bg-white rounded-3xl border border-gray-100 p-14 text-center">
          <div className="w-16 h-16 mx-auto mb-5 rounded-3xl bg-red-50 text-[#E74C3C] flex items-center justify-center"><Video size={28} /></div>
          <h3 className="font-bold text-gray-900 mb-2">{tab === 'in' ? 'Tu buzón espera su primer mensaje' : 'Aún no has enviado mensajes'}</h3>
          <p className="text-sm text-gray-500 max-w-sm mx-auto mb-6">{tab === 'in' ? 'Cuando alguien te envíe un video-mensaje, vivirá aquí para siempre.' : 'Dos minutos de tu voz valen más que mil textos. Atrévete.'}</p>
          <Button icon={Camera} onClick={() => setRec(true)}>Grabar el primero</Button>
        </div>
      ) : (
        <div className="grid sm:grid-cols-2 gap-5">
          {list.map((m) => (
            <motion.button key={m.id} whileHover={{ y: -5 }} onClick={() => setPlayer(m)} className="bg-white rounded-3xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-shadow text-left">
              <div className="relative h-44">
                {m.thumb ? <img src={m.thumb} alt="" className="w-full h-full object-cover" /> : m.cover ? <img src={m.cover} alt="" className="w-full h-full object-cover" /> : (
                  <div className="w-full h-full bg-gradient-to-br from-[#E74C3C] to-[#7f1d1d] flex items-center justify-center"><Heart size={34} className="text-white/80" /></div>
                )}
                <span className="absolute inset-0 bg-black/10 flex items-center justify-center">
                  <motion.span whileHover={{ scale: 1.15 }} className="w-12 h-12 rounded-full bg-white/95 shadow-lg flex items-center justify-center"><Play size={18} className="text-[#E74C3C] fill-[#E74C3C]" /></motion.span>
                </span>
                {m.duration > 0 && <span className="absolute bottom-2 right-2 bg-black/60 text-white text-[10px] font-mono font-bold px-2 py-0.5 rounded-full">{fmtDur(m.duration)}</span>}
              </div>
              <div className="p-4 flex items-center justify-between">
                <div><p className="font-bold text-sm text-gray-900">{m.dir === 'in' ? 'De ' + m.from : 'Para ' + m.recipient}</p><p className="text-xs text-gray-500">{timeAgo(m.at)}</p></div>
                <span className="text-[11px] font-bold text-[#2ECC71] bg-green-50 px-2.5 py-1 rounded-full">{m.tag || 'Memoria'}</span>
              </div>
            </motion.button>
          ))}
        </div>
      )}
      {rec && <RecorderModal open onClose={() => setRec(false)} mode="affect" />}
      <PlayerModal msg={player} onClose={() => setPlayer(null)} />
    </motion.div>
  );
}

/* ============================ /views/memories ============================ */
function MemoriesView() {
  const app = useApp();
  const cats = ['Niñez', 'Amor', 'Familia', 'Trabajo', 'Sabiduría'];
  const [cat, setCat] = useState('Niñez');
  const [rec, setRec] = useState(null);
  const qs = MEMORY_QUESTIONS.filter((q) => q.cat === cat);
  const total = app.data.memories.length;
  const mins = Math.round(app.data.memories.reduce((a, m) => a + (m.duration || 0), 0) / 60);
  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="max-w-4xl mx-auto space-y-7">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Memorias Habladas</h1>
          <p className="text-gray-500">Tu biografía en video, construida pregunta a pregunta.</p>
        </div>
        <div className="flex gap-3">
          <span className="bg-white border border-gray-100 rounded-2xl px-4 py-2.5 text-sm font-bold text-gray-700 flex items-center gap-2"><Archive size={16} className="text-[#E74C3C]" /> {total} memorias</span>
          <span className="bg-white border border-gray-100 rounded-2xl px-4 py-2.5 text-sm font-bold text-gray-700 flex items-center gap-2"><Clock size={16} className="text-[#F39C12]" /> {mins} min</span>
        </div>
      </div>
      <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
        {cats.map((c) => (
          <button key={c} onClick={() => setCat(c)} className={'px-5 py-2.5 rounded-2xl text-sm font-bold whitespace-nowrap transition-all ' + (cat === c ? 'bg-gray-900 text-white shadow-lg' : 'bg-white text-gray-500 border border-gray-100 hover:border-gray-200')}>{c}</button>
        ))}
      </div>
      <div className="space-y-4">
        {qs.map((q, i) => (
          <motion.div key={q.q} initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.08 }}
            className="bg-white rounded-3xl p-6 md:p-7 border border-gray-100 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-gray-900 text-white rounded-2xl"><Mic size={22} /></div>
              <div>
                <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">{q.cat}</span>
                <h3 className="font-bold text-gray-900 leading-snug">{q.q}</h3>
              </div>
            </div>
            <Button size="sm" variant="outline" icon={Camera} onClick={() => setRec(q)} className="flex-shrink-0">Grabar respuesta</Button>
          </motion.div>
        ))}
      </div>
      <div className="bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-100 rounded-3xl p-6 flex items-center gap-4">
        <Trophy size={26} className="text-[#D97706] flex-shrink-0" />
        <p className="text-sm text-yellow-800">Consejo de la casa: las memorias más valiosas no son las perfectas, son las sinceras. Equivocarse también es legado.</p>
      </div>
      {rec && <RecorderModal open onClose={() => setRec(null)} mode="memory" question={rec} />}
    </motion.div>
  );
}

/* ============================== /views/vault ============================= */
function VaultView() {
  const app = useApp();
  const list = app.data.memories;
  const [confirmDel, setConfirmDel] = useState(null);
  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="max-w-4xl mx-auto space-y-7">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Bóveda de Legado</h1>
          <p className="text-gray-500">Tu voz, custodiada para el momento exacto en que alguien la necesite.</p>
        </div>
        <span className="inline-flex items-center gap-2 text-xs font-bold text-[#2ECC71] bg-green-50 px-4 py-2.5 rounded-2xl self-start"><Shield size={14} /> Cifrado de extremo a extremo</span>
      </div>
      {list.length === 0 ? (
        <div className="bg-white rounded-3xl border border-gray-100 p-14 text-center">
          <div className="w-16 h-16 mx-auto mb-5 rounded-3xl bg-gray-900 text-[#FCD34D] flex items-center justify-center"><Lock size={28} /></div>
          <h3 className="font-bold text-gray-900 mb-2">Tu Bóveda está vacía… por ahora</h3>
          <p className="text-sm text-gray-500 max-w-sm mx-auto mb-6">Graba tu primera Memoria Hablada y quedará custodiada aquí, lista para entregarse hoy o dentro de décadas.</p>
          <Button icon={Mic} onClick={() => app.navigate('#/app/memorias')}>Ir a Memorias</Button>
        </div>
      ) : (
        <div className="grid sm:grid-cols-2 gap-5">
          {list.map((m) => (
            <motion.div key={m.id} whileHover={{ y: -5 }} className="bg-white rounded-3xl overflow-hidden border border-gray-100 shadow-sm">
              <div className="relative h-36">
                {m.thumb ? <img src={m.thumb} alt="" className="w-full h-full object-cover" /> : m.cover ? <img src={m.cover} alt="" className="w-full h-full object-cover" /> : (
                  <div className="w-full h-full bg-gradient-to-br from-gray-900 to-gray-700 flex items-center justify-center"><Mic size={28} className="text-[#FCD34D]" /></div>
                )}
                <span className="absolute top-2 left-2 bg-black/60 text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">{m.cat || 'Memoria'}</span>
              </div>
              <div className="p-5">
                <p className="font-bold text-sm text-gray-900 leading-snug mb-1">{m.question ? m.question.q : 'Memoria de vida'}</p>
                <p className="text-xs text-gray-500 mb-4">{new Date(m.at).toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' })} · {fmtDur(m.duration || 0)}</p>
                <div className="flex items-center gap-2">
                  <button onClick={() => app.updateMemory(m.id, { privacy: m.privacy === 'private' ? 'scheduled' : 'private', deliverAt: m.deliverAt || new Date(Date.now() + 315360000000).toISOString().slice(0, 10) })}
                    className={'flex-1 flex items-center justify-center gap-1.5 text-xs font-bold py-2.5 rounded-xl transition-all ' + (m.privacy === 'private' ? 'bg-gray-900 text-white' : 'bg-[#F39C12]/10 text-[#F39C12]')}>
                    {m.privacy === 'private' ? <><Lock size={13} /> Privada</> : <><Calendar size={13} /> Programada</>}
                  </button>
                  {confirmDel === m.id ? (
                    <button onClick={() => { app.deleteMemory(m.id); setConfirmDel(null); }} className="px-3 py-2.5 rounded-xl bg-[#E74C3C] text-white text-xs font-bold">¿Seguro?</button>
                  ) : (
                    <button onClick={() => { setConfirmDel(m.id); setTimeout(() => setConfirmDel(null), 2500); }} className="px-3 py-2.5 rounded-xl bg-gray-100 text-gray-500 text-xs font-bold hover:bg-red-50 hover:text-[#E74C3C] transition-colors"><XIc size={13} /></button>
                  )}
                </div>
                {m.privacy === 'scheduled' && (
                  <div className="mt-3 flex items-center gap-2 text-xs text-gray-600">
                    <Calendar size={13} className="text-[#F39C12]" />
                    <span>Entrega:</span>
                    <input type="date" value={m.deliverAt || ''} onChange={(e) => app.updateMemory(m.id, { deliverAt: e.target.value })}
                      className="flex-1 border border-gray-200 rounded-lg px-2 py-1 text-xs outline-none focus:border-[#F39C12]" />
                  </div>
                )}
              </div>
            </motion.div>
          ))}
        </div>
      )}
      <div className="bg-gray-900 rounded-3xl p-7 text-white flex flex-col md:flex-row items-start md:items-center gap-5">
        <div className="p-3 rounded-2xl bg-white/10"><Sparkles size={24} className="text-[#FCD34D]" /></div>
        <div className="flex-1">
          <h3 className="font-bold mb-1">Entregas que abrazan a tiempo</h3>
          <p className="text-sm text-gray-400">Programa memorias para cumpleaños, bodas o momentos futuros. Nuestra IA ética las entregará con el contexto y el consuelo adecuados.</p>
        </div>
        <Button variant="gold" size="sm" onClick={() => app.navigate('#/app/legado')}>Conocer el Chatbot de Legado</Button>
      </div>
    </motion.div>
  );
}

/* ============================== /views/legacy ============================ */
function LegacyView() {
  const app = useApp();
  const personas = app.data.personas;
  const [pid, setPid] = useState(personas[0].id);
  const persona = personas.find((p) => p.id === pid) || personas[0];
  const history = app.data.chats[pid] || [];
  const [input, setInput] = useState('');
  const [waiting, setWaiting] = useState(false);
  const [stream, setStream] = useState(null);
  const [cfgOpen, setCfgOpen] = useState(false);
  const [cfg, setCfg] = useState(() => {
    try { return JSON.parse(localStorage.getItem('da_llm') || '{}'); } catch (e) { return {}; }
  });
  const endRef = useRef(null);
  useEffect(() => {
    if (endRef.current) endRef.current.scrollIntoView({ behavior: 'smooth' });
  }, [history.length, stream, waiting]);
  const send = async (text) => {
    const clean = (text || '').trim();
    if (!clean || waiting || stream) return;
    setInput('');
    app.pushChat(pid, { role: 'user', text: clean, at: Date.now() });
    setWaiting(true);
    const external = await callExternalLLM(cfg, persona, app.user ? app.user.full_name.split(' ')[0] : 'alguien', clean);
    const full = external || localEngine(persona, clean);
    setWaiting(false);
    setStream('');
    const words = full.split(' ');
    let acc = '';
    const iv = setInterval(() => {
      const w = words.shift();
      acc = acc ? acc + ' ' + w : w;
      setStream(acc);
      if (words.length === 0) {
        clearInterval(iv);
        setStream(null);
        app.pushChat(pid, { role: 'ai', text: full, at: Date.now() });
      }
    }, 55);
  };
  const saveCfg = () => {
    localStorage.setItem('da_llm', JSON.stringify(cfg));
    setCfgOpen(false);
    app.toast(cfg.key ? 'IA externa conectada · caerá al motor local si falla' : 'Configuración guardada · motor local activo');
  };
  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="max-w-3xl mx-auto space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Chatbot de Legado</h1>
          <p className="text-gray-500">La esencia digital de los tuyos, disponible con amor y ética.</p>
        </div>
        <button onClick={() => setCfgOpen(true)} className="flex items-center gap-2 text-xs font-bold text-gray-500 bg-white border border-gray-100 px-4 py-2.5 rounded-2xl hover:border-gray-200 transition-colors"><Sparkles size={14} className="text-blue-500" /> Conectar IA</button>
      </div>
      <div className="flex gap-4 overflow-x-auto no-scrollbar pb-1">
        {personas.map((p) => (
          <button key={p.id} onClick={() => setPid(p.id)} className="flex flex-col items-center gap-1.5 min-w-[72px]">
            <img src={p.avatar} alt={p.name} className={'w-16 h-16 rounded-full object-cover border-4 transition-all ' + (pid === p.id ? 'border-[#E74C3C] shadow-lg shadow-red-500/20' : 'border-white opacity-70 hover:opacity-100')} />
            <span className={'text-xs font-bold ' + (pid === p.id ? 'text-[#E74C3C]' : 'text-gray-500')}>{p.name}</span>
          </button>
        ))}
      </div>
      <div className="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden flex flex-col">
        <div className="flex items-center gap-3 px-6 py-4 border-b border-gray-100 bg-gray-50/60">
          <img src={persona.avatar} alt="" className="w-10 h-10 rounded-full object-cover" />
          <div className="flex-1"><p className="font-bold text-sm text-gray-900">{persona.name}</p><p className="text-[11px] text-gray-500">Esencia Digital · IA ética conmemorativa</p></div>
          <span className="w-2.5 h-2.5 rounded-full bg-[#2ECC71] animate-pulse" />
        </div>
        <div className="h-[420px] overflow-y-auto p-6 space-y-4 bg-[#F9FAFB]">
          <div className="flex gap-2.5">
            <img src={persona.avatar} alt="" className="w-7 h-7 rounded-full object-cover flex-shrink-0" />
            <div className="bg-white p-3.5 rounded-2xl rounded-tl-none shadow-sm text-sm text-gray-700 max-w-[80%]">{persona.greet}</div>
          </div>
          {history.map((m, i) => (
            <div key={i} className={'flex gap-2.5 ' + (m.role === 'user' ? 'flex-row-reverse' : '')}>
              {m.role === 'ai' && <img src={persona.avatar} alt="" className="w-7 h-7 rounded-full object-cover flex-shrink-0" />}
              <div className={'p-3.5 rounded-2xl shadow-sm text-sm max-w-[80%] ' + (m.role === 'user' ? 'bg-[#E74C3C] text-white rounded-tr-none' : 'bg-white text-gray-700 rounded-tl-none')}>{m.text}</div>
            </div>
          ))}
          {waiting && (
            <div className="flex gap-2.5">
              <img src={persona.avatar} alt="" className="w-7 h-7 rounded-full object-cover flex-shrink-0" />
              <div className="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm flex gap-1.5">
                {[0, 1, 2].map((i) => <motion.span key={i} animate={{ y: [0, -5, 0] }} transition={{ repeat: Infinity, duration: 0.7, delay: i * 0.15 }} className="w-2 h-2 rounded-full bg-gray-300" />)}
              </div>
            </div>
          )}
          {stream && (
            <div className="flex gap-2.5">
              <img src={persona.avatar} alt="" className="w-7 h-7 rounded-full object-cover flex-shrink-0" />
              <div className="bg-white p-3.5 rounded-2xl rounded-tl-none shadow-sm text-sm text-gray-700 max-w-[80%]">{stream}<span className="inline-block w-1.5 h-4 bg-[#E74C3C] ml-0.5 animate-pulse align-middle" /></div>
            </div>
          )}
          <div ref={endRef} />
        </div>
        <form onSubmit={(e) => { e.preventDefault(); send(input); }} className="flex items-center gap-3 p-4 border-t border-gray-100 bg-white">
          <input value={input} onChange={(e) => setInput(e.target.value)} placeholder={'Escríbele a ' + persona.name + '…'}
            className="flex-1 bg-gray-50 rounded-full px-5 py-3 text-sm outline-none focus:ring-2 focus:ring-[#E74C3C]/30 border border-gray-100" />
          <motion.button whileTap={{ scale: 0.88 }} type="submit" className="w-11 h-11 rounded-full bg-[#E74C3C] text-white flex items-center justify-center shadow-lg shadow-red-500/25 flex-shrink-0"><Send size={18} /></motion.button>
        </form>
      </div>
      <p className="text-[11px] text-gray-400 text-center leading-relaxed">El Chatbot de Legado es una recreación conmemorativa basada únicamente en el contenido que su titular preservó. Nunca suplanta decisiones legales, médicas ni financieras.</p>
      <Modal open={cfgOpen} onClose={() => setCfgOpen(false)}>
        <div className="p-8">
          <h3 className="text-lg font-bold text-gray-900 mb-1 flex items-center gap-2"><Sparkles size={18} className="text-blue-500" /> Conexión LLM (producción)</h3>
          <p className="text-xs text-gray-500 mb-6">Preparado para OpenAI o Google Gemini con system-prompt de persona + RAG de transcripciones. Sin clave, se usa el motor local de esencia.</p>
          <div className="space-y-4">
            <div><label className="text-xs font-bold text-gray-600 block mb-1.5">Proveedor</label>
              <div className="grid grid-cols-2 gap-2">
                {['openai', 'gemini'].map((p) => (
                  <button key={p} onClick={() => setCfg((c) => Object.assign({}, c, { provider: p }))} className={'py-2.5 rounded-xl text-sm font-bold border transition-all ' + (cfg.provider === p ? 'border-[#E74C3C] bg-red-50 text-[#E74C3C]' : 'border-gray-200 text-gray-500')}>{p === 'openai' ? 'OpenAI' : 'Google Gemini'}</button>
                ))}
              </div></div>
            <div><label className="text-xs font-bold text-gray-600 block mb-1.5">API Key</label>
              <input value={cfg.key || ''} onChange={(e) => setCfg((c) => Object.assign({}, c, { key: e.target.value }))} type="password" placeholder="sk-… / AIza…" className="w-full px-4 py-3 rounded-2xl border border-gray-200 text-sm outline-none focus:ring-2 focus:ring-[#E74C3C]/40" /></div>
            <div><label className="text-xs font-bold text-gray-600 block mb-1.5">Modelo</label>
              <input value={cfg.model || ''} onChange={(e) => setCfg((c) => Object.assign({}, c, { model: e.target.value }))} placeholder={cfg.provider === 'openai' ? 'gpt-4o-mini' : 'gemini-1.5-flash'} className="w-full px-4 py-3 rounded-2xl border border-gray-200 text-sm outline-none focus:ring-2 focus:ring-[#E74C3C]/40" /></div>
          </div>
          <div className="flex gap-3 mt-7">
            <Button variant="ghost" size="sm" className="flex-1" onClick={() => { setCfg({}); localStorage.removeItem('da_llm'); setCfgOpen(false); }}>Usar motor local</Button>
            <Button size="sm" className="flex-1" onClick={saveCfg}>Guardar conexión</Button>
          </div>
        </div>
      </Modal>
    </motion.div>
  );
}

/* ================================ /root ================================== */
function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || '#/');
  useEffect(() => {
    const f = () => setHash(window.location.hash || '#/');
    window.addEventListener('hashchange', f);
    return () => window.removeEventListener('hashchange', f);
  }, []);
  return hash;
}
function Root() {
  const route = useHashRoute();
  const { user } = useApp();
  useEffect(() => { window.scrollTo(0, 0); }, [route]);
  let view;
  if (route.indexOf('#/auth') === 0) view = <AuthView />;
  else if (route.indexOf('#/app') === 0) {
    view = user ? (
      <AppShell route={route}>
        <AnimatePresence mode="wait">
          <motion.div key={route}>
            {route === '#/app/buzon' ? <InboxView /> : route === '#/app/memorias' ? <MemoriesView /> : route === '#/app/boveda' ? <VaultView /> : route === '#/app/legado' ? <LegacyView /> : <DashboardView />}
          </motion.div>
        </AnimatePresence>
      </AppShell>
    ) : <AuthView notice="Inicia sesión o crea tu cuenta para entrar a tu panel." />;
  } else view = <Landing />;
  return (
    <>
      <style>{GLOBAL_CSS}</style>
      <AnimatePresence mode="wait">
        <motion.div key={(route.indexOf('#/app') === 0 ? '#/app*' : route) + (user ? '+in' : '+out')} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }}>
          {view}
        </motion.div>
      </AnimatePresence>
      <Toasts />
      <Confetti />
    </>
  );
}
export default function DiloAhoraApp() {
  return (
    <ErrorBoundary>
      <StyleLoader />
      <AppProvider>
        <Root />
      </AppProvider>
    </ErrorBoundary>
  );
}
import { createRoot } from 'react-dom/client';
const raiz = document.getElementById('root');
if (raiz) {
  createRoot(raiz).render(<DiloAhoraApp />);
}

Algo se nos cruzó en el camino

{mode === 'memory' ? (question ? question.q : 'Cuéntale al futuro') : 'Graba un video-mensaje'}

No pudimos acceder a tu cámara