/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const CS = {
  orange: '#F1A92F',
  amber:  '#D88812',
  soft:   '#E8C940',
  bg:     'var(--sub-interactive-bg)',
  deep:   '#5A3C0C',
};

// ============================================================
// HERO
// ============================================================
function CsHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(85% 65% at 50% 0%, ${CS.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 60 }} color={CS.soft} opacity={0.45} size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color={CS.orange} opacity={0.2} size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(90,60,12,0.06) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
      }} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        {/* Breadcrumb */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em',
          marginBottom: 26,
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/ia" style={{ color: 'var(--fg3)' }}>ia</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: CS.amber, fontWeight: 600 }}>content-studio</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'start',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22, flexWrap: 'wrap' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${CS.orange}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: CS.amber,
              }}>
                <Icon name="film" size={12} />
                FRSKO Interactive · Producto IA
              </div>
              <span style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                color: 'var(--fg3)',
              }}>Producción · Brand</span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(38px, 5.2vw, 72px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              <span style={{ color: CS.amber, fontStyle: 'italic' }}>60 piezas</span> al mes.<br/>
              El mismo presupuesto<br/>
              que antes pagaba por <span style={{
                background: `linear-gradient(180deg, transparent 60%, ${CS.soft} 60%)`,
                padding: '0 6px',
              }}>6</span>.
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--fg2)', maxWidth: 560, margin: '0 0 32px',
            }}>
              Content Studio AI produce video, podcast, redes sociales, blog y newsletter con un stack de IA que mantiene tu voz de marca — sin los tiempos de espera ni los costos de una productora tradicional.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={() => {
                document.getElementById('reto')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver el reto de las 30 piezas
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar propuesta
              </Button>
            </div>

            {/* Trust line */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: CS.amber }} /> 4 formatos
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: CS.amber }} /> On-brand garantizado
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: CS.amber }} /> Tú apruebas todo
              </div>
            </div>
          </div>

          <ContentFeedPreview />
        </div>
      </Container>
    </section>
  );
}

function ContentFeedPreview() {
  // 5 different content pieces mid-production
  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      boxShadow: 'var(--shadow-lg)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 20px',
        background: `linear-gradient(135deg, ${CS.amber} 0%, ${CS.orange} 100%)`,
        color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="film" size={18} />
          <span style={{
            fontFamily: 'var(--font-heading)', fontWeight: 600,
            fontSize: 14, letterSpacing: '-0.005em',
          }}>Pipeline · Semana 23</span>
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          padding: '3px 8px', borderRadius: 999,
          background: 'rgba(255,255,255,0.18)',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#fff',
            animation: 'csPulse 2s infinite',
          }} />
          12 piezas activas
        </div>
      </div>

      {/* Progress bar */}
      <div style={{
        padding: '14px 20px',
        background: CS.bg,
        borderBottom: '1px solid var(--border)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: CS.deep }}>Mes en curso</span>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: CS.deep, fontWeight: 600,
          }}>47 / 60 piezas</span>
        </div>
        <div style={{ height: 6, background: 'rgba(255,255,255,0.6)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{
            width: '78%', height: '100%',
            background: `linear-gradient(90deg, ${CS.amber}, ${CS.orange})`,
            borderRadius: 999,
            animation: 'csGrow 1.4s var(--ease-out)',
          }} />
        </div>
      </div>

      {/* Content tiles */}
      <div style={{
        padding: 18,
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12,
      }}>
        <ContentTile
          format="REEL · Vertical"
          icon="play"
          aspect="9/14"
          title="Cómo bajar tu CAC en Q3"
          status="Editando"
          statusColor="#22A06B"
          delay={0}>
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(160deg, #2A2D3A 0%, ${CS.amber} 100%)`,
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            display: 'grid', placeItems: 'center',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 999,
              background: 'rgba(255,255,255,0.95)',
              display: 'grid', placeItems: 'center',
              color: CS.deep,
            }}>
              <Icon name="play" size={16} style={{ marginLeft: 2 }} />
            </div>
          </div>
        </ContentTile>

        <ContentTile
          format="LINKEDIN · Post"
          icon="message"
          aspect="1/1"
          title="3 errores en outbound B2B"
          status="Listo"
          statusColor={CS.amber}
          delay={120}>
          <div style={{ padding: 12, background: '#fff', height: '100%' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <div style={{ width: 22, height: 22, borderRadius: 999, background: 'var(--ink-200)' }} />
              <div>
                <div style={{ width: 60, height: 6, background: 'var(--ink-200)', borderRadius: 3, marginBottom: 3 }} />
                <div style={{ width: 40, height: 4, background: 'var(--ink-100)', borderRadius: 2 }} />
              </div>
            </div>
            <div style={{ width: '90%', height: 5, background: 'var(--ink-100)', borderRadius: 2, marginBottom: 4 }} />
            <div style={{ width: '78%', height: 5, background: 'var(--ink-100)', borderRadius: 2, marginBottom: 4 }} />
            <div style={{ width: '65%', height: 5, background: 'var(--ink-100)', borderRadius: 2 }} />
          </div>
        </ContentTile>

        <ContentTile
          format="PODCAST · Audio"
          icon="play"
          aspect="2/1"
          title="Ep. 14 con Patricia"
          status="Mezclando"
          statusColor="#22A06B"
          delay={240}>
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(135deg, ${CS.deep} 0%, ${CS.amber} 100%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-around',
            padding: '0 14px',
          }}>
            {[12, 28, 18, 36, 22, 14, 30, 24, 16, 32, 18, 28, 12, 20].map((h, i) => (
              <div key={i} style={{
                width: 3, height: h,
                background: 'rgba(255,255,255,0.85)',
                borderRadius: 2,
                animation: `csWave 1.2s ease-in-out ${i * 70}ms infinite alternate`,
              }} />
            ))}
          </div>
        </ContentTile>

        <ContentTile
          format="CARRUSEL · 6 slides"
          icon="film"
          aspect="1/1"
          title="Guía: SEO + AEO 2026"
          status="Diseñando"
          statusColor="#F8B62D"
          delay={360}>
          <div style={{
            position: 'absolute', inset: 0,
            background: CS.bg,
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            padding: 14,
          }}>
            <div style={{ display: 'flex', gap: 4, justifyContent: 'center', marginBottom: 10 }}>
              {[1,2,3,4,5,6].map(n => (
                <div key={n} style={{
                  width: 6, height: 6, borderRadius: 999,
                  background: n === 1 ? CS.amber : 'rgba(241,169,47,0.3)',
                }} />
              ))}
            </div>
            <div style={{
              fontFamily: 'var(--font-heading)', fontSize: 14, fontWeight: 700,
              color: CS.deep, letterSpacing: '-0.01em', lineHeight: 1.1,
              textAlign: 'center',
            }}>Cómo aparecer en ChatGPT</div>
          </div>
        </ContentTile>
      </div>

      {/* Footer */}
      <div style={{
        padding: '12px 20px',
        background: 'var(--ink-25)',
        borderTop: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--fg3)',
      }}>
        <span><span style={{ color: CS.amber, fontWeight: 600 }}>4 piezas</span> esperando tu aprobación</span>
        <span style={{ color: CS.amber, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          Ver calendario <Icon name="arrow-right" size={11} />
        </span>
      </div>

      <style>{`
        @keyframes csPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
          50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
        }
        @keyframes csGrow { from { width: 0; } to { width: 78%; } }
        @keyframes csWave {
          from { transform: scaleY(0.4); }
          to { transform: scaleY(1.1); }
        }
        @keyframes csIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function ContentTile({ format, title, status, statusColor, aspect, children, delay = 0 }) {
  return (
    <div style={{
      border: '1px solid var(--border)',
      borderRadius: 14,
      overflow: 'hidden',
      background: '#fff',
      animation: `csIn 500ms var(--ease-out) ${delay}ms both`,
    }}>
      <div style={{
        position: 'relative',
        aspectRatio: aspect,
        background: 'var(--ink-50)',
      }}>{children}</div>
      <div style={{ padding: '10px 12px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 4,
        }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 9.5,
            color: 'var(--fg3)', letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}>{format}</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            fontSize: 10, fontWeight: 600,
            color: statusColor,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: statusColor }} />
            {status}
          </span>
        </div>
        <div style={{
          fontSize: 12, fontWeight: 600, color: 'var(--fg1)',
          letterSpacing: '-0.005em', lineHeight: 1.2,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{title}</div>
      </div>
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function CsProblem() {
  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Eyebrow>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 40px', color: 'var(--fg1)',
            maxWidth: 1000,
            textWrap: 'pretty',
          }}>
            Tienes estrategia de contenido.<br/>
            <span style={{ color: CS.amber, fontStyle: 'italic' }}>No tienes con qué ejecutarla.</span>
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48,
            alignItems: 'start',
          }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Los equipos de marketing en México pasan el <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>60% de su tiempo de contenido esperando</strong> — esperando al diseñador, esperando la aprobación, esperando el video del proveedor externo.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Mientras tanto, tu competencia publica todos los días y el algoritmo premia la consistencia.
              </p>
              <p style={{
                fontSize: 22, lineHeight: 1.3, color: CS.deep,
                fontWeight: 700, fontStyle: 'italic',
                margin: 0, fontFamily: 'var(--font-heading)',
                letterSpacing: '-0.02em',
              }}>
                El contenido de calidad no debería ser escaso. Con IA, ya no lo es.
              </p>
            </div>

            {/* Visual comparison */}
            <div style={{
              background: 'var(--ink-25)',
              border: '1px solid var(--border)',
              borderRadius: 24,
              padding: '28px 28px',
            }}>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 18,
              }}>Distribución típica de la semana</div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <BarRow label="Esperando aprobaciones" value={60} color="var(--ink-400)" />
                <BarRow label="Coordinando proveedores" value={20} color="var(--ink-300)" />
                <BarRow label="Produciendo" value={15} color={CS.amber} />
                <BarRow label="Pensando estrategia" value={5} color={CS.deep} />
              </div>

              <p style={{
                marginTop: 18, paddingTop: 18,
                borderTop: '1px solid var(--border)',
                fontFamily: 'var(--font-mono)', fontSize: 11.5,
                color: 'var(--fg3)', margin: '18px 0 0',
              }}>
                <span style={{ color: CS.amber, fontWeight: 600 }}>// </span>
                Fuente: piloto con 12 PYMES mexicanas, 2024–2025.
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function BarRow({ label, value, color }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontSize: 13, color: 'var(--fg2)' }}>{label}</span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: 'var(--fg1)', fontWeight: 600,
        }}>{value}%</span>
      </div>
      <div style={{ height: 8, background: 'var(--ink-100)', borderRadius: 999, overflow: 'hidden' }}>
        <div style={{
          width: `${value}%`, height: '100%',
          background: color, borderRadius: 999,
          animation: 'csBar 1s var(--ease-out) both',
        }} />
      </div>
      <style>{`@keyframes csBar { from { width: 0; } }`}</style>
    </div>
  );
}

// ============================================================
// FORMATS — 2x2 with sample previews
// ============================================================
function CsFormats() {
  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -120, top: 80 }} color={CS.soft} opacity={0.3} size={300} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Qué incluye</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 18px', color: 'var(--fg1)',
          }}>
            Un estudio de producción completo — <span style={{ color: CS.amber }}>sin contratar a nadie más.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            Cuatro formatos, todos los canales, una sola operación.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          <FormatCard
            tag="VIDEO"
            icon="film"
            title="Video"
            subtitle="Reels, TikToks, YouTube, testimoniales, explainers"
            body="Guión generado con IA, voz con ElevenLabs, video con HeyGen o avatares. Edición incluida."
            stack={['Claude', 'HeyGen', 'ElevenLabs', 'CapCut']}
            preview={<VideoPreview />}
          />
          <FormatCard
            tag="AUDIO"
            icon="play"
            title="Audio & Podcast"
            subtitle="Episodios, audiogramas, notas de voz"
            body="Producción completa con voces generativas o edición de grabación real."
            stack={['Descript', 'ElevenLabs', 'Riverside']}
            preview={<AudioPreview />}
          />
          <FormatCard
            tag="TEXTO"
            icon="message"
            title="Texto"
            subtitle="LinkedIn, IG, blog SEO, newsletter, argumentarios"
            body="Posts orgánicos, artículos largos con SEO, newsletters editorializados, guiones de ventas."
            stack={['Claude', 'SurferSEO', 'Jasper']}
            preview={<TextPreview />}
          />
          <FormatCard
            tag="DISEÑO"
            icon="sparkles"
            title="Diseño"
            subtitle="Carruseles, infografías, stories, banners"
            body="Con Canva Pro y plantillas on-brand específicas de tu empresa."
            stack={['Canva Pro', 'Figma', 'Midjourney']}
            preview={<DesignPreview />}
          />
        </div>

        {/* Editorial calendar note */}
        <div style={{
          marginTop: 32,
          background: '#fff',
          border: `1px solid ${CS.orange}`,
          borderRadius: 22,
          padding: '28px 32px',
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 24,
          alignItems: 'center',
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 16,
            background: CS.bg, color: CS.amber,
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <Icon name="calendar" size={26} stroke={1.6} />
          </div>
          <div>
            <h3 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 19, letterSpacing: '-0.015em',
              margin: '0 0 4px', color: 'var(--fg1)',
            }}>¿Lo decides tú o lo decidimos juntos?</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.5, color: 'var(--fg2)', margin: 0 }}>
              Cada mes tu estratega propone el calendario editorial basado en objetivos, temporalidad y lo que funciona en tu industria. Tú apruebas, modificas o descartas. Nosotros producimos.
            </p>
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: CS.amber, fontWeight: 600,
            padding: '6px 14px', borderRadius: 999,
            background: CS.bg,
            whiteSpace: 'nowrap',
          }}>Tú apruebas todo</div>
        </div>
      </Container>
    </section>
  );
}

function FormatCard({ tag, icon, title, subtitle, body, stack, preview }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      transition: 'all var(--dur-base) var(--ease-out)',
    }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = CS.orange; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}>
      {/* Preview area */}
      <div style={{ aspectRatio: '16/9', position: 'relative', background: CS.bg, overflow: 'hidden' }}>
        {preview}
      </div>

      <div style={{ padding: '24px 28px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 12,
        }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 10.5,
            color: CS.amber, fontWeight: 700, letterSpacing: '0.12em',
          }}>{tag}</span>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: CS.bg, color: CS.amber,
            display: 'grid', placeItems: 'center',
          }}>
            <Icon name={icon} size={18} />
          </div>
        </div>
        <h3 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 24, letterSpacing: '-0.025em',
          margin: '0 0 4px', color: 'var(--fg1)',
        }}>{title}</h3>
        <div style={{ fontSize: 13.5, color: CS.amber, fontStyle: 'italic', marginBottom: 12 }}>{subtitle}</div>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 16px' }}>
          {body}
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {stack.map(s => (
            <span key={s} style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              padding: '4px 9px',
              background: 'var(--ink-25)',
              border: '1px solid var(--border)',
              borderRadius: 6,
              color: 'var(--fg2)',
            }}>{s}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function VideoPreview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `linear-gradient(135deg, #2A2D3A 0%, ${CS.amber} 100%)`,
      display: 'grid', placeItems: 'center', position: 'relative',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18), transparent 50%)',
      }} />
      <div style={{
        width: 64, height: 64, borderRadius: 999,
        background: 'rgba(255,255,255,0.95)',
        display: 'grid', placeItems: 'center',
        color: CS.deep,
        boxShadow: '0 12px 32px rgba(0,0,0,0.25)',
        position: 'relative',
      }}>
        <Icon name="play" size={26} style={{ marginLeft: 3 }} />
      </div>
      <div style={{
        position: 'absolute', bottom: 12, left: 14, right: 14,
        display: 'flex', alignItems: 'center', gap: 8,
        color: '#fff',
      }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>0:28</span>
        <div style={{ flex: 1, height: 3, background: 'rgba(255,255,255,0.3)', borderRadius: 999 }}>
          <div style={{ width: '38%', height: '100%', background: '#fff', borderRadius: 999 }} />
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>1:14</span>
      </div>
    </div>
  );
}

function AudioPreview() {
  const bars = [12, 22, 18, 32, 26, 14, 28, 36, 22, 16, 30, 24, 18, 32, 20, 14, 28, 18, 24, 16, 30, 22, 14, 26, 18];
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `linear-gradient(135deg, ${CS.deep} 0%, ${CS.amber} 100%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 20px', gap: 4, position: 'relative',
    }}>
      {bars.map((h, i) => (
        <div key={i} style={{
          width: 4, height: h * 1.6,
          background: 'rgba(255,255,255,0.92)',
          borderRadius: 2,
        }} />
      ))}
      <div style={{
        position: 'absolute', top: 14, left: 16,
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'rgba(255,255,255,0.9)',
      }}>EP. 14</div>
      <div style={{
        position: 'absolute', bottom: 14, right: 16,
        fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'rgba(255,255,255,0.9)',
      }}>32:14</div>
    </div>
  );
}

function TextPreview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#fff',
      padding: 18, position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--ink-200)' }} />
        <div>
          <div style={{ width: 80, height: 7, background: 'var(--ink-300)', borderRadius: 3, marginBottom: 4 }} />
          <div style={{ width: 50, height: 5, background: 'var(--ink-200)', borderRadius: 2 }} />
        </div>
      </div>
      <div style={{
        fontFamily: 'var(--font-heading)', fontSize: 14, fontWeight: 600,
        color: 'var(--fg1)', marginBottom: 8, letterSpacing: '-0.01em',
        lineHeight: 1.25,
      }}>3 errores que cometí en mi primer año vendiendo SaaS B2B</div>
      <div style={{ width: '95%', height: 5, background: 'var(--ink-100)', borderRadius: 2, marginBottom: 5 }} />
      <div style={{ width: '88%', height: 5, background: 'var(--ink-100)', borderRadius: 2, marginBottom: 5 }} />
      <div style={{ width: '75%', height: 5, background: 'var(--ink-100)', borderRadius: 2, marginBottom: 14 }} />
      <div style={{ display: 'flex', gap: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg3)' }}>
        <span>♡ 184</span><span>💬 22</span><span>↗ 18</span>
      </div>
    </div>
  );
}

function DesignPreview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: CS.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      padding: '0 18px',
    }}>
      {[1,2,3,4,5].map(n => (
        <div key={n} style={{
          width: 60, height: 100,
          background: n === 1 ? '#fff' : 'rgba(255,255,255,0.55)',
          borderRadius: 8,
          border: '1px solid rgba(241,169,47,0.3)',
          padding: 8,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          transform: `translateY(${n === 1 ? -8 : 0}px) rotate(${(n - 3) * 2}deg)`,
          boxShadow: n === 1 ? '0 8px 16px rgba(241,169,47,0.25)' : 'none',
        }}>
          <div style={{ width: '60%', height: 4, background: n === 1 ? CS.amber : 'var(--ink-200)', borderRadius: 2 }} />
          <div>
            <div style={{ width: '100%', height: 3, background: 'var(--ink-100)', borderRadius: 2, marginBottom: 2 }} />
            <div style={{ width: '75%', height: 3, background: 'var(--ink-100)', borderRadius: 2 }} />
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { CsHero, CsProblem, CsFormats });