/* ============================================================
   Tectus — Partners overview (bespoke redesign)
   ============================================================ */
const { Button: PtButton } = window.TectusDesignSystem_c42b34;

const PT_TRACKS = [
  { icon: 'shield-check', t: 'Security Vendors', d: 'Licensed security companies looking to scale their operations by receiving qualified job requests through the Tectus platform.', pts: ['Inbound job requests', 'Automated billing & invoicing', 'Performance dashboard'] },
  { icon: 'layers', t: 'Technology Partners', d: 'Hardware and software vendors integrating their solutions with Tectus — from CCTV systems to access-control hardware.', pts: ['API & integration access', 'Co-marketing opportunities', 'Joint go-to-market'] },
  { icon: 'handshake', t: 'Referral Partners', d: 'Consultants, brokers, and industry advisors who refer clients to Tectus in exchange for competitive referral commissions.', pts: ['Competitive commission rates', 'Dedicated partner portal', 'Real-time deal tracking'] },
];

const PT_ONBOARD = [
  { n: '01', t: 'Submit Application', d: 'Fill out the partner application with your company details, license info, and service areas.' },
  { n: '02', t: 'Verification & Vetting', d: 'Our team reviews credentials, licenses, and insurance documentation — typically within 48 hours.' },
  { n: '03', t: 'Platform Onboarding', d: 'Get access to the Tectus partner portal, complete a short onboarding session, and set your availability.' },
  { n: '04', t: 'Start Receiving Jobs', d: 'Go live and begin receiving qualified job requests matched to your service area and capabilities.' },
];

const PT_GROW = [
  { icon: 'trending-up', t: 'Steady Revenue Growth', d: 'Access a consistent pipeline of qualified clients actively looking for services you offer — no cold outreach required.' },
  { icon: 'file-check', t: 'Simplified Compliance', d: 'All documentation, incident reports, and contract records are stored and managed inside the Tectus platform automatically.' },
  { icon: 'credit-card', t: 'Fast, Reliable Payments', d: 'Automated invoicing with predictable payment cycles — so you can focus on operations, not chasing payments.' },
  { icon: 'bar-chart-3', t: 'Performance Insights', d: 'Track your job completion rates, client ratings, and earnings over time with your dedicated performance dashboard.' },
];



function PartnersPage() {
  return (
    <div>
      <CenterHero
        eyebrow="Partners"
        title={<React.Fragment>Grow your security business <GoldAccent>with Tectus.</GoldAccent></React.Fragment>}
        sub="Join a network of licensed security vendors, technology integrators, and industry consultants powering the future of physical security."
        primary="Become a Vendor" secondary="How partnering works"
      />
      <StatPanel stats={[{ v: '340+', l: 'Active vendor partners' }, { v: '18', l: 'States covered' }, { v: '$2.4M', l: 'Avg. annual partner revenue' }, { v: '96%', l: 'Partner retention rate' }]} accentIdx={[0, 2]} />

      {/* tracks */}
      <section className="wrap" style={{ padding: '96px 40px' }}>
        <Reveal><CenterHead label="Partnership tracks" title="Find the right partnership for you" sub="Whether you're a security vendor, technology vendor, or industry consultant — there's a Tectus partnership built for your business." /></Reveal>
        <div className="tt-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {PT_TRACKS.map((tk, i) => (
            <Reveal key={tk.t} delay={i * 80}>
              <div className="tt-track-card" style={{ padding: 30, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', height: '100%', display: 'flex', flexDirection: 'column', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
                <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', marginBottom: 20 }}><Icon name={tk.icon} size={22} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, margin: '0 0 10px' }}>{tk.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: '0 0 18px' }}>{tk.d}</p>
                <ul style={{ listStyle: 'none', margin: '0 0 22px', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {tk.pts.map((p) => (
                    <li key={p} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13.5, color: 'var(--color-text)' }}><Icon name="check" size={15} color="var(--color-primary)" />{p}</li>
                  ))}
                </ul>
                <a href="#/become-a-vendor" style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">Apply now <Icon name="arrow-right" size={14} /></a>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* onboarding */}
      <section 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><CenterHead label="Onboarding process" title="Get onboarded in days, not months" sub="Our streamlined partner onboarding process gets you up and running fast — with full support every step of the way." /></Reveal>
          <ProcessBand items={PT_ONBOARD.map((s) => ({ n: s.n, t: s.t, d: s.d, icon: { '01': 'file-text', '02': 'shield-check', '03': 'layout-grid', '04': 'rocket' }[s.n] }))} />
        </div>
      </section>

      {/* why partner — image + features */}
      <section className="wrap" style={{ padding: '96px 40px' }}>
        <Reveal><CenterHead label="Why partner with us" title="Built to help your business grow" /></Reveal>
        <div className="tt-grow" style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 48, alignItems: 'stretch' }}>
          <Reveal style={{ height: '100%' }}>
            <image-slot id="pt-grow" src="assets/partners-why-partner.webp" style={{ width: '100%', height: '100%', minHeight: 360, display: 'block', borderRadius: 'var(--radius-xl)' }} shape="rect" placeholder="Drop image — operations / security team"></image-slot>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, justifyContent: 'center', height: '100%' }}>
              {PT_GROW.map((g) => (
                <div key={g.t} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <span style={{ flex: '0 0 auto', width: 40, height: 40, 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' }}><Icon name={g.icon} size={19} /></span>
                  <div>
                    <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 5px' }}>{g.t}</h3>
                    <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', margin: 0, lineHeight: 1.55 }}>{g.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* apply directly via Tectus GO */}
      <section className="wrap" style={{ padding: '0 40px 96px' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', padding: '32px 36px', background: 'var(--color-surface)', border: '1px solid rgba(212,175,55,0.24)', borderRadius: 'var(--radius-xl)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ flex: '0 0 auto', 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="smartphone" size={22} /></span>
              <div>
                <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 4 }}>Ready now? Apply through Tectus GO</div>
                <p style={{ fontSize: 13.5, color: 'var(--color-text-faint)', margin: 0, lineHeight: 1.5 }}>Submit your vendor application directly on the Tectus GO platform — the fastest way to start receiving job requests.</p>
              </div>
            </div>
            <a href="https://apply.tectusapp.com/" target="_blank" rel="noopener noreferrer" style={{ flex: '0 0 auto', display: 'inline-flex', alignItems: 'center', gap: 8, height: 48, padding: '0 22px', borderRadius: 'var(--radius-md)', background: 'var(--color-primary)', color: 'var(--color-on-primary)', fontSize: 14.5, fontWeight: 600 }}>Submit application <Icon name="arrow-up-right" size={16} color="var(--color-on-primary)" /></a>
          </div>
        </Reveal>
      </section>

      <CTABandCenter label="Join the network" title="Ready to grow with Tectus?" sub="Apply to become a partner today and start receiving qualified security job requests in your area." primary="Become a Vendor" secondary="Contact Tectus" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['partners'] = PartnersPage;