// Blog components — cover artwork, cards, article shell.

// Stylized cover artworks (no AI images — geometric placeholders with brand pattern)
function BlogCover({ kind, height = 'auto', compact = false }) {
  const presets = {
    edificio: { bg: 'linear-gradient(135deg, #1B3A6B 0%, #1E6BB0 100%)', accent: '#E8620A', icon: 'edificio' },
    chat:     { bg: 'linear-gradient(135deg, #14532D 0%, #16A34A 100%)', accent: '#F59E0B', icon: 'chat' },
    lista:    { bg: 'linear-gradient(135deg, #18181B 0%, #3F3F46 100%)', accent: '#E11D48', icon: 'lista' },
    busqueda: { bg: 'linear-gradient(135deg, #4338CA 0%, #6366F1 100%)', accent: '#FACC15', icon: 'busqueda' },
    grafica:  { bg: 'linear-gradient(135deg, #7C2D12 0%, #C2410C 100%)', accent: '#FACC15', icon: 'grafica' },
    tienda:   { bg: 'linear-gradient(135deg, #831843 0%, #DB2777 100%)', accent: '#FACC15', icon: 'tienda' },
  };
  const p = presets[kind] || presets.edificio;
  return (
    <div style={{
      width:'100%', height: height === 'auto' ? '100%' : height,
      aspectRatio: height === 'auto' ? '16/9' : 'auto',
      background: p.bg,
      position: 'relative', overflow: 'hidden',
      backgroundImage: `${p.bg}, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 2 L52 16 L52 48 L28 62 L4 48 L4 16 Z' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1'/></svg>")`,
      backgroundSize: 'cover, 56px 64px',
    }}>
      {/* Hex pattern overlay (already in background) */}
      <CoverGlyph kind={p.icon} accent={p.accent} compact={compact}/>
    </div>
  );
}

function CoverGlyph({ kind, accent, compact }) {
  const size = compact ? 80 : 140;
  const wrap = {
    position:'absolute', inset:0,
    display:'flex', alignItems:'center', justifyContent:'center',
    color: accent,
  };
  if (kind === 'edificio') {
    return (
      <div style={wrap}>
        <svg viewBox="0 0 200 200" width={size} height={size}>
          <g fill="none" stroke="currentColor" strokeWidth="3.5">
            <rect x="40" y="60" width="40" height="120"/>
            <rect x="80" y="40" width="40" height="140"/>
            <rect x="120" y="80" width="40" height="100"/>
            <line x1="50" y1="80" x2="60" y2="80"/><line x1="50" y1="100" x2="60" y2="100"/><line x1="50" y1="120" x2="60" y2="120"/><line x1="50" y1="140" x2="60" y2="140"/><line x1="50" y1="160" x2="60" y2="160"/>
            <line x1="90" y1="60" x2="100" y2="60"/><line x1="90" y1="80" x2="100" y2="80"/><line x1="90" y1="100" x2="100" y2="100"/><line x1="90" y1="120" x2="100" y2="120"/><line x1="90" y1="140" x2="100" y2="140"/><line x1="90" y1="160" x2="100" y2="160"/>
            <line x1="130" y1="100" x2="140" y2="100"/><line x1="130" y1="120" x2="140" y2="120"/><line x1="130" y1="140" x2="140" y2="140"/><line x1="130" y1="160" x2="140" y2="160"/>
          </g>
          <circle cx="100" cy="30" r="10" fill="currentColor" opacity=".5"/>
        </svg>
      </div>
    );
  }
  if (kind === 'chat') {
    return (
      <div style={wrap}>
        <svg viewBox="0 0 200 200" width={size} height={size}>
          <g fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round">
            <path d="M30 50 H120 V110 H70 L50 130 V110 H30 Z"/>
            <path d="M90 80 H160 V140 H110 L130 160 V140 H90 Z" opacity=".55"/>
          </g>
        </svg>
      </div>
    );
  }
  if (kind === 'lista') {
    return (
      <div style={wrap}>
        <svg viewBox="0 0 200 200" width={size} height={size}>
          <g fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round">
            <circle cx="50" cy="60"  r="6"/><line x1="70" y1="60" x2="150" y2="60"/>
            <circle cx="50" cy="90"  r="6"/><line x1="70" y1="90" x2="150" y2="90"/>
            <circle cx="50" cy="120" r="6" fill="currentColor"/><line x1="70" y1="120" x2="150" y2="120"/>
            <circle cx="50" cy="150" r="6"/><line x1="70" y1="150" x2="150" y2="150"/>
            <circle cx="50" cy="180" r="6"/><line x1="70" y1="180" x2="150" y2="180"/>
          </g>
        </svg>
      </div>
    );
  }
  if (kind === 'busqueda') {
    return (
      <div style={wrap}>
        <svg viewBox="0 0 200 200" width={size} height={size}>
          <g fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round">
            <circle cx="90" cy="90" r="42"/>
            <line x1="122" y1="122" x2="160" y2="160"/>
            <text x="65" y="98" fontFamily="monospace" fontSize="26" fill="currentColor" stroke="none">SEO</text>
          </g>
        </svg>
      </div>
    );
  }
  if (kind === 'grafica') {
    return (
      <div style={wrap}>
        <svg viewBox="0 0 200 200" width={size} height={size}>
          <g fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="30" y1="170" x2="170" y2="170"/>
            <line x1="30" y1="170" x2="30" y2="30"/>
            <path d="M40 150 L70 130 L100 100 L130 70 L160 40"/>
            <circle cx="40" cy="150" r="4" fill="currentColor"/>
            <circle cx="70" cy="130" r="4" fill="currentColor"/>
            <circle cx="100" cy="100" r="4" fill="currentColor"/>
            <circle cx="130" cy="70"  r="4" fill="currentColor"/>
            <circle cx="160" cy="40"  r="5" fill="currentColor"/>
          </g>
        </svg>
      </div>
    );
  }
  if (kind === 'tienda') {
    return (
      <div style={wrap}>
        <svg viewBox="0 0 200 200" width={size} height={size}>
          <g fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinejoin="round">
            <path d="M40 80 H160 L150 180 H50 Z"/>
            <path d="M70 80 V60 a30 30 0 0 1 60 0 V80"/>
            <circle cx="80" cy="130" r="5" fill="currentColor"/>
            <circle cx="120" cy="130" r="5" fill="currentColor"/>
          </g>
        </svg>
      </div>
    );
  }
  return null;
}

function BlogCard({ article }) {
  const author = COLABORADOR_AUTHORS[article.author];
  return (
    <a href={article.file} className="blog-card">
      <div className="cover"><BlogCover kind={article.cover} compact /></div>
      <div className="body">
        <span className="cat">{article.category}</span>
        <h3>{article.title}</h3>
        <p>{article.excerpt}</p>
        <div className="meta">
          <span className="article-meta">
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: author.color, color:'#fff',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              fontWeight: 700, fontSize: 10, marginRight: 6,
            }}>{author.initial}</span>
            {author.name}
          </span>
          <span style={{ opacity:.5 }}>·</span>
          <span>{formatDate(article.date)}</span>
          <span style={{ opacity:.5 }}>·</span>
          <span>{article.readingMin} min</span>
        </div>
      </div>
    </a>
  );
}

function formatDate(iso) {
  const d = new Date(iso);
  const months = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
}

function FeaturedCard({ article }) {
  const author = COLABORADOR_AUTHORS[article.author];
  return (
    <a href={article.file} className="card hoverable" style={{
      padding: 0, overflow: 'hidden',
      display:'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,1fr)',
      borderRadius: 22, textDecoration:'none', color:'inherit',
    }}>
      <div style={{ aspectRatio: '4/3' }}><BlogCover kind={article.cover}/></div>
      <div style={{ padding: 32, display:'flex', flexDirection:'column', justifyContent:'center', gap: 12 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--brand-secondary)', textTransform:'uppercase', letterSpacing: '.08em' }}>{article.category}</span>
          <span style={{
            fontSize: 10, fontWeight: 700, background:'var(--brand-accent)', color:'#fff',
            padding:'3px 8px', borderRadius: 999, textTransform:'uppercase', letterSpacing:'.06em',
          }}>Destacado</span>
        </div>
        <h2 style={{ fontSize: 28, lineHeight: 1.18, letterSpacing:'-0.02em' }}>{article.title}</h2>
        <p style={{ fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{article.excerpt}</p>
        <div style={{ display:'flex', alignItems:'center', gap: 10, marginTop: 6, fontSize: 13, color: 'var(--ink-mute)' }}>
          <span style={{
            width: 28, height: 28, borderRadius: 999, background: author.color, color:'#fff',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
            fontWeight: 700, fontSize: 12,
          }}>{author.initial}</span>
          <span style={{ fontWeight: 500, color:'var(--ink-soft)' }}>{author.name}</span>
          <span style={{ opacity:.5 }}>·</span>
          <span>{formatDate(article.date)}</span>
          <span style={{ opacity:.5 }}>·</span>
          <span>{article.readingMin} min</span>
        </div>
      </div>
    </a>
  );
}

// Article shell — used by every blog post page.
function ArticleShell({ article, children, related = [] }) {
  const author = COLABORADOR_AUTHORS[article.author];
  return (
    <>
      {/* Hero */}
      <section className="article-hero" data-screen-label="Article Hero">
        <div className="container" style={{ maxWidth: 880 }}>
          <div className="crumb" style={{ marginBottom: 14, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--ink-mute)' }}>
            <a href="index.html" style={{ color: 'var(--ink-soft)' }}>Inicio</a>
            <span style={{ opacity:.4, margin:'0 6px' }}>/</span>
            <a href="blog.html" style={{ color: 'var(--ink-soft)' }}>Blog</a>
            <span style={{ opacity:.4, margin:'0 6px' }}>/</span>
            <span>{article.category}</span>
          </div>
          <span className="article-meta">
            <span className="pill">{article.category}</span>
          </span>
          <h1 className="h-display" style={{ fontSize: 'clamp(30px, 4.2vw, 48px)', marginTop: 14, marginBottom: 18 }}>{article.title}</h1>
          <p className="lead" style={{ maxWidth: '64ch' }}>{article.excerpt}</p>
          <div className="article-meta" style={{ marginTop: 22 }}>
            <span className="author">
              <span className="avatar" style={{ background: author.color }}>{author.initial}</span>
              <span><b style={{ color: 'var(--ink)' }}>{author.name}</b> · {author.role}</span>
            </span>
            <span style={{ opacity:.5 }}>·</span>
            <span>{formatDate(article.date)}</span>
            <span style={{ opacity:.5 }}>·</span>
            <span>{article.readingMin} min de lectura</span>
          </div>
        </div>
      </section>

      {/* Cover image */}
      <section style={{ padding:'32px 0 0' }} data-screen-label="Article Cover">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div style={{ aspectRatio: '21/9', borderRadius: 22, overflow:'hidden', boxShadow:'var(--shadow-lg)' }}>
            <BlogCover kind={article.cover}/>
          </div>
        </div>
      </section>

      {/* Body with TOC sidebar */}
      <section className="section" data-screen-label="Article Body">
        <div className="container" style={{
          maxWidth: 1080,
          display:'grid', gridTemplateColumns:'minmax(0, 1fr) 240px', gap: 48,
        }}>
          <article className="article-prose">{children}</article>
          <aside>
            <div className="toc">
              <div className="label">Contenido</div>
              <ol>
                {article.toc.map((t, i) => <li key={i}><a href={'#sec-' + i}>{t}</a></li>)}
              </ol>
              <div style={{ marginTop: 18, paddingTop: 14, borderTop:'1px solid var(--line)', fontSize: 12, color:'var(--ink-mute)' }}>
                Escrito por {author.name} · publicado el {formatDate(article.date)}
              </div>
            </div>
          </aside>
        </div>
      </section>

      {/* CTA */}
      <section className="section hex-pattern" data-screen-label="Article CTA" style={{ color:'#fff', textAlign:'center', padding: '72px 0' }}>
        <div className="container" style={{ maxWidth: 720 }}>
          <h2 className="h-section" style={{ color:'#fff' }}>¿Listo para automatizar tu negocio?</h2>
          <p className="lead" style={{ color:'rgba(255,255,255,.75)', margin:'14px auto 26px' }}>
            En 90 segundos tendrás a tu Director General contratando a tu primer colaborador IA.
          </p>
          <a href="demo.html" className="btn btn-primary btn-lg">Empieza gratis →</a>
        </div>
      </section>

      {/* Related */}
      {related.length > 0 && (
        <section className="section" data-screen-label="Related Articles">
          <div className="container">
            <h2 className="h-section" style={{ marginBottom: 28, fontSize: 28 }}>Sigue leyendo</h2>
            <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
              {related.map(a => <BlogCard key={a.slug} article={a}/>)}
            </div>
          </div>
        </section>
      )}
    </>
  );
}

Object.assign(window, { BlogCover, BlogCard, FeaturedCard, ArticleShell, formatDate });