// Problem section — pain agitator with three concrete failure modes
function Problem() {
  const pains = [
    {
      illo: <IlloDeadEmails />,
      title: 'Envías 200 emails al mes y NO obtienes ni una respuesta',
      bullet: 'Plantillas genéricas. Cero personalización. Spam.',
      tag: 'Outreach manual',
    },
    {
      illo: <IlloFragileCarter />,
      title: 'En verano dependes de 2-3 clientes para llegar a fin de mes',
      bullet: 'Cartera frágil. Un cliente que se va y te tambaleas.',
      tag: 'Cartera frágil',
    },
    {
      illo: <IlloAdsBurning />,
      title: 'Quemas 600€/mes en Ads y captas leads de 47€',
      bullet: 'CPL imposible. ROAS negativo. Y aún tienes que venderles.',
      tag: 'Ads tóxicas',
    },
  ];

  return (
    <section style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">El problema</span>
          <h2 className="pl-display">
            Conseguir clientes de SEO <br />
            es más difícil que nunca. <span className="pl-accent-grad">Hasta ahora.</span>
          </h2>
          <p>Si llevas más de 6 meses freelance o con agencia, <b style={{ color: 'var(--pl-ink)' }}>algo de esto te suena.</b> Demasiado.</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22,
        }}>
          {pains.map((p, i) => (
            <div key={i} style={{
              background: 'var(--pl-surface)',
              borderRadius: 22,
              padding: 28,
              border: '1px solid var(--pl-border)',
              boxShadow: 'var(--pl-shadow-sm)',
              position: 'relative',
              overflow: 'hidden',
            }}>
              {/* corner decoration */}
              <div style={{
                position: 'absolute', top: -18, right: -18,
                width: 80, height: 80, borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(220,38,38,.10), transparent 70%)',
              }} />

              {/* SVG illustration */}
              <div style={{
                height: 110, marginBottom: 18,
                display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
                gap: 12,
              }}>
                <div style={{ flex: 1, height: '100%', display: 'flex', alignItems: 'center' }}>
                  {p.illo}
                </div>
                <span style={{
                  alignSelf: 'flex-start',
                  fontSize: 10, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase',
                  color: '#dc2626',
                  background: 'rgba(220,38,38,.08)',
                  padding: '4px 9px', borderRadius: 6,
                  whiteSpace: 'nowrap',
                }}>✕ {p.tag}</span>
              </div>

              <h3 style={{
                margin: '0 0 10px', fontFamily: 'var(--pl-font-display)',
                fontSize: 20, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-.01em',
              }}>{p.title}</h3>
              <p style={{ margin: 0, fontSize: 14.5, color: 'var(--pl-ink-3)', lineHeight: 1.5 }}>{p.bullet}</p>
            </div>
          ))}
        </div>

        {/* Resolution arrow */}
        <div style={{
          marginTop: 36, textAlign: 'center',
          fontSize: 17, color: 'var(--pl-ink-2)',
        }}>
          PillaLeads cambia las 3 cosas, en un solo flujo. <span style={{ color: 'var(--pl-accent)', fontWeight: 700 }}>↓</span>
        </div>
      </div>
    </section>
  );
}

// ─── Illustrations ────────────────────────────────────────────────

// Three muted envelopes + one rejected, with a "0 replies" badge
function IlloDeadEmails() {
  return (
    <svg viewBox="0 0 180 110" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', maxHeight: 110 }}>
      <defs>
        <linearGradient id="env-fade" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#f3f0fe"/>
          <stop offset="1" stopColor="#e7e2f5"/>
        </linearGradient>
      </defs>
      {/* stack of grey ghosted envelopes */}
      {[0, 1, 2, 3, 4].map(i => (
        <g key={i} transform={`translate(${10 + i * 6} ${22 - i * 3}) rotate(${-6 + i * 1.5})`}>
          <rect width="68" height="44" rx="3" fill="url(#env-fade)" stroke="#cdc6e8" strokeWidth="1" opacity={0.55 + i * 0.08}/>
          <path d="M0 0 L34 24 L68 0" stroke="#a89fcc" strokeWidth="1" fill="none" opacity={0.6}/>
        </g>
      ))}
      {/* "0 replies" callout */}
      <g transform="translate(96, 14)">
        <rect width="76" height="32" rx="16" fill="#fef2f2" stroke="#dc2626" strokeWidth="1.5"/>
        <text x="38" y="14" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fontWeight="700" fill="#7f1d1d" letterSpacing="0.05em">REPLIES</text>
        <text x="38" y="27" textAnchor="middle" fontFamily="Bricolage Grotesque, sans-serif" fontSize="14" fontWeight="800" fill="#dc2626" letterSpacing="-0.02em">0 / 200</text>
      </g>
      {/* small chat bubbles with X */}
      <g transform="translate(110, 60)">
        <circle cx="6" cy="6" r="6" fill="#dc2626" opacity=".15"/>
        <path d="M3 3 L9 9 M9 3 L3 9" stroke="#dc2626" strokeWidth="1.5" strokeLinecap="round"/>
      </g>
      <g transform="translate(128, 72)">
        <circle cx="8" cy="8" r="8" fill="#dc2626" opacity=".15"/>
        <path d="M4 4 L12 12 M12 4 L4 12" stroke="#dc2626" strokeWidth="1.8" strokeLinecap="round"/>
      </g>
      <g transform="translate(150, 60)">
        <circle cx="5" cy="5" r="5" fill="#dc2626" opacity=".15"/>
        <path d="M2 2 L8 8 M8 2 L2 8" stroke="#dc2626" strokeWidth="1.5" strokeLinecap="round"/>
      </g>
      {/* spam tag overlay */}
      <g transform="translate(38, 56) rotate(-12)">
        <rect width="50" height="18" rx="2" fill="#7f1d1d"/>
        <text x="25" y="13" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="9" fontWeight="800" fill="#fff" letterSpacing="0.15em">SPAM</text>
      </g>
    </svg>
  );
}

// Revenue bar chart that crashes in summer + departing-client silhouettes
function IlloFragileCarter() {
  return (
    <svg viewBox="0 0 180 110" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', maxHeight: 110 }}>
      <defs>
        <linearGradient id="bar-down" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#dc2626"/>
          <stop offset="1" stopColor="#fca5a5"/>
        </linearGradient>
      </defs>
      {/* axis */}
      <line x1="10" y1="92" x2="170" y2="92" stroke="#cdc6e8" strokeWidth="1"/>
      {/* bars Ene → Dic, dropping in summer */}
      {[
        { h: 60, c: '#a89fcc' },
        { h: 64, c: '#a89fcc' },
        { h: 68, c: '#a89fcc' },
        { h: 56, c: '#a89fcc' },
        { h: 44, c: '#cdc6e8' },
        { h: 22, c: 'url(#bar-down)' }, // jun
        { h: 14, c: 'url(#bar-down)' }, // jul - crash
        { h: 18, c: 'url(#bar-down)' }, // ago
        { h: 38, c: '#cdc6e8' },
        { h: 52, c: '#a89fcc' },
        { h: 58, c: '#a89fcc' },
        { h: 62, c: '#a89fcc' },
      ].map((b, i) => (
        <rect key={i} x={14 + i * 12.5} y={92 - b.h} width="9" height={b.h} rx="1.5" fill={b.c}/>
      ))}
      {/* crash annotation */}
      <g transform="translate(72, 12)">
        <path d="M0 0 Q 10 8 18 14" stroke="#dc2626" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeDasharray="3 3"/>
        <text x="-2" y="-2" fontFamily="Manrope, sans-serif" fontSize="10" fontWeight="700" fill="#dc2626" letterSpacing="0.04em">-78% verano</text>
      </g>
      {/* baseline label */}
      <text x="14" y="104" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#a89fcc" fontWeight="600">E F M A M J J A S O N D</text>
    </svg>
  );
}

// Burning euro stack + arrow down on ROAS
function IlloAdsBurning() {
  return (
    <svg viewBox="0 0 180 110" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', maxHeight: 110 }}>
      <defs>
        <linearGradient id="flame" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" stopColor="#dc2626"/>
          <stop offset=".5" stopColor="#f59e0b"/>
          <stop offset="1" stopColor="#fde047"/>
        </linearGradient>
        <radialGradient id="glow" cx=".5" cy=".7" r=".7">
          <stop offset="0" stopColor="#f59e0b" stopOpacity=".4"/>
          <stop offset="1" stopColor="transparent"/>
        </radialGradient>
      </defs>
      {/* glow */}
      <ellipse cx="44" cy="80" rx="46" ry="28" fill="url(#glow)"/>

      {/* euro bills stack */}
      <g transform="translate(20, 60)">
        <rect width="58" height="32" rx="3" fill="#e9e3f5" stroke="#a89fcc" opacity=".55" transform="translate(4 8)"/>
        <rect width="58" height="32" rx="3" fill="#dcd2f2" stroke="#a89fcc" opacity=".75" transform="translate(2 4)"/>
        <rect width="58" height="32" rx="3" fill="#fff" stroke="#7c3aed" strokeWidth="1.5"/>
        <text x="29" y="22" textAnchor="middle" fontFamily="Bricolage Grotesque, sans-serif" fontWeight="800" fontSize="16" fill="#5b21b6" letterSpacing="-0.02em">600€</text>
      </g>

      {/* flame on top */}
      <g transform="translate(36, 32)">
        <path d="M14 0 C 8 8 4 16 4 24 C 4 32 10 38 14 38 C 18 38 24 32 24 24 C 24 18 22 14 18 10 C 18 14 16 16 14 16 C 12 16 12 12 14 0 Z" fill="url(#flame)" stroke="#dc2626" strokeWidth="1"/>
        <path d="M10 22 C 8 26 8 30 10 32 C 12 30 14 26 12 22 Z" fill="#fde047"/>
      </g>

      {/* small flames */}
      <g transform="translate(54, 42)">
        <path d="M6 0 C 3 4 2 8 2 12 C 2 16 4 18 6 18 C 8 18 12 16 12 12 C 12 8 10 4 6 0 Z" fill="url(#flame)" opacity=".9"/>
      </g>
      <g transform="translate(26, 50)">
        <path d="M5 0 C 2 3 1 6 1 9 C 1 12 3 13 5 13 C 7 13 9 12 9 9 C 9 6 7 3 5 0 Z" fill="url(#flame)" opacity=".75"/>
      </g>

      {/* CPL / ROAS panel */}
      <g transform="translate(102, 22)">
        <rect width="68" height="68" rx="10" fill="#fef2f2" stroke="#dc2626" strokeOpacity=".25"/>
        <text x="8" y="16" fontFamily="JetBrains Mono, monospace" fontSize="7" fontWeight="700" fill="#7f1d1d" letterSpacing="0.1em">LEAD</text>
        <text x="8" y="32" fontFamily="Bricolage Grotesque, sans-serif" fontSize="18" fontWeight="800" fill="#dc2626" letterSpacing="-0.04em">47€</text>
        <line x1="8" y1="40" x2="60" y2="40" stroke="#dc2626" strokeOpacity=".2"/>
        <text x="8" y="52" fontFamily="JetBrains Mono, monospace" fontSize="7" fontWeight="700" fill="#7f1d1d" letterSpacing="0.1em">ROAS</text>
        <g transform="translate(8, 56)">
          <path d="M0 4 L8 12 L16 4" stroke="#dc2626" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <text x="22" y="12" fontFamily="Bricolage Grotesque, sans-serif" fontSize="11" fontWeight="800" fill="#dc2626" letterSpacing="-0.02em">−68%</text>
        </g>
      </g>
    </svg>
  );
}

Object.assign(window, { Problem, IlloDeadEmails, IlloFragileCarter, IlloAdsBurning });