// MEET THE TEAM PAGE - /company/team
// Editorial direction. 5 person slots in a 3+2 grid.
// Photo placeholders sized for portrait headshots; name in display serif,
// role + bio in sans.

const { EdCtx: TeamCtx, EdTag: TeamTag, EdBtn: TeamBtn, EdChrome: TeamChrome,
        useIsMobile: teamUseIsMobile } = window;

// ─── data ──────────────────────────────────────────────────────

const TEAM = [
  {
    initials: 'SH',
    photo: 'images/team/steve-hirst.jpg',
    name: 'Steve Hirst',
    role: 'CEO',
    email: 'steve.hirst@outrun.insure',
    bio: 'Steve spent five years as CIO of a specialist broking business, leading the build-out of the systems and technology that underpinned its growth. Before that, he led a technology business working directly with broker clients. Between them, those roles gave him a clear view of what schemes and DA operations need from technology - and where existing platforms fall short. He co-founded Outrun in 2022.',
  },
  {
    initials: 'JH',
    photo: 'images/team/james-hill.jpg',
    name: 'James Hill',
    role: 'Commercial Director',
    email: 'james.hill@outrun.insure',
    bio: 'James spent a decade in schemes broking across product development, binder management and distribution/sales. That was followed by three years in leadership roles at Jensten, where he worked on a range of transformation projects including growing schemes business, developing digital quote engines and launching a new MGA. Between them, those roles give James a deep understanding of our clients\u2019 challenges and needs. He joined Outrun as Commercial Director in 2024.',
  },
  {
    initials: 'PC',
    photo: 'images/team/paul-currie.jpg',
    name: 'Paul Currie',
    role: '',
    email: 'paul.currie@outrun.insure',
    bio: 'Paul brings more than 20 years of technology experience to Outrun, including seven years as CTO within financial services. That background in regulated, operationally demanding environments shapes his approach to Outrun\u2019s technology - with a particular focus on security, governance and the development standards that businesses running schemes and DA operations need from a platform they rely on.',
  },
  {
    initials: 'DS',
    photo: 'images/team/dan-simons.jpg',
    name: 'Dan Simons',
    role: 'Head of Development',
    email: 'dan.simons@outrun.insure',
    bio: 'Dan has 30 years of experience in system development and platform design, with a particular focus on building bespoke platforms for insurance broking and underwriting. He brings that experience to Outrun as Head of Development, where the platform is \u2018mission critical\u2019 to the businesses that run on it.',
  },
];

// ─── hero ──────────────────────────────────────────────────────

function TeamHero() {
  const ED = React.useContext(TeamCtx);
  const edText = ED.text;
  const isMobile = teamUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 48px' : '72px 144px 96px', background: ED.bg }}>
      <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(40px, 11vw, 46px)' : 119, lineHeight: isMobile ? 1.0 : 0.95, color: ED.ink, margin: 0, maxWidth: 1320, letterSpacing: '-0.04em' }}>
        Meet the Outrun <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>Team</span>.
      </h1>
      <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 22, lineHeight: 1.5, color: ED.ink, margin: isMobile ? '20px 0 0' : '44px 0 0', maxWidth: 900 }}>
        Our team consists primarily of insurance people working closely with experienced technologists - this collaboration means our platform delivers for the complexities of schemes and DA business.
      </p>
    </section>
  );
}

// ─── person card ───────────────────────────────────────────────
// Desktop: portrait left, bio right. Mobile: portrait on top, bio below.

function TeamPerson({ person }) {
  const ED = React.useContext(TeamCtx);
  const edText = ED.text;
  const isMobile = teamUseIsMobile();
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : '180px 1fr',
      gap: isMobile ? 20 : 32,
      paddingBottom: isMobile ? 36 : 48,
      borderBottom: `1px solid ${ED.rule}`,
      alignItems: 'start',
    }}>
      {/* Portrait */}
      <div style={{
        width: isMobile ? 160 : '100%',
        aspectRatio: '3 / 4',
        background: ED.bgWarm,
        border: `1px solid ${ED.rule}`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {person.photo ? (
          <img
            src={person.photo}
            alt={person.name}
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
          />
        ) : (
          <>
            <span style={{ ...edText.display, fontSize: 72, color: ED.ink3 || '#c7c0b3', letterSpacing: 0, lineHeight: 1 }}>
              {person.initials}
            </span>
            <span style={{
              position: 'absolute', bottom: 10, left: 12,
              ...edText.tag, fontSize: 9, color: ED.ink2,
            }}>
              [ Photo ]
            </span>
          </>
        )}
      </div>

      {/* Bio block */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 12 : 16, maxWidth: 540 }}>
        <div>
          {person.role && (
            <div style={{ ...edText.tag, fontSize: 11, color: ED.accent, marginBottom: isMobile ? 8 : 10 }}>
              {person.role}
            </div>
          )}
          <h3 style={{ ...edText.display, fontSize: isMobile ? 28 : 38, lineHeight: 1.05, color: ED.ink, margin: 0, letterSpacing: '-0.025em' }}>
            {person.name}
          </h3>
        </div>
        <p style={{ ...edText.sans, fontSize: isMobile ? 16 : 15.5, lineHeight: 1.65, color: ED.ink, margin: 0 }}>
          {person.bio}
        </p>
        {person.email && (
          <a href={`mailto:${person.email}`} style={{ ...edText.med, fontSize: 13, color: ED.ink, textDecoration: 'none', borderBottom: `1px solid ${ED.rule}`, paddingBottom: 3, alignSelf: 'flex-start', marginTop: 4, wordBreak: 'break-all' }}>
            {person.email}
          </a>
        )}
      </div>
    </article>
  );
}

// ─── 2-column grid ──────────────────────────────────────────────

function TeamGrid() {
  const ED = React.useContext(TeamCtx);
  const edText = ED.text;
  const isMobile = teamUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 64px' : '64px 144px 120px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
        columnGap: 80,
        rowGap: isMobile ? 36 : 48,
        maxWidth: 1320,
      }}>
        {TEAM.map((p, i) => (
          <TeamPerson key={i} person={p} />
        ))}
      </div>
    </section>
  );
}

// ─── join us / careers ─────────────────────────────────────────

function TeamCareers() {
  const ED = React.useContext(TeamCtx);
  const edText = ED.text;
  const isMobile = teamUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '120px 144px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 24 : 80, alignItems: 'start', maxWidth: 1320 }}>
        <div>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 56, lineHeight: isMobile ? 1.05 : 1.1, color: ED.ink, margin: 0, letterSpacing: '-0.03em' }}>
            Join <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>us</span>.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 20 : 32, maxWidth: 760 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: ED.ink, margin: 0 }}>
            We&rsquo;re hiring across product, engineering, and customer roles. If you&rsquo;ve worked inside MGAs, schemes brokers, or specialist insurance technology - and want to build software that really delivers - get in touch.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <TeamBtn kind="ghost" href="/contact">Get in touch</TeamBtn>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── root ──────────────────────────────────────────────────────

function TeamSite({ accent, fontMode = 'serif' }) {
  return (
    <TeamChrome accent={accent} fontMode={fontMode} current="/team">
      <TeamHero />
      <TeamGrid />
      <TeamCareers />
    </TeamChrome>
  );
}

Object.assign(window, { TeamSite });