/* landing.jsx — YellowBlock web comercial (Dirección C · Brillo) */
const { useState, useEffect } = React;

const fmt = (n) => n.toLocaleString('es-MX');

/* ───────────── NAV ───────────── */
const NAV_LINKS = [
  ['#producto', 'Producto'],
  ['#proceso', 'Cómo funciona'],
  ['#verticales', 'Verticales'],
  ['#precios', 'Precios'],
  ['#seguridad', 'Seguridad'],
];
function Nav({ audience }) {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setSolid(window.scrollY > 20);
    window.addEventListener('scroll', on); on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <nav className={'lp-nav' + (solid || open ? ' solid' : '')}>
      <div className="lp-wrap lp-nav-in">
        <Logo size={26} />
        <div className="lp-nav-links">
          {NAV_LINKS.map(([href, label]) => <a key={href} href={href}>{label}</a>)}
        </div>
        <div className="lp-nav-actions">
          <span className="link">Iniciar sesión</span>
          <a className="lp-btn lp-btn-yellow lp-nav-cta" href="#analiza" style={{ padding: '10px 16px', fontSize: 14 }}>Analiza tu inmueble</a>
          <button className="lp-burger" aria-label={open ? 'Cerrar menú' : 'Abrir menú'} aria-expanded={open} onClick={() => setOpen(!open)}>
            <Icon name={open ? 'close' : 'menu'} size={20} />
          </button>
        </div>
      </div>
      <div className={'lp-mobile-menu' + (open ? ' open' : '')}>
        {NAV_LINKS.map(([href, label]) => (
          <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
        ))}
        <div className="lp-mobile-actions">
          <span className="link" onClick={() => setOpen(false)}>Iniciar sesión</span>
          <a className="lp-btn lp-btn-yellow lp-btn-lg" href="#analiza" onClick={() => setOpen(false)} style={{ width: '100%' }}><Icon name="shieldcheck" size={18} /> Analiza tu inmueble</a>
        </div>
      </div>
    </nav>
  );
}

/* ───────────── HERO ───────────── */
const HERO = {
  anfitrion: {
    h1a: 'Opera tu Airbnb', h1b: 'con certeza, no con miedo.',
    lead: 'Dejamos de adivinar si cumples. YellowBlock analiza tu inmueble, te dice con claridad qué exige tu zona y te deja inscrito y en regla — con evidencia que aguanta cualquier revisión.',
  },
  operador: {
    h1a: 'Cumplimiento claro', h1b: 'para todo tu portafolio.',
    lead: 'Cada inmueble con su dictamen, su expediente y su evidencia sellada. Sabes exactamente dónde estás parado en cada propiedad — y nosotros nos encargamos de los trámites manuales.',
  },
};

function Hero({ audience, setAudience }) {
  const c = HERO[audience];
  return (
    <section className="lp-hero">
      <div className="lp-hero-glow" />
      <div className="lp-wrap lp-hero-grid">
        <div>
          <div className="lp-toggle" style={{ marginBottom: 24 }}>
            <button className={audience === 'anfitrion' ? 'on' : ''} onClick={() => setAudience('anfitrion')}>Soy anfitrión</button>
            <button className={audience === 'operador' ? 'on' : ''} onClick={() => setAudience('operador')}>Soy operador</button>
          </div>
          <h1 className="lp-h1">{c.h1a}<br /><span style={{ color: 'var(--yb-yellow-deep)' }}>{c.h1b}</span></h1>
          <p className="lp-lead" style={{ marginTop: 22, maxWidth: 520 }}>{c.lead}</p>
          <div className="lp-hero-cta">
            <a className="lp-btn lp-btn-yellow lp-btn-lg" href="#precios"><Icon name="shieldcheck" size={18} /> Analiza tu inmueble</a>
            <a className="lp-btn lp-btn-ghost lp-btn-lg" href="#proceso"><Icon name="chevright" size={17} /> Cómo te damos certeza</a>
          </div>
          <div className="lp-hero-note"><Icon name="shieldcheck" size={16} style={{ color: 'var(--c-emerald)' }} /> Dictamen claro · Evidencia con sello NOM-151 · Acompañamiento humano</div>
        </div>
        <HeroShot />
      </div>
    </section>
  );
}

function HeroShot() {
  return (
    <div className="lp-shot">
      <div className="lp-shot-card">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)' }}><Icon name="building" size={19} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 14.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Depto. 402 · Torre Insignia</div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>Del Valle, Benito Juárez</div>
          </div>
          <span className="badge badge-missing"><span className="dot" />En proceso</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '6px 0 16px' }}>
          <Ring value={78} size={120} thick={12} track="var(--surface-2)" color="var(--yb-yellow-deep)">
            <span className="num" style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 800 }}>78<span style={{ fontSize: 15 }}>%</span></span>
            <span style={{ fontSize: 10, color: 'var(--muted)' }}>cumplimiento</span>
          </Ring>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 11 }}>
            {[['Documentación', 92, 'var(--c-emerald)'], ['Licencias', 70, 'var(--c-amber)'], ['Fiscal', 64, 'var(--c-amber)']].map(([l, v, col]) => (
              <div key={l}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                  <span style={{ color: 'var(--muted)', fontWeight: 500 }}>{l}</span><span className="num" style={{ fontWeight: 700 }}>{v}%</span>
                </div>
                <div style={{ height: 5, borderRadius: 3, background: 'var(--surface-2)', overflow: 'hidden' }}><div style={{ width: v + '%', height: '100%', background: col, borderRadius: 3 }} /></div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: 13, borderRadius: 14, background: 'var(--surface-2)' }}>
          <span style={{ width: 10, height: 10, borderRadius: 5, background: 'var(--c-red)', flex: '0 0 auto', boxShadow: '0 0 0 4px var(--c-red-bg)' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Padrón de Anfitriones vencido</div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Caducó hace 12 días</div>
          </div>
          <span className="lp-btn lp-btn-dark" style={{ padding: '7px 12px', fontSize: 12.5, borderRadius: 9 }}>Resolver</span>
        </div>
      </div>
      <div className="lp-float" style={{ top: -44, left: 26 }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: '#1C1A17', color: 'var(--yb-yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name="sparkle" size={16} /></div>
        <div><div style={{ fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap' }}>+9 pts disponibles</div><div style={{ fontSize: 11, color: 'var(--muted)', whiteSpace: 'nowrap' }}>Sugerido por IA</div></div>
      </div>
      <div className="lp-float" style={{ bottom: -26, right: 26 }}>
        <Icon name="shieldcheck" size={20} style={{ color: 'var(--c-emerald)' }} />
        <div><div style={{ fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap' }}>Sellado NOM-151</div><div style={{ fontSize: 11, color: 'var(--muted)', whiteSpace: 'nowrap' }}>Escritura validada</div></div>
      </div>
    </div>
  );
}

/* ───────────── TRUST LOGOS ───────────── */
function Trust() {
  const logos = [['receipt', 'SAT'], ['home', 'Airbnb'], ['calendar', 'Booking'], ['pen', 'JAAK'], ['building', 'SECTUR CDMX'], ['shield', 'Notarías']];
  return (
    <section className="lp-trust">
      <div className="lp-wrap">
        <div className="lp-trust-label">Conecta con el ecosistema regulatorio y de hospedaje</div>
        <div className="lp-logos">
          {logos.map(([ic, name]) => <div key={name} className="lp-logo"><Icon name={ic} size={20} /> {name}</div>)}
        </div>
      </div>
    </section>
  );
}

/* ───────────── METRICS ───────────── */
function Metrics() {
  const m = [['100%', 'evidencia con sello NOM-151'], ['0', 'sorpresas: sabes qué pagas y por qué'], ['1 a 1', 'un dictamen claro por inmueble'], ['24/7', 'monitoreo de vencimientos']];
  return (
    <section className="lp-sec alt">
      <div className="lp-wrap lp-metrics">
        {m.map(([n, l]) => (
          <div key={l} className="lp-metric"><div className="n" style={{ color: 'var(--yb-yellow-deep)' }}>{n}</div><div className="l">{l}</div></div>
        ))}
      </div>
    </section>
  );
}

/* ───────────── BENTO / PRODUCTO ───────────── */
function Bento() {
  const tone = {
    blue: ['var(--c-blue-bg)', 'var(--c-blue)'], em: ['var(--c-emerald-bg)', 'var(--c-emerald-d)'],
    yel: ['#FFF6E0', 'var(--yb-yellow-deep)'], pur: ['#F5F3FF', '#7C3AED'], amb: ['var(--c-amber-bg)', 'var(--c-amber-d)'],
  };
  function Feat({ span, ico, t, p, tn, children }) {
    return (
      <div className={'lp-card ' + span}>
        <div className="ico" style={{ background: tone[tn][0], color: tone[tn][1] }}><Icon name={ico} size={22} /></div>
        <h3 className="lp-h3">{t}</h3><p>{p}</p>{children}
      </div>
    );
  }
  return (
    <section className="lp-sec" id="producto">
      <div className="lp-wrap">
        <div className="lp-sec-head">
          <div className="lp-eyebrow">La plataforma</div>
          <h2 className="lp-h2" style={{ marginTop: 12 }}>Un motor que convierte papeles en cumplimiento.</h2>
          <p className="lp-lead">Detecta requisitos, arma el expediente, obtiene firmas y vigila las renovaciones — todo sobre la misma base.</p>
        </div>
        <div className="lp-bento">
          <Feat span="span3" ico="shieldcheck" tn="em" t="Motor de compliance" p="Detecta los requisitos aplicables a tu inmueble y alcaldía, genera un checklist dinámico y calcula tu Compliance Score en tiempo real.">
            <div style={{ marginTop: 18, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['Uso de suelo', 'Padrón de Anfitriones', 'Impuesto Hospedaje 3%', 'Protección civil'].map(t => <span key={t} className="lp-req">{t}</span>)}
            </div>
          </Feat>
          <Feat span="span3" ico="sparkle" tn="yel" t="Asistente IA" p="OCR que lee tus documentos, extrae datos, detecta inconsistencias entre RFC, escrituras y predial, y sugiere la siguiente acción.">
            <div style={{ marginTop: 18, padding: 14, borderRadius: 14, background: 'var(--surface-2)', display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: '#1C1A17', color: 'var(--yb-yellow)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}><Icon name="scan" size={16} /></div>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>Extrajo <strong style={{ color: 'var(--ink)' }}>14 campos</strong> de tu Boleta Predial.</span>
            </div>
          </Feat>
          <Feat span="span2" ico="doc" tn="blue" t="Expediente digital" p="Versionado, evidencia y trazabilidad por documento. Cada archivo con su historial." />
          <Feat span="span2" ico="kanban" tn="pur" t="Workflow de trámites" p="De pendiente a cumplido: revisores asignados, estatus y tiempos estimados." />
          <Feat span="span2" ico="bell" tn="amb" t="Alertas de vencimiento" p="Te avisamos antes de que caduque una licencia, póliza o registro." />
        </div>
      </div>
    </section>
  );
}

/* ───────────── PROCESS ───────────── */
function Process() {
  const steps = [
    ['upload', 'Sube tus documentos', 'INE, escrituras, constancia fiscal, predial. Arrastra y suelta — o toma una foto.'],
    ['scan', 'La IA analiza', 'OCR extrae datos, detecta inconsistencias y determina qué requisitos aplican a tu inmueble.'],
    ['shieldcheck', 'Resuelve lo que falta', 'Genera expedientes, obtiene firmas con JAAK y da seguimiento a cada trámite.'],
    ['clock', 'Mantén el cumplimiento', 'Renovaciones, vencimientos y evidencia siempre al día, sin que lo pienses.'],
  ];
  return (
    <section className="lp-sec alt" id="proceso">
      <div className="lp-wrap">
        <div className="lp-sec-head">
          <div className="lp-eyebrow">Cómo funciona</div>
          <h2 className="lp-h2" style={{ marginTop: 12 }}>De una carpeta de papeles a operar en regla.</h2>
        </div>
        <div className="lp-steps">
          {steps.map(([ic, t, p], i) => (
            <div key={t} className="lp-step">
              {i < 3 && <div className="lp-step-line" />}
              <div className="badge-n">{i + 1}</div>
              <div style={{ marginBottom: 12, color: 'var(--yb-yellow-deep)' }}><Icon name={ic} size={22} /></div>
              <h3>{t}</h3><p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── VERTICALS ───────────── */
const VERTS = {
  airbnb: { tab: 'Airbnb · Renta temporal', icon: 'home',
    h: 'Hospedaje temporal sin sustos regulatorios.',
    p: 'El régimen de hospedaje en plataformas en CDMX exige registros, impuestos y permisos específicos. YellowBlock los mantiene vivos para que nunca te bajen un anuncio.',
    reqs: ['Padrón de Anfitriones', 'Impuesto sobre Hospedaje 3%', 'Uso de suelo', 'Régimen de condominio', 'Protección civil'] },
  hoteles: { tab: 'Hoteles', icon: 'building',
    h: 'Operación hotelera con expedientes auditables.',
    p: 'Licencias de funcionamiento, protección civil, NOM aplicables y obligaciones fiscales por establecimiento, centralizadas y con evidencia sellada.',
    reqs: ['Licencia de funcionamiento', 'Programa interno PC', 'Aviso Cofepris', 'Impuesto Hospedaje', 'Verificaciones'] },
  inmo: { tab: 'Inmobiliarias y desarrolladores', icon: 'pin',
    h: 'Portafolios completos, un solo tablero.',
    p: 'Cientos de inmuebles, expedientes por unidad, poderes notariales y renovaciones masivas. Roles, revisores y trazabilidad para tu equipo legal.',
    reqs: ['Escrituras y títulos', 'Poderes notariales', 'Boletas prediales', 'Régimen condominal', 'Auditoría completa'] },
};
function Verticals() {
  const [tab, setTab] = useState('airbnb');
  useEffect(() => {
    const on = (e) => { if (VERTS[e.detail]) setTab(e.detail); };
    window.addEventListener('yb:vertical', on);
    return () => window.removeEventListener('yb:vertical', on);
  }, []);
  const v = VERTS[tab];
  return (
    <section className="lp-sec" id="verticales">
      <div className="lp-wrap">
        <div className="lp-sec-head">
          <div className="lp-eyebrow">Verticales</div>
          <h2 className="lp-h2" style={{ marginTop: 12 }}>Un motor, muchos activos regulados.</h2>
          <p className="lp-lead">Nacimos resolviendo el hospedaje temporal, el caso más exigente. Hoy el mismo motor de expedientes vive en hoteles, inmobiliarias y cualquier activo regulado.</p>
        </div>
        <div className="lp-tabs">
          {Object.entries(VERTS).map(([k, vv]) => (
            <button key={k} className={'lp-tab' + (k === tab ? ' on' : '')} onClick={() => setTab(k)}><Icon name={vv.icon} size={16} /> {vv.tab}</button>
          ))}
        </div>
        <div className="lp-vert">
          <div>
            <h3 className="lp-h3" style={{ fontFamily: 'var(--font-display)', fontSize: 26 }}>{v.h}</h3>
            <p className="lp-lead" style={{ marginTop: 14, fontSize: 16 }}>{v.p}</p>
            <a className="lp-btn lp-btn-dark" href="#analiza" style={{ marginTop: 22 }}>Analiza este tipo de inmueble <Icon name="chevright" size={16} /></a>
          </div>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--faint)', marginBottom: 14 }}>Requisitos que vigilamos</div>
            <div className="lp-reqs">
              {v.reqs.map(r => <span key={r} className="lp-req"><Icon name="check" size={14} style={{ color: 'var(--c-emerald)' }} /> {r}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────── SECURITY ───────────── */
function Security() {
  const pillars = [
    ['shieldcheck', 'Sellado NOM-151', 'Constancia de conservación con sellado de tiempo para cada documento y firma. Evidencia con validez.'],
    ['pen', 'Firma electrónica JAAK', 'Firma avanzada y verificación de identidad integradas al flujo de cada expediente.'],
    ['shield', 'Cifrado de extremo a extremo', 'Tus documentos viajan y se almacenan cifrados. Control de accesos por rol.'],
    ['clock', 'Auditoría y versionado', 'Cada cambio queda registrado: quién, qué y cuándo. Línea de tiempo completa.'],
  ];
  return (
    <section className="lp-sec dark" id="seguridad">
      <div className="lp-wrap">
        <div className="lp-sec-head">
          <div className="lp-eyebrow" style={{ color: 'var(--yb-yellow)' }}>Confianza</div>
          <h2 className="lp-h2" style={{ marginTop: 12, color: '#fff' }}>Hecho para resistir una auditoría.</h2>
          <p className="lp-lead" style={{ color: 'rgba(255,255,255,.62)' }}>Cumplimiento serio necesita evidencia seria. Cada acción deja rastro verificable.</p>
        </div>
        <div className="lp-pillars">
          {pillars.map(([ic, t, p]) => (
            <div key={t} className="lp-pillar"><div className="ico"><Icon name={ic} size={21} /></div><h3>{t}</h3><p>{p}</p></div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── PRICING · servicio premium, por operación ───────────── */
const STAGES = [
  { key: 'analisis', stage: 'Etapa 1 · Diagnóstico', tone: ['var(--c-blue-bg)', 'var(--c-blue)'],
    name: 'Análisis de zona y regulación', low: 499, unit: '/ inmueble',
    promise: 'Claridad total antes de invertir un peso más.',
    desc: 'Sabes con certeza si tu inmueble puede operar, qué exige tu zona y dónde estás parado hoy.',
    incl: ['Requisitos aplicables a tu zona y alcaldía', 'Compliance Score inicial del inmueble', 'Checklist de lo que falta y riesgos detectados', 'Lectura de documentos con OCR + IA', 'Dictamen claro y siguientes pasos'],
    cta: 'Analizar inmueble', kind: 'ghost' },
  { key: 'inscripcion', stage: 'Etapa 2 · Te dejamos en regla', tone: ['#FFF6E0', 'var(--yb-yellow-deep)'],
    name: 'Inscripción', low: 5000, unit: '/ inmueble', feature: true,
    promise: 'Tranquilidad: quedas inscrito y con evidencia que aguanta auditoría.',
    desc: 'Armamos el expediente completo, obtenemos firmas y te inscribimos formalmente ante la autoridad.',
    incl: ['Todo el análisis incluido', 'Expediente digital completo y versionado', 'Sellado NOM-151 en cada documento', 'Firma electrónica avanzada (JAAK)', 'Alta / registro ante la autoridad', 'Evidencia lista para auditoría'],
    cta: 'Empezar inscripción', kind: 'yellow' },
  { key: 'gestion', stage: 'Si el trámite es manual', tone: ['#F5F3FF', '#7C3AED'],
    name: 'Gestión asistida', low: 10000, high: 15000, unit: '/ operación',
    promise: 'Nosotros damos la cara por ti ante la ventanilla.',
    desc: 'Cuando el trámite exige gestión manual o presencial, un especialista lo lleva de principio a fin.',
    incl: ['Gestión presencial ante la autoridad', 'Representación y seguimiento dedicado', 'Resolución de observaciones y prevenciones', 'Casos complejos o expedientes atrasados', 'Reporte de estatus en tiempo real'],
    cta: 'Hablar con un especialista', kind: 'ghost' },
];
function Pricing() {
  const [units, setUnits] = useState(1);
  return (
    <section className="lp-sec alt" id="precios">
      <div className="lp-wrap">
        <div className="lp-sec-head">
          <div className="lp-eyebrow">Precios · sin sorpresas</div>
          <h2 className="lp-h2" style={{ marginTop: 12 }}>Sabes exactamente qué pagas, y por qué.</h2>
          <p className="lp-lead">Un servicio premium pensado para darte certeza en cada etapa. Cada inmueble es una operación independiente: si tienes tres, se analizan e inscriben los tres — sin letras chiquitas.</p>
        </div>

        <div className="lp-qty">
          <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--muted)' }}>Calcula para</span>
          <button onClick={() => setUnits(Math.max(1, units - 1))} aria-label="menos">−</button>
          <span className="num" style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, minWidth: 30, textAlign: 'center' }}>{units}</span>
          <button onClick={() => setUnits(Math.min(50, units + 1))} aria-label="más">+</button>
          <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--muted)' }}>{units === 1 ? 'inmueble' : 'inmuebles'}</span>
        </div>

        <div className="lp-price-grid">
          {STAGES.map(s => {
            const priceStr = s.high ? `$${fmt(s.low)}–${fmt(s.high)}` : `$${fmt(s.low)}`;
            const totalStr = s.high ? `$${fmt(s.low * units)} – $${fmt(s.high * units)}` : `$${fmt(s.low * units)}`;
            return (
              <div key={s.key} className={'lp-price-card' + (s.feature ? ' feature' : '')}>
                {s.feature && <span className="badge badge-missing" style={{ position: 'absolute', top: 18, right: 18 }}><span className="dot" />Recomendado</span>}
                <span className="lp-stage" style={{ background: s.tone[0], color: s.tone[1] }}>{s.stage}</span>
                <div style={{ fontWeight: 700, fontSize: 19, fontFamily: 'var(--font-display)' }}>{s.name}</div>
                <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: 7, minHeight: 60 }}>{s.desc}</p>
                <div className="lp-price-amt" style={{ marginTop: 4 }}>
                  <span className="num" style={{ fontFamily: 'var(--font-display)', fontSize: s.high ? 30 : 46, fontWeight: 800, letterSpacing: '-.03em', lineHeight: 1 }}>{priceStr}</span>
                  <span style={{ fontSize: 14, color: 'var(--muted)' }}>MXN {s.unit}</span>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 8, minHeight: 18 }}>
                  {units > 1 && <span><span className="num">{units}</span> inmuebles · total <strong style={{ color: 'var(--ink)' }} className="num">{totalStr}</strong></span>}
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '12px 0 4px', fontSize: 12.5, color: s.tone[1], fontWeight: 600 }}>
                  <Icon name="shieldcheck" size={16} style={{ flex: '0 0 auto', marginTop: 1 }} /> {s.promise}
                </div>
                <hr className="divider" style={{ margin: '12px 0 16px' }} />
                <ul className="lp-incl" style={{ marginTop: 0, flex: 1 }}>
                  {s.incl.map(t => <li key={t}><Icon name="check" size={17} className="ck" /> {t}</li>)}
                </ul>
                <a className={'lp-btn lp-btn-lg lp-btn-' + (s.kind === 'yellow' ? 'yellow' : 'ghost')} href={s.kind === 'yellow' ? '#analiza' : '#'} style={{ width: '100%', marginTop: 22 }}>{s.cta}</a>
              </div>
            );
          })}
        </div>
        <div className="lp-price-note">
          ¿Operas un portafolio o eres despacho? <a href="#">Habla con nosotros</a> para acompañamiento dedicado y facturación consolidada.
        </div>
      </div>
    </section>
  );
}

/* ───────────── TESTIMONIALS ───────────── */
function Testimonials() {
  const q = [
    ['Pasé de no entender qué me faltaba a tener mi expediente completo en un fin de semana. El score me dijo exactamente qué resolver.', 'Daniela Fuentes', 'Anfitriona · 2 deptos en Del Valle', '#E6A100'],
    ['Administramos 60 unidades. Antes vivíamos en Excel y miedo a las multas. Ahora el tablero nos avisa antes de cada vencimiento.', 'Roberto Isla', 'Operador · Casa Nómada', '#2563EB'],
    ['El sellado NOM-151 y la firma JAAK nos dieron evidencia que aguanta cualquier revisión. Nuestro equipo legal lo adoptó de inmediato.', 'Lic. Paola Mena', 'Despacho Mena & Asociados', '#059669'],
  ];
  return (
    <section className="lp-sec">
      <div className="lp-wrap">
        <div className="lp-sec-head">
          <div className="lp-eyebrow">Confían en YellowBlock</div>
          <h2 className="lp-h2" style={{ marginTop: 12 }}>Anfitriones, operadores y despachos.</h2>
        </div>
        <div className="lp-quotes">
          {q.map(([text, name, role, color]) => (
            <div key={name} className="lp-quote">
              <div style={{ display: 'flex', gap: 3, marginBottom: 14, color: 'var(--yb-yellow-deep)' }}>
                {[0,1,2,3,4].map(i => <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.7-5.1 4.7 1.4 6.8L12 17.8 5.9 21.3l1.4-6.8L2.2 9.7l6.9-.7z"/></svg>)}
              </div>
              <p>"{text}"</p>
              <div className="who"><Avatar name={name} size={40} bg={color} color="#fff" /><div><div style={{ fontWeight: 700, fontSize: 14 }}>{name}</div><div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{role}</div></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── FAQ ───────────── */
function FAQ() {
  const items = [
    ['¿Necesito un abogado o gestor para usar YellowBlock?', 'No. La plataforma determina los requisitos aplicables, arma los expedientes y te guía paso a paso. Si necesitas apoyo legal, puedes invitar a tu despacho o usar nuestra red de aliados.'],
    ['¿Qué documentos necesito para empezar?', 'Con tu INE, constancia de situación fiscal, escritura o título, boleta predial y comprobante de domicilio es suficiente para tu primer análisis. La IA te dirá qué más se requiere según tu inmueble.'],
    ['¿El sellado NOM-151 y la firma tienen validez?', 'Sí. Usamos sellado de tiempo conforme a la NOM-151 y firma electrónica avanzada vía JAAK, generando evidencia con validez para trámites y auditorías.'],
    ['¿Solo sirve para hospedaje temporal?', 'Nacimos resolviendo el hospedaje temporal, el caso más exigente. Hoy el mismo motor de expedientes vive en hoteles, inmobiliarias y cualquier activo regulado.'],
    ['¿Cómo se cobra si tengo muchos inmuebles?', 'El precio es por inmueble y baja por volumen automáticamente. A partir de portafolios grandes, el plan Enterprise ofrece precio negociado y funciones de equipo.'],
    ['¿Mis datos están seguros?', 'Tus documentos se cifran en tránsito y en reposo, con control de accesos por rol y una bitácora de auditoría completa de cada acción.'],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="lp-sec alt" id="faq">
      <div className="lp-wrap">
        <div className="lp-sec-head"><div className="lp-eyebrow">Preguntas frecuentes</div><h2 className="lp-h2" style={{ marginTop: 12 }}>Lo que querrás saber.</h2></div>
        <div className="lp-faq">
          {items.map(([q, a], i) => (
            <div key={i} className={'lp-q' + (open === i ? ' open' : '')}>
              <div className="lp-q-head" onClick={() => setOpen(open === i ? -1 : i)}>
                <h3>{q}</h3><span className="lp-q-icon"><Icon name="plus" size={20} /></span>
              </div>
              <div className="lp-q-body"><p>{a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── FINAL CTA + FOOTER ───────────── */
function FinalCTA() {
  return (
    <section className="lp-sec" id="analiza">
      <div className="lp-wrap">
        <div className="lp-final">
          <div className="glow" />
          <div className="lp-eyebrow" style={{ color: 'var(--yb-yellow)' }}>Empieza hoy</div>
          <h2 className="lp-h2" style={{ color: '#fff', marginTop: 14, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>Sube tus documentos y descubre si puedes operar.</h2>
          <p className="lp-lead" style={{ color: 'rgba(255,255,255,.7)', marginTop: 16, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>Crea tu cuenta y obtén tu Compliance Score en menos de 2 minutos. Análisis desde $499 MXN por inmueble.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
            <a className="lp-btn lp-btn-yellow lp-btn-lg" href="#precios"><Icon name="upload" size={18} /> Analiza tu inmueble</a>
            <a className="lp-btn lp-btn-lg" href="#" style={{ background: 'rgba(255,255,255,.12)', color: '#fff' }}>Agendar demo</a>
          </div>
        </div>
      </div>
    </section>
  );
}

const MAIL = 'mailto:hola@yellowblock.services';
function goVertical(key) {
  return (e) => {
    e.preventDefault();
    window.dispatchEvent(new CustomEvent('yb:vertical', { detail: key }));
    const el = document.getElementById('verticales');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
}
function Footer() {
  // [label, href, onClick?] — every link resolves to a real destination
  const cols = [
    ['Producto', [
      ['Motor de compliance', '#producto'],
      ['Expediente digital', '#producto'],
      ['Asistente IA', '#producto'],
      ['Trámites', '#producto'],
      ['Precios', '#precios'],
    ]],
    ['Verticales', [
      ['Airbnb', '#verticales', goVertical('airbnb')],
      ['Hoteles', '#verticales', goVertical('hoteles')],
      ['Inmobiliarias', '#verticales', goVertical('inmo')],
      ['Desarrolladores', '#verticales', goVertical('inmo')],
      ['Despachos', '#verticales', goVertical('inmo')],
    ]],
    ['Recursos', [
      ['Cómo funciona', '#proceso'],
      ['Seguridad y NOM-151', '#seguridad'],
      ['Preguntas frecuentes', '#faq'],
      ['Analiza tu inmueble', '#analiza'],
    ]],
    ['Legal', [
      ['Privacidad', 'privacidad.html'],
      ['Términos', 'terminos.html'],
      ['Seguridad', '#seguridad'],
      ['Contacto', MAIL],
    ]],
  ];
  return (
    <footer className="lp-foot">
      <div className="lp-wrap">
        <div className="lp-foot-grid">
          <div>
            <Logo size={26} />
            <p style={{ fontSize: 14, color: 'var(--muted)', marginTop: 14, maxWidth: 240, lineHeight: 1.55 }}>El sistema operativo de cumplimiento para activos regulados.</p>
            <a className="lp-btn lp-btn-yellow" href="#analiza" style={{ marginTop: 18, padding: '10px 16px', fontSize: 14 }}><Icon name="shieldcheck" size={16} /> Analiza tu inmueble</a>
          </div>
          {cols.map(([h, links]) => (
            <div key={h}><h4>{h}</h4>{links.map(([l, href, onClick]) => (
              <a key={l} href={href} onClick={onClick}>{l}</a>
            ))}</div>
          ))}
        </div>
        <div className="lp-foot-bottom">
          <span>© 2026 YellowBlock · yellowblock.services</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="pin" size={14} /> Hecho en CDMX 🇲🇽</span>
        </div>
      </div>
    </footer>
  );
}

/* ───────────── APP ───────────── */
function LandingApp() {
  const [audience, setAudience] = useState('anfitrion');
  return (
    <div className="dir-c lp">
      <Nav audience={audience} />
      <Hero audience={audience} setAudience={setAudience} />
      <Trust />
      <Metrics />
      <Bento />
      <Process />
      <Verticals />
      <Security />
      <Pricing />
      <Testimonials />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LandingApp />);