/* hero.jsx — Navbar, Hero w/ Search, Dashboard mockup, Logo cloud (dark band), Beneficios */

/* ============= NAVBAR (light) ============= */
function Navbar({ onLogin }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { href: '#dashboard', label: 'La app' },
    { href: '#modos',     label: 'Modos' },
    { href: '#precios',   label: 'Precios' },
    { href: '#seguridad', label: 'Seguridad' },
  ];
  return (
    <nav className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? 'bg-paper-50/85 backdrop-blur-xl border-b border-ink-100' : 'bg-transparent'}`}>
      <div className="max-w-7xl mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
        <Logo size={26} />
        <ul className="hidden md:flex items-center gap-1 text-[13.5px] text-ink-600">
          {links.map(l => (
            <li key={l.href}>
              <a href={l.href} className="px-3 py-2 rounded-md hover:text-ink-900 hover:bg-ink-50 transition-colors">{l.label}</a>
            </li>
          ))}
        </ul>
        <div className="flex items-center gap-2">
          <button onClick={onLogin} className="hidden sm:inline-flex text-[13.5px] text-ink-600 hover:text-ink-900 px-3 py-2 transition-colors">
            Iniciar sesión
          </button>
          <PrimaryButton size="sm" onClick={onLogin}>
            Probar gratis <Icon name="arrow" className="w-3.5 h-3.5" />
          </PrimaryButton>
        </div>
      </div>
    </nav>
  );
}

/* ============= HERO + SEARCH ============= */
const MODES = [
  { id: 'general', label: 'General',  icon: 'scale',
    desc: 'Respuesta jurídica directa con citas a BOE y CENDOJ.', color: 'indigo' },
  { id: 'devil',   label: 'Abogado del Diablo', icon: 'gavel',
    desc: 'Refuta tu argumentación con la jurisprudencia más adversa.', color: 'red' },
  { id: 'judge',   label: 'Simulador de Juez',  icon: 'judge',
    desc: 'Predice cómo lo verá un tribunal y qué pesa más.', color: 'amber' },
  { id: 'data',    label: 'Probabilidades',     icon: 'chart',
    desc: 'Estima el éxito basado en sentencias análogas.', color: 'emerald' },
];

const SUGGESTIONS = [
  "Plazo para recurrir en apelación en civil",
  "Requisitos del despido improcedente 2025",
  "Doctrina del TS sobre cláusulas suelo",
  "Convencionalidad y CDFUE en penal",
];

const FALLBACK_ANSWER = `El plazo para interponer recurso de apelación contra una sentencia civil es de **veinte días hábiles** desde la notificación.

**Fundamentación:**
- Art. 458.1 LEC — plazo de interposición y forma escrita.
- STS, Sala 1ª, núm. 487/2023 de 10 de abril — cómputo desde notificación efectiva.

**Aplicación práctica:**
- *Dies a quo*: día siguiente a la notificación al procurador.
- *Dies ad quem*: 20º día hábil, antes de las 15:00 (art. 135 LEC).

¿Reviso los motivos de oposición que el contrario podría alegar antes de preparar nada?`;

function HeroSearch({ onLoginRequired }) {
  const FREE_LIMIT = 3;
  const [query, setQuery] = useState('');
  const [mode, setMode] = useState('general');
  const [loading, setLoading] = useState(false);
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [used, setUsed] = useState(0);
  const inputRef = useRef(null);

  useEffect(() => {
    try {
      const n = parseInt(localStorage.getItem('mentaly_anon_count') || '0', 10);
      if (!isNaN(n)) setUsed(n);
    } catch {}
  }, []);

  const remaining = Math.max(0, FREE_LIMIT - used);

  const search = async () => {
    const q = query.trim();
    if (!q) return;
    if (mode !== 'general' || used >= FREE_LIMIT) {
      onLoginRequired(q, mode);
      return;
    }
    setLoading(true); setError(null); setResponse(null);
    try {
      let answer = '';
      try {
        const sys = `Eres Mentaly, una IA jurídica especializada en derecho español. Respondes con concisión y precisión.
Formato:
- Empieza con la respuesta directa (1-2 frases, en negrita los datos clave con **doble asterisco**).
- "Fundamentación:" con 2-4 bullets que citen artículo (LEC, CC, CP, LO, ET, RGPD…) y sentencias del TS/TC/AP plausibles.
- "Aplicación práctica:" con 2-3 bullets.
- Cierra con una pregunta corta de seguimiento.
No inventes referencias; si no las tienes, escríbelo. Tono: abogado senior, español de España, profesional. Máximo 180 palabras.`;
        const text = await window.MentalyAI.complete({
          messages: [{ role: 'user', content: `Consulta jurídica:\n${q}` }],
          system: sys,
          timeout: 18000,
        });
        answer = typeof text === 'string' ? text : (text?.text || '');
      } catch {
        answer = FALLBACK_ANSWER;
      }
      if (!answer || answer.length < 8) answer = FALLBACK_ANSWER;
      setResponse({ text: answer, q });
      const next = used + 1;
      setUsed(next);
      try { localStorage.setItem('mentaly_anon_count', String(next)); } catch {}
    } catch {
      setError('Algo ha fallado. Inténtalo de nuevo.');
    } finally { setLoading(false); }
  };

  const onKey = (e) => { if (e.key === 'Enter' && !loading) search(); };

  const modeColorPill = {
    indigo:  { bg: 'bg-indigo2-500/[0.08]', br: 'border-indigo2-500/30', txt: 'text-indigo2-600',  dot: 'bg-indigo2-500' },
    red:     { bg: 'bg-red-500/[0.08]',     br: 'border-red-700/30',    txt: 'text-red-700',      dot: 'bg-red-600' },
    amber:   { bg: 'bg-amber-500/[0.12]',   br: 'border-amber-500/35',  txt: 'text-amber-700',    dot: 'bg-amber-500' },
    emerald: { bg: 'bg-emerald-500/[0.08]', br: 'border-emerald-500/30', txt: 'text-emerald-700',  dot: 'bg-emerald-500' },
  };

  return (
    <div className="w-full max-w-3xl mx-auto">
      {/* Mode tabs */}
      <div className="flex flex-wrap gap-2 justify-center mb-4">
        {MODES.map(m => {
          const c = modeColorPill[m.color];
          const active = mode === m.id;
          const locked = m.id !== 'general';
          return (
            <button key={m.id} onClick={() => setMode(m.id)}
              className={`inline-flex items-center gap-2 px-3.5 py-2 rounded-full text-[13px] font-medium border transition-all focus-ring
                ${active ? `${c.bg} ${c.br} ${c.txt}` : 'bg-white/70 border-ink-100 text-ink-500 hover:bg-white hover:border-ink-200'}`}>
              <Icon name={m.icon} className="w-4 h-4" />
              {m.label}
              {locked && <Icon name="lock" className="w-3 h-3 opacity-60" />}
            </button>
          );
        })}
      </div>

      {/* Search input */}
      <div className="relative group">
        <div className="absolute -inset-px rounded-2xl bg-gradient-to-r from-indigo2-500/40 via-violet2-500/30 to-blue-400/40 blur-2xl opacity-40 group-focus-within:opacity-80 transition-opacity" />
        <div className="relative card-elev rounded-2xl">
          <div className="flex items-stretch gap-2 p-2">
            <div className="flex items-center pl-3 text-ink-400">
              <Icon name="search" className="w-5 h-5" />
            </div>
            <input
              ref={inputRef}
              type="text"
              value={query}
              onChange={e => setQuery(e.target.value)}
              onKeyDown={onKey}
              placeholder={mode === 'general'
                ? "Pregunta a Mentaly…"
                : `Modo "${MODES.find(m=>m.id===mode).label}" — inicia sesión`}
              className="flex-1 bg-transparent py-3.5 outline-none text-[15.5px] text-ink-900 placeholder:text-ink-400"
              disabled={loading}
            />
            <PrimaryButton onClick={search} className={loading ? 'opacity-90' : ''}>
              {loading ? <Dots /> : (<><span>Consultar</span><Icon name="arrow" className="w-4 h-4" /></>)}
            </PrimaryButton>
          </div>
        </div>
      </div>

      {/* Suggestions */}
      {!response && !loading && (
        <div className="mt-4 flex flex-wrap items-center gap-2 justify-center">
          <span className="text-[11px] uppercase tracking-wider text-ink-400 mr-1">Prueba</span>
          {SUGGESTIONS.map(s => (
            <button key={s} onClick={() => { setQuery(s); inputRef.current?.focus(); }}
              className="text-[12.5px] text-ink-600 hover:text-violet2-600 px-3 py-1.5 rounded-full border border-ink-100 bg-white hover:border-violet2-500/40 transition-all">
              {s}
            </button>
          ))}
        </div>
      )}

      {/* Trust line */}
      <div className="mt-7 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-[12.5px] text-ink-500">
        <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> 3 consultas gratis</span>
        <span className="inline-flex items-center gap-1.5"><Icon name="shield" className="w-3.5 h-3.5" /> Privado · RGPD UE</span>
        <span className="inline-flex items-center gap-1.5"><Icon name="database" className="w-3.5 h-3.5" /> Conectado a BOE & CENDOJ</span>
      </div>

      {loading && <ResponseSkeleton />}
      {error && (
        <div className="mt-8 p-4 rounded-xl border border-rose-200 bg-rose-50 text-rose-700 text-sm">{error}</div>
      )}
      {response && !loading && (
        <ResponseCard text={response.text} q={response.q} onLogin={() => onLoginRequired('', 'general')} />
      )}
    </div>
  );
}

function ResponseSkeleton() {
  return (
    <div className="mt-8 card-elev p-6 md:p-7">
      <div className="flex items-center gap-2 mb-5">
        <div className="w-7 h-7 rounded-lg bg-violet2-500/10 flex items-center justify-center">
          <Icon name="brain" className="w-4 h-4 text-violet2-600" />
        </div>
        <div className="text-[13px] text-violet2-700 font-medium">Mentaly está razonando…</div>
        <div className="ml-auto text-[11px] text-ink-400 inline-flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 rounded-full bg-violet2-500 animate-pulse" />
          consultando BOE + CENDOJ
        </div>
      </div>
      <div className="space-y-3">
        <div className="skeleton h-3 rounded w-[92%]" />
        <div className="skeleton h-3 rounded w-[78%]" />
        <div className="skeleton h-3 rounded w-[88%]" />
        <div className="skeleton h-3 rounded w-[40%]" />
        <div className="h-2" />
        <div className="skeleton h-3 rounded w-[68%]" />
        <div className="skeleton h-3 rounded w-[82%]" />
      </div>
    </div>
  );
}

function ResponseCard({ text, q, onLogin }) {
  return (
    <div className="mt-8 card-elev overflow-hidden animate-tilt-in">
      <div className="p-6 md:p-7">
        <div className="flex items-center gap-2 mb-4">
          <div className="w-7 h-7 rounded-lg bg-violet2-500/10 flex items-center justify-center">
            <Icon name="scale" className="w-4 h-4 text-violet2-600" />
          </div>
          <div className="text-[13px] text-violet2-700 font-medium">Respuesta de Mentaly</div>
          <div className="ml-auto text-[11px] text-ink-400 inline-flex items-center gap-1.5">
            <Icon name="bolt" className="w-3 h-3" /> 2,1s · modo General
          </div>
        </div>
        {q && (
          <div className="mb-4 text-[13px] text-ink-500 italic border-l-2 border-violet2-500/40 pl-3">
            “{q}”
          </div>
        )}
        <AnswerBody text={text} />

        <div className="mt-5 flex flex-wrap gap-2">
          <Pill className="bg-blue-50 text-blue-700 border border-blue-200">
            <Icon name="doc" className="w-3 h-3" /> BOE
          </Pill>
          <Pill className="bg-violet2-500/10 text-violet2-700 border border-violet2-500/25">
            <Icon name="layers" className="w-3 h-3" /> CENDOJ
          </Pill>
          <Pill className="bg-emerald-50 text-emerald-700 border border-emerald-200">
            <Icon name="check" className="w-3 h-3" /> Citas verificadas
          </Pill>
        </div>
      </div>

      <div className="border-t border-ink-100 bg-paper-100/60 px-6 md:px-7 py-5 flex flex-col md:flex-row md:items-center gap-4 justify-between">
        <div>
          <div className="text-[14.5px] text-ink-900 font-semibold">¿Quieres analizar tu propio expediente?</div>
          <div className="text-[12.5px] text-ink-500 mt-0.5">Sube tu PDF y desbloquea los 4 modos de razonamiento.</div>
        </div>
        <button onClick={onLogin}
          className="inline-flex items-center justify-center gap-3 px-5 py-3 btn-ink rounded-full text-[14px] font-semibold focus-ring">
          <GoogleGlyph />
          Continuar con Google
        </button>
      </div>
    </div>
  );
}

/* ============= HERO SECTION ============= */
function Hero({ onLoginRequired }) {
  return (
    <section className="relative pt-32 pb-20 md:pb-28 overflow-hidden" data-screen-label="01 Hero">
      {/* lightweight glow top-right */}
      <div className="hero-glow inset-0" />
      {/* subtle grid fading down */}
      <div className="absolute inset-0 grid-bg opacity-[0.32] [mask-image:linear-gradient(to_bottom,black_0%,black_45%,transparent_85%)] pointer-events-none" />

      <div className="relative max-w-7xl mx-auto px-6 md:px-10 flex flex-col items-center">
        <div className="mb-7 inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/85 backdrop-blur-sm border border-ink-100 text-[12px] text-ink-600 shadow-sm">
          <span className="w-1.5 h-1.5 rounded-full bg-violet2-500 animate-pulse" />
          IA jurídica para abogados en España · 2026
        </div>

        <h1 className="display text-center text-[44px] sm:text-[60px] md:text-[78px] lg:text-[92px] leading-[1.02] max-w-5xl">
          <span className="text-ink-900">El criterio de un<br/>abogado senior,</span>{' '}
          <span className="font-serif italic font-normal text-grad-violet">amplificado por IA.</span>
        </h1>

        <p className="mt-7 text-center text-[16.5px] md:text-[18px] text-ink-500 max-w-2xl leading-relaxed">
          Mentaly analiza expedientes de hasta 10.000 páginas, contrasta jurisprudencia
          del CENDOJ y razona <span className="text-ink-800">con 4 perspectivas distintas</span>.
          Pregunta ahora, sin registro.
        </p>

        <div className="mt-12 w-full">
          <HeroSearch onLoginRequired={onLoginRequired} />
        </div>
      </div>

      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-paper-50" />
    </section>
  );
}

/* ============= DASHBOARD MOCKUP ============= */
function DashboardMockup() {
  const [ref, shown] = useReveal(0.18);
  const fullUserQ = "¿La cláusula suelo de esta escritura supera el doble control de transparencia o es nula?";
  const fullAnswer = "La escritura no acredita información precontractual real sobre el riesgo de oscilación a la baja, por lo que no supera el doble control de transparencia exigido por el TS (STS 9/05/2013, Pleno).";
  const [userChars, setUserChars] = useState(0);
  const [aiChars, setAiChars] = useState(0);
  const [pct, setPct] = useState(0);
  const [stage, setStage] = useState(0); // 0=idle 1=upload 2=ocr 3=user 4=thinking 5=ai 6=done
  const [uploadPct, setUploadPct] = useState(0);
  const [ocrPage, setOcrPage] = useState(0);
  const [sourcesShown, setSourcesShown] = useState(0);

  useEffect(() => {
    if (!shown) return;
    let cancelled = false;
    const timers = [];
    const intervals = [];

    const wait = (ms) => new Promise((res) => {
      const t = setTimeout(() => res(), ms);
      timers.push(t);
    });

    const runOnce = async () => {
      // reset
      setUserChars(0); setAiChars(0); setPct(0);
      setUploadPct(0); setOcrPage(0); setSourcesShown(0);

      // Stage 1 — upload PDF
      setStage(1);
      let up = 0;
      await new Promise((res) => {
        const id = setInterval(() => {
          up += 4 + Math.random() * 6;
          if (up >= 100) { up = 100; clearInterval(id); res(); }
          setUploadPct(Math.round(up));
        }, 40);
        intervals.push(id);
      });
      if (cancelled) return;
      await wait(280);

      // Stage 2 — OCR
      setStage(2);
      const total = 412;
      let p = 0;
      await new Promise((res) => {
        const id = setInterval(() => {
          p += 28 + Math.floor(Math.random() * 14);
          if (p >= total) { p = total; clearInterval(id); res(); }
          setOcrPage(p);
        }, 60);
        intervals.push(id);
      });
      if (cancelled) return;
      await wait(420);

      // Stage 3 — User types
      setStage(3);
      await new Promise((res) => {
        let u = 0;
        const id = setInterval(() => {
          u += 2;
          setUserChars(u);
          if (u >= fullUserQ.length) { clearInterval(id); res(); }
        }, 22);
        intervals.push(id);
      });
      if (cancelled) return;
      await wait(320);

      // Stage 4 — Thinking
      setStage(4);
      await wait(950);
      if (cancelled) return;

      // Stage 5 — AI answer (count-up + typewriter parallel)
      setStage(5);
      const cntId = setInterval(() => {
        setPct(v => {
          const nx = v + 2.6;
          if (nx >= 84.7) { clearInterval(cntId); return 84.7; }
          return nx;
        });
      }, 28);
      intervals.push(cntId);

      await new Promise((res) => {
        let a = 0;
        const id = setInterval(() => {
          a += 3;
          setAiChars(a);
          if (a >= fullAnswer.length) { clearInterval(id); res(); }
        }, 22);
        intervals.push(id);
      });
      if (cancelled) return;
      setStage(6);

      // Stage 6 — sources fade-in
      for (let i = 0; i < 4; i++) {
        await wait(220);
        if (cancelled) return;
        setSourcesShown(n => Math.max(n, i+1));
      }

      // Pause then restart
      await wait(3800);
      if (!cancelled) runOnce();
    };

    runOnce();

    return () => {
      cancelled = true;
      timers.forEach(clearTimeout);
      intervals.forEach(clearInterval);
    };
  }, [shown]);

  const userText = fullUserQ.slice(0, Math.min(userChars, fullUserQ.length));
  const aiText = fullAnswer.slice(0, Math.min(aiChars, fullAnswer.length));
  const aiDone = aiChars >= fullAnswer.length;

  const ratioModes = [
    { id: 'general', icon: 'scale', tip: 'General',     accent: 'indigo' },
    { id: 'devil',   icon: 'gavel', tip: 'Adverso',     accent: 'red' },
    { id: 'judge',   icon: 'judge', tip: 'Juez',        accent: 'amber' },
    { id: 'data',    icon: 'chart', tip: 'Datos',       accent: 'emerald' },
  ];

  return (
    <section ref={ref} id="dashboard" className="relative py-16 md:py-24 sec-indigo-tinted sec-divider-top sec-divider-bottom" data-screen-label="02 Dashboard mockup">
      <div className="max-w-7xl mx-auto px-6 md:px-10">
        <div className="max-w-3xl mx-auto text-center mb-12">
          <Eyebrow className="mb-4">Vista de Mentaly</Eyebrow>
          <h2 className="display text-[36px] md:text-[52px] leading-[1.05] text-ink-900">
            Una herramienta diseñada<br/>
            <Flourish><span className="font-serif italic font-normal text-grad-violet">para ejercer mejor.</span></Flourish>
          </h2>
        </div>

        {/* Mockup */}
        <div className={`relative rounded-3xl border border-ink-100 bg-white overflow-hidden transition-all duration-700
          shadow-[0_50px_120px_-40px_rgba(11,11,18,.25),0_8px_24px_-12px_rgba(11,11,18,.10)]
          ${shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`}>
          {/* Top bar */}
          <div className="h-9 border-b border-ink-100 flex items-center px-4 gap-2 bg-paper-100">
            <span className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]" />
            <span className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]" />
            <span className="w-2.5 h-2.5 rounded-full bg-[#28C840]" />
            <div className="ml-4 text-[11px] text-ink-400 font-mono">mentaly.es · sesión activa</div>
          </div>

          <div className="grid min-h-[540px]"
               style={{ gridTemplateColumns: 'var(--cols)' }}
               css-cols-mobile="200px 1fr">
            <style>{`
              #dashboard .grid[style*='--cols'] { --cols: 200px 1fr; }
              @media (min-width: 768px) { #dashboard .grid[style*='--cols'] { --cols: 68px 200px 1fr; } }
              @media (min-width: 1024px) { #dashboard .grid[style*='--cols'] { --cols: 68px 200px 1fr 280px; } }
            `}</style>

            {/* MODES RAIL (md+) */}
            <aside className="hidden md:flex flex-col items-center bg-paper-100/70 border-r border-ink-100 py-3 gap-1.5">
              <div className="text-[8.5px] uppercase tracking-[0.18em] text-ink-400 font-bold mb-1">Modo</div>
              {ratioModes.map((m,i) => {
                const isActive = m.id === 'general';
                const accentBg = {
                  indigo:  'bg-indigo2-500',
                  red:     'bg-red-600',
                  amber:   'bg-amber-500',
                  emerald: 'bg-emerald-500',
                }[m.accent];
                const ringBg = {
                  indigo:  'bg-indigo2-500/10 text-indigo2-600 border-indigo2-500/30',
                  red:     'bg-red-500/10 text-red-700 border-red-300',
                  amber:   'bg-amber-500/15 text-amber-700 border-amber-300',
                  emerald: 'bg-emerald-500/10 text-emerald-700 border-emerald-300',
                }[m.accent];
                return (
                  <button key={m.id}
                    title={m.tip}
                    className={`group relative w-12 px-1 py-2 rounded-lg flex flex-col items-center gap-0.5 transition-all border
                      ${isActive ? ringBg + ' shadow-[0_2px_8px_rgba(99,102,241,.18)]'
                                  : 'bg-white border-ink-100 text-ink-400 hover:bg-paper-200 hover:text-ink-700'}`}>
                    <Icon name={m.icon} className="w-4 h-4" />
                    <span className="text-[8.5px] font-semibold leading-none">{m.tip}</span>
                    {isActive && <span className={`absolute -right-1 -top-1 w-2 h-2 rounded-full ${accentBg} ring-2 ring-paper-100 animate-pulse`} />}
                  </button>
                );
              })}
              <div className="flex-1" />
              <button title="Historial" className="w-12 py-2 rounded-lg bg-white border border-ink-100 text-ink-400 hover:text-ink-700 flex flex-col items-center gap-0.5">
                <Icon name="history" className="w-4 h-4" />
                <span className="text-[8.5px] font-semibold leading-none">Hist.</span>
              </button>
            </aside>

            {/* SIDEBAR — expedientes (árbol de carpetas) */}
            <aside className="border-r border-ink-100 bg-paper-100/40 p-3">
              <div className="mb-3"><Logo size={22} /></div>
              <button className="w-full mb-3 inline-flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md bg-ink-900 text-white text-[11.5px] font-medium magnetic">
                <svg viewBox="0 0 24 24" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><path d="M12 11v6M9 14h6"/></svg>
                Nuevo expediente
              </button>
              <div className="text-[10px] uppercase tracking-wider text-ink-400 font-semibold mb-1.5 px-1">Expedientes</div>
              <ul className="space-y-1 text-[11.5px]">
                {/* Active, expanded folder */}
                <li>
                  <div className="flex items-center rounded-lg bg-white border border-ink-100 shadow-[0_1px_2px_rgba(11,11,18,.04)]">
                    <span className="w-5 h-7 flex items-center justify-center text-ink-400"><Icon name="chevron" className="w-3 h-3 rotate-90" /></span>
                    <span className="text-violet2-600 shrink-0"><svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h6a2 2 0 0 1 2 2"/><path d="M3 7v11a2 2 0 0 0 2 2h13.5a1.5 1.5 0 0 0 1.45-1.1L22 11.5H6.2a2 2 0 0 0-1.9 1.37z"/></svg></span>
                    <span className="flex-1 min-w-0 px-1.5 py-1">
                      <span className="block font-semibold text-ink-900 truncate leading-tight">García vs BBVA</span>
                      <span className="block text-[9.5px] text-ink-400 truncate leading-tight">Cláusula suelo</span>
                    </span>
                    <span className="mr-1.5 text-[9px] font-mono text-ink-400 bg-paper-100 border border-ink-100 rounded px-1.5 py-0.5">2</span>
                  </div>
                  <ul className="ml-[14px] pl-3 border-l border-ink-100 mt-1 space-y-0.5">
                    <li><div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-violet2-500/10"><span className="w-1.5 h-1.5 rounded-full bg-violet2-500" /><span className="font-semibold text-ink-900">Nulidad de la cláusula suelo</span></div></li>
                    <li><div className="flex items-center gap-2 px-2 py-1.5 rounded-md"><span className="w-1.5 h-1.5 rounded-full bg-ink-200" /><span className="text-ink-500">Borrador de demanda</span></div></li>
                    <li><div className="flex items-center gap-1.5 px-2 py-1 text-[10.5px] text-ink-400"><svg viewBox="0 0 24 24" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg> Nueva conversación</div></li>
                  </ul>
                </li>
                {/* Collapsed folders */}
                {[['Pérez J., despido','Laboral · TS 2024','3'],['Iberdrola SA','Mercantil','1'],['Rodríguez A.','Recurso apelación','2']].map((c,i)=>(
                  <li key={i}>
                    <div className="flex items-center rounded-lg hover:bg-white/70">
                      <span className="w-5 h-7 flex items-center justify-center text-ink-400"><Icon name="chevron" className="w-3 h-3" /></span>
                      <span className="text-ink-400 shrink-0"><svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7L11 5z"/></svg></span>
                      <span className="flex-1 min-w-0 px-1.5 py-1">
                        <span className="block font-medium text-ink-700 truncate leading-tight">{c[0]}</span>
                        <span className="block text-[9.5px] text-ink-400 truncate leading-tight">{c[1]}</span>
                      </span>
                      <span className="mr-1.5 text-[9px] font-mono text-ink-400 bg-paper-100 border border-ink-100 rounded px-1.5 py-0.5">{c[2]}</span>
                    </div>
                  </li>
                ))}
              </ul>
            </aside>

            {/* CHAT */}
            <div className="lg:border-r border-ink-100 flex flex-col">
              <div className="px-5 py-3.5 border-b border-ink-100 flex items-center justify-between">
                <div>
                  <div className="text-[13.5px] font-semibold text-ink-900">García vs BBVA</div>
                  <div className="text-[10.5px] text-ink-400">Cláusula suelo · escritura 23/04/2010 · 412 págs</div>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-indigo2-500/10 text-indigo2-600 border border-indigo2-500/20">
                    <span className="w-1 h-1 rounded-full bg-indigo2-500 animate-pulse" />
                    <Icon name="scale" className="w-3 h-3" /> General
                  </span>
                </div>
              </div>

              <div className="flex-1 p-5 space-y-4 overflow-hidden min-h-[300px]">
                {/* Upload + OCR banner */}
                {(stage === 1 || stage === 2) && (
                  <div className="flex items-start gap-2.5 animate-fade-up">
                    <div className="w-7 h-7 rounded-lg bg-violet2-500/10 border border-violet2-500/20 flex items-center justify-center shrink-0">
                      <Icon name={stage === 1 ? 'upload' : 'doc'} className="w-3.5 h-3.5 text-violet2-600" />
                    </div>
                    <div className="flex-1 bg-white border border-violet2-500/15 rounded-xl px-3.5 py-2.5">
                      <div className="flex items-center justify-between mb-1.5">
                        <div className="text-[12px] font-semibold text-ink-900">
                          {stage === 1 ? 'Subiendo expediente.pdf' : 'Extrayendo texto del expediente'}
                        </div>
                        <div className="text-[10.5px] text-ink-400 font-mono">
                          {stage === 1 ? `${uploadPct} %` : `pág. ${ocrPage} / 412`}
                        </div>
                      </div>
                      <div className="h-1 rounded-full bg-ink-100 overflow-hidden">
                        <div
                          className="h-full bg-gradient-to-r from-indigo2-500 to-violet2-500 transition-[width] duration-100"
                          style={{ width: stage === 1 ? `${uploadPct}%` : `${(ocrPage / 412) * 100}%` }} />
                      </div>
                      <div className="mt-2 flex items-center gap-1.5 text-[10.5px] text-ink-400">
                        {stage === 1 ? (
                          <>
                            <span className="w-1.5 h-1.5 rounded-full bg-violet2-500 animate-pulse" />
                            cifrado AES-256 · subida segura
                          </>
                        ) : (
                          <>
                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                            detectando plazos · partes · fundamentos · riesgos
                          </>
                        )}
                      </div>
                    </div>
                  </div>
                )}

                {/* User msg with typewriter */}
                {stage >= 3 && (
                  <div className="flex items-start gap-2.5 justify-end animate-fade-up">
                    <div className="max-w-[85%] bg-ink-900 text-white text-[12.5px] leading-snug rounded-2xl rounded-tr-sm px-3.5 py-2.5">
                      {userText}
                      {userChars < fullUserQ.length && <span className="inline-block w-[6px] h-[10px] bg-white align-middle animate-caret ml-0.5" />}
                    </div>
                  </div>
                )}

                {/* Thinking */}
                {stage === 4 && (
                  <div className="flex items-start gap-2.5">
                    <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-indigo2-500 to-violet2-600 flex items-center justify-center shrink-0">
                      <Dots />
                    </div>
                    <div className="text-[11.5px] text-ink-400 pt-1.5 italic">
                      Mentaly está leyendo el expediente · consultando BOE & CENDOJ…
                    </div>
                  </div>
                )}

                {/* AI answer */}
                {stage >= 5 && (
                  <div className="flex items-start gap-2.5 animate-fade-up">
                    <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-indigo2-500 to-violet2-600 flex items-center justify-center shrink-0">
                      <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 18V7l3.5 6L12 7l3.5 6L19 7v11" /></svg>
                    </div>
                    <div className="flex-1 max-w-[92%] bg-paper-100 text-ink-800 text-[12.5px] leading-relaxed rounded-2xl rounded-tl-sm px-3.5 py-3 border border-ink-100">
                      <p className="mb-2">
                        <strong className="text-ink-900">Nula por falta de transparencia material.</strong>{' '}
                        {aiText}
                        {!aiDone && <span className="inline-block w-[6px] h-[10px] bg-ink-900 align-middle animate-caret ml-0.5" />}
                      </p>
                      {aiDone && (
                        <p className="text-ink-600 text-[11.5px] animate-tilt-in">
                          Fundamentos:{' '}
                          <a href="https://www.boe.es/buscar/act.php?id=BOE-A-1889-4763&p=20200731&tn=1#a1303" target="_blank" rel="noopener noreferrer" className="text-violet2-600 hover:underline">art. 1303 CC</a>
                          {' · '}
                          <a href="https://www.poderjudicial.es" target="_blank" rel="noopener noreferrer" className="text-violet2-600 hover:underline">STS 367/2017</a>
                          {' · '}
                          <a href="https://eur-lex.europa.eu/legal-content/ES/TXT/?uri=CELEX:62015CJ0154" target="_blank" rel="noopener noreferrer" className="text-violet2-600 hover:underline">STJUE C-154/15</a>
                          {' · expediente p. 12, 47, 218.'}
                        </p>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <div className="px-5 py-3 border-t border-ink-100 flex items-center gap-2">
                <button className="w-8 h-8 rounded-md border border-ink-100 bg-white flex items-center justify-center text-ink-400 hover:text-ink-700">
                  <Icon name="paperclip" className="w-4 h-4" />
                </button>
                <div className="flex-1 h-9 rounded-md border border-ink-100 bg-paper-100 px-3 flex items-center text-[11.5px] text-ink-400">
                  Pregunta sobre este expediente…
                </div>
                <button className="w-9 h-9 rounded-md btn-ink flex items-center justify-center magnetic">
                  <Icon name="arrowUp" className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* SOURCES (lg+) */}
            <aside className="hidden lg:flex flex-col bg-paper-100/40">
              <div className="px-4 py-3.5 border-b border-ink-100">
                <div className="text-[10.5px] uppercase tracking-wider text-ink-400 font-semibold">Fuentes citadas</div>
                <div className="text-[12px] text-ink-700 font-medium">
                  {sourcesShown}/4 referencias verificadas
                </div>
              </div>
              <div className="p-3 space-y-2 flex-1 overflow-hidden">
                {[
                  { tag: 'BOE',    name: 'CC · art. 1303',     desc: 'Restitución recíproca tras nulidad.',                  color: 'blue',     href: 'https://www.boe.es/buscar/act.php?id=BOE-A-1889-4763' },
                  { tag: 'CENDOJ', name: 'STS 241/2013',       desc: 'Doble control de transparencia · Pleno 9/05/2013.',     color: 'violet',   href: 'https://www.poderjudicial.es' },
                  { tag: 'STJUE',  name: 'C-154/15 Gutiérrez', desc: 'Efecto retroactivo de cláusulas abusivas.',             color: 'amber',    href: 'https://eur-lex.europa.eu/legal-content/ES/TXT/?uri=CELEX:62015CJ0154' },
                  { tag: 'EXPED.', name: 'Página 218 §3',      desc: 'Ausencia de simulación TAE.',                           color: 'emerald',  href: null },
                ].map((s,i) => {
                  const isVisible = i < sourcesShown;
                  const isLink = !!s.href;
                  const Comp = isLink ? 'a' : 'div';
                  const props = isLink ? { href: s.href, target: '_blank', rel: 'noopener noreferrer' } : {};
                  return (
                    <Comp key={i} {...props}
                      className={`ext-card block rounded-lg bg-white border border-ink-100 p-2.5 hover:border-violet2-500/40 transition-all cursor-pointer relative
                        ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
                      style={{ transition: 'opacity .5s ease, transform .5s ease, border-color .25s' }}>
                      <div className="flex items-center justify-between mb-1">
                        <span className={`text-[9.5px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded ${
                          s.color === 'blue' ? 'bg-blue-100 text-blue-700' :
                          s.color === 'violet' ? 'bg-violet2-500/15 text-violet2-700' :
                          s.color === 'amber' ? 'bg-amber-100 text-amber-700' :
                          'bg-emerald-100 text-emerald-700'
                        }`}>{s.tag}</span>
                        {isLink && <Icon name="arrowUp" className="ext-arrow w-3 h-3 text-ink-400 rotate-45" />}
                      </div>
                      <div className="text-[11.5px] font-semibold text-ink-900">{s.name}</div>
                      <div className="text-[10.5px] text-ink-500 mt-0.5">{s.desc}</div>
                    </Comp>
                  );
                })}
              </div>
            </aside>
          </div>
        </div>

        <p className="text-center text-[12px] text-ink-400 mt-4 italic">Vista real del asistente — diseño preliminar</p>
      </div>
    </section>
  );
}

/* ============= LOGO CLOUD — Fuentes oficiales (dark band, real links) ============= */
function LogoBOE({ className="" })   { return (
  <svg viewBox="0 0 56 32" className={className} fill="none" aria-hidden="true">
    {/* shield-seal style */}
    <path d="M8 6 L8 20 Q8 26 14 28 L42 28 Q48 26 48 20 L48 6 Z" stroke="currentColor" strokeWidth="1.6" />
    <path d="M16 10 L16 22 M22 10 L22 22 M28 10 L28 22 M34 10 L34 22 M40 10 L40 22" stroke="currentColor" strokeWidth="1.1" opacity=".55" />
    <circle cx="28" cy="16" r="3" stroke="currentColor" strokeWidth="1.4" fill="currentColor" fillOpacity=".15"/>
  </svg>
);}
function LogoCENDOJ({ className="" }){ return (
  <svg viewBox="0 0 56 32" className={className} fill="none" aria-hidden="true">
    {/* balance scale */}
    <path d="M28 6 L28 26" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M14 26 L42 26" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M28 8 L16 14 L22 22 L34 22 L40 14 Z" stroke="currentColor" strokeWidth="1.4" fill="currentColor" fillOpacity=".08"/>
    <circle cx="28" cy="8" r="1.8" fill="currentColor"/>
  </svg>
);}
function LogoEURLex({ className="" }){
  const stars = Array.from({length: 12}).map((_,i) => {
    const a = (i/12) * Math.PI*2 - Math.PI/2;
    const r = 11;
    return { x: 28 + Math.cos(a)*r, y: 16 + Math.sin(a)*r };
  });
  return (
    <svg viewBox="0 0 56 32" className={className} fill="none" aria-hidden="true">
      <circle cx="28" cy="16" r="13" stroke="currentColor" strokeWidth="1.4" opacity=".35"/>
      {stars.map((s,i) => <circle key={i} cx={s.x} cy={s.y} r="1.4" fill="currentColor"/>)}
    </svg>
  );
}
function LogoTC({ className="" })    { return (
  <svg viewBox="0 0 56 32" className={className} fill="none" aria-hidden="true">
    {/* doric column with capital */}
    <rect x="14" y="6"  width="28" height="3" stroke="currentColor" strokeWidth="1.4"/>
    <rect x="17" y="9"  width="22" height="2" stroke="currentColor" strokeWidth="1.2" opacity=".6"/>
    <rect x="19" y="11" width="18" height="14" stroke="currentColor" strokeWidth="1.2" fill="currentColor" fillOpacity=".08"/>
    <path d="M21 12 L21 25 M25 12 L25 25 M29 12 L29 25 M33 12 L33 25" stroke="currentColor" strokeWidth=".9" opacity=".4"/>
    <rect x="14" y="25" width="28" height="3" stroke="currentColor" strokeWidth="1.4"/>
  </svg>
);}
function LogoMJ({ className="" })    { return (
  <svg viewBox="0 0 56 32" className={className} fill="none" aria-hidden="true">
    {/* lady justice scales with blindfold-band */}
    <path d="M14 12 Q22 6 28 6 Q34 6 42 12" stroke="currentColor" strokeWidth="1.4"/>
    <circle cx="18" cy="13" r="2.4" stroke="currentColor" strokeWidth="1.2" fill="currentColor" fillOpacity=".1"/>
    <circle cx="38" cy="13" r="2.4" stroke="currentColor" strokeWidth="1.2" fill="currentColor" fillOpacity=".1"/>
    <path d="M28 6 L28 24" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M22 24 L34 24" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    <path d="M24 26 L32 26" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);}

const LOGO_ITEMS = [
  { name: 'BOE.es',           sub: 'Boletín Oficial del Estado',     href: 'https://www.boe.es',                                  Mark: LogoBOE },
  { name: 'CENDOJ',           sub: 'Centro de Doc. Judicial',       href: 'https://www.poderjudicial.es',                        Mark: LogoCENDOJ },
  { name: 'EUR-Lex',          sub: 'Derecho de la Unión Europea',   href: 'https://eur-lex.europa.eu',                           Mark: LogoEURLex },
  { name: 'T. Constitucional',sub: 'Tribunal Constitucional',       href: 'https://www.tribunalconstitucional.es',               Mark: LogoTC },
  { name: 'Mª de Justicia',   sub: 'Ministerio de Justicia',        href: 'https://www.mjusticia.gob.es',                        Mark: LogoMJ },
];

function LogoCloud() {
  return (
    <section className="relative" data-screen-label="03 Fuentes oficiales">
      <div className="relative bg-ink-900 text-white border-y border-ink-800 overflow-hidden">
        {/* subtle dot pattern */}
        <div className="absolute inset-0 dot-grid-dark opacity-30" />
        {/* corner glow */}
        <div className="absolute -top-32 -left-20 w-96 h-96 rounded-full bg-indigo2-600/20 blur-3xl" />
        <div className="absolute -bottom-32 -right-20 w-96 h-96 rounded-full bg-violet2-600/20 blur-3xl" />

        <div className="relative max-w-7xl mx-auto px-6 md:px-10 py-16 md:py-20">
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 text-[10.5px] uppercase tracking-[0.32em] text-ink-300 font-semibold">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
              Conexión en tiempo real con bases de datos oficiales
            </div>
          </div>

          <StaggerGroup className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
            {LOGO_ITEMS.map(it => (
              <a key={it.name} href={it.href} target="_blank" rel="noopener noreferrer"
                 className="ext-card group relative rounded-xl border border-white/[0.08] bg-white/[0.025] hover:bg-white/[0.05] hover:border-white/15 backdrop-blur-sm transition-all px-5 py-5 flex flex-col items-center justify-center text-center min-h-[124px]">
                <it.Mark className="w-12 h-7 mb-3 text-white opacity-80 group-hover:opacity-100 transition-opacity" />
                <div className="text-[14.5px] font-semibold tracking-tight text-white">{it.name}</div>
                <div className="text-[10.5px] text-ink-300 mt-0.5">{it.sub}</div>
                <Icon name="arrowUp" className="ext-arrow absolute top-3 right-3 w-3.5 h-3.5 text-white/60" />
              </a>
            ))}
          </StaggerGroup>

          <p className="text-center text-[11.5px] text-ink-300 mt-6">
            Cada respuesta cita la fuente. Haz clic en cualquier organismo para visitar su web oficial.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============= BENEFICIOS — 4 cards ============= */
function Beneficios() {
  return (
    <Section
      id="beneficios"
      screen="04 Beneficios"
      className="sec-white sec-divider-top sec-divider-bottom"
      eyebrow="Cuatro razones para empezar"
      title={<>Tareas que te ahorran <Flourish><span className="font-serif italic font-normal text-grad-violet">horas</span></Flourish> esta semana.</>}
      kicker="No es un asistente más. Es un cambio en cómo abordas cada expediente."
    >
      <StaggerGroup className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
        <BeneCard
          title="Lee 10.000 páginas"
          desc="Carga un expediente entero y Mentaly extrae plazos, partes, fundamentos y riesgos en segundos."
          visual={<MiniScan />}
        />
        <BeneCard
          title="Cita la fuente. Siempre."
          desc="Cada respuesta enlaza a BOE, CENDOJ, STJUE o al propio expediente. Cero alucinaciones."
          visual={<MiniSources />}
        />
        <BeneCard
          title="4 perspectivas, una respuesta"
          desc="General, Diablo, Juez y Probabilidades. Cuatro abogados senior trabajando contigo."
          visual={<MiniModes />}
        />
        <BeneCard
          title="Privado por diseño"
          desc="Datos cifrados AES-256 en servidores europeos. Nunca entrenamos modelos con tus expedientes."
          visual={<MiniShield />}
        />
      </StaggerGroup>
    </Section>
  );
}

function BeneCard({ title, desc, visual }) {
  return (
    <div className="card-elev tilt overflow-hidden flex flex-col">
      <div className="relative h-44 bg-paper-100 border-b border-ink-100 overflow-hidden">
        {visual}
      </div>
      <div className="p-5">
        <div className="text-[17px] font-semibold tracking-tight text-ink-900">{title}</div>
        <div className="text-[13.5px] text-ink-500 mt-1.5 leading-relaxed">{desc}</div>
      </div>
    </div>
  );
}

function MiniScan() {
  const lines = [
    { w: '90%' }, { w: '78%', hi: true, tag: 'plazo' }, { w: '85%' }, { w: '62%' },
    { w: '88%', hi: true, tag: 'parte' }, { w: '72%' }, { w: '80%', hi: true, tag: 'riesgo' }, { w: '64%' },
  ];
  return (
    <div className="absolute inset-0 p-6 flex items-center justify-center">
      <div className="w-full max-w-[180px] bg-white rounded-md shadow-md border border-ink-100 overflow-hidden">
        <div className="px-3 py-2 border-b border-ink-100 flex justify-between">
          <span className="text-[8px] uppercase tracking-wider text-ink-400 font-semibold">Exp. 2024/0418</span>
          <span className="text-[8px] text-ink-300 font-mono">p.218</span>
        </div>
        <div className="px-3 py-3 space-y-[5px] relative">
          {lines.map((l,i) => (
            <div key={i} className="relative">
              <div style={{ width: l.w }} className={`h-[4px] rounded-full ${l.hi ? 'bg-violet2-500/70' : 'bg-ink-100'}`} />
              {l.hi && <span className="absolute -right-1 top-1/2 -translate-y-1/2 translate-x-full text-[6.5px] uppercase tracking-wider font-bold text-violet2-700 bg-violet2-500/10 px-1 rounded">{l.tag}</span>}
            </div>
          ))}
          <div className="absolute left-0 right-0 top-2 h-[1.5px] bg-gradient-to-r from-transparent via-violet2-500 to-transparent shadow-[0_0_12px_#7C3AED] animate-scan-line" />
        </div>
      </div>
    </div>
  );
}

function MiniSources() {
  const items = [
    { tag: 'BOE',    name: 'CC art. 1303',  c: 'blue' },
    { tag: 'CENDOJ', name: 'STS 241/2013',  c: 'violet' },
    { tag: 'STJUE',  name: 'C-154/15',      c: 'amber' },
  ];
  return (
    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 px-6 overflow-hidden">
      <div className="sweep-down" />
      {items.map((s,i) => (
        <div key={i}
          className="relative w-full max-w-[200px] bg-white border border-ink-100 rounded-md p-2 flex items-center gap-2 shadow-sm"
          style={{ animation: 'tilt-in .6s ease-out both', animationDelay: `${i * 0.15}s` }}>
          <span className={`text-[8.5px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded ${
            s.c === 'blue' ? 'bg-blue-100 text-blue-700' :
            s.c === 'violet' ? 'bg-violet2-500/15 text-violet2-700' :
            'bg-amber-100 text-amber-700'}`}>{s.tag}</span>
          <span className="text-[10.5px] font-medium text-ink-800">{s.name}</span>
          <span className="ml-auto pop-in" style={{ animationDelay: `${i * 1.6}s` }}>
            <Icon name="check" className="w-3 h-3 text-emerald-600" />
          </span>
        </div>
      ))}
    </div>
  );
}

function MiniModes() {
  const modes = [
    { l: 'General',  c: 'indigo' },
    { l: 'Diablo',   c: 'red' },
    { l: 'Juez',     c: 'amber' },
    { l: 'Datos',    c: 'emerald' },
  ];
  return (
    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 px-6">
      <div className="flex flex-wrap gap-1.5 justify-center max-w-[200px]">
        {modes.map((m,i) => (
          <span key={i} className={`text-[10px] font-medium px-2 py-1 rounded-full transition-all ${
            m.c === 'indigo' ? 'bg-indigo2-500 text-white shadow-[0_4px_12px_rgba(99,102,241,.35)]' :
            m.c === 'red' ? 'bg-white text-red-700 border border-red-200' :
            m.c === 'amber' ? 'bg-white text-amber-700 border border-amber-300' :
            'bg-white text-emerald-700 border border-emerald-200'}`}>{m.l}</span>
        ))}
      </div>
      <div className="w-full max-w-[210px] bg-white rounded-md border border-ink-100 p-2 mt-1 overflow-hidden">
        <div className="text-[9px] text-ink-400 mb-1">Modo General</div>
        <div className="space-y-1">
          <div className="h-[3px] rounded-full bg-ink-100 w-[90%]" />
          <div className="h-[3px] rounded-full bg-ink-100 w-[78%]" />
          <div className="h-[3px] rounded-full bg-gradient-to-r from-indigo2-500 to-violet2-500 bar-fill" style={{ width: '100%' }} />
        </div>
      </div>
    </div>
  );
}

function MiniShield() {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <div className="relative w-24 h-24">
        {/* spinning ring */}
        <div className="absolute inset-0 rounded-full ring-spin"
             style={{ background: 'conic-gradient(from 0deg, rgba(16,185,129,0), rgba(16,185,129,.55) 30%, rgba(16,185,129,0) 60%)' }} />
        <div className="absolute inset-[3px] rounded-full bg-paper-100" />
        {/* pulse rings */}
        <div className="absolute inset-0 rounded-full bg-emerald-500/20 animate-pulse-ring" style={{animationDelay: '0s'}} />
        <div className="absolute inset-0 rounded-full bg-emerald-500/15 animate-pulse-ring" style={{animationDelay: '.6s'}} />
        <div className="absolute inset-[8px] rounded-full bg-white border border-ink-100 shadow-lg flex items-center justify-center">
          <Icon name="shield" className="w-9 h-9 text-emerald-600" stroke={1.5} />
        </div>
      </div>
      <div className="absolute bottom-4 inset-x-0 text-center text-[10px] text-ink-400 font-mono uppercase tracking-wider">RGPD UE · AES-256</div>
    </div>
  );
}

Object.assign(window, { Navbar, Hero, DashboardMockup, LogoCloud, Beneficios, MODES });