/* ============================================================
   Tectus — Collaborations: overview (with 2-partner preview)
   + collaborator detail pages. Reads window.COLLABS.
   ============================================================ */
const { Button: ClButton } = window.TectusDesignSystem_c42b34;

function CollabCard({ c }) {
  return (
    <a href={'#/collaborations/' + c.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: 200 }}>
        <img src={c.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: 10.5, fontWeight: 600, 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="handshake" size={12} color="var(--color-primary)" />Collaboration</span>
      </div>
      <div style={{ padding: 28, display: 'flex', flexDirection: 'column', flex: 1 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 600, margin: '0 0 10px', lineHeight: 1.2 }}>{c.title}</h3>
        <p style={{ fontSize: 14, color: 'var(--color-text-muted)', lineHeight: 1.6, margin: '0 0 18px' }}>{c.sub}</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>
  );
}

function CollaborationsPage() {
  const collabs = window.COLLABS || [];
  return (
    <div>
      <CenterHero
        eyebrow="Collaborations"
        title={<React.Fragment>Building the future of security, <GoldAccent>together.</GoldAccent></React.Fragment>}
        sub="Strategic collaborations and partnership opportunities across ecosystem, operations, and business development with Tectus."
        primary="Contact Tectus" secondary="Become a Vendor"
      />

      {collabs.length > 0 && (
        <section className="wrap" style={{ padding: '8px 40px 40px' }}>
          <Reveal><CenterHead label="Featured collaborators" title="Partners advancing modern security" sub="A preview of the technology and operations partners we collaborate with." /></Reveal>
          <div className="tt-split-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {collabs.slice(0, 2).map((c, i) => (
              <Reveal key={c.slug} delay={i * 100}><CollabCard c={c} /></Reveal>
            ))}
          </div>
        </section>
      )}

      <FeatureGrid
        eyebrow="Ways to work together" h2="Where collaboration fits" surface cols={3}
        items={[
          { icon: 'handshake', t: 'Ecosystem partnerships', d: 'Connect complementary services and platforms.' },
          { icon: 'route', t: 'Operational collaborations', d: 'Coordinate coverage across organizations.' },
          { icon: 'briefcase', t: 'Business development', d: 'Explore opportunities to grow together.' },
          { icon: 'building-2', t: 'Enterprise programs', d: 'Tailored coordination for larger operations.' },
          { icon: 'shield-check', t: 'Vendor networks', d: 'Bring licensed vendors into the network.' },
          { icon: 'message-square', t: 'Let’s talk', d: 'Have an idea? We’d like to hear it.' },
        ]}
      />

      <CTABandCenter label="Get in touch" title="Let’s explore a collaboration" sub="Reach out to the Tectus team to start a conversation." primary="Contact Tectus" secondary="About Tectus" />
    </div>
  );
}

/* ---------- collaborator detail ---------- */
function CollabDetail({ slug }) {
  const c = (window.COLLABS || []).find((x) => x.slug === slug);
  useEffect(() => {
    if (c) document.title = c.title + ' | Tectus Collaborations';
    return () => { document.title = 'Tectus — Physical security, delivered faster. When it matters most.'; };
  }, [slug]);
  if (!c) return <NotFound />;
  const more = (window.COLLABS || []).filter((x) => x.slug !== slug).slice(0, 2);

  return (
    <div>
      <section className="wrap" style={{ padding: '40px 40px 0', maxWidth: 820 }}>
        <Reveal>
          <a href="#/collaborations" 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 collaborations</a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, 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="handshake" size={13} />Collaboration</span>
          </div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(32px, 4.4vw, 52px)', letterSpacing: '-0.032em', lineHeight: 1.06, margin: '0 0 18px', textWrap: 'balance' }}>{c.title}</h1>
          <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: 0, textWrap: 'pretty' }}>{c.sub}</p>
        </Reveal>
      </section>
      <section className="wrap" style={{ padding: '32px 40px 0', maxWidth: 1000 }}>
        <Reveal delay={80}>
          <img src={c.image} alt="" style={{ width: '100%', borderRadius: 'var(--radius-xl)', border: '1px solid var(--color-border)', display: 'block', aspectRatio: '16 / 8', objectFit: 'cover' }} />
        </Reveal>
      </section>
      <section className="wrap" style={{ padding: '48px 40px 24px', maxWidth: 760 }}>
        <Reveal><div className="tt-prose" dangerouslySetInnerHTML={{ __html: c.content }} /></Reveal>
      </section>

      {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 collaborations</h2>
          <div className="tt-split-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {more.map((m) => <CollabCard key={m.slug} c={m} />)}
          </div>
        </section>
      )}

      <CTABandCenter label="Get in touch" title="Interested in collaborating?" sub="Reach out to the Tectus team to start a conversation." primary="Contact Tectus" secondary="About Tectus" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['collaborations'] = CollaborationsPage;
window.CollabDetail = CollabDetail;