/* global React */
// Shared on window: Link, FadeIn, SectionHead, ClosingCTA

const LEADERSHIP = [
  {
    name: 'Rhiannon Iles',
    title: 'President',
    photo: 'photo-team-rhiannon-iles.jpg',
    bio: 'Rhiannon Iles holds a Mechanical Engineering degree from the University of New Brunswick and is a Professional Engineer registered in Ontario. She spent 24 years at Procter & Gamble in roles spanning engineering, project management, manufacturing operations, organization design, health and safety, and Industry 4.0 innovation before joining HFI in October 2020. Appointed President in April 2023, Rhiannon leads HFI\'s strategic plan and the organizational capability needed to support its continued growth as a strategic supplier of pyrotechnic devices for military training and search and rescue.',
  },
  {
    name: 'Martin Brown',
    title: 'Vice President, Growth and Development',
    photo: 'photo-team-martin-brown.jpg',
    bio: 'Martin Brown began his career in the security field with the Royal Hong Kong Police, working closely with the UK Military, before moving into a series of international business development roles based in the UK, Singapore, and Canada developing markets for innovative respiratory protection technology. He spent over twenty years in eastern Ontario with Lloyd\'s Register, the global professional services organization, leading business development, marketing, and sales across multiple geographies, before joining HFI in January 2021. As Vice President, Growth and Development, Martin expands HFI\'s relationships with existing customers and opens sustainable new markets across the defence, security, and commercial sectors.',
  },
  {
    name: 'Matt Levere',
    title: 'Director of Finance and Supply Chain Operations',
    photo: 'photo-team-matt-levere.jpg',
    bio: 'Matt Levere holds a Bachelor of Business Administration and a Bachelor of Arts in Psychology from Trent University and is a Chartered Professional Accountant of Ontario. He spent the previous decade in financial and operational leadership across regulated manufacturing (Ingredion, Kraft Heinz, Dehumidified Air Solutions, and VESTA, where he served as Head of Finance and Controller) before joining HFI in April 2024. As Director of Finance and Supply Chain Operations, Matt is accountable for P&L performance, working-capital strategy, and capital deployment, translating operational constraints into enterprise-level financial priorities in a capacity-constrained, regulated environment.',
  },
  {
    name: 'Marcus Shaw',
    title: 'Vice President, Operations',
    photo: 'photo-team-marcus-shaw.jpg',
    bio: 'Marcus Shaw is an Electrical Engineering Technician by training and a Lean Production and Logistics leader. He has led HFI\'s production operations for over five years, driving continuous improvement across quality and cost-effectiveness to keep HFI competitive as the lowest-cost producer of these products worldwide, while maintaining the operational discipline a regulated munitions environment demands.',
  },
  {
    name: 'Nic Andrews',
    title: 'Director, Innovation, Research and Development',
    photo: 'photo-team-nic-andrews.jpg',
    bio: 'Nic Andrews holds a Ph.D. in Chemistry from Queen\'s University and a Master\'s degree in Chemistry from the University of Durham. He completed his doctoral research in the Hans-Peter Loock group at Queen\'s, building novel optical fibre and free-space spectrometers, before joining HFI in 2017 to learn pyrotechnic chemistry. As Director of Innovation, Research and Development, Nic leads HFI\'s innovation function, building the company\'s technical capabilities and collaborative research relationships across the defence energetics domain.',
  },
  {
    name: 'Steve Robar',
    title: 'Director, Pyrotechnics, Process Engineering and Sustainability',
    photo: 'photo-team-steve-robar.jpg',
    bio: 'Steve Robar holds degrees in Chemical Engineering and Mathematics from the University of Ottawa and is a Professional Engineer registered in Ontario. He joined HFI in 2008, first mastering the C8 Smoke Grenade production process before expanding his technical knowledge across all of HFI\'s product lines. As Director of Pyrotechnics, Process Engineering and Sustainability, Steve focuses on delivering high-quality pyrotechnic products and on problem-solving through process engineering and statistical methods.',
  },
  {
    name: 'Martin Jensen',
    title: 'Head of Sales and Marketing',
    photo: 'photo-team-martin-jensen.jpg',
    bio: 'Martin Jensen holds a Bachelor\'s degree in Business Administration from Copenhagen Business School and brings more than twenty years of global business development experience across B2B and defence-adjacent markets. His prior leadership roles include Mprise Agriware, SSi Canada (as Director of Sales and Marketing across telecommunications, fire protection, and energy for remote and northern Canadian communities), Hoogendoorn America, Arla Foods, where he served as Area Sales Manager in Saudi Arabia leading a $30M business and a staff of 110, and an eight-year tenure at Games Workshop in the United Kingdom and Canada. A military veteran, Martin joined HFI in October 2024 as Head of Sales and Marketing, leading the company\'s commercial engagement with Canada\'s Department of National Defence, the United States Department of Defense, and allied forces. He is bilingual in English and Danish with working proficiency in Norwegian, Swedish, and German.',
  },
  {
    name: 'Helena Cowper',
    title: 'Director, People and Culture',
    photo: 'photo-team-helena-cowper.jpg',
    bio: 'Helena Cowper holds a Bachelor of Arts from Queen\'s University and a Certified Human Resource Professional designation from York University. Her prior experience includes HR leadership roles at Garibaldi Glass, Introba, and Procter & Gamble, before joining HFI to lead the people and culture function. Helena focuses on building the organizational capability and workplace systems needed to support a regulated manufacturing environment.',
  },
  {
    name: 'Jennifer Roney',
    title: 'Site Quality Manager',
    photo: 'photo-team-jennifer-roney.jpg',
    bio: 'Jennifer Roney holds a Bachelor\'s degree in Engineering Chemistry from Queen\'s University and brings 24 years of manufacturing experience, the majority in technical and managerial roles at 3M Canada spanning quality, safety, product development, and process engineering, with additional experience in GMP-driven pharmaceutical manufacturing. As Site Quality Manager, she leads HFI\'s quality management system and site compliance function, with a focus on data analysis, experimental design, validation planning, and ensuring quality systems perform flawlessly for the people and products they serve.',
  },
  {
    name: 'Ellen Barton',
    title: 'Director of Operations',
    photo: 'photo-team-ellen-barton.jpg',
    bio: 'Ellen Barton studied Accounting and Human Resources at St. Lawrence College and brings a manufacturing career anchored in lean production, quality systems, and people leadership. She spent over twenty-five years at Procter & Gamble, primarily at the company\'s Brockville, Ontario consumer goods plant, progressing from manufacturing technician through team, quality, HR, and operational line leadership, with a final assignment as Impregnation Chemical Process Leader in Martinsburg, West Virginia, and most recently led production and process engineering at Ross Video in Iroquois, Ontario. Ellen joined HFI in February 2026 as Director of Operations.',
  },
];

const ADVISORY = [
  {
    name: 'Remo Assini',
    title: 'Advisory Board Member',
    photo: 'photo-team-remo-assini.png',
    bio: 'Remo Assini served as President of IMT Precision, formerly IMT Defence, from 1984 to 2025. IMT is one of a very small number of manufacturers in North America capable of producing medium and large-calibre munition bodies, with a production history spanning over 100 years. Throughout his tenure, Remo was a key industry voice in supply discussions with Canada\'s Department of National Defence and Public Services and Procurement Canada, and built deep working relationships with allied defence forces including the U.S. Department of Defense. He brings to HFI\'s advisory board an unmatched understanding of how Canada\'s defence manufacturing base operates, how government relationships are built, and what it takes to scale a regulated munitions capability.',
  },
  {
    name: 'André Fillion',
    title: 'Advisory Board Member',
    photo: 'photo-team-andre-fillion.png',
    bio: 'André Fillion served as Assistant Deputy Minister, Defence and Marine Procurement Branch at Public Services and Procurement Canada from 2018 to 2021, one of the most senior positions in Canada\'s national defence acquisition architecture. A mechanical engineer by training, he spent 16 years prior in senior Department of National Defence aerospace roles, including as Director General, Aerospace Equipment Program Management, overseeing the acquisition of the C-130J Hercules, C-17 Globemaster, CH-147 Chinook, and CH-148 Cyclone fleets for the Royal Canadian Air Force. As ADM, he chaired Canada\'s inter-departmental committee on defence procurement and led implementation of the National Shipbuilding Strategy. He brings to HFI\'s advisory board a first-hand understanding of how Canada\'s defence procurement system works, and how Canadian manufacturers can best position within it.',
  },
  {
    name: 'Michael Iacovelli',
    title: 'Advisory Board Member',
    photo: 'photo-team-michael-iacovelli.png',
    bio: 'Michael Iacovelli is Chief Executive Officer of Ben Machine Products Co. Inc. and Macfab Manufacturing, Ontario-based precision manufacturers serving defence, aerospace, and industrial markets. A lawyer by training who transitioned into manufacturing leadership, Michael brings both analytical rigour and deep operational knowledge of what it takes to grow a Canadian defence-adjacent manufacturer. He serves as Vice-Chair of the Ontario Aerospace Council and as a Director of the Canadian Association of Defence and Security Industries (CADSI), where he chairs the SME Committee. He holds the ICD.D designation from the Institute of Corporate Directors.',
  },
  {
    name: 'Brendan Howard',
    title: 'Executive Chairman',
    featured: true,
    photo: 'photo-team-brendan-howard.jpg',
    bio: 'Brendan Howard is Executive Chairman of HFI, leading CIEL Capital\'s strategic engagement with HFI\'s leadership, governance, and capital program priorities. He is a Partner and Managing Director at CIEL Capital, the Toronto-based private investment firm that acquired HFI in 2023, and previously held strategy consulting roles with Secor Consulting, KPMG Management Consulting, and Aimia-Aeroplan. He holds an M.Sc. in Public Policy and Administration from the London School of Economics and an HBA from the Ivey School of Business, and serves as Board Chair for Start 2 Finish, a Canada-wide youth charity.',
  },
];

function PageTeam() {
  return (
    <>
      <TeamHero />
      <TeamSection
        eyebrow="Leadership"
        title="The team running HFI."
        intro="These are the people leading the company day to day, supported by 150-plus colleagues across operations, innovation, engineering, quality, and the line. Many have spent a meaningful chunk of their careers inside HFI's regulated buildings."
        people={LEADERSHIP}
      />
      <TeamSection
        eyebrow="Advisory Board"
        title="The people shaping our direction."
        intro="HFI's advisory board brings together individuals who have led Canada's defence enterprise at its most senior levels: in government, in industry, and in operations. Their guidance shapes HFI's strategic direction and its relationships in Ottawa and allied capitals."
        people={ADVISORY}
        cols={3}
        alt
      />
    </>
  );
}

function TeamHero() {
  return (
    <section className="hero hero--page" data-screen-label="01 Team Hero" style={{ minHeight: '55vh' }}>
      <div className="hero__bg" style={{ backgroundImage: `url(${window.A('photo-aerial-2.jpg')})` }}></div>
      <div className="hero__grain"></div>
      <div className="wrap hero__content">
        <div className="eyebrow">The People</div>
        <h1 className="h-display">Built by people<br/>who know this domain.</h1>
        <p className="hero__sub" style={{ maxWidth: 680 }}>
          The leadership team and advisory board below bring decades of Canadian
          defence experience to HFI, backed by 150-plus colleagues across
          operations, engineering, innovation, and the line. Many have spent the
          better part of their careers inside these buildings.
        </p>
      </div>
    </section>
  );
}

function getInitials(name) {
  return name.split(/\s+/).map(p => p[0]).slice(0, 2).join('').toUpperCase();
}

function TeamSection({ eyebrow, title, intro, people, alt, cols }) {
  // When `cols` is set, render an exact N-column grid (collapses to 1 on mobile)
  // so a known small advisor count fills the row left-to-right without blanks.
  // Otherwise, use the responsive auto-fill layout for the larger leadership grid.
  const gridStyle = cols
    ? {
        display: 'grid',
        gridTemplateColumns: `repeat(${cols}, 1fr)`,
        gap: 1,
        background: alt ? 'var(--rule)' : 'var(--light-rule)',
        border: alt ? '1px solid var(--rule)' : '1px solid var(--light-rule)',
      }
    : {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(460px, 1fr))',
        gap: 1,
        background: alt ? 'var(--rule)' : 'var(--light-rule)',
        border: alt ? '1px solid var(--rule)' : '1px solid var(--light-rule)',
      };
  return (
    <section className={'section ' + (alt ? 'section--alt' : 'section--light')} data-screen-label={eyebrow}>
      <div className="wrap">
        <window.SectionHead
          eyebrow={eyebrow}
          title={title}
          lede={intro}
        />
        <div className={cols ? 'team-grid team-grid--fixed' : 'team-grid'} style={gridStyle}>
          {people.map((p, i) => (
            <PersonCard key={p.name} person={p} index={i} light={!alt} featured={p.featured} />
          ))}
        </div>
        <style>{`
          @media (max-width: 1100px) {
            .team-grid--fixed { grid-template-columns: 1fr 1fr !important; }
          }
          @media (max-width: 760px) {
            .team-grid--fixed { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function PersonCard({ person, index, light, featured }) {
  const [open, setOpen] = React.useState(false);

  // Default card - compact horizontal: small portrait left, content right.
  return (
    <article data-person-card="" style={{
      background: light ? 'var(--light-bg)' : 'var(--bg)',
      padding: '28px 28px 28px 28px',
      transition: 'background 280ms',
      display: 'grid',
      gridTemplateColumns: '184px 1fr',
      gap: 24,
      alignItems: 'start',
      minWidth: 0,
    }}>
      <div style={{ width: 184 }}>
        <PortraitMedia person={person} light={light} ratio={'4/5'} />
      </div>
      <div>
        <PersonHeader person={person} light={light} />
        <PersonBio person={person} light={light} open={open} setOpen={setOpen} />
      </div>
      <style>{`
        @media (max-width: 520px) {
          article[data-person-card] { grid-template-columns: 132px 1fr !important; gap: 18px !important; padding: 22px !important; }
          article[data-person-card] > div:first-child { width: 132px !important; }
        }
      `}</style>
    </article>
  );
}

/* Portrait media block - large, treated, with hairline frame */
function PortraitMedia({ person, light, ratio = '4/5' }) {
  const initials = getInitials(person.name);
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      aspectRatio: ratio,
      background: '#f3f1ec',
      overflow: 'hidden',
      borderBottom: light ? '1px solid var(--light-rule)' : '1px solid var(--rule)',
    }}>
      {person.photo ? (
        <>
          <img
            src={window.A(person.photo)}
            alt={person.name}
            style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              objectPosition: 'center 18%',
              filter: 'contrast(0.97) saturate(1.03) brightness(1.01)',
              imageRendering: 'auto',
            }}
          />
          {/* hairline corner ticks - small editorial detail */}
          <span style={{
            position: 'absolute', top: 10, left: 10,
            width: 10, height: 10,
            borderTop: '1px solid var(--red)',
            borderLeft: '1px solid var(--red)',
            opacity: 0.7,
          }}></span>
        </>
      ) : (
        <>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(circle at 30% 30%, rgba(212,30,27,.28), transparent 70%)',
          }}></div>
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: light ? 'var(--light-text)' : 'var(--white)',
            fontSize: 56, fontWeight: 600, letterSpacing: '0.04em',
          }}>{initials}</div>
        </>
      )}
    </div>
  );
}

function PersonHeader({ person, light, large }) {
  return (
    <header style={{ marginBottom: 18 }}>
      <div style={{
        fontSize: large ? 28 : 19,
        fontWeight: 600,
        color: light ? 'var(--light-text)' : 'var(--white)',
        letterSpacing: '-0.01em',
        lineHeight: 1.2,
      }}>
        {person.name}
      </div>
      <div style={{
        fontSize: 11.5,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
        color: 'var(--text-3)',
        marginTop: 8,
        fontWeight: 500,
      }}>
        {person.title}
      </div>
    </header>
  );
}

function PersonBio({ person, light, open, setOpen }) {
  return (
    <>
      <p style={{
        margin: 0,
        fontSize: 14.5,
        lineHeight: 1.68,
        color: light ? 'var(--light-text-2)' : 'var(--text-2)',
        display: '-webkit-box',
        WebkitLineClamp: open ? 'unset' : 4,
        WebkitBoxOrient: 'vertical',
        overflow: 'hidden',
      }}>
        {person.bio}
      </p>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          marginTop: 18,
          background: 'transparent',
          border: 'none',
          color: 'var(--red)',
          fontSize: 11,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          fontWeight: 500,
          padding: 0,
          cursor: 'pointer',
        }}
      >
        {open ? 'Read Less ←' : 'Read More →'}
      </button>
    </>
  );
}

/* Initials placeholder avatar - brand-spec'd */
function Avatar({ name, photo, light, size = 72 }) {
  const initials = getInitials(name);
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      background: light ? 'var(--light-surface)' : 'var(--bg-3)',
      border: light ? '1px solid var(--light-rule)' : '1px solid var(--rule)',
      position: 'relative',
      overflow: 'hidden',
      flex: '0 0 auto',
    }}>
      {photo ? (
        <img
          src={window.A(photo)}
          alt={name}
          style={{
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'center top',
            filter: light ? 'none' : 'grayscale(0.15) contrast(1.02)',
          }}
        />
      ) : (
        <>
          <div style={{
            position: 'absolute',
            inset: 0,
            background: 'radial-gradient(circle at 30% 30%, rgba(212,30,27,.35), transparent 70%)',
          }}></div>
          <div style={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: light ? 'var(--light-text)' : 'var(--white)',
            fontSize: size >= 90 ? 26 : 18,
            fontWeight: 600,
            letterSpacing: '0.04em',
          }}>{initials}</div>
          <div style={{
            position: 'absolute',
            left: 8, bottom: 8,
            width: 8, height: 1,
            background: 'var(--red)',
          }}></div>
        </>
      )}
    </div>
  );
}

window.PageTeam = PageTeam;