/* ============================================================
   Tectus — partners · resources · FAQ · final CTA · footer
   ============================================================ */
const { Card: S3Card, Eyebrow: S3Eyebrow, Button: S3Button, Badge: S3Badge } = window.TectusDesignSystem_c42b34;

/* ---------- 9. Partners ---------- */
const PARTNER_PTS = ['Licensed and insured companies only', 'A structured, documented onboarding process', 'Run jobs and assignments on Tectus GO'];
const PARTNER_STATS = [['70+', 'Estimated vetted vendors'], ['40,000+', 'Estimated security professionals'], ['50+', 'States covered']];
function Partners() {
  return (
    <section id="partners" className="wrap" style={{ padding: '96px 40px' }}>
      <div className="tt-partner-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
        <Reveal>
          <div style={{ marginBottom: 18 }}><S3Eyebrow tick tone="gold">Partners</S3Eyebrow></div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(29px, 3.4vw, 42px)', letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 16px', textWrap: 'balance' }}>Built for security companies, too</h2>
          <p style={{ fontSize: 17, color: 'var(--color-text-muted)', lineHeight: 1.62, margin: '0 0 24px', maxWidth: 480 }}>Licensed, insured security companies can apply to join the Tectus network and manage requests, assignments, and job status through one operations app.</p>
          <ul style={{ listStyle: 'none', margin: '0 0 28px', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {PARTNER_PTS.map((p) => (
              <li key={p} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 15, color: 'var(--color-text)', lineHeight: 1.45 }}>
                <Icon name="check" size={17} color="var(--color-primary)" style={{ marginTop: 1, flex: '0 0 auto' }} />{p}
              </li>
            ))}
          </ul>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#/become-a-vendor"><S3Button variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>Become a Vendor</S3Button></a>
            <a href="#/how-partnering-works"><S3Button variant="secondary" size="lg">How partnering works</S3Button></a>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden' }}>
            <image-slot id="partner-photo" src="assets/partners-home.webp" fit="cover" position="50% 30%" style={{ width: '100%', height: '340px', display: 'block', background: 'var(--color-bg)' }} shape="rect" placeholder="Drop image — security team / personnel"></image-slot>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: '1px solid var(--color-divider)' }}>
              {PARTNER_STATS.map(([n, l], i) => (
                <div key={l} style={{ padding: 'clamp(14px, 3vw, 24px) clamp(8px, 2vw, 22px)', borderLeft: i ? '1px solid var(--color-divider)' : 'none', minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(15px, 3.8vw, 28px)', fontWeight: 700, color: i === 1 ? 'var(--color-primary-light)' : 'var(--color-text)', lineHeight: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{n}</div>
                  <div style={{ fontSize: 'clamp(11px, 2.5vw, 12.5px)', color: 'var(--color-text-faint)', marginTop: 7, lineHeight: 1.4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- 10. Resources (blog preview — 3 latest from BLOG_POSTS) ---------- */
function Resources() {
  const posts = (window.BLOG_POSTS || []).slice().sort((a, b) => (a.date < b.date ? 1 : -1)).slice(0, 3);
  return (
    <section id="resources" style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
      <div className="wrap" style={{ padding: '96px 40px' }}>
        <Reveal>
          <div className="tt-headrow" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 48 }}>
            <div style={{ maxWidth: 620 }}>
              <div style={{ marginBottom: 18 }}><S3Eyebrow tick tone="gold">From the blog</S3Eyebrow></div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(29px, 3.6vw, 44px)', letterSpacing: '-0.025em', lineHeight: 1.08, margin: 0, textWrap: 'balance' }}>Security planning and insights</h2>
            </div>
            <a href="#/blog" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">Read the blog <Icon name="arrow-right" size={15} /></a>
          </div>
        </Reveal>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {posts.map((p, i) => (
            <Reveal key={p.slug} delay={i * 80}>
              <a href={'#/blog/' + p.slug} className="tt-res-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--color-bg)', 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: 14, left: 14, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, 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 name="newspaper" size={13} color="var(--color-primary)" />Blog</span>
                </div>
                <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ fontSize: 12, color: 'var(--color-text-faint)', marginBottom: 8, fontFamily: 'var(--font-mono)' }}>{(function(d){try{return new Date(d).toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'});}catch(e){return '';}})(p.date)} · {p.read} min read</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17.5, 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>
      </div>
    </section>
  );
}

/* ---------- 11. FAQ ---------- */
const FAQS = [
  ['How quickly can we deploy guards to a new location?', 'Tectus can provide same-day coverage options for urgent security needs and scheduled protection for long-term operations.'],
  ['Do you handle the vetting of individual guards?', 'No. They are employees of our vetted, licensed, and insured security partners, managed through our centralized platform.'],
  ['Can I monitor security activity for multiple locations at once?', 'Our centralized dashboard provides a unified view of all active shifts, GPS locations, and incident reports across your entire organizational footprint.'],
  ['What is the minimum hourly requirement for shifts?', 'Operational constraints vary by location, but all logistics and requirements are presented transparently upfront during the booking process.'],
  ['Do you offer 24/7 support?', 'Yes. The Tectus platform and our support teams are operational 24/7.'],
];
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="wrap" style={{ padding: '96px 40px', maxWidth: 880 }}>
      <Reveal><SectionHead center eyebrow="FAQ" title={<>Got questions?<br />We've got answers.</>} sub="Here's everything you need to know before getting started." /></Reveal>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {FAQS.map(([q, a], i) => {
          const on = open === i;
          return (
            <Reveal key={i} delay={i * 40}>
              <div 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 ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 24px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', color: 'var(--color-text)', font: 'inherit', fontFamily: 'var(--font-display)', fontSize: 17, 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={20} /></span>
                </button>
                <div style={{ maxHeight: on ? 260 : 0, transition: 'max-height var(--dur-slow) var(--ease-standard)', overflow: 'hidden' }}>
                  <p style={{ padding: '0 24px 22px', margin: 0, fontSize: 15, lineHeight: 1.62, color: 'var(--color-text-muted)', maxWidth: 680 }}>{a}</p>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
}

/* ---------- 12. Final CTA ---------- */
function FinalCTA() {
  return (
    <section id="demo" className="wrap tt-fcta" style={{ padding: '40px 40px 100px' }}>
      <Reveal>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--color-border)' }}>
          <image-slot id="cta-bg" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }} shape="rect" placeholder="Drop background image — skyline / venue at dusk"></image-slot>
          <div style={{ position: 'relative', background: 'linear-gradient(180deg, rgba(11,11,13,0.82), rgba(11,11,13,0.92))', padding: '84px 48px', textAlign: 'center' }}>
            <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={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}><S3Eyebrow tone="gold">Get started</S3Eyebrow></div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 54px)', letterSpacing: '-0.03em', lineHeight: 1.04, margin: '0 auto 18px', maxWidth: 760, textWrap: 'balance' }}>A better way to coordinate physical security services</h2>
            <p style={{ fontSize: 18, color: 'var(--color-text-muted)', maxWidth: 600, margin: '0 auto 32px', lineHeight: 1.6, textWrap: 'pretty' }}>See how Tectus helps simplify licensed security requests, improve visibility, and support faster operational coordination.</p>
            <div className="tt-fcta-btns" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a href="#/demo"><S3Button variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>Book a Demo</S3Button></a>
              <a href="#/get-quote"><S3Button variant="secondary" size="lg">Get Quote</S3Button></a>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

/* ---------- Footer (full sitemap) ---------- */
const FOOTER_ROUTE = {
  'Platform Overview': '#/platform', 'Tectus': '#/tectus', 'Tectus GO': '#/tectus-go', 'How It Works': '#/how-it-works', 'Features': '#/features', 'Use Cases': '#/use-cases', 'Compliance': '#/compliance', 'Demo': '#/demo',
  'Services Overview': '#/services', 'Executive & VIP Protection': '#/services/executive-protection', 'Retail Security': '#/services/retail-security', 'Mobile Patrol': '#/services/mobile-patrol', 'Alarm Response': '#/services/alarm-response', 'Corporate Security': '#/services/corporate-security', 'Event Security': '#/services/event-security', 'Fire Watch': '#/services/fire-watch',
  'Partners Overview': '#/partners', 'Become a Vendor': '#/become-a-vendor', 'Vendor Standards': '#/vendor-standards', 'How Partnering Works': '#/how-partnering-works', 'Partner FAQ': '#/partner-faq', 'Vendor Login': '#/vendor-login',
  'Resources Overview': '#/resources', 'Blog': '#/blog', 'FAQ': '#/faq', 'Guides': '#/guides', 'Insights': '#/insights',
  'About Tectus': '#/about', 'Collaborations': '#/collaborations', 'Contact': '#/contact', 'Privacy Policy': '#/privacy', 'Terms and Conditions': '#/terms',
};
const FOOTER_COLS = {
  Platform: ['Platform Overview', 'Tectus', 'Tectus GO', 'How It Works', 'Features', 'Use Cases', 'Compliance', 'Demo'],
  Services: ['Services Overview', 'Executive & VIP Protection', 'Retail Security', 'Mobile Patrol', 'Alarm Response', 'Corporate Security', 'Event Security', 'Fire Watch'],
  Partners: ['Partners Overview', 'Become a Vendor', 'Vendor Standards', 'How Partnering Works', 'Partner FAQ'],
  Resources: ['Resources Overview', 'Blog', 'FAQ', 'Guides', 'Insights'],
  About: ['About Tectus', 'Collaborations', 'Contact', 'Privacy Policy', 'Terms and Conditions'],
};
function Footer() {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  return (
    <footer id="footer" style={{ borderTop: '1px solid var(--color-border)', background: 'var(--color-deep)' }}>
      {/* sitemap columns */}
      <div className="wrap tt-foot-cols" style={{ padding: '56px 40px 40px', display: 'grid', gridTemplateColumns: '1.5fr repeat(5, 1fr)', gap: 36 }}>
        <div style={{ minWidth: 200 }}>
          <Brand size={22} />
          <p style={{ fontSize: 13.5, color: 'var(--color-text-faint)', lineHeight: 1.6, maxWidth: 250, margin: '16px 0 0' }}>The operating layer for physical security on demand — licensed coverage, coordinated through one structured workflow.</p>
          <div style={{ marginTop: 24 }}>
            <AppDownloadToggle />
          </div>
          <div style={{ marginTop: 22 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginBottom: 11 }}>Follow Tectus</div>
            <Socials />
          </div>
        </div>
        {Object.entries(FOOTER_COLS).map(([h, items]) => (
          <div key={h}>
            <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginBottom: 16 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {items.map((i) => <a key={i} href={FOOTER_ROUTE[i] || '#/'} className="tt-foot-link" style={{ fontSize: 13.5, color: 'var(--color-text-muted)' }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>

      {/* legal bar */}
      <div className="wrap tt-foot-legal" style={{ padding: '20px 40px', borderTop: '1px solid var(--color-divider)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, color: 'var(--color-text-faint)', fontSize: 12.5, flexWrap: 'wrap' }}>
        <span>© 2026 Tectus. All rights reserved.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Partners, Resources, FAQ, FinalCTA, Footer });