/* ============================================================
   Tectus — Resources hub. Uses real blog content (window.BLOG_POSTS)
   for featured + articles; keeps downloadable playbooks.
   ============================================================ */
const { Button: RsButton } = window.TectusDesignSystem_c42b34;

function rsDate(iso) {
  try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
  catch (e) { return ''; }
}

const RS_GUIDES = window.GUIDES || [];

function ResChip({ tag, icon }) {
  return (
    <span style={{ 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)' }}>
      {icon && <Icon name={icon} size={12} color="var(--color-primary)" />}{tag}
    </span>
  );
}

function ResourcesPage() {
  const allPosts = (window.BLOG_POSTS || []).slice().sort((a, b) => (a.date < b.date ? 1 : -1));
  const [active, setActive] = useState('All');
  const [query, setQuery] = useState('');

  const q = query.trim().toLowerCase();
  const posts = allPosts.filter((p) => !q || p.title.toLowerCase().includes(q) || (p.excerpt || '').toLowerCase().includes(q));
  const showBlog = active === 'All' || active === 'Blog';
  const showGuides = active === 'All' || active === 'Guides';

  const filters = [
    { label: 'All', count: allPosts.length + RS_GUIDES.length },
    { label: 'Blog', count: allPosts.length, icon: 'newspaper' },
    { label: 'Guides', count: RS_GUIDES.length, icon: 'book-open' },
  ];

  const feat = posts[0];
  const secondary = posts.slice(1, 3);
  const rest = posts.slice(3);

  return (
    <div>
      <CenterHero
        eyebrow="Resources"
        title={<React.Fragment>Knowledge to <GoldAccent>secure</GoldAccent> your operations better.</React.Fragment>}
        sub="Practical articles and downloadable playbooks on physical security operations, vendor workflows, and on-demand coverage."
        primary="Get Quote" secondary="Book a Demo"
      />

      {/* search + filters */}
      <section className="wrap" style={{ padding: '8px 40px 16px', maxWidth: 760 }}>
        <Reveal>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
            <div style={{ position: 'relative', flex: 1 }}>
              <span style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)', color: 'var(--color-text-faint)', display: 'inline-flex' }}><Icon name="search" size={17} /></span>
              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search articles and guides…"
                style={{ width: '100%', height: 52, padding: '0 16px 0 44px', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', color: 'var(--color-text)', font: 'inherit', fontSize: 14.5, outline: 'none' }}
                onFocus={(e) => (e.target.style.borderColor = 'var(--color-primary)')} onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')} />
            </div>
            <RsButton variant="primary" type="submit">Search</RsButton>
          </form>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, justifyContent: 'center' }}>
            {filters.map((f) => {
              const on = active === f.label;
              return (
                <button key={f.label} onClick={() => setActive(f.label)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 14px', borderRadius: 'var(--radius-pill)', border: '1px solid ' + (on ? 'rgba(212,175,55,0.4)' : 'var(--color-border)'), background: on ? 'var(--color-primary-soft)' : 'var(--color-surface)', color: on ? 'var(--color-primary-light)' : 'var(--color-text-muted)', font: 'inherit', fontSize: 13, fontWeight: 600, cursor: 'pointer', transition: 'all var(--dur-fast)' }}>
                  {f.icon && <Icon name={f.icon} size={13} />}{f.label}
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.7 }}>{f.count}</span>
                </button>
              );
            })}
          </div>
        </Reveal>
      </section>

      {/* featured (real blog) */}
      {showBlog && feat && (
        <section className="wrap" style={{ padding: '40px 40px 32px' }}>
          <div className="tt-res-feature" style={{ display: 'grid', gridTemplateColumns: secondary.length ? '1.15fr 0.85fr' : '1fr', gap: 20 }}>
            <Reveal>
              <a href={'#/blog/' + feat.slug} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', height: '100%', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <div style={{ position: 'relative', height: 320 }}>
                  <img src={feat.image} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <span style={{ position: 'absolute', top: 16, left: 16 }}><ResChip tag="Featured" icon="newspaper" /></span>
                </div>
                <div style={{ padding: 28, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 23, fontWeight: 600, margin: '0 0 10px', lineHeight: 1.22 }}>{feat.title}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--color-text-muted)', lineHeight: 1.6, margin: '0 0 18px' }}>{feat.excerpt}</p>
                  <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: 12.5, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>{feat.read} min read · {rsDate(feat.date)}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read article <Icon name="arrow-right" size={14} /></span>
                  </div>
                </div>
              </a>
            </Reveal>
            {secondary.length > 0 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                {secondary.map((c, i) => (
                  <Reveal key={c.slug} delay={i * 80} style={{ flex: 1 }}>
                    <a href={'#/blog/' + c.slug} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', height: '100%', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                      <div style={{ position: 'relative', height: 150 }}>
                        <img src={c.image} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                        <span style={{ position: 'absolute', top: 12, left: 12 }}><ResChip tag="Blog" icon="newspaper" /></span>
                      </div>
                      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', flex: 1 }}>
                        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 7px', lineHeight: 1.28 }}>{c.title}</h3>
                        <p style={{ fontSize: 13, color: 'var(--color-text-muted)', lineHeight: 1.5, margin: '0 0 14px' }}>{c.excerpt}</p>
                        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                          <span style={{ fontSize: 12, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>{c.read} min · {rsDate(c.date)}</span>
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read <Icon name="arrow-right" size={13} /></span>
                        </div>
                      </div>
                    </a>
                  </Reveal>
                ))}
              </div>
            )}
          </div>
        </section>
      )}

      {/* latest articles (remaining real posts) */}
      {showBlog && rest.length > 0 && (
        <section className="wrap" style={{ padding: '40px 40px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, margin: 0, letterSpacing: '-0.015em' }}>Latest articles</h2>
            <a href="#/blog" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">View all on the blog <Icon name="arrow-right" size={14} /></a>
          </div>
          <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {rest.map((a, i) => (
              <Reveal key={a.slug} delay={i * 70}>
                <a href={'#/blog/' + a.slug} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', height: '100%', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                  <div style={{ position: 'relative', height: 170 }}>
                    <img src={a.image} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    <span style={{ position: 'absolute', top: 12, left: 12 }}><ResChip 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)' }}>{rsDate(a.date)} · {a.read} min</div>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 8px', lineHeight: 1.3 }}>{a.title}</h3>
                    <p style={{ fontSize: 13, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 16px' }}>{a.excerpt}</p>
                    <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read <Icon name="arrow-right" size={13} /></span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      {showBlog && posts.length === 0 && (
        <section className="wrap" style={{ padding: '40px 40px 8px', textAlign: 'center' }}>
          <p style={{ fontSize: 16, color: 'var(--color-text-muted)' }}>No articles match “{query}”. <button onClick={() => setQuery('')} style={{ background: 'none', border: 'none', color: 'var(--color-primary-light)', font: 'inherit', fontWeight: 600, cursor: 'pointer' }}>Clear search</button></p>
        </section>
      )}

      {/* guides */}
      {showGuides && (
        <section className="wrap" style={{ padding: '96px 40px' }}>
          <Reveal><CenterHead label="Guides" title="Security planning guides" sub="Practical, step-by-step guides for planning and coordinating coverage across every service." /></Reveal>
          <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {RS_GUIDES.map((g, i) => (
              <Reveal key={g.t} delay={i * 70}>
                <a href={'#/guides/' + g.slug} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 28, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                    <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={g.icon} size={21} /></span>
                    <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--color-text-faint)' }}>{g.tag}</span>
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, margin: '0 0 9px', lineHeight: 1.25 }}>{g.t}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 16px' }}>{g.d}</p>
                  <ul style={{ listStyle: 'none', margin: '0 0 18px', padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                    {g.topics.map((it) => (
                      <li key={it} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--color-text-muted)' }}>
                        <Icon name="check" size={15} color="var(--color-primary)" style={{ flex: '0 0 auto' }} />{it}
                      </li>
                    ))}
                  </ul>
                  <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, borderTop: '1px solid var(--color-divider)' }}>
                    <span style={{ fontSize: 12, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>{g.read} read</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read guide <Icon name="arrow-right" size={13} /></span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      {/* press coverage */}
      <section className="wrap" style={{ padding: '96px 40px 64px' }}>
        <Reveal><CenterHead label="Press" title="Tectus in the news" sub="Media coverage and press releases from outlets covering the Tectus platform launch." /></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, maxWidth: 860, margin: '0 auto' }}>
          {[
            { outlet: 'National Law Review', date: 'June 2025', title: 'Tectus Launches Mobile Platform for On-Demand Security Services', excerpt: 'Tectus announced the expansion of its client application enabling businesses to request, manage, and access licensed security services through a streamlined digital experience.', url: 'https://natlawreview.com/press-releases/tectus-launches-mobile-platform-demand-security-services', icon: 'newspaper' },
            { outlet: 'AZCentral / USA Today', date: 'June 2025', title: 'Tectus Launches Mobile Platform for On-Demand Security Services', excerpt: 'The platform connects clients with vetted security providers across a growing national network, available on Apple App Store and Google Play.', url: 'https://www.azcentral.com/press-release/story/56387/tectus-launches-mobile-platform-for-on-demand-security-services/', icon: 'newspaper' },
          ].map((p, i) => (
            <Reveal key={p.outlet} delay={i * 80}>
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 28, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                  <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={p.icon} size={21} /></span>
                  <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--color-text-faint)' }}>{p.date}</span>
                </div>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--color-primary-light)', marginBottom: 8 }}>{p.outlet}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, margin: '0 0 9px', lineHeight: 1.28 }}>{p.title}</h3>
                <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 16px', flex: 1 }}>{p.excerpt}</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, borderTop: '1px solid var(--color-divider)' }}>
                  <span style={{ fontSize: 12, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>Press release</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read article <Icon name="arrow-right" size={13} /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      <CTABandCenter label="Ready to get started" title="See the platform in action." sub="Book a personalized demo and see how Tectus can transform your physical security operations." primary="Book a Demo" secondary="Get Quote" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['resources'] = ResourcesPage;

/* ---------- Guide detail ---------- */
function GuideDetail({ slug }) {
  const guides = window.GUIDES || [];
  const g = guides.find((x) => x.slug === slug);
  useEffect(() => {
    if (g) document.title = g.t + ' | Tectus Guides';
    return () => { document.title = 'Tectus — Physical security, delivered faster. When it matters most.'; };
  }, [slug]);
  if (!g) return <NotFound />;
  const more = guides.filter((x) => x.slug !== slug).slice(0, 3);

  return (
    <div>
      <section className="wrap" style={{ padding: '40px 40px 0', maxWidth: 820 }}>
        <Reveal>
          <a href="#/resources" 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} />All guides</a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <span style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={g.icon} size={23} /></span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-primary-light)' }}>Guide · {g.tag}</span>
              <span style={{ fontSize: 13, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>{g.read} read</span>
            </div>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px, 4.2vw, 50px)', letterSpacing: '-0.032em', lineHeight: 1.08, margin: '0 0 20px', textWrap: 'balance' }}>{g.t}</h1>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: 0, textWrap: 'pretty' }}>{g.intro}</p>
        </Reveal>
      </section>

      {/* what's covered */}
      <section className="wrap" style={{ padding: '32px 40px 8px', maxWidth: 820 }}>
        <Reveal delay={60}>
          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 26 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginBottom: 14 }}>What this guide covers</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px 24px' }}>
              {g.topics.map((it) => (
                <div key={it} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14.5, color: 'var(--color-text)' }}><Icon name="check" size={16} color="var(--color-primary)" style={{ flex: '0 0 auto' }} />{it}</div>
              ))}
            </div>
          </div>
        </Reveal>
      </section>

      {/* body */}
      <section className="wrap" style={{ padding: '40px 40px 24px', maxWidth: 760 }}>
        <Reveal>
          <div className="tt-prose" style={{ fontSize: 17, lineHeight: 1.75 }}>
            {g.sections.map((s, i) => (
              <div key={i} style={{ marginBottom: 8 }}>
                <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(21px, 2.2vw, 27px)', fontWeight: 700, letterSpacing: '-0.018em', lineHeight: 1.2, color: 'var(--color-text)', margin: '36px 0 14px' }}><span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--color-primary-light)', marginRight: 12 }}>{String(i + 1).padStart(2, '0')}</span>{s.h}</h2>
                {s.b.map((p, j) => <p key={j} style={{ margin: '0 0 16px', color: 'var(--color-text-muted)' }}>{p}</p>)}
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* inline CTA */}
      <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 }}>Put this guide into action</div>
            <div style={{ fontSize: 14, color: 'var(--color-text-muted)' }}>Request licensed, vetted coverage through one structured workflow.</div>
          </div>
          <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
            <a href="#/get-quote"><RsButton variant="primary" iconRight={<Icon name="arrow-right" size={16} />}>Get Quote</RsButton></a>
            <a href="#/book-now"><RsButton variant="secondary">Book Now</RsButton></a>
          </div>
        </div>
      </section>

      {/* more guides */}
      {more.length > 0 && (
        <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 guides</h2>
          <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {more.map((m) => (
              <a key={m.slug} href={'#/guides/' + m.slug} className="tt-track-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 26, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name={m.icon} size={21} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 8px', lineHeight: 1.3 }}>{m.t}</h3>
                <p style={{ fontSize: 13, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 14px' }}>{m.d}</p>
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read guide <Icon name="arrow-right" size={13} /></span>
              </a>
            ))}
          </div>
        </section>
      )}

      <CTABandCenter label="Get started" title="Coordinate coverage the modern way" sub="See how Tectus simplifies requests, improves visibility, and speeds up coordination." primary="Get Quote" secondary="Book a Demo" />
    </div>
  );
}
window.GuideDetail = GuideDetail;

/* ---------- Guides listing page (mirrors the Resources guide cards) ---------- */
function GuidesPage() {
  const guides = window.GUIDES || [];
  return (
    <div>
      <CenterHero
        eyebrow="Guides"
        title={<React.Fragment>Security planning <GoldAccent>guides.</GoldAccent></React.Fragment>}
        sub="Practical, step-by-step guides for planning and coordinating coverage across every service."
        primary="Get Quote" secondary="Book a Demo"
      />
      <section className="wrap" style={{ padding: '8px 40px 40px' }}>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {guides.map((g, i) => (
            <Reveal key={g.slug} delay={(i % 3) * 70}>
              <a href={'#/guides/' + g.slug} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 28, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                  <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={g.icon} size={21} /></span>
                  <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--color-text-faint)' }}>{g.tag}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, margin: '0 0 9px', lineHeight: 1.25 }}>{g.t}</h3>
                <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 16px' }}>{g.d}</p>
                <ul style={{ listStyle: 'none', margin: '0 0 18px', padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {g.topics.map((it) => (
                    <li key={it} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: 'var(--color-text-muted)' }}>
                      <Icon name="check" size={15} color="var(--color-primary)" style={{ flex: '0 0 auto' }} />{it}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 16, borderTop: '1px solid var(--color-divider)' }}>
                  <span style={{ fontSize: 12, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>{g.read} read</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }}>Read guide <Icon name="arrow-right" size={13} /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>
      <CTABandCenter label="Get started" title="Turn a plan into coverage" sub="Request licensed security through one structured workflow when you're ready." primary="Get Quote" secondary="Book Now" />
    </div>
  );
}
window.CUSTOM_PAGES['guides'] = GuidesPage;