/* global React, Reveal, Placeholder, POSTS */

function Blog({ setRoute }) {
  const featured = POSTS[0];
  const rest = POSTS.slice(1);
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>Blog · Insights</div></Reveal>
          <Reveal delay={120}>
            <h1>Pensamiento<br /><span className="serif accent">accionable.</span></h1>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <Reveal>
            <div className="grid grid-2" style={{ gap: 48, alignItems: 'center', marginBottom: 80 }}>
              <Placeholder aspect="4/3" tone="accent" label="POST / FEATURED">captura · post destacado</Placeholder>
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>
                  Destacado · {featured.cat} · {featured.readTime}
                </div>
                <h2 style={{ fontSize: 'clamp(32px, 4vw, 56px)', letterSpacing: '-0.025em', marginTop: 16, lineHeight: 1.05 }}>
                  {featured.title}
                </h2>
                <p style={{ marginTop: 20, fontSize: 18 }}>
                  Las marcas boutique están desplazando a los grandes jugadores en resultados de búsqueda.
                  No por trucos — por pertinencia. Así lo estamos haciendo en Growth Masters.
                </p>
                <div style={{ marginTop: 28 }}>
                  <a style={{ display: 'inline-flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--ink)', paddingBottom: 2, fontSize: 15, fontWeight: 500 }}>
                    Leer artículo →
                  </a>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Últimos artículos</div>
          </Reveal>

          {rest.map((p, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="blog-card">
                <Placeholder aspect="3/2" tone={i % 2 === 0 ? 'navy' : 'cream'} label={`POST / ${String(i + 2).padStart(2, '0')}`}>cover</Placeholder>
                <div>
                  <div className="blog-meta">{p.cat} · {p.readTime} · {p.date}</div>
                  <h3 className="blog-title" style={{ marginTop: 12 }}>{p.title}</h3>
                </div>
                <div style={{ fontSize: 20 }}>→</div>
              </div>
            </Reveal>
          ))}

          <Reveal>
            <div style={{ marginTop: 80, padding: 48, background: 'var(--ink)', color: 'var(--bg)', borderRadius: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
              <div>
                <div className="mono" style={{ color: 'var(--accent)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Newsletter</div>
                <h3 style={{ fontSize: 32, color: 'var(--bg)', marginTop: 12, letterSpacing: '-0.02em' }}>Un email al mes. Cero ruido.</h3>
              </div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <input type="email" placeholder="tu@correo.com" style={{ padding: '14px 20px', borderRadius: 999, border: '1px solid rgba(246,243,236,0.3)', background: 'transparent', color: 'var(--bg)', minWidth: 260, outline: 'none' }} />
                <button className="btn btn-accent">Suscribirme</button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Blog });