/* features.jsx — Improved 4 Modes (2x2 cards) + Comparativa (Prudencia-style 2 col) */

/* ============================== 4 MODES — improved ============================== */
const MODE_DATA = [
  {
    id: 'general',
    name: 'Modo General',
    icon: 'scale',
    color: 'indigo',
    when: 'Cuando necesitas la respuesta jurídica directa, fundamentada y aplicable.',
    q: '¿Cuál es el plazo de prescripción de una acción reivindicatoria sobre bien inmueble?',
    a: `**Treinta años** (art. 1963 CC). Plazo continuo, no susceptible de interrupción salvo por la propia interposición de la demanda.

**Fundamentos:** art. 1957 y 1963 CC · STS 489/2022, Sala 1ª.`,
    bullets: ['Citas verificadas BOE/CENDOJ', 'Estructura: respuesta → fundamentos → aplicación', 'Tono de abogado senior español'],
  },
  {
    id: 'devil',
    name: 'Análisis Adverso',
    icon: 'gavel',
    color: 'red',
    when: 'Antes de presentar un escrito. Para que nadie demuela tu argumento antes que el contrario.',
    q: '¿Es sólido mi recurso por error en la valoración de la prueba?',
    a: `**No del todo.** El TS exige error *patente* — y aquí el juzgador motivó la prueba (STS 412/2024, FJ 4º).

**Riesgo:** la SAP Madrid 89/2023 ha superado tu cita de 2019. Refuerza con motivo procesal o retira ese motivo.`,
    bullets: ['Te anticipa los argumentos del contrario', 'Cita jurisprudencia adversa y matizaciones', 'Identifica los puntos débiles antes del juicio'],
  },
  {
    id: 'judge',
    name: 'Pronóstico Judicial',
    icon: 'judge',
    color: 'slate',
    when: 'Cuando necesitas saber cómo lo verá el tribunal y qué argumentos pesarán más.',
    q: 'Despido improcedente · 8 años de antigüedad · sin causa probada.',
    a: `**Pronóstico:** *improcedente con altísima probabilidad.*

**Peso alto:** falta de carta detallada (art. 55.1 ET); ausencia de prueba sobre la causa alegada.

**Indemnización estimada:** 33 días × 8 años = 264 días.`,
    bullets: ['Pondera pruebas como un magistrado de apelación', 'Aplica criterios del Pleno y de la Sala', 'Devuelve pronóstico cuantificado'],
  },
  {
    id: 'data',
    name: 'Probabilidades',
    icon: 'chart',
    color: 'emerald',
    when: 'Para decidir si entrar en juicio o transigir. Datos en lugar de intuición.',
    q: 'Nulidad de cláusula suelo · banco grande · contrato 2010.',
    a: `**Estimación de éxito: 84,7 %** sobre 1.412 sentencias análogas (2019-2025).

- Estimación íntegra: 78,2 %
- Costas a tu favor: 71 %
- Tiempo medio: 11,3 meses`,
    bullets: ['Análisis estadístico sobre miles de sentencias', 'Probabilidad de éxito, costas y tiempo medio', 'Indica qué refuerzos elevan la estimación'],
  },
];

const COLOR_MAP = {
  indigo:  { surface: 'bg-indigo2-500/[0.08]', border: 'border-indigo2-500/30', accent: 'text-indigo2-600',  iconBg: 'bg-indigo2-500/15',  pill: 'bg-indigo2-500/10 text-indigo2-700 border-indigo2-500/25',  dot: 'bg-indigo2-500',  ring: 'shadow-[0_0_0_1px_rgba(99,102,241,.18),0_18px_50px_-20px_rgba(99,102,241,.30)]' },
  red:     { surface: 'bg-red-500/[0.08]',     border: 'border-red-700/30',    accent: 'text-red-700',      iconBg: 'bg-red-600/15',      pill: 'bg-red-100 text-red-700 border-red-200',                          dot: 'bg-red-600',     ring: 'shadow-[0_0_0_1px_rgba(185,28,28,.18),0_18px_50px_-20px_rgba(185,28,28,.28)]' },
  slate:   { surface: 'bg-slate-900/[0.05]',   border: 'border-slate-700/30',  accent: 'text-slate-800',    iconBg: 'bg-slate-900/10',    pill: 'bg-slate-200 text-slate-800 border-slate-300',                    dot: 'bg-slate-700',   ring: 'shadow-[0_0_0_1px_rgba(30,41,59,.20),0_18px_50px_-20px_rgba(30,41,59,.28)]' },
  emerald: { surface: 'bg-emerald-500/[0.08]', border: 'border-emerald-500/30', accent: 'text-emerald-700',  iconBg: 'bg-emerald-500/15',  pill: 'bg-emerald-100 text-emerald-700 border-emerald-200',              dot: 'bg-emerald-500', ring: 'shadow-[0_0_0_1px_rgba(16,185,129,.18),0_18px_50px_-20px_rgba(16,185,129,.28)]' },
};

function ModesGrid({ onLoginRequired }) {
  return (
    <section id="modos" data-screen-label="05 Cuatro modos"
      className="relative py-16 md:py-24 sec-tinted sec-divider-top sec-divider-bottom">
      <div className="max-w-7xl mx-auto px-6 md:px-10">
        <div className="grid md:grid-cols-[1fr_1.4fr] md:gap-10 lg:gap-16">
          {/* LEFT — sticky narrative */}
          <div className="md:sticky md:top-24 md:self-start md:max-h-screen md:py-8">
            <Eyebrow className="mb-4">Cuatro modos · una sola IA</Eyebrow>
            <h2 className="display text-[40px] md:text-[52px] lg:text-[60px] leading-[1.02] text-ink-900">
              Una IA generalista te da una respuesta.{' '}
              <Flourish><span className="font-serif italic font-normal text-grad-violet">Mentaly te da cuatro.</span></Flourish>
            </h2>
            <p className="mt-5 text-[16px] text-ink-500 leading-relaxed max-w-md">
              Un equipo de cuatro especialistas que razona, ataca, defiende y cuantifica — en paralelo.
            </p>

            {/* Mini directory — clickable mode chips */}
            <ul className="mt-8 space-y-2 hidden md:block">
              {MODE_DATA.map((m, i) => {
                const c = COLOR_MAP[m.color];
                return (
                  <li key={m.id} className="flex items-center gap-3 text-[13px] text-ink-600">
                    <span className="font-mono text-[11px] text-ink-400 w-6">{String(i+1).padStart(2,'0')}</span>
                    <span className={`w-2 h-2 rounded-full ${c.dot}`} />
                    <span className="font-medium text-ink-800">{m.name}</span>
                  </li>
                );
              })}
            </ul>

            <p className="mt-8 text-[12px] text-ink-400 hidden md:block">
              ↓ Scroll para explorar cada modo
            </p>
          </div>

          {/* RIGHT — stacked sticky cards */}
          <div className="relative mt-8 md:mt-0" style={{ perspective: '1200px' }}>
            <div className="space-y-5 md:space-y-0">
              {MODE_DATA.map((m, i) => (
                <div key={m.id}
                  className="md:sticky"
                  style={{
                    top: `${88 + i * 18}px`,
                    zIndex: i + 1,
                    paddingBottom: i < MODE_DATA.length - 1 ? '24px' : '0',
                  }}>
                  <ModeCard m={m} idx={i} onClick={() => onLoginRequired('', m.id)} />
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-10 md:mt-16 text-center">
          <p className="text-[13px] text-ink-400">
            Mentaly elige el modo automáticamente según tu consulta — o lo pides tú.
          </p>
        </div>
      </div>
    </section>
  );
}

function ModeCard({ m, idx, onClick }) {
  const c = COLOR_MAP[m.color];
  const num = String(idx + 1).padStart(2, '0');
  return (
    <article className={`relative bg-white border ${c.border} rounded-2xl overflow-hidden tilt group ${c.ring}`}>
      {/* Top — bold colored badge area */}
      <div className={`relative ${c.surface} overflow-hidden`}>
        <div className="absolute inset-0 pointer-events-none">
          <div className={`absolute -right-6 -bottom-6 ${c.accent} opacity-[0.10]`}>
            <Icon name={m.icon} className="w-44 h-44" stroke={1.1} />
          </div>
        </div>
        <div className="relative px-7 pt-6 pb-5 flex items-start gap-4">
          <div className={`shrink-0 w-12 h-12 rounded-xl ${c.iconBg} ${c.accent} flex items-center justify-center border ${c.border}`}>
            <Icon name={m.icon} className="w-6 h-6" stroke={1.5} />
          </div>
          <div className="flex-1 min-w-0">
            <div className={`inline-flex items-center gap-2 text-[10.5px] uppercase tracking-[0.22em] font-semibold ${c.accent} mb-2`}>
              <span className={`w-1.5 h-1.5 rounded-full ${c.dot}`} />
              Modo · {num}
            </div>
            <h3 className="display text-[26px] md:text-[30px] leading-[1.05] text-ink-900">{m.name}</h3>
          </div>
        </div>
        <div className="relative px-7 pb-5">
          <p className="text-[13.5px] text-ink-600 leading-relaxed">{m.when}</p>
        </div>
      </div>

      {/* Bottom — inline example + bullets + CTA */}
      <div className="px-7 py-6 bg-white">
        <div className={`rounded-lg border ${c.border} bg-paper-50 p-3.5 mb-5`}>
          <div className="flex items-start gap-2 text-[12.5px] text-ink-700 leading-snug font-medium">
            <Icon name="msgs" className={`w-3.5 h-3.5 mt-0.5 ${c.accent} shrink-0`} />
            <span>“{m.q}”</span>
          </div>
          <div className="mt-3 pt-3 border-t border-ink-100 text-[12.5px] text-ink-700 leading-relaxed">
            <AnswerBody text={m.a} />
          </div>
        </div>

        <ul className="space-y-1.5 mb-5">
          {m.bullets.map((b, i) => (
            <li key={i} className="flex items-center gap-2 text-[12.5px] text-ink-500">
              <Icon name="check" className={`w-3.5 h-3.5 ${c.accent}`} />
              {b}
            </li>
          ))}
        </ul>

        <div className="flex items-center justify-between">
          <button onClick={onClick}
            className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-ink-900 hover:gap-2.5 transition-all magnetic">
            Probar {m.name.toLowerCase()} <Icon name="arrow" className="w-3.5 h-3.5" />
          </button>
          <span className="text-[11px] text-ink-400">Requiere cuenta · gratis</span>
        </div>
      </div>
    </article>
  );
}

/* ============================== COMPARATIVA — Prudencia style ============================== */
function Comparativa() {
  return (
    <Section
      id="comparativa"
      screen="06 Comparativa"
      className="sec-hero-bg sec-divider-top sec-divider-bottom"
      eyebrow="Por qué Mentaly"
      title={<>No todas las IAs legales sirven para el <Flourish><span className="font-serif italic font-normal text-grad-violet">mismo trabajo.</span></Flourish></>}
      kicker="La mayoría de herramientas de IA jurídica generan texto rápido. Pero el trabajo jurídico real no empieza por escribir: empieza por analizar — por detectar lo que falta, lo que puede fallar, lo que se sostiene y lo que no."
    >
      <StaggerGroup className="grid md:grid-cols-2 gap-5 max-w-5xl">
        {/* Left — others */}
        <div className="card tilt p-8 md:p-10 bg-paper-100/60">
          <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-white border border-ink-100 text-[11px] font-semibold text-ink-500 uppercase tracking-wider mb-6">
            Otras IAs legales
          </div>
          <ul className="space-y-5">
            <CompareItem icon="x" tone="muted"
              title="Generan texto a partir de plantillas"
              desc="Producen borradores genéricos que cualquier abogado debe corregir." />
            <CompareItem icon="x" tone="muted"
              title="Devuelven respuestas genéricas"
              desc="Sin distinguir la jurisdicción, el supuesto procesal ni la materia." />
            <CompareItem icon="x" tone="muted"
              title="No distinguen lo aplicable de lo irrelevante"
              desc="Mezclan jurisprudencia obsoleta y normativa derogada con la vigente." />
          </ul>
        </div>

        {/* Right — Mentaly (dark — flips the contrast) */}
        <div className="relative tilt p-8 md:p-10 rounded-2xl overflow-hidden bg-ink-900 text-white border border-ink-700 shadow-[0_30px_80px_-30px_rgba(11,11,18,.5)]">
          <div className="absolute -top-32 -right-32 w-80 h-80 rounded-full bg-violet2-500/25 blur-3xl pointer-events-none" />
          <div className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full bg-indigo2-500/15 blur-3xl pointer-events-none" />
          <div className="relative">
            <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-violet2-500/20 border border-violet2-500/40 text-[11px] font-semibold text-violet2-300 uppercase tracking-wider mb-6">
              <span className="w-1.5 h-1.5 rounded-full bg-violet2-400 animate-pulse" />
              Mentaly
            </div>
            <ul className="space-y-5">
              <CompareItem icon="check" tone="dark"
                title="Analiza antes de redactar"
                desc="Extrae partes, plazos y fundamentos del expediente antes de proponer nada." />
              <CompareItem icon="check" tone="dark"
                title="Señala riesgos y contradicciones"
                desc="Detecta lo que falta, lo que puede fallar y lo que ya está superado por el TS." />
              <CompareItem icon="check" tone="dark"
                title="Distingue lo relevante de cada caso"
                desc="Citas verificadas BOE/CENDOJ y filtrado por jurisdicción y materia." />
            </ul>
          </div>
        </div>
      </StaggerGroup>

      {/* Closing line */}
      <div className="mt-12 max-w-3xl">
        <p className="display text-[24px] md:text-[32px] leading-[1.2] text-ink-900">
          <Flourish><span className="font-serif italic font-normal text-grad-violet">Mentaly no automatiza el juicio.</span></Flourish>{' '}
          <span className="text-ink-700">Ayuda a ejercerlo mejor.</span>
        </p>
      </div>
    </Section>
  );
}

function CompareItem({ icon, title, desc, tone = 'muted' }) {
  const dark = tone === 'dark';
  const toneCls = tone === 'violet'
    ? 'bg-violet2-500/15 text-violet2-600 border-violet2-500/25'
    : dark
      ? 'bg-emerald-500/20 text-emerald-300 border-emerald-400/40'
      : 'bg-ink-100 text-ink-400 border-ink-200';
  const titleCls = dark ? 'text-white' : tone === 'violet' ? 'text-ink-900' : 'text-ink-700';
  const descCls  = dark ? 'text-ink-300' : tone === 'violet' ? 'text-ink-500' : 'text-ink-400';
  return (
    <li className="flex items-start gap-3.5">
      <div className={`w-7 h-7 rounded-full border ${toneCls} flex items-center justify-center shrink-0 mt-0.5`}>
        <Icon name={icon} className="w-3.5 h-3.5" />
      </div>
      <div>
        <div className={`text-[15px] font-semibold ${titleCls}`}>{title}</div>
        <div className={`text-[13.5px] mt-1 leading-relaxed ${descCls}`}>{desc}</div>
      </div>
    </li>
  );
}

Object.assign(window, { ModesGrid, Comparativa, MODE_DATA });