/* Company page */

function CompanyPage({ setRoute }) {
  const team = [
    { i: 'AG', n: 'Amir G.', r: 'CEO / ML Lead' },
    { i: 'SH', n: 'Sara H.', r: 'Edge Engineering' },
    { i: 'JT', n: 'Jordan T.', r: 'Customer Success' },
    { i: 'MK', n: 'Maya K.', r: 'Computer Vision' },
    { i: 'DR', n: 'Diego R.', r: 'Hardware' },
    { i: 'LP', n: 'Lin P.', r: 'Cloud / Backend' },
    { i: 'OK', n: 'Omar K.', r: 'QA / Field' },
    { i: 'NB', n: 'Naya B.', r: 'Design' },
  ];

  return (
    <React.Fragment>
      <section className="subhero">
        <div className="container">
          <div className="crumb">COMPANY</div>
          <h1>Built by engineers who stood next to the conveyor belt.</h1>
          <p>VIAI started inside a contract manufacturing shop. We watched QA inspectors miss defects on the night shift and decided to build the tool we wished we had.</p>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
          }}>
            <div>
              <Eyebrow>Why we exist</Eyebrow>
              <h2 className="section-title" style={{ fontSize: 32 }}>
                Computer vision shouldn't be a 6-month project.
              </h2>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--color-on-surface-secondary)' }}>
                The big-name CV vendors charge enterprise prices, lock you into multi-year contracts,
                and bill extra every time your part changes. The open-source path requires a CV team
                you don't have. We built a third option: factory-grade quality, week-long onboarding,
                no surprise fees — and a phone number that's always answered.
              </p>
            </div>
            <div style={{
              background: 'var(--color-surface)',
              border: '1px solid var(--color-border-light)',
              borderRadius: 16, padding: 32,
            }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
              }}>
                <div>
                  <div className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 32,
                    fontWeight: 700, letterSpacing: -0.5 }}>2023</div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                    textTransform: 'uppercase', color: 'var(--color-on-surface-tertiary)',
                    marginTop: 4 }}>Founded</div>
                </div>
                <div>
                  <div className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 32,
                    fontWeight: 700, letterSpacing: -0.5 }}>142</div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                    textTransform: 'uppercase', color: 'var(--color-on-surface-tertiary)',
                    marginTop: 4 }}>Lines deployed</div>
                </div>
                <div>
                  <div className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 32,
                    fontWeight: 700, letterSpacing: -0.5 }}>1.2M</div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                    textTransform: 'uppercase', color: 'var(--color-on-surface-tertiary)',
                    marginTop: 4 }}>Units inspected</div>
                </div>
                <div>
                  <div className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 32,
                    fontWeight: 700, letterSpacing: -0.5 }}>4</div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                    textTransform: 'uppercase', color: 'var(--color-on-surface-tertiary)',
                    marginTop: 4 }}>Continents shipped</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <Eyebrow>Team</Eyebrow>
          <h2 className="section-title">Small. Senior. Always on call.</h2>
          <p className="section-sub">
            Twelve people. Mostly engineers. Each customer is assigned a dedicated detector engineer
            who keeps your model healthy as your line evolves.
          </p>
          <div className="team-grid">
            {team.map(t => (
              <div key={t.n} className="team-card">
                <div className="team-avatar" style={{
                  background: `oklch(0.6 0.13 ${(t.i.charCodeAt(0) * 30) % 360})`,
                }}>{t.i}</div>
                <h4>{t.n}</h4>
                <div className="role">{t.r}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <Eyebrow>Contact</Eyebrow>
          <h2 className="section-title">A real person picks up.</h2>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          }}>
            {[
              { icon: 'forum', t: 'Sales', d: 'sales@viai.io', sub: 'Demo, pricing, pilots' },
              { icon: 'support_agent', t: 'Support', d: 'support@viai.io', sub: '< 4hr response, 24/5' },
              { icon: 'work', t: 'Careers', d: 'careers@viai.io', sub: 'CV, hardware, ops roles open' },
            ].map(c => (
              <div key={c.t} style={{
                background: 'var(--color-surface)',
                border: '1px solid var(--color-border-light)',
                borderRadius: 12, padding: 24,
              }}>
                <Icon name={c.icon} size={22} style={{ color: 'var(--color-primary)' }} />
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6,
                  textTransform: 'uppercase', color: 'var(--color-on-surface-tertiary)',
                  marginTop: 12 }}>{c.t}</div>
                <div style={{ fontSize: 17, fontWeight: 600, fontFamily: 'var(--font-mono)',
                  marginTop: 4, color: 'var(--color-primary)' }}>{c.d}</div>
                <div style={{ fontSize: 13, color: 'var(--color-on-surface-secondary)', marginTop: 4 }}>
                  {c.sub}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </React.Fragment>
  );
}

Object.assign(window, { CompanyPage });