// Hero — split layout: bold copy + CTA on left, live Prospector demo on right
function Hero({ heroTitle, heroSubtitle }) {
  return (
    <section style={{
      padding: '60px 0 50px',
      position: 'relative',
    }}>
      <div className="pl-container" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
        gap: 56,
        alignItems: 'center',
      }}>
        {/* LEFT — copy */}
        <div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '7px 14px',
            borderRadius: 999,
            background: 'linear-gradient(135deg, #ea580c 0%, #dc2626 100%)',
            color: '#fff',
            fontSize: 13,
            fontWeight: 700,
            letterSpacing: '.01em',
            marginBottom: 22,
            boxShadow: '0 6px 18px -6px rgba(220, 38, 38, .45), inset 0 1px 0 rgba(255,255,255,.2)',
          }}>
            <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#fde68a' }} />
            Oferta lanzamiento · solo 15 cuentas lifetime
          </span>

          <h1 className="pl-display" style={{
            fontSize: 'clamp(44px, 5.6vw, 76px)',
            margin: '0 0 22px',
          }}>
            {heroTitle ? <span dangerouslySetInnerHTML={{ __html: heroTitle }} /> : (
              <>
                Tú escoges <br />
                la categoría. <br />
                <span className="pl-accent-grad">Las citas llegan solas.</span>
              </>
            )}
          </h1>

          <p style={{
            fontSize: 19, color: 'var(--pl-ink-2)', lineHeight: 1.55,
            maxWidth: 520, margin: '0 0 28px',
          }}>
            {heroSubtitle || (
              <>Escribes <b>"fontanero Burgos"</b> y te saca decenas de negocios con web lenta o sin web — con email, teléfono y <b>web nueva lista para vendérsela</b>. Activa el rotador y el bot pilla <b>10 leads al día</b> por ti.</>
            )}
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginBottom: 22 }}>
            <a href="#planes" className="pl-btn pl-btn-accent pl-btn-lg">
              Probar PillaLeads <IconArrowRight size={16} stroke={2.5} />
            </a>
            <a href="#video" className="pl-btn pl-btn-ghost pl-btn-lg">
              <IconPlay size={14} /> Ver el demo (2 min)
            </a>
          </div>

          {/* Risk reversal strip */}
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 18,
            fontSize: 13.5, color: 'var(--pl-ink-3)',
          }}>
            <Trust icon={<IconShield size={15} color="var(--pl-accent-deep)" />}>Cancela cuando quieras</Trust>
            <Trust icon={<IconLock size={15} color="var(--pl-accent-deep)" />}>Pago seguro con Stripe</Trust>
          </div>

        </div>

        {/* RIGHT — demo */}
        <div style={{ position: 'relative' }}>
          {/* Backdrop glow */}
          <div style={{
            position: 'absolute', inset: -30,
            background: 'radial-gradient(60% 60% at 50% 40%, rgba(124,58,237,.28), transparent 70%)',
            filter: 'blur(10px)',
            zIndex: 0,
          }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <ProspectorDemo />
            {/* Caption */}
            <div style={{
              textAlign: 'center', marginTop: 14,
              fontSize: 12.5, color: 'var(--pl-ink-mute)',
              fontWeight: 600,
            }}>
              ↑ Demo en vivo. Esto es exactamente lo que verás dentro de la app.
            </div>
          </div>
        </div>
      </div>

      {/* Key-stat strip below hero */}
      <div className="pl-container" style={{ marginTop: 64 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          background: 'rgba(255,255,255,.6)',
          border: '1px solid var(--pl-border)',
          borderRadius: 22,
          overflow: 'hidden',
          backdropFilter: 'blur(12px)',
        }}>
          <Stat n="3 en 1" l="prospección + web + email" />
          <Stat n="0" l="plantillas — cada web es única" sep />
          <Stat n="10/día" l="con el rotador automático" sep icon={<IconBot size={18} color="var(--pl-accent)" />} />
          <Stat n="−68%" l="vs contratar SDR o ads" sep />
        </div>
      </div>
    </section>
  );
}

function Trust({ icon, children }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
      {icon}{children}
    </span>
  );
}

function Stat({ n, l, sep, icon }) {
  return (
    <div style={{
      padding: '22px 24px',
      borderLeft: sep ? '1px solid var(--pl-border)' : 'none',
      display: 'flex', flexDirection: 'column', gap: 4,
    }}>
      <div style={{
        fontFamily: 'var(--pl-font-display)', fontWeight: 700,
        fontSize: 28, letterSpacing: '-.02em',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        {icon} {n}
      </div>
      <div style={{ fontSize: 13, color: 'var(--pl-ink-3)' }}>{l}</div>
    </div>
  );
}

window.Hero = Hero;