/* global React, Icon, Photo, Eyebrow */

const TEAM = [
  { name: 'Shaun Moore', role: 'Founder · Lead Engineer', label: 'PHOTO  /  portrait, natural light' },
  { name: 'Jules Park', role: 'Head of Service', label: 'PHOTO  /  portrait, natural light' },
  { name: 'Marco Devi', role: 'Principal Engineer', label: 'PHOTO  /  portrait, natural light' },
  { name: 'Tess Naidu', role: 'Security Lead', label: 'PHOTO  /  portrait, natural light' },
];

const initials = (name) => name.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase();

function AboutPage({ go, teamLayout = 'founder' }) {
  return (
    <main data-screen-label="About page">
      <div className="page-head">
        <div className="wrap">
          <Eyebrow>About</Eyebrow>
          <h1>We run IT the way<br/>we wish ours was run.</h1>
          <p className="lede">
            Planetiware was founded in 2002 by Shaun Moore — after years inside enterprise IT, watching mid-market businesses get sold either toy tools or enterprise overkill.
          </p>
        </div>
      </div>

      <section className="tight">
        <div className="wrap about-grid">
          <div>
            <Eyebrow>The shape of the company</Eyebrow>
            <h2 style={{marginTop: 18}}>Small team.<br/>Solutions first.</h2>
            <p style={{marginTop: 24}}>
              We are deliberately small. An owner-led, technical practice — the people you brief are the people building the solution. No queues. No level-one black hole.
            </p>
            <p>
              Every engagement starts with the problem, not a packaged offering. We turn down work that is not a fit, and the clients we say yes to tend to stay with us for years.
            </p>
            <p>
              We do not chase logos and we do not pad headcount. We would rather be useful to a handful of clients than passable to many.
            </p>
            <div style={{marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
              <button className="btn btn-primary btn-arrow" onClick={() => go('contact')}>
                Have a conversation
                <Icon.arrow />
              </button>
            </div>
          </div>

          <div className="about-stats">
            <div className="about-stat">
              <div className="v">2002</div>
              <div className="l">Founded in Sydney, Australia</div>
            </div>
            <div className="about-stat">
              <div className="v" style={{fontSize: 28}}>Owner-led</div>
              <div className="l">Technical practice</div>
            </div>
            <div className="about-stat">
              <div className="v" style={{fontSize: 28}}>Solution-first</div>
              <div className="l">Every engagement</div>
            </div>
            <div className="about-stat">
              <div className="v">0</div>
              <div className="l">Long-term contracts required</div>
            </div>
          </div>
        </div>
      </section>

      <section className="dark tight">
        <div className="wrap">
          <div className="section-head">
            <div>
              <Eyebrow>What we believe</Eyebrow>
              <h2 style={{marginTop: 18}}>Five things<br/>we will not budge on.</h2>
            </div>
            <p className="lede">
              These are easier to read than to live. We agreed on them in 2002. They have not changed since — and they shape every engagement we take.
            </p>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 1, background: 'var(--line-dark)', border: '1px solid var(--line-dark)', borderRadius: 'var(--r-lg)', overflow: 'hidden'}}>
            {[
              { n: '01', t: 'Outcomes, not tickets', b: 'We measure ourselves by what your team got done — not by ticket throughput. A quiet quarter is a good quarter.' },
              { n: '02', t: 'Boring technology', b: 'We pick the tool that has been working for ten years over the one that demos well. You will live with this stack a long time.' },
              { n: '03', t: 'Named humans', b: 'You get the names, mobile numbers, and faces of the engineers running your environment. Not a portal.' },
              { n: '04', t: 'Written everything', b: 'Designs, runbooks, post-mortems, and reviews are written down and given to you. Knowledge belongs to your business.' },
              { n: '05', t: 'No long contracts', b: 'Month-to-month after the initial discovery. If we are not useful, you should be able to leave on thirty days.' },
            ].map((b) => (
              <div key={b.n} style={{background: 'var(--ink)', padding: '32px 28px'}}>
                <span style={{fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--fg-light-mute)'}}>BELIEF · {b.n}</span>
                <h4 style={{marginTop: 14, marginBottom: 10, color: 'var(--fg-light)'}}>{b.t}</h4>
                <p style={{fontSize: 14, color: 'var(--fg-light-2)', lineHeight: 1.55}}>{b.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="wrap">
          {teamLayout === 'founder' && (
            <>
              <div className="section-head">
                <div>
                  <Eyebrow>People</Eyebrow>
                  <h2 style={{marginTop: 18}}>Owner-led.<br/>From kickoff onwards.</h2>
                </div>
                <p className="lede">
                  You brief the senior engineer who owns your work. No anonymous ticket queue, no handover to a junior, no level-one filter.
                </p>
              </div>
              <div className="founder-block">
                <div className="founder-mono">{initials(TEAM[0].name)}</div>
                <div className="founder-info">
                  <div className="founder-eyebrow">Founder · Lead engineer</div>
                  <div className="founder-name">{TEAM[0].name}</div>
                  <p>
                    Twenty years inside enterprise IT before starting Planetiware in 2002 — frustrated by watching mid-market businesses get sold either toy tools or enterprise overkill. Still writing the designs, still on every kickoff call.
                  </p>
                </div>
              </div>
              <p className="team-tail">
                You will also work with a small, senior team behind the scenes. You will meet them at kickoff — not before, not after.
              </p>
            </>
          )}

          {teamLayout === 'list' && (
            <>
              <div className="section-head">
                <div>
                  <Eyebrow>People</Eyebrow>
                  <h2 style={{marginTop: 18}}>The team you<br/>actually get.</h2>
                </div>
                <p className="lede">
                  A small, hands-on team. The people in your kick-off are the people you will still be talking to in year five.
                </p>
              </div>
              <div className="team-list">
                {TEAM.map((t) => (
                  <div key={t.name} className="team-list-row">
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                ))}
              </div>
            </>
          )}

          {teamLayout === 'monogram' && (
            <>
              <div className="section-head">
                <div>
                  <Eyebrow>People</Eyebrow>
                  <h2 style={{marginTop: 18}}>The team you<br/>actually get.</h2>
                </div>
                <p className="lede">
                  A small, hands-on team. The people in your kick-off are the people you will still be talking to in year five.
                </p>
              </div>
              <div className="team-grid">
                {TEAM.map((t) => (
                  <div key={t.name} className="team-card">
                    <div className="team-monogram">{initials(t.name)}</div>
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                ))}
              </div>
            </>
          )}

          {teamLayout === 'photos' && (
            <>
              <div className="section-head">
                <div>
                  <Eyebrow>People</Eyebrow>
                  <h2 style={{marginTop: 18}}>The team you<br/>actually get.</h2>
                </div>
                <p className="lede">
                  A small, hands-on team. The people in your kick-off are the people you will still be talking to in year five.
                </p>
              </div>
              <div className="team-grid">
                {TEAM.map((t) => (
                  <div key={t.name} className="team-card">
                    <div className="team-photo">
                      <Photo label={t.label} light />
                    </div>
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });