/* ============================================================
   Tectus — page kit: shared building blocks + page templates
   for all routed sub-pages. Composes Tectus DS components.
   ============================================================ */
const { Button: PButton, Card: PCard, Eyebrow: PEyebrow, Badge: PBadge } = window.TectusDesignSystem_c42b34;

/* ---------- breadcrumb ---------- */
function Breadcrumb({ trail }) {
  return (
    <nav aria-label="Breadcrumb" style={{ display: 'flex', alignItems: 'center', gap: 9, flexWrap: 'wrap', fontSize: 12.5, color: 'var(--color-text-faint)', marginBottom: 22 }}>
      {trail.map((t, i) => (
        <React.Fragment key={i}>
          {i > 0 && <Icon name="chevron-right" size={13} style={{ opacity: 0.6 }} />}
          {t.href && i < trail.length - 1
            ? <a href={t.href} className="tt-crumb" style={{ color: 'var(--color-text-faint)' }}>{t.label}</a>
            : <span style={{ color: i === trail.length - 1 ? 'var(--color-text-muted)' : 'var(--color-text-faint)' }}>{t.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

/* ---------- CTA resolver — maps a label to the right route ---------- */
const CTA_ROUTES = {
  'Book a Demo': '#/demo', 'Book a demo': '#/demo', 'Demo': '#/demo',
  'Get Quote': '#/get-quote', 'Get a Quote': '#/get-quote', 'Get a quote': '#/get-quote', 'Get Retail Security Quote': '#/get-quote', 'Get Corporate Security Quote': '#/get-quote',
  'Book Now': '#/book-now', 'Book Mobile Patrol': '#/book-now', 'Book Event Security': '#/book-now',
  'Become a Vendor': '#/become-a-vendor', 'Start Vendor Application': '#/become-a-vendor',
  'Request Executive Protection': '#/get-quote', 'Request Alarm Response': '#/get-quote', 'Request Fire Watch Coverage': '#/get-quote',
  'Contact Tectus': '#/contact', 'Contact sales': '#/contact',
  'Explore Use Cases': '#/use-cases', 'Get Quote ›': '#/get-quote',
  'Learn How It Works': '#/how-it-works', 'How it works': '#/how-it-works',
  'Explore the Platform': '#/platform', 'Explore Guides': '#/guides',
};
function ctaHref(label) { return CTA_ROUTES[label] || '#/demo'; }

/* ---------- page hero ---------- */
function PageHero({ group, groupHref, title, eyebrow, h1, sub, primary, secondary, aside }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--color-border)' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: -180, right: -100, width: 560, height: 560, background: 'radial-gradient(circle, rgba(212,175,55,0.08), transparent 64%)', pointerEvents: 'none' }} />
      <div className="wrap tt-pagehero" style={{ display: 'grid', gridTemplateColumns: aside ? '1.05fr 0.95fr' : '1fr', gap: 56, alignItems: 'center', padding: '52px 40px 64px', position: 'relative' }}>
        <Reveal>
          <PEyebrow tick tone="gold">{eyebrow}</PEyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px, 4.4vw, 56px)', lineHeight: 1.06, letterSpacing: '-0.032em', margin: '18px 0 20px', maxWidth: 720, textWrap: 'balance' }}>{h1}</h1>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: 600, margin: 0, textWrap: 'pretty' }}>{sub}</p>
          {(primary || secondary) && (
            <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
              {primary && <a href={ctaHref(primary)}><PButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>{primary}</PButton></a>}
              {secondary && <a href={ctaHref(secondary)}><PButton variant="secondary" size="lg">{secondary}</PButton></a>}
            </div>
          )}
        </Reveal>
        {aside && <Reveal delay={120}>{aside}</Reveal>}
      </div>
    </section>
  );
}

/* ---------- generic content section ---------- */
function ProseSection({ eyebrow, h2, body, bullets, tone }) {
  return (
    <Reveal as="section" className="wrap" style={{ padding: '64px 40px', maxWidth: 920 }}>
      {eyebrow && <div style={{ marginBottom: 16 }}><PEyebrow tone={tone || 'gold'}>{eyebrow}</PEyebrow></div>}
      {h2 && <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(26px, 3vw, 38px)', letterSpacing: '-0.022em', lineHeight: 1.12, margin: '0 0 18px', maxWidth: 720, textWrap: 'balance' }}>{h2}</h2>}
      {Array.isArray(body) ? body.map((p, i) => (
        <p key={i} style={{ fontSize: 17, lineHeight: 1.68, color: 'var(--color-text-muted)', margin: i ? '16px 0 0' : 0, maxWidth: 680 }}>{p}</p>
      )) : body && <p style={{ fontSize: 17, lineHeight: 1.68, color: 'var(--color-text-muted)', margin: 0, maxWidth: 680 }}>{body}</p>}
      {bullets && (
        <ul style={{ listStyle: 'none', margin: '24px 0 0', padding: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '12px 28px' }}>
          {bullets.map((b) => (
            <li key={b} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 15.5, color: 'var(--color-text)', lineHeight: 1.5 }}>
              <Icon name="check" size={17} color="var(--color-primary)" style={{ marginTop: 2, flex: '0 0 auto' }} />{b}
            </li>
          ))}
        </ul>
      )}
    </Reveal>
  );
}

/* ---------- feature / card grid ---------- */
function FeatureGrid({ eyebrow, h2, sub, items, cols, surface }) {
  const c = cols || 3;
  return (
    <section style={surface ? { background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' } : null}>
      <div className="wrap" style={{ padding: '96px 40px' }}>
        {(eyebrow || h2) && <Reveal><SectionHead center eyebrow={eyebrow} title={h2} sub={sub} /></Reveal>}
        <div className="tt-feat-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${c}, 1fr)`, gap: 16 }}>
          {items.map((it, i) => (
            <Reveal key={it.t} delay={(i % c) * 60}>
              <PCard padding={26} interactive={!!it.href} style={{ height: '100%' }}>
                {it.icon && <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.24)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><Icon name={it.icon} size={22} /></span>}
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17.5, margin: '0 0 8px', fontWeight: 600, lineHeight: 1.28 }}>{it.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.58, color: 'var(--color-text-muted)', margin: 0 }}>{it.d}</p>
                {it.href && <a href={it.href} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 16, fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">{it.linkLabel || 'Learn more'} <Icon name="arrow-right" size={14} /></a>}
              </PCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- numbered step rail ---------- */
function StepRail({ eyebrow, h2, sub, steps, surface }) {
  return (
    <section style={surface ? { background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' } : null}>
      <div className="wrap" style={{ padding: '96px 40px', maxWidth: 920 }}>
        {(eyebrow || h2) && <Reveal><SectionHead eyebrow={eyebrow} title={h2} sub={sub} /></Reveal>}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {steps.map((s, i) => (
            <Reveal key={s.t} delay={i * 60}>
              <div style={{ display: 'grid', gridTemplateColumns: '56px 1fr', gap: 24, alignItems: 'start' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', alignSelf: 'stretch' }}>
                  <span style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--color-surface-2)', border: '1px solid var(--color-border)', color: 'var(--color-primary-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 700, flex: '0 0 auto' }}>{String(i + 1).padStart(2, '0')}</span>
                  {i < steps.length - 1 && <span style={{ width: 1, flex: 1, minHeight: 30, background: 'var(--color-border)', margin: '8px 0' }} />}
                </div>
                <div style={{ paddingBottom: i < steps.length - 1 ? 36 : 0 }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 21, margin: '8px 0 9px', fontWeight: 600, lineHeight: 1.22 }}>{s.t}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.62, color: 'var(--color-text-muted)', margin: 0, maxWidth: 640 }}>{s.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- stat strip ---------- */
function StatStrip({ stats }) {
  return (
    <section style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
      <div className="wrap tt-statstrip" style={{ display: 'grid', gridTemplateColumns: `repeat(${stats.length}, 1fr)` }}>
        {stats.map((s, i) => (
          <div key={s.l} style={{ padding: '34px 28px', borderLeft: i ? '1px solid var(--color-divider)' : 'none' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 34, fontWeight: 700, color: i === 0 ? 'var(--color-primary-light)' : 'var(--color-text)', lineHeight: 1 }}>{s.v}</div>
            <div style={{ fontSize: 13.5, color: 'var(--color-text-faint)', marginTop: 10, lineHeight: 1.4 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- FAQ block (reusable accordion) ---------- */
function FAQBlock({ eyebrow, h2, sub, items, groups, narrow }) {
  const [open, setOpen] = useState('0-0');
  const renderItems = (list, gi) => list.map(([q, a], i) => {
    const key = `${gi}-${i}`;
    const on = open === key;
    return (
      <div key={key} style={{ border: '1px solid ' + (on ? 'var(--color-border-strong)' : 'var(--color-border)'), borderRadius: 'var(--radius-lg)', background: on ? 'var(--color-surface-2)' : 'var(--color-surface)', overflow: 'hidden', transition: 'background var(--dur-base), border-color var(--dur-base)' }}>
        <button onClick={() => setOpen(on ? '' : key)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '18px 22px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', color: 'var(--color-text)', font: 'inherit', fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600 }}>
          {q}
          <span style={{ color: 'var(--color-primary)', transform: on ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-standard)', flex: '0 0 auto', display: 'inline-flex' }}><Icon name="plus" size={19} /></span>
        </button>
        <div style={{ maxHeight: on ? 320 : 0, transition: 'max-height var(--dur-slow) var(--ease-standard)', overflow: 'hidden' }}>
          <p style={{ padding: '0 22px 20px', margin: 0, fontSize: 15, lineHeight: 1.62, color: 'var(--color-text-muted)', maxWidth: 680 }}>{a}</p>
        </div>
      </div>
    );
  });
  return (
    <section className="wrap" style={{ padding: '96px 40px', maxWidth: narrow ? 860 : 1080 }}>
      {(eyebrow || h2) && <Reveal><SectionHead center={!groups} eyebrow={eyebrow} title={h2} sub={sub} /></Reveal>}
      {groups ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
          {groups.map((g, gi) => (
            <div key={g.label}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <Icon name={g.icon} size={18} color="var(--color-primary)" />
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, margin: 0 }}>{g.label}</h3>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>{renderItems(g.items, gi)}</div>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>{renderItems(items, 0)}</div>
      )}
    </section>
  );
}

/* ---------- CTA band ---------- */
function CTABand({ eyebrow, h2, sub, primary, secondary }) {
  return (
    <section className="wrap" style={{ padding: '40px 40px 92px' }}>
      <Reveal>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--color-border)', background: 'linear-gradient(180deg, var(--color-surface), var(--color-surface-2))' }}>
          <span style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 300, height: 2, background: 'linear-gradient(90deg, transparent, var(--color-primary), transparent)' }} />
          <div style={{ padding: '70px 48px', textAlign: 'center' }}>
            {eyebrow && <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><PEyebrow tone="gold">{eyebrow}</PEyebrow></div>}
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px, 3.6vw, 46px)', letterSpacing: '-0.028em', lineHeight: 1.06, margin: '0 auto 16px', maxWidth: 680, textWrap: 'balance' }}>{h2}</h2>
            {sub && <p style={{ fontSize: 17.5, color: 'var(--color-text-muted)', maxWidth: 560, margin: '0 auto 30px', lineHeight: 1.6, textWrap: 'pretty' }}>{sub}</p>}
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              {primary && <a href={ctaHref(primary)}><PButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>{primary}</PButton></a>}
              {secondary && <a href={ctaHref(secondary)}><PButton variant="secondary" size="lg">{secondary}</PButton></a>}
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

/* ---------- related links ---------- */
function RelatedLinks({ title, links }) {
  if (!links || !links.length) return null;
  return (
    <section className="wrap" style={{ padding: '0 40px 80px' }}>
      <div style={{ borderTop: '1px solid var(--color-divider)', paddingTop: 36 }}>
        <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginBottom: 18 }}>{title || 'Explore next'}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {links.map((l) => (
            <a key={l.label} href={l.href} className="tt-related" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 16px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--color-border)', background: 'var(--color-surface)', fontSize: 14, fontWeight: 500, color: 'var(--color-text-muted)', transition: 'border-color var(--dur-base), color var(--dur-base)' }}>
              {l.label} <Icon name="arrow-up-right" size={14} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- listing grid (blog / guides / insights) ---------- */
function ListingGrid({ eyebrow, h2, sub, items, kindLabel }) {
  return (
    <section className="wrap" style={{ padding: '8px 40px 40px' }}>
      <Reveal><SectionHead eyebrow={eyebrow} title={h2} sub={sub} /></Reveal>
      <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {items.map((it, i) => (
          <Reveal key={it.t} delay={(i % 3) * 70}>
            <a href={it.href || '#/resources'} 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' }}>
                <image-slot id={`list-${it.slot}`} style={{ width: '100%', height: '170px', display: 'block' }} shape="rect" placeholder="Drop editorial image"></image-slot>
                <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)' }}>{it.tag || kindLabel}</span>
              </div>
              <div style={{ padding: 22, display: 'flex', flexDirection: 'column', flex: 1 }}>
                {it.meta && <div style={{ fontSize: 12, color: 'var(--color-text-faint)', marginBottom: 8, fontFamily: 'var(--font-mono)' }}>{it.meta}</div>}
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17.5, margin: '0 0 9px', fontWeight: 600, lineHeight: 1.3 }}>{it.t}</h3>
                <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: '0 0 18px' }}>{it.d}</p>
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13.5, fontWeight: 600, color: 'var(--color-primary-light)' }}>{it.cta || 'Read more'} <Icon name="arrow-right" size={14} /></span>
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------- legal document ---------- */
function LegalDoc({ updated, intro, sections }) {
  return (
    <section className="wrap" style={{ padding: '8px 40px 80px', maxWidth: 820 }}>
      {updated && <div style={{ fontSize: 13, color: 'var(--color-text-faint)', marginBottom: 32, fontFamily: 'var(--font-mono)' }}>Last updated: {updated}</div>}
      {intro && (
        <div style={{ marginBottom: 40 }}>
          {intro.map((p, i) => <p key={i} style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--color-text-muted)', margin: i ? '12px 0 0' : 0 }}>{p}</p>)}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
        {sections.map((s, i) => (
          <div key={s.h || i}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 600, margin: '0 0 12px' }}><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.body.map((p, j) => <p key={j} style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--color-text-muted)', margin: j ? '12px 0 0' : 0 }}>{p}</p>)}
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Breadcrumb, PageHero, ProseSection, FeatureGrid, StepRail, StatStrip, FAQBlock, CTABand, RelatedLinks, ListingGrid, LegalDoc, ctaHref });