/* ============================================================
   Tectus — About (bespoke redesign)
   ============================================================ */
const { Button: AbButton, Badge: AbBadge } = window.TectusDesignSystem_c42b34;

const AB_STORY = [
  { n: 'Step 01', t: 'The problem we kept seeing', d: 'Security coordination often depended on calls, texts, spreadsheets, and follow-up messages. Teams moved quickly, but the process stayed fragmented.' },
  { n: 'Step 02', t: 'What we believed should exist', d: 'A modern platform where requests, requirements, matching, communication, and status all live in one reliable workflow.' },
  { n: 'Step 03', t: 'What Tectus became', d: 'An operating layer for physical security on demand — built for clarity, trust, and execution under real-world pressure.' },
];

const AB_PRINCIPLES = [
  { icon: 'layout-grid', t: 'Structure over chaos', d: 'Every request should move through a clear workflow, not a patchwork of disconnected tools.' },
  { icon: 'eye', t: 'Visibility by default', d: 'Clients and vendors should always know status, ownership, and what happens next.' },
  { icon: 'shield-check', t: 'Trust through verification', d: 'Licensing, requirements, and insurance are accountability — not optional checkboxes.' },
  { icon: 'zap', t: 'Speed with control', d: 'Fast coordination should never mean cutting corners on standards or documentation.' },
];

const AB_AUDIENCE = [
  { icon: 'building-2', t: 'For client teams', d: 'Submit requests quickly, track progress clearly, and keep every detail documented.' },
  { icon: 'smartphone', t: 'For security vendors', d: 'Accept jobs, manage execution, and operate from one shared workflow with clients.' },
  { icon: 'route', t: 'For the operation itself', d: 'Bring speed, visibility, and accountability into every engagement from start to finish.' },
];

const AB_SNAPSHOT = [
  { label: 'Outcome', t: 'Less friction', d: 'Fewer handoffs, fewer missed details, and faster alignment between both sides.' },
  { label: 'Product view', t: 'One workflow', d: 'Requests, vendor matching, status, and records live together instead of across scattered systems.' },
  { label: 'Trust model', t: 'Verification built in', d: 'Requirements and compliance are part of the process, not an afterthought.' },
  { label: 'North star', t: 'Operational clarity', d: 'Make every job easier to understand, easier to manage, and easier to execute well.' },
];

const AB_PHASES = [
  { n: 'Phase 01', t: 'Spot the coordination gap', d: 'We saw teams managing high-stakes security through scattered, manual communication.' },
  { n: 'Phase 02', t: 'Design the workflow', d: 'We mapped the full request lifecycle into one structured, end-to-end workflow.' },
  { n: 'Phase 03', t: 'Connect both sides', d: 'We brought clients and licensed vendors onto one platform with shared visibility.' },
  { n: 'Phase 04', t: 'Keep building for operations', d: 'We keep refining the operating layer around real field needs and feedback.' },
];

const AB_TEAM = [
  { name: 'Justin Dennis', role: 'Founder / CEO', d: 'Veteran and former LEO with 10+ years in risk mitigation, security operations, and logistics. Previously co-founded an 8-figure security company and is now building the future of on-demand private security with Tectus — bringing a proven track record of execution and growth.', img: 'assets/team-justin.webp' },
  { name: 'Matt Beck', role: 'Founding President', d: 'Seasoned executive with 20+ years in law enforcement, corporate security, and enterprise risk. MBA in Strategy & M&A from the University of Georgia. Combines expertise in operational scalability, regulatory compliance, and strategic deal execution.', img: 'assets/team-matt.webp' },
  { name: 'Phil Yu', role: 'Founding COO', d: 'Veteran and former federal LEO with 20+ years in executive leadership, global security operations, executive protection, and risk management. Former head of security at a major enterprise and founder of a risk advisory firm serving Fortune 500s, family offices, and global organizations.', img: 'assets/team-phil.webp' },
  { name: 'Jason Reed', role: 'Founding COO', d: 'Growth-focused executive with experience across sales, marketing, revenue operations, and business strategy. Helps drive growth at Tectus and supports the mission to modernize physical security through technology, operational discipline, and scalable execution.', img: 'assets/team-jason.webp' },
];

function AboutPage() {
  return (
    <div>
      {/* split hero: story on the left, stepped card on the right */}
      <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--color-border)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', top: -180, right: -120, width: 560, height: 520, background: 'radial-gradient(circle, rgba(212,175,55,0.08), transparent 64%)', pointerEvents: 'none' }} />
        <div className="wrap tt-about-hero" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center', padding: '64px 40px 72px', position: 'relative' }}>
          <Reveal>
            <div style={{ marginBottom: 20 }}><PillEyebrow>About Tectus</PillEyebrow></div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(36px, 4.6vw, 58px)', lineHeight: 1.04, letterSpacing: '-0.035em', margin: '0 0 20px', textWrap: 'balance' }}>We built Tectus to make physical security faster, clearer, and accountable.</h1>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: 480, margin: '0 0 28px' }}>Our mission is simple: replace fragmented coordination with one structured operating layer for modern security teams and licensed vendors.</p>
            <div style={{ display: 'flex', gap: 12, marginBottom: 36, flexWrap: 'wrap' }}>
              <a href="#/demo"><AbButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>Book a Demo</AbButton></a>
              <a href="#/platform"><AbButton variant="secondary" size="lg">Read our story</AbButton></a>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
              {[['1', 'Shared platform for clients and vendors'], ['24/7', 'Operations mindset behind the product'], ['Mission', 'Bring structure to every request']].map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 28, fontWeight: 700, color: 'var(--color-primary-light)', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--color-text-faint)', marginTop: 8, lineHeight: 1.45 }}>{l}</div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 28, boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontWeight: 600, color: 'var(--color-text-muted)' }}><Icon name="flag" size={15} color="var(--color-primary)" />Why we started</span>
                <AbBadge tone="gold">Mission-led</AbBadge>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {AB_STORY.map((s) => (
                  <div key={s.n} style={{ padding: '16px 18px', background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
                      <span style={{ fontSize: 14, fontWeight: 600 }}>{s.t}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--color-text-faint)' }}>{s.n}</span>
                    </div>
                    <p style={{ fontSize: 13, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: 0 }}>{s.d}</p>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--color-divider)' }}>
                <span style={{ fontSize: 12.5, color: 'var(--color-text-faint)', lineHeight: 1.5 }}>Built around company story + mission, with the same structured workflow.</span>
                <a href="#/platform" style={{ flex: '0 0 auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--color-primary-light)' }} className="tt-arrow-link">See platform <Icon name="arrow-right" size={13} /></a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* principles — dark */}
      <section style={{ background: 'var(--color-deep)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap" style={{ padding: '96px 40px' }}>
          <Reveal><CenterHead label="What drives us" title="Four principles behind the platform" sub="The ideas that keep the work focused, honest, and useful — so the system stays simple around clients, vendors, and trust." /></Reveal>
          <div className="tt-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {AB_PRINCIPLES.map((p, i) => (
              <Reveal key={p.t} delay={i * 70}>
                <div style={{ padding: 26, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', height: '100%' }}>
                  <span style={{ width: 44, height: 44, 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: 18 }}><Icon name={p.icon} size={21} /></span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 8px' }}>{p.t}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: 0 }}>{p.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* mission + snapshot */}
      <section className="wrap tt-about-mission" style={{ padding: '96px 40px', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 56, alignItems: 'start' }}>
        <Reveal>
          <SectionLabel center={false}>Our mission</SectionLabel>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px, 3.4vw, 42px)', letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 16px', textWrap: 'balance' }}>Built for the teams who need security coordination to actually work</h2>
          <p style={{ fontSize: 16.5, color: 'var(--color-text-muted)', lineHeight: 1.62, margin: '0 0 28px', maxWidth: 460 }}>Tectus exists for operations leaders, venue teams, property groups, and licensed vendors who need one dependable system instead of manual back-and-forth.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {AB_AUDIENCE.map((a) => (
              <div key={a.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ flex: '0 0 auto', width: 38, height: 38, borderRadius: 'var(--radius-md)', background: 'var(--color-surface-3)', border: '1px solid var(--color-border)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={a.icon} size={18} /></span>
                <div>
                  <h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 4px' }}>{a.t}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--color-text-faint)', margin: 0, lineHeight: 1.5 }}>{a.d}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', padding: 30 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
              <span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700 }}>Mission snapshot</span>
              <span style={{ fontSize: 11, color: 'var(--color-text-faint)', fontFamily: 'var(--font-mono)' }}>Internal memo</span>
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2vw, 26px)', fontWeight: 600, lineHeight: 1.3, letterSpacing: '-0.015em', margin: '0 0 28px' }}>“Create the operating layer physical security teams wish they already had.”</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
              {AB_SNAPSHOT.map((s) => (
                <div key={s.t}>
                  <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--color-text-faint)', fontWeight: 700, marginBottom: 8 }}>{s.label}</div>
                  <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 5, color: 'var(--color-primary-light)' }}>{s.t}</div>
                  <p style={{ fontSize: 13, color: 'var(--color-text-muted)', lineHeight: 1.5, margin: 0 }}>{s.d}</p>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </section>

      {/* phases — dark */}
      <section style={{ background: 'var(--color-deep)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap" style={{ padding: '96px 40px' }}>
          <Reveal><CenterHead label="Our path" title="How the idea became a platform" sub="A simplified company story, built to follow the same rhythm as the structured workflow Tectus runs on." /></Reveal>
          <div className="tt-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {AB_PHASES.map((p, i) => (
              <Reveal key={p.n} delay={i * 70}>
                <div style={{ padding: 26, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', height: '100%' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--color-primary-light)', fontWeight: 600, padding: '5px 11px', border: '1px solid rgba(212,175,55,0.3)', borderRadius: 'var(--radius-pill)', marginBottom: 18 }}>{p.n}</span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 8px', lineHeight: 1.25 }}>{p.t}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: 0 }}>{p.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* leadership */}
      <section 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: 44 }}>
            <div style={{ maxWidth: 560 }}>
              <SectionLabel center={false}>Leadership</SectionLabel>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px, 3.4vw, 42px)', letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 14px', textWrap: 'balance' }}>A team shaped by operations, product, and trust</h2>
              <p style={{ fontSize: 15.5, color: 'var(--color-text-muted)', margin: 0, lineHeight: 1.6 }}>A simple leadership section to support the company story without overpowering the mission-led layout.</p>
            </div>
            <a href="#/contact"><AbButton variant="secondary" size="md" iconRight={<Icon name="arrow-right" size={16} />}>Contact the team</AbButton></a>
          </div>
        </Reveal>
        <div className="tt-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {AB_TEAM.map((m, i) => (
            <Reveal key={m.name} delay={i * 70}>
              <div>
                <img src={m.img} alt={m.name} loading="lazy" style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-lg)', marginBottom: 16, border: '1px solid var(--color-border)' }} />
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, margin: '0 0 2px' }}>{m.name}</h3>
                <div style={{ fontSize: 12.5, color: 'var(--color-primary-light)', fontWeight: 600, marginBottom: 9 }}>{m.role}</div>
                <p style={{ fontSize: 13, color: 'var(--color-text-muted)', lineHeight: 1.55, margin: 0 }}>{m.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <CTABandCenter label="Ready to see more" title="See how the mission shows up in the product." sub="Book a personalized demo and explore how Tectus brings structure, visibility, and accountability to physical security operations." primary="Book a Demo" secondary="Get Quote" />
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
window.CUSTOM_PAGES['about'] = AboutPage;
