/* ============================================================
   Tectus — Blog: listing page + individual post pages.
   Reads window.BLOG_POSTS (from blog-data.jsx, parsed from CSV).
   ============================================================ */
const { Button: BgButton } = window.TectusDesignSystem_c42b34;

function blogDate(iso) {
  try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
  catch (e) { return ''; }
}
function postHref(slug) { return '#/blog/' + slug; }

/* ---------- Blog listing ---------- */
function BlogPage() {
  const posts = (window.BLOG_POSTS || []).slice().sort((a, b) => (a.date < b.date ? 1 : -1));
  const [feat, ...rest] = posts;
  return (
    <div>
      <CenterHero
        eyebrow="Blog"
        title={<React.Fragment>Security planning and <GoldAccent>operational insight.</GoldAccent></React.Fragment>}
        sub="Practical guidance on physical security operations, vendor workflows, and how on-demand coverage actually works."
        primary="Get Quote" secondary="Book a Demo"
      />

      {/* featured */}
      {feat && (
        <section className="wrap" style={{ padding: '8px 40px 32px' }}>
          <Reveal>
            <a href={postHref(feat.slug)} className="tt-res-card" style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 0, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', transition: 'border-color var(--dur-base)' }}>
              <div style={{ position: 'relative', minHeight: 320 }}>
                <img src={feat.image} alt="" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                <span style={{ position: 'absolute', top: 16, left: 16, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--color-text)', background: 'rgba(11,11,13,0.72)', backdropFilter: 'blur(6px)', border: '1px solid var(--color-border)', padding: '5px 10px', borderRadius: 'var(--radius-pill)' }}><Icon name="newspaper" size={12} color="var(--color-primary)" />Featured</span>
              </div>
              <div style={{ padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ fontSize: 12.5, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)', marginBottom: 12 }}>{blogDate(feat.date)} · {feat.read} min read</div>
                <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.4vw, 30px)', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.18, margin: '0 0 14px' }}>{feat.title}</h2>
                <p style={{ fontSize: 15, color: 'var(--color-text-muted)', lineHeight: 1.6, margin: '0 0 22px' }}>{feat.excerpt}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read article <Icon name="arrow-right" size={15} /></span>
              </div>
            </a>
          </Reveal>
        </section>
      )}

      {/* grid */}
      <section className="wrap" style={{ padding: '8px 40px 40px' }}>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {rest.map((p, i) => (
            <Reveal key={p.slug} delay={(i % 3) * 70}>
              <a href={postHref(p.slug)} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <div style={{ position: 'relative', height: 180 }}>
                  <img src={p.image} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <span style={{ position: 'absolute', top: 13, left: 13, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--color-text)', background: 'rgba(11,11,13,0.72)', backdropFilter: 'blur(6px)', border: '1px solid var(--color-border)', padding: '5px 10px', borderRadius: 'var(--radius-pill)' }}>{p.tag || 'Blog'}</span>
                </div>
                <div style={{ padding: 22, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ fontSize: 12, color: 'var(--color-text-faint)', marginBottom: 8, fontFamily: 'var(--font-mono)' }}>{blogDate(p.date)} · {p.read} min</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, margin: '0 0 9px', fontWeight: 600, lineHeight: 1.3 }}>{p.title}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 18px' }}>{p.excerpt}</p>
                  <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read more <Icon name="arrow-right" size={14} /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      <CTABandCenter label="Get started" title="Ready to coordinate security the modern way?" sub="Request licensed coverage through one structured workflow — faster access, full visibility." primary="Get Quote" secondary="Book a Demo" />
    </div>
  );
}

/* ---------- Individual post ---------- */
function BlogPost({ slug }) {
  const posts = window.BLOG_POSTS || [];
  const post = posts.find((p) => p.slug === slug);
  useEffect(() => {
    if (post) document.title = post.title + ' | Tectus';
    return () => { document.title = 'Tectus — Physical security, delivered faster. When it matters most.'; };
  }, [slug]);
  if (!post) return <NotFound />;

  const more = posts.filter((p) => p.slug !== slug).sort((a, b) => (a.date < b.date ? 1 : -1)).slice(0, 3);

  return (
    <div>
      <article>
        {/* header */}
        <section className="wrap" style={{ padding: '40px 40px 0', maxWidth: 820 }}>
          <Reveal>
            <a href="#/blog" className="tt-arrow-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-text-muted)', marginBottom: 22 }}><Icon name="arrow-left" size={15} />Back to blog</a>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-primary-light)' }}><Icon name="newspaper" size={13} />{post.tag || 'Blog'}</span>
              <span style={{ fontSize: 13, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>{blogDate(post.date)} · {post.read} min read</span>
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px, 4.2vw, 50px)', letterSpacing: '-0.032em', lineHeight: 1.08, margin: '0 0 28px', textWrap: 'balance' }}>{post.title}</h1>
          </Reveal>
        </section>
        {/* hero image */}
        <section className="wrap" style={{ padding: '0 40px', maxWidth: 1000 }}>
          <Reveal delay={80}>
            <img src={post.image} alt="" style={{ width: '100%', borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-border)', display: 'block', aspectRatio: '16 / 8', objectFit: 'cover' }} />
          </Reveal>
        </section>
        {/* body */}
        <section className="wrap tt-post-body" style={{ padding: '48px 40px 24px', maxWidth: 760 }}>
          <Reveal>
            <div className="tt-prose" dangerouslySetInnerHTML={{ __html: post.intro }} />
            {post.blocks.map((b, i) => (
              <div key={i}>
                <div className="tt-prose" dangerouslySetInnerHTML={{ __html: (b.sub || '') + (b.content || '') }} />
                {b.img && <img src={b.img} alt="" loading="lazy" style={{ width: '100%', borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border)', margin: '28px 0', display: 'block' }} />}
              </div>
            ))}
          </Reveal>
        </section>
        {/* share / cta inline */}
        <section className="wrap" style={{ padding: '8px 40px 24px', maxWidth: 760 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', padding: '24px 28px', background: 'var(--color-surface)', border: '1px solid rgba(212,175,55,0.22)', borderRadius: 'var(--radius-xl)' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 700, marginBottom: 4 }}>Coordinate licensed coverage with Tectus</div>
              <div style={{ fontSize: 14, color: 'var(--color-text-muted)' }}>Request vetted vendors by time, location, and requirement.</div>
            </div>
            <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
              <a href="#/get-quote"><BgButton variant="primary" iconRight={<Icon name="arrow-right" size={16} />}>Get Quote</BgButton></a>
              <a href="#/demo"><BgButton variant="secondary">Book a Demo</BgButton></a>
            </div>
          </div>
        </section>
      </article>

      {/* more posts */}
      <section className="wrap" style={{ padding: '40px 40px 8px' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, margin: '0 0 24px', letterSpacing: '-0.015em' }}>More from the blog</h2>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {more.map((p) => (
            <a key={p.slug} href={postHref(p.slug)} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
              <div style={{ height: 160 }}><img src={p.image} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /></div>
              <div style={{ padding: 20, display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ fontSize: 11.5, color: 'var(--color-text-faint)', marginBottom: 7, fontFamily: 'var(--font-mono)' }}>{blogDate(p.date)} · {p.read} min</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 15.5, margin: 0, fontWeight: 600, lineHeight: 1.3 }}>{p.title}</h3>
              </div>
            </a>
          ))}
        </div>
      </section>

      <CTABandCenter label="Get started" title="A better way to coordinate physical security" sub="See how Tectus simplifies requests, improves visibility, and speeds up coordination." primary="Get Quote" secondary="Book a Demo" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['blog'] = BlogPage;
window.BlogPost = BlogPost;