/* ============================================================
   Tectus — Get Started chooser: Tectus (clients) vs Tectus GO (vendors)
   ============================================================ */
const { Button: GsButton } = window.TectusDesignSystem_c42b34;

function goSignup(url) {
  if (!url) return;
  if (/^https?:/.test(url)) window.open(url, '_blank', 'noopener');
  else window.location.hash = url.replace(/^#/, '');
}

function GetStartedPage() {
  const cards = [
    {
      key: 'client', name: 'Tectus', tag: 'For businesses & clients',
      logo: 'assets/tectus-icon-white.webp', logoId: 'iconWhite',
      url: 'https://app.tectusapp.com/signin',
      desc: 'Request and manage licensed security coverage. Book by time, location, and requirement, then track every job to completion.',
      points: ['Request coverage in minutes', 'Vetted, licensed vendors', 'Live status from match to completion'],
      cta: 'Get started', secondary: { label: 'Explore features', href: '#/features' },
      store: 'tectus',
    },
    {
      key: 'vendor', name: 'Tectus GO', tag: 'For security companies',
      logo: 'assets/tectus-go-icon-white.webp', logoId: 'goIconWhite',
      url: 'https://apply.tectusapp.com/',
      desc: 'Join the Tectus network and run operations on Tectus GO. Accept job requests, assign personnel, and update status from the field.',
      points: ['Receive qualified job requests', 'Manage teams and schedules', 'One operations app for the field'],
      cta: 'Get started', secondary: { label: 'Requirements', href: '#/vendor-standards' },
      store: 'go',
    },
  ];
  const links = window.STORE_LINKS || {};
  return (
    <div>
      <CenterHero
        eyebrow="Get started"
        title={<React.Fragment>Get started with <GoldAccent>Tectus.</GoldAccent></React.Fragment>}
        sub="Choose the path that fits you — get started as a business to request coverage, or join the network as a licensed vendor."
      />

      <section className="wrap" style={{ padding: '8px 40px 40px' }}>
        <div className="tt-split-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {cards.map((c, i) => (
            <Reveal key={c.key} delay={i * 100} style={{ height: '100%' }}>
              <div role="link" tabIndex={0} onClick={() => goSignup(c.url)} onKeyDown={(e) => { if (e.key === 'Enter') goSignup(c.url); }} className="tt-gs-card" style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 36, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', transition: 'border-color var(--dur-base), transform var(--dur-base), background var(--dur-base)', cursor: 'pointer' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
                  <span style={{ flex: '0 0 auto', width: 64, height: 64, borderRadius: 'var(--radius-lg)', background: 'var(--color-bg)', border: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 12 }}>
                    <img src={asset(c.logoId, c.logo)} alt={c.name} style={{ maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto', display: 'block' }} />
                  </span>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.1 }}>{c.name}</div>
                    <div style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginTop: 4 }}>{c.tag}</div>
                  </div>
                </div>
                <p style={{ fontSize: 15, color: 'var(--color-text-muted)', lineHeight: 1.6, margin: '0 0 20px' }}>{c.desc}</p>
                <ul style={{ listStyle: 'none', margin: '0 0 26px', padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {c.points.map((p) => (
                    <li key={p} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--color-text)', lineHeight: 1.45 }}>
                      <Icon name="check" size={16} color="var(--color-primary)" style={{ marginTop: 1, flex: '0 0 auto' }} />{p}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 'auto' }}>
                  <div style={{ display: 'flex', gap: 10 }} onClick={(e) => e.stopPropagation()}>
                    <a href={c.secondary.href} className="tt-gs-secondary" style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, height: 50, borderRadius: 'var(--radius-md)', background: 'transparent', border: '1px solid var(--color-border-strong)', color: 'var(--color-text)', fontSize: 14.5, fontWeight: 600, transition: 'border-color var(--dur-base), background var(--dur-base)' }}>{c.secondary.label}</a>
                    <a href={c.url} target="_blank" rel="noopener noreferrer" className="tt-gs-cta" style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, height: 50, borderRadius: 'var(--radius-md)', background: 'var(--color-primary)', color: 'var(--color-on-primary)', fontSize: 14.5, fontWeight: 600, transition: 'background var(--dur-base)' }}>{c.cta} <Icon name="arrow-right" size={16} color="var(--color-on-primary)" /></a>
                  </div>
                </div>
                {links[c.store] && (
                  <div style={{ marginTop: 24, paddingTop: 22, borderTop: '1px solid var(--color-divider)' }} onClick={(e) => e.stopPropagation()}>
                    <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginBottom: 12 }}>Or get the app</div>
                    <StoreButtons appleHref={links[c.store].apple} googleHref={links[c.store].google} label={c.name} block />
                  </div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="wrap" style={{ padding: '0 40px 40px', textAlign: 'center' }}>
        <Reveal>
          <p style={{ fontSize: 15, color: 'var(--color-text-muted)' }}>Not sure which fits? <a href="#/contact" style={{ color: 'var(--color-primary-light)', fontWeight: 600 }} className="tt-arrow-link">Talk to an advisor</a> or <a href={window.DEMO_LINK} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-primary-light)', fontWeight: 600 }}>book a demo</a>.</p>
        </Reveal>
      </section>

      <CTABandCenter label="Talk to us" title="Still have questions?" sub="Book a live walkthrough and see how Tectus coordinates licensed security coverage end to end." primary="Book a Demo" secondary="Get Quote" />
    </div>
  );
}

window.ROUTES = window.ROUTES || {};
window.ROUTES['get-started'] = {
  kind: 'custom', group: 'Platform', groupHref: '#/platform', title: 'Get Started',
  metaTitle: 'Get Started with Tectus', h1: 'Get started with Tectus',
};
window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['get-started'] = GetStartedPage;