// Marketing landing — Spanish-primary, Mexican editorial × Apple polish

const Hero = () => (
  <section style={{ padding: '80px 48px 72px', position: 'relative' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 999, background: 'var(--bone)', marginBottom: 28 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--moss)' }}></span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-2)' }}>RPP · INE · CONDUSEF · ESCROW STP</span>
          </div>

          <h1 className="serif" style={{ fontSize: 78, lineHeight: 1.02, fontWeight: 500, letterSpacing: '-0.025em' }}>
            La renta honesta.<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>Hecha en México.</span>
          </h1>

          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 28, maxWidth: 560 }}>
            Verificamos que la propiedad existe, que el arrendador es el dueño real, y guardamos tu depósito en custodia hasta que las llaves estén físicamente en tu mano. Sin estafas. Sin sorpresas. Sin volver a empezar.
          </p>

          <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
            <button className="btn btn-cta" style={{ padding: '14px 26px', fontSize: 15 }}>
              Verificar una propiedad
              <IconArrow size={16} />
            </button>
            <button className="btn btn-secondary" style={{ padding: '14px 26px', fontSize: 15 }}>
              Ver cómo funciona
            </button>
          </div>

          <div style={{ marginTop: 48, display: 'flex', alignItems: 'center', gap: 32 }}>
            <div>
              <div className="serif" style={{ fontSize: 32, fontWeight: 600 }}>$2.4M</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginTop: 2 }}>MXN PROTEGIDOS</div>
            </div>
            <div style={{ width: 1, height: 36, background: 'var(--line)' }}></div>
            <div>
              <div className="serif" style={{ fontSize: 32, fontWeight: 600 }}>4,318</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginTop: 2 }}>PROPIEDADES VERIFICADAS</div>
            </div>
            <div style={{ width: 1, height: 36, background: 'var(--line)' }}></div>
            <div>
              <div className="serif" style={{ fontSize: 32, fontWeight: 600 }}>0</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginTop: 2 }}>FRAUDES REPORTADOS</div>
            </div>
          </div>
        </div>

        {/* Hero artwork — handshake + sello composition */}
        <div style={{ position: 'relative', height: 540 }}>
          {/* Documentary photo — keys handed over */}
          <div className="photo" style={{ position: 'absolute', top: 0, right: 0, width: 380, height: 460, borderRadius: 8 }}>
            {/* Staged scene: hands + keys, drawn editorially */}
            <svg viewBox="0 0 380 460" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="handGrad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="#D4A574"/>
                  <stop offset="1" stopColor="#8B5A3C"/>
                </linearGradient>
              </defs>
              {/* Hand 1 (offering) */}
              <path d="M -20 280 Q 60 250 120 270 L 180 290 Q 200 295 195 310 L 130 330 Q 80 340 30 335 L -20 330 Z" fill="url(#handGrad)" opacity="0.95"/>
              <path d="M 120 270 L 180 285 L 195 295" stroke="#5A3520" strokeWidth="1" fill="none" opacity="0.4"/>
              {/* Keys */}
              <g transform="translate(160 250) rotate(-15)">
                <circle cx="0" cy="0" r="14" fill="none" stroke="#C8923E" strokeWidth="3"/>
                <rect x="10" y="-3" width="40" height="6" fill="#C8923E"/>
                <rect x="42" y="-6" width="4" height="6" fill="#C8923E"/>
                <rect x="48" y="-8" width="4" height="10" fill="#C8923E"/>
              </g>
              {/* Hand 2 (receiving) */}
              <path d="M 400 200 Q 320 220 260 250 L 200 280 Q 180 290 195 305 L 270 295 Q 320 285 370 270 L 400 250 Z" fill="url(#handGrad)" opacity="0.85"/>
            </svg>
          </div>

          {/* Floating sello card */}
          <div className="card" style={{ position: 'absolute', bottom: 60, left: 0, padding: 22, width: 230, background: 'var(--bone)' }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', border: '2px solid var(--cobalt)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, background: 'var(--cream)' }}>
                <span className="serif" style={{ fontSize: 11, fontWeight: 700, color: 'var(--cobalt)', textAlign: 'center', lineHeight: 1.05 }}>SELLO<br/>RENTAREAL</span>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>VERIFICADO</div>
                <div className="serif" style={{ fontSize: 16, fontWeight: 600, marginTop: 2, lineHeight: 1.2 }}>Roma Norte<br/>CDMX</div>
                <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
                  <span className="pill pill-ok"><IconCheck size={10}/> RPP</span>
                  <span className="pill pill-ok"><IconCheck size={10}/> INE</span>
                </div>
              </div>
            </div>
          </div>

          {/* Floating escrow chip */}
          <div className="card" style={{ position: 'absolute', top: 16, left: 30, padding: '14px 18px', background: 'var(--ink)', color: 'var(--cream)', borderColor: 'var(--ink)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <IconLock size={20}/>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>EN CUSTODIA</div>
                <div className="serif" style={{ fontSize: 18, fontWeight: 600 }}>$24,000 MXN</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const ScamProblem = () => (
  <section style={{ background: 'var(--ink)', color: 'var(--cream)', padding: '96px 48px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div className="eyebrow" style={{ color: 'var(--terracotta)' }}>01 — El problema</div>
      <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 500, marginTop: 16, maxWidth: 900, letterSpacing: '-0.02em' }}>
        Cada día, alguien en México deposita la renta en una cuenta que <em style={{ color: 'var(--terracotta)' }}>no es del dueño</em> de un departamento que <em style={{ color: 'var(--terracotta)' }}>no existe</em>.
      </h2>
      <p style={{ fontSize: 18, color: 'var(--cream-2)', marginTop: 28, maxWidth: 720, lineHeight: 1.55 }}>
        Pierden el primer mes, el depósito, los planes. A veces, el techo. Recopilamos historias reales — algunas anónimas, todas dolorosamente comunes.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 56 }}>
        {[
          { quote: '"Pagué $18,000 de depósito y primer mes por un depa en Polanco. El día que me iba a mudar, llegué con la mudanza y vivía otra familia ahí. Ellos eran los dueños reales."', who: 'Mariana, 26 · Diseñadora · CDMX', tag: 'PÉRDIDA: $18,000' },
          { quote: '"Me mostraron las fotos por WhatsApp, me pasaron un \'contrato\' en PDF. Hice la transferencia. Cuando fui a recoger las llaves, el ‘arrendador’ ya había bloqueado mi número."', who: 'Diego, 23 · Ingeniero · Guadalajara', tag: 'PÉRDIDA: $12,500' },
          { quote: '"Resulta que el ‘dueño’ tenía dos juicios por despojo. Me enteré cuando llegó el verdadero propietario a sacarme. Tres meses pagados a alguien que no era nadie."', who: 'Anónimo · 29 · Estudiante · Monterrey', tag: 'PÉRDIDA: $36,000' }
        ].map((s, i) => (
          <div key={i} style={{ border: '1px solid rgba(245,239,227,0.16)', borderRadius: 12, padding: 28, background: 'rgba(245,239,227,0.03)' }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 18 }}>
              <IconAlert size={16} style={{ color: 'var(--terracotta)' }} />
              <span className="mono" style={{ fontSize: 11, color: 'var(--terracotta)', letterSpacing: '0.1em' }}>{s.tag}</span>
            </div>
            <p className="serif" style={{ fontSize: 19, lineHeight: 1.45, fontStyle: 'italic', color: 'var(--cream)' }}>{s.quote}</p>
            <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid rgba(245,239,227,0.1)' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>— {s.who}</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 32, paddingTop: 32, borderTop: '1px solid rgba(245,239,227,0.12)' }}>
        <div className="serif" style={{ fontSize: 80, fontWeight: 600, color: 'var(--terracotta)', letterSpacing: '-0.04em', lineHeight: 1 }}>1 de 7</div>
        <p style={{ fontSize: 17, color: 'var(--cream-2)', maxWidth: 540, lineHeight: 1.5 }}>
          inquilinos en Ciudad de México reporta haber sido víctima — o haber estado a un paso de serlo — de un fraude de arrendamiento en los últimos 24 meses. La mayoría jamás recupera su dinero.
        </p>
      </div>
    </div>
  </section>
);

const FounderStory = () => (
  <section style={{ padding: '96px 48px', background: 'var(--cream)' }}>
    <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'center' }}>
      <div>
        {/* Portrait — editorial b&w-ish */}
        <div style={{ position: 'relative', aspectRatio: '4/5' }}>
          <div className="photo" style={{ position: 'absolute', inset: 0, borderRadius: 6, filter: 'grayscale(0.3) contrast(1.05)' }}>
            <svg viewBox="0 0 320 400" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <radialGradient id="skin" cx="0.5" cy="0.4">
                  <stop offset="0" stopColor="#E8C5A0"/>
                  <stop offset="1" stopColor="#8B5A3C"/>
                </radialGradient>
              </defs>
              {/* Shoulders */}
              <path d="M40 400 Q 40 320 100 290 Q 160 270 220 290 Q 280 320 280 400 Z" fill="#2A1E14"/>
              {/* Neck */}
              <rect x="135" y="240" width="50" height="60" fill="url(#skin)"/>
              {/* Face */}
              <ellipse cx="160" cy="180" rx="62" ry="78" fill="url(#skin)"/>
              {/* Hair */}
              <path d="M100 150 Q 100 100 160 90 Q 220 95 220 155 Q 230 200 220 220 L 215 165 Q 180 125 145 130 Q 115 145 105 200 Q 95 200 100 150 Z" fill="#1A1410"/>
              {/* Eyes */}
              <ellipse cx="140" cy="180" rx="4" ry="2.5" fill="#1A1410"/>
              <ellipse cx="180" cy="180" rx="4" ry="2.5" fill="#1A1410"/>
              {/* Mouth */}
              <path d="M148 215 Q 160 222 172 215" stroke="#5A3520" strokeWidth="2" fill="none"/>
            </svg>
          </div>
          {/* Caption tag */}
          <div style={{ position: 'absolute', bottom: -14, left: 16, background: 'var(--terracotta)', color: 'var(--bone)', padding: '6px 14px', borderRadius: 4, transform: 'rotate(-2deg)' }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em' }}>FUNDADORA · 2025</span>
          </div>
        </div>
      </div>

      <div>
        <div className="eyebrow" style={{ color: 'var(--ink-2)' }}>02 — Por qué existimos</div>
        <h2 className="serif" style={{ fontSize: 48, lineHeight: 1.1, fontWeight: 500, marginTop: 16, letterSpacing: '-0.02em' }}>
          Empecé esto porque <span className="highlight-yellow">vi a mis amigos perder todo</span> por confiar en un anuncio.
        </h2>
        <div style={{ marginTop: 32, fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p>
            Los estafadores se llevan en promedio <strong style={{ color: 'var(--ink)' }}>tres meses de renta</strong> antes de desaparecer. Y se llevan algo peor: la confianza de gente joven que apenas estaba empezando.
          </p>
          <p>
            <span className="highlight-yellow">No quería un parche, ni un consejo, ni una hoja de Excel con focos rojos.</span> Quería una capa de verdad sobre el mercado. Que cuando vieras un anuncio con nuestro sello, supieras — sin pensarlo — que la persona, la propiedad, el contrato y el dinero <em>existen y son reales</em>.
          </p>
          <p>
            Rentareal no es una inmobiliaria. Somos la verificación que México llevaba años pidiendo. Hecha aquí, con notarios, con el RPP, con custodia bancaria, con tecnología. <strong style={{ color: 'var(--ink)' }}>Para que nadie más pierda su primer departamento por culpa de un mentiroso.</strong>
          </p>
        </div>
        <div style={{ marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
          <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>Valeria Solís</div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.08em', marginTop: 4 }}>FUNDADORA & CEO · CDMX</div>
        </div>
      </div>
    </div>
  </section>
);

const HowItWorks = () => (
  <section style={{ padding: '96px 48px', background: 'var(--cream-2)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
        <div style={{ maxWidth: 640 }}>
          <div className="eyebrow">03 — Cómo funciona</div>
          <h2 className="serif" style={{ fontSize: 52, lineHeight: 1.08, fontWeight: 500, marginTop: 16, letterSpacing: '-0.02em' }}>
            Cuatro pasos. Cero confianza ciega.
          </h2>
        </div>
        <p style={{ fontSize: 16, color: 'var(--ink-2)', maxWidth: 380, lineHeight: 1.55 }}>
          Cada paso queda registrado, fechado y disponible para ti. Si algo falla en cualquier etapa, la transacción se detiene y tu dinero regresa.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4 }}>
        {[
          {
            n: '01', t: 'Verificamos la propiedad',
            d: 'Cruzamos la dirección con el Registro Público de la Propiedad. Confirmamos que existe, que está libre de gravámenes y juicios, y que el folio coincide con el arrendador.',
            i: <IconHome size={28}/>, tone: 'cobalt'
          },
          {
            n: '02', t: 'Verificamos al dueño',
            d: 'INE, CURP, RFC, comprobante de domicilio. La persona que dice ser dueña es la persona registrada — o no avanzamos. Punto.',
            i: <IconUser size={28}/>, tone: 'terracotta'
          },
          {
            n: '03', t: 'Custodia del depósito',
            d: 'Tu dinero entra a una cuenta de custodia en banco mexicano vía SPEI/STP. No lo recibe el arrendador hasta que las llaves están físicamente en tu mano.',
            i: <IconLock size={28}/>, tone: 'cobalt'
          },
          {
            n: '04', t: 'Llaves y sello',
            d: 'Firma digital del Contrato de Arrendamiento, entrega de llaves verificada por foto + geo, y sello de transacción real para ambas partes.',
            i: <IconKey size={28}/>, tone: 'gold'
          },
        ].map((step, i) => (
          <div key={i} style={{ background: 'var(--bone)', padding: '36px 28px', minHeight: 360, display: 'flex', flexDirection: 'column', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
            <div style={{ width: 52, height: 52, borderRadius: '50%', background: `var(--${step.tone})`, color: 'var(--bone)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
              {step.i}
            </div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.1em', marginBottom: 8 }}>PASO {step.n}</div>
            <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, lineHeight: 1.15, marginBottom: 14 }}>{step.t}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>{step.d}</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 32, padding: '24px 32px', background: 'var(--bone)', border: '1px solid var(--line)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <IconClock size={22} style={{ color: 'var(--cobalt)' }}/>
          <div>
            <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>Verificación completa en 48 horas hábiles.</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>Si algo no checa en cualquier etapa, te avisamos y te devolvemos cualquier monto pagado. Garantizado.</div>
          </div>
        </div>
        <button className="btn btn-primary" style={{ padding: '12px 22px', fontSize: 14 }}>Iniciar verificación →</button>
      </div>
    </div>
  </section>
);

const SelloSection = () => (
  <section style={{ padding: '96px 48px', background: 'var(--cream)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          {/* Big sello — the badge */}
          <div style={{ position: 'relative', width: 380, height: 380, margin: '0 auto' }}>
            {/* Outer ring */}
            <svg viewBox="0 0 380 380" style={{ position: 'absolute', inset: 0 }}>
              <defs>
                <path id="circle-text" d="M 190 190 m -150 0 a 150 150 0 1 1 300 0 a 150 150 0 1 1 -300 0"/>
              </defs>
              <circle cx="190" cy="190" r="170" fill="none" stroke="var(--cobalt)" strokeWidth="2"/>
              <circle cx="190" cy="190" r="158" fill="none" stroke="var(--cobalt)" strokeWidth="0.5" strokeDasharray="2 4"/>
              <circle cx="190" cy="190" r="120" fill="var(--cobalt)"/>
              <circle cx="190" cy="190" r="115" fill="none" stroke="var(--cream)" strokeWidth="2"/>
              <text fill="var(--cobalt)" fontSize="14" fontFamily="JetBrains Mono" letterSpacing="3">
                <textPath href="#circle-text" startOffset="2%">VERIFICADO POR RENTAREAL · MÉXICO · 2026 · </textPath>
              </text>
              {/* Inner emblem */}
              <text x="190" y="180" textAnchor="middle" fill="var(--cream)" fontSize="56" fontFamily="Fraunces" fontWeight="600" fontStyle="italic">R</text>
              <text x="190" y="218" textAnchor="middle" fill="var(--cream)" fontSize="11" fontFamily="JetBrains Mono" letterSpacing="2">SELLO REAL</text>
              {/* Stars */}
              <circle cx="120" cy="190" r="3" fill="var(--cream)"/>
              <circle cx="260" cy="190" r="3" fill="var(--cream)"/>
            </svg>
            {/* Notary tab */}
            <div style={{ position: 'absolute', top: -10, right: -10, background: 'var(--terracotta)', color: 'var(--bone)', padding: '6px 14px', borderRadius: 4, transform: 'rotate(8deg)' }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em' }}>FOLIO #RR-04318</span>
            </div>
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{ color: 'var(--ink-2)' }}>04 — El sello</div>
          <h2 className="serif" style={{ fontSize: 52, lineHeight: 1.08, fontWeight: 500, marginTop: 16, letterSpacing: '-0.02em' }}>
            Una marca que dice: <em style={{ color: 'var(--cobalt)' }}>esto es real.</em>
          </h2>
          <p style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 24, lineHeight: 1.55 }}>
            Cada propiedad verificada recibe un Sello Rentareal único, ligado al folio del RPP, al INE del propietario, y al historial de la transacción. Es público, es auditable, y es la única forma en que un inquilino debería decir <em>"sí, me cambio"</em>.
          </p>
          <ul style={{ listStyle: 'none', marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['Folio único ligado al Registro Público de la Propiedad'],
              ['Ficha pública: cualquiera puede verificar el sello escaneando un QR'],
              ['Renovación anual — si la propiedad cambia de dueño, el sello caduca'],
              ['Acceso prioritario al programa de marketing de Rentareal'],
            ].map((line, i) => (
              <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ marginTop: 2, color: 'var(--cobalt)', fontFamily: 'JetBrains Mono' }}>→</span>
                <span style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.5 }}>{line}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const LandlordPitch = () => (
  <section style={{ padding: '96px 48px', background: 'var(--ink)', color: 'var(--cream)', position: 'relative' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--terracotta)' }}>05 — Para arrendadores</div>
          <h2 className="serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 500, marginTop: 16, letterSpacing: '-0.02em' }}>
            El sello que <em style={{ color: 'var(--terracotta)' }}>renta más rápido</em> y a mejor precio.
          </h2>
          <p style={{ fontSize: 18, color: 'var(--cream-2)', marginTop: 24, lineHeight: 1.55, maxWidth: 540 }}>
            Si eres dueño honesto — y eres la mayoría — pagar por verificarte te separa del ruido. Tus anuncios suben al inicio de los portales aliados. Los inquilinos calificados te buscan. Cierras antes y sin negociar a la baja.
          </p>

          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, border: '1px solid rgba(245,239,227,0.15)', borderRadius: 12, overflow: 'hidden' }}>
            {[
              { v: '3.4×', l: 'Más solicitudes vs. anuncios sin sello' },
              { v: '11 días', l: 'Tiempo medio para cerrar contrato' },
              { v: '+8%', l: 'Renta promedio sostenida sobre comparables' },
              { v: '0%', l: 'Disputas sobre identidad o gravámenes' }
            ].map((s, i) => (
              <div key={i} style={{ background: 'rgba(245,239,227,0.04)', padding: '24px 20px' }}>
                <div className="serif" style={{ fontSize: 36, fontWeight: 600, color: 'var(--terracotta)' }}>{s.v}</div>
                <div style={{ fontSize: 13, color: 'var(--cream-2)', marginTop: 6, lineHeight: 1.4 }}>{s.l}</div>
              </div>
            ))}
          </div>

          <button className="btn btn-cta" style={{ marginTop: 40 }}>
            Verificar mi propiedad <IconArrow size={16}/>
          </button>
        </div>

        {/* Side — listing comparison */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>EJEMPLO REAL · INMUEBLES24</div>

          {/* Listing with seal — featured */}
          <div style={{ background: 'var(--bone)', color: 'var(--ink)', borderRadius: 12, padding: 18, position: 'relative', boxShadow: '0 0 0 2px var(--terracotta)' }}>
            <div style={{ position: 'absolute', top: 12, right: 12, display: 'flex', gap: 6 }}>
              <span className="pill pill-info" style={{ background: 'var(--cobalt)', color: 'var(--bone)' }}>★ DESTACADO</span>
            </div>
            <div style={{ display: 'flex', gap: 14 }}>
              <div className="photo" style={{ width: 110, height: 90, borderRadius: 6, flexShrink: 0 }}></div>
              <div style={{ flex: 1 }}>
                <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>Depto. 2 rec · Roma Norte</div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 4 }}>$24,500 / mes · 78 m²</div>
                <div style={{ marginTop: 10, display: 'flex', gap: 6, alignItems: 'center' }}>
                  <span className="sello-sm"><span className="sello-sm-dot">R</span>SELLO REAL</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>· 47 visitas hoy</span>
                </div>
              </div>
            </div>
          </div>

          {/* Listing without seal */}
          <div style={{ background: 'rgba(245,239,227,0.06)', color: 'var(--cream-2)', borderRadius: 12, padding: 18, opacity: 0.65 }}>
            <div style={{ display: 'flex', gap: 14 }}>
              <div style={{ width: 110, height: 90, background: '#3A2E24', borderRadius: 6, flexShrink: 0 }}></div>
              <div style={{ flex: 1 }}>
                <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>Depto. 2 rec · Roma Norte</div>
                <div style={{ fontSize: 14, marginTop: 4 }}>$23,000 / mes · 76 m²</div>
                <div style={{ marginTop: 10, display: 'flex', gap: 6, alignItems: 'center' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>Sin sello · 4 visitas hoy</span>
                </div>
              </div>
            </div>
          </div>

          <div style={{ padding: '14px 18px', background: 'rgba(200,85,61,0.1)', border: '1px solid rgba(200,85,61,0.3)', borderRadius: 10, marginTop: 4 }}>
            <span className="serif" style={{ fontSize: 15, fontStyle: 'italic', color: 'var(--cream)' }}>"El sello hace que tu anuncio destaque. Punto. Es la diferencia entre 4 y 47 visitas en un día."</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section style={{ padding: '96px 48px', background: 'var(--cream)' }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <div className="eyebrow">06 — Precios</div>
        <h2 className="serif" style={{ fontSize: 52, lineHeight: 1.08, fontWeight: 500, marginTop: 16, letterSpacing: '-0.02em' }}>
          El inquilino no paga. <em style={{ color: 'var(--terracotta)' }}>Nunca.</em>
        </h2>
        <p style={{ fontSize: 17, color: 'var(--ink-2)', marginTop: 18, maxWidth: 640, margin: '18px auto 0', lineHeight: 1.55 }}>
          Quien gana con la verificación es el arrendador honesto. Quien la paga, también. Así de simple.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Renter */}
        <div style={{ background: 'var(--bone)', border: '1px solid var(--line)', borderRadius: 16, padding: 36 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div className="eyebrow">PARA INQUILINOS</div>
            <span className="pill pill-ok">SIEMPRE</span>
          </div>
          <div className="serif" style={{ fontSize: 64, fontWeight: 500, marginTop: 16, letterSpacing: '-0.02em' }}>$0</div>
          <div style={{ fontSize: 14, color: 'var(--ink-3)' }}>MXN — para siempre</div>
          <ul style={{ listStyle: 'none', marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['Verificación completa de la propiedad y el dueño', 'Custodia del depósito hasta entrega de llaves', 'Contrato digital firmado y archivado', 'Soporte humano durante toda la transacción', 'Reembolso garantizado si algo no checa'].map((l, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, fontSize: 15 }}>
                <IconCheck size={18} style={{ color: 'var(--moss)', flexShrink: 0, marginTop: 2 }}/>
                <span>{l}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Landlord */}
        <div style={{ background: 'var(--ink)', color: 'var(--cream)', borderRadius: 16, padding: 36, position: 'relative' }}>
          <div style={{ position: 'absolute', top: -12, left: 36, background: 'var(--terracotta)', color: 'var(--bone)', padding: '6px 14px', borderRadius: 4 }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>RECOMENDADO</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div className="eyebrow" style={{ color: 'var(--cream-2)' }}>PARA ARRENDADORES</div>
            <span className="pill" style={{ background: 'rgba(200,85,61,0.2)', color: 'var(--terracotta)' }}>POR PROPIEDAD</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 16 }}>
            <span className="serif" style={{ fontSize: 64, fontWeight: 500, letterSpacing: '-0.02em' }}>$1,490</span>
            <span style={{ fontSize: 16, color: 'var(--cream-2)' }}>MXN</span>
          </div>
          <div style={{ fontSize: 14, color: 'var(--ink-3)' }}>Anual · renovación automática · sin compromiso</div>
          <ul style={{ listStyle: 'none', marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['Sello Rentareal en todos tus anuncios y portales aliados', 'Posicionamiento prioritario (★ destacado) en los portales', 'Verificación de identidad de los inquilinos interesados', 'Custodia STP para depósitos y rentas mensuales', 'Generador de Contrato de Arrendamiento + e-firma', 'Asesoría legal en disputas (3 horas/año incluidas)'].map((l, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, fontSize: 15 }}>
                <IconCheck size={18} style={{ color: 'var(--terracotta)', flexShrink: 0, marginTop: 2 }}/>
                <span>{l}</span>
              </li>
            ))}
          </ul>
          <button className="btn btn-cta" style={{ marginTop: 28, width: '100%', justifyContent: 'center' }}>
            Verificar mi propiedad
          </button>
        </div>
      </div>

      <p style={{ textAlign: 'center', marginTop: 28, fontSize: 13, color: 'var(--ink-3)' }}>
        Custodia operada por Banco STP S.A.P.I. · Folios validados contra el Registro Público de la Propiedad · CONDUSEF #20260118
      </p>
    </div>
  </section>
);

const FAQ = () => (
  <section style={{ padding: '96px 48px', background: 'var(--cream-2)' }}>
    <div style={{ maxWidth: 900, margin: '0 auto' }}>
      <div className="eyebrow">07 — Preguntas frecuentes</div>
      <h2 className="serif" style={{ fontSize: 44, fontWeight: 500, marginTop: 12, marginBottom: 40, letterSpacing: '-0.02em' }}>
        Lo que la gente nos pregunta antes de confiar.
      </h2>
      <div>
        {[
          { q: '¿Qué pasa si la propiedad NO pasa la verificación?', a: 'Te avisamos en máximo 48 horas, te explicamos exactamente qué falló (RPP, identidad, gravámenes, etc.) y, si ya hiciste algún depósito, lo recibes de regreso íntegro en 24 horas hábiles. Punto.' },
          { q: '¿Cómo sé que su sello no es falso?', a: 'Cada sello tiene un folio único y un código QR público. Cualquiera puede escanearlo y ver — en tiempo real — el estado del sello, el folio del RPP y la fecha de última verificación. Sin login. Sin trampa.' },
          { q: '¿Quién guarda mi dinero durante la custodia?', a: 'Banco STP S.A.P.I., una institución financiera mexicana regulada por la CNBV. Rentareal nunca toca el dinero — solo damos la instrucción de liberarlo cuando ambas partes confirman la entrega de llaves.' },
          { q: '¿Funciona fuera de la Ciudad de México?', a: 'Sí. Hoy operamos en CDMX, Estado de México, Guadalajara, Monterrey, Puebla y Querétaro. Cada estado tiene su Registro Público propio; nos conectamos a todos.' },
          { q: 'Soy arrendador, ¿por qué pagaría yo y no el inquilino?', a: 'Porque tú ganas con la verificación: rentas más rápido, a mejor precio y con inquilinos calificados. El inquilino, si paga, lo va a pensar dos veces. Si tú pagas, lo va a hacer hoy. Es matemática de mercado.' },
        ].map((faq, i) => (
          <details key={i} style={{ borderTop: '1px solid var(--line)', padding: '20px 0', cursor: 'pointer' }}>
            <summary style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', listStyle: 'none', cursor: 'pointer' }}>
              <span className="serif" style={{ fontSize: 21, fontWeight: 500 }}>{faq.q}</span>
              <IconChevron size={20} style={{ color: 'var(--ink-3)' }} />
            </summary>
            <p style={{ fontSize: 16, color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.6, maxWidth: 720 }}>{faq.a}</p>
          </details>
        ))}
      </div>
    </div>
  </section>
);

const Manifesto = () => (
  <section style={{ background: 'var(--terracotta)', color: 'var(--bone)', padding: '96px 48px', position: 'relative', overflow: 'hidden' }}>
    {/* Tile pattern accent */}
    <div className="talavera" style={{ position: 'absolute', inset: 0, opacity: 0.08 }}></div>
    <div style={{ position: 'relative', maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
      <div className="eyebrow" style={{ color: 'var(--bone)', opacity: 0.7 }}>08 — Manifiesto</div>
      <h2 className="serif" style={{ fontSize: 64, lineHeight: 1.08, fontWeight: 500, marginTop: 16, letterSpacing: '-0.025em' }}>
        Creemos que rentar un techo no debería ser un acto de fe.
      </h2>
      <p style={{ fontSize: 19, marginTop: 28, lineHeight: 1.55, opacity: 0.9 }}>
        México merece un mercado de renta donde la palabra <em>"dueño"</em> signifique algo real. Donde una transferencia no sea una apuesta. Donde unas llaves cambien de mano con la calma de un trato cumplido. Estamos aquí para construir esa capa de verdad — anuncio por anuncio, sello por sello, hasta que <strong>fingir ser dueño deje de ser negocio</strong> en este país.
      </p>
      <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center', gap: 14 }}>
        <button className="btn" style={{ background: 'var(--bone)', color: 'var(--ink)', padding: '14px 28px' }}>
          Verificar una propiedad <IconArrow size={16}/>
        </button>
        <button className="btn" style={{ background: 'transparent', color: 'var(--bone)', border: '1px solid var(--bone)', padding: '14px 28px' }}>
          Soy arrendador, quiero el sello
        </button>
      </div>
    </div>
  </section>
);

const Landing = () => (
  <div style={{ background: 'var(--cream)', minHeight: '100vh' }}>
    <Nav/>
    <Hero/>
    <ScamProblem/>
    <FounderStory/>
    <HowItWorks/>
    <SelloSection/>
    <LandlordPitch/>
    <Pricing/>
    <FAQ/>
    <Manifesto/>
    <Footer/>
  </div>
);

window.Landing = Landing;
