/* Torre Auro — Perspectiva (carta editorial) */

/* ─── Hero ─── */
function PerspectivaHero() {
  return (
    <section className="ed-hero">
      <div className="container">
        <div className="kicker">/ La carta editorial</div>
        <h1 className="ed-hero-title">
          <em>Perspectiva.</em>
        </h1>
        <p className="ed-hero-sub">
          Un punto de vista sobre los ecosistemas corporativos, la experiencia de cliente y lo que está por llegar a Veracruz. Una carta editorial mensual desde Torre Auro.
        </p>
        <div className="ed-hero-meta">
          <span>Publicación mensual</span>
          <span>·</span>
          <span>{POSTS.length} entradas</span>
        </div>
      </div>
    </section>
  );
}

/* ─── Index ─── */
function PerspectivaIndex() {
  const featured = POSTS[POSTS.length - 1]; // newest is last in the human-listed array — but we want newest first
  const sorted = [...POSTS].sort((a, b) => b.dateISO.localeCompare(a.dateISO));
  const [head, ...rest] = sorted;

  return (
    <div className="perspectiva-page">
      <PerspectivaHero />

      {/* Featured */}
      <section className="ed-featured">
        <div className="container">
          <div className="ed-featured-grid" onClick={() => navigate('/perspectiva/' + head.slug)}>
            <div className="ed-featured-img">
              <div className={`bg-cover ${head.cover}`} aria-hidden="true" />
            </div>
            <div className="ed-featured-body">
              <div className="ed-issue">{head.issue}</div>
              <h2>{head.title}</h2>
              <p>{head.excerpt}</p>
              <div className="ed-meta-row">
                <span>{head.date}</span>
                <span className="dot">·</span>
                <span>{head.readMin} min de lectura</span>
                <span className="dot">·</span>
                <span>{head.tag}</span>
              </div>
              <button className="btn btn-outline" style={{ marginTop:32 }}>
                Leer la entrada <Icon n="ti-arrow-right" />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Archive */}
      <section className="section paper">
        <div className="container">
          <div className="section-head" style={{ marginBottom:48 }}>
            <div className="kicker">/ Archivo</div>
            <h2>Entradas <em>anteriores.</em></h2>
          </div>
          <div className="ed-archive">
            {rest.map((p) => (
              <article key={p.id} className="ed-archive-row" onClick={() => navigate('/perspectiva/' + p.slug)}>
                <div className="ed-archive-issue">{p.issue}</div>
                <div className="ed-archive-main">
                  <h3>{p.title}</h3>
                  <p>{p.excerpt}</p>
                </div>
                <div className="ed-archive-meta">
                  <span>{p.date}</span>
                  <span className="ed-archive-arrow" aria-hidden="true">→</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Subscribe */}
      <section className="ed-subscribe">
        <div className="container ed-subscribe-inner">
          <div>
            <div className="kicker light">/ Suscríbete</div>
            <h2>Recibe <em>Perspectiva</em><br/>en tu correo.</h2>
            <p>Una entrada por mes. Sin promociones, sin newsletter masivo. Solo el punto de vista de Torre Auro.</p>
          </div>
          <form className="ed-sub-form" onSubmit={(e) => { e.preventDefault(); alert('Gracias por suscribirte.'); }}>
            <input type="email" required placeholder="tu@empresa.com" />
            <button type="submit" className="btn btn-gold">Suscribirme <Icon n="ti-arrow-right" /></button>
          </form>
        </div>
      </section>
    </div>
  );
}

/* ─── Detail ─── */
function PerspectivaPost({ post }) {
  const sorted = [...POSTS].sort((a, b) => b.dateISO.localeCompare(a.dateISO));
  const others = sorted.filter(p => p.slug !== post.slug).slice(0, 2);

  return (
    <div className="perspectiva-post">
      {/* Cover */}
      <section className="ed-post-cover">
        <div className={`bg-cover zoom ${post.cover}`} aria-hidden="true" />
        <div className="ed-post-cover-overlay" />
        <div className="container ed-post-cover-content">
          <button className="lvl-back" onClick={() => navigate('/perspectiva')}>
            <Icon n="ti-arrow-left" /> Volver a Perspectiva
          </button>
          <div className="ed-issue light">{post.issue}</div>
          <h1>{post.title}</h1>
          <div className="ed-meta-row light">
            <span>{post.date}</span>
            <span className="dot">·</span>
            <span>{post.readMin} min de lectura</span>
            <span className="dot">·</span>
            <span>{post.tag}</span>
          </div>
        </div>
      </section>

      {/* Body */}
      <section className="ed-post-body">
        <div className="container">
          <article className="ed-prose">
            {post.body.map((b, i) => {
              if (b.type === 'lead') return <p key={i} className="ed-lead">{b.text}</p>;
              if (b.type === 'h')    return <h2 key={i} className="ed-h">{b.text}</h2>;
              if (b.type === 'pull') return <blockquote key={i} className="ed-pull">{b.text}</blockquote>;
              if (b.type === 'sig')  return <p key={i} className="ed-sig">{b.text}</p>;
              return <p key={i} className="ed-p">{b.text}</p>;
            })}
          </article>
        </div>
      </section>

      {/* Related */}
      {others.length > 0 && (
        <section className="section cream">
          <div className="container">
            <div className="section-head" style={{ marginBottom:40 }}>
              <div className="kicker">/ Continuar leyendo</div>
              <h2>Otras <em>entradas.</em></h2>
            </div>
            <div className="ed-related">
              {others.map(p => (
                <article key={p.id} className="ed-related-card" onClick={() => navigate('/perspectiva/' + p.slug)}>
                  <div className={`ed-related-img bg-cover ${p.cover}`} aria-hidden="true" />
                  <div className="ed-related-body">
                    <div className="ed-issue">{p.issue}</div>
                    <h3>{p.title}</h3>
                    <div className="ed-meta-row" style={{ marginTop:14 }}>
                      <span>{p.date}</span>
                      <span className="dot">·</span>
                      <span>{p.readMin} min</span>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { PerspectivaIndex, PerspectivaPost });