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

function PageCareers() {
  return (
    <>
      <CareersHero />
      <CareersIntro />
      <CareersQuote />
      <CareersWhy />
      <CareersPositions />
      <CareersApply />
    </>
  );
}

/* ---------- Hero ---------------------------------------- */
function CareersHero() {
  return (
    <section className="hero hero--page" data-screen-label="01 Careers Hero" style={{ minHeight: '58vh' }}>
      <div className="hero__bg" style={{ backgroundImage: `url(${window.A('photo-hfi-team-150.jpg')})` }}></div>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(90deg, rgba(12,14,18,.92) 0%, rgba(12,14,18,.72) 42%, rgba(12,14,18,.42) 100%)',
      }}></div>
      <div className="hero__grain"></div>
      <div className="wrap hero__content">
        <div className="eyebrow">Careers</div>
        <h1 className="h-display">Building something<br/>that matters.</h1>
        <p className="hero__sub" style={{ maxWidth: 660 }}>
          HFI is one of very few places in North America doing this work,
          regulated pyrotechnic chemistry and munitions manufacture, on over
          3,000 acres in eastern Ontario, an hour from Ottawa. We hire for the long term.
        </p>
        <div className="hero__cta">
          <a href="mailto:HRTeam@hfipyrotechnics.com" className="btn btn--primary">
            Apply to HFI <span className="arr">→</span>
          </a>
          <window.Link to="/about" className="btn btn--ghost">Our Story</window.Link>
        </div>
      </div>
    </section>
  );
}

/* ---------- Intro: two-column prose --------------------- */
function CareersIntro() {
  return (
    <section className="section section--light" data-screen-label="02 Why Work Here">
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'start',
        }} className="car-intro">
          <div>
            <div className="eyebrow">Why Work Here</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>
              A team that knows<br/>each other's names.
            </h2>
          </div>
          <div className="body body-lg">
            <p>
              HFI Pyrotechnics has a rich history stretching back over 150 years.
              We pride ourselves on excellence, education, safety, and continuous
              improvement. A small company with big goals and global reach, so
              working with us brings a real variety of experiences and challenges.
            </p>
            <p>
              Not only is this a great place to advance your career; you become
              part of the HFI Family. We are growing, and we are building careers,
              not filling seats. Many of our people have spent the better part of
              their careers inside these buildings.
            </p>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .car-intro { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Employee pull quote ------------------------- */
function CareersQuote() {
  return (
    <section className="section section--light" data-screen-label="02b Voices" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <figure style={{
          margin: 0,
          padding: '56px 0',
          borderTop: '1px solid var(--light-rule)',
          borderBottom: '1px solid var(--light-rule)',
          position: 'relative',
        }}>
          <span style={{ position: 'absolute', top: -1, left: 0, height: 2, width: 64, background: 'var(--red)' }}></span>
          <blockquote style={{
            margin: 0,
            fontSize: 'clamp(24px, 2.4vw, 34px)',
            fontWeight: 500,
            letterSpacing: '-0.015em',
            lineHeight: 1.28,
            color: 'var(--light-text)',
            maxWidth: 940,
          }}>
            “You know everyone's name here, and everyone knows what you're working
            on. The work is serious, but it's the kind of place where people stop
            you in the parking lot to ask how your kid's hockey season is going.”
          </blockquote>
          <figcaption style={{
            marginTop: 28,
            display: 'flex',
            alignItems: 'center',
            gap: 14,
            fontSize: 12,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            color: 'var(--text-3)',
            fontWeight: 500,
          }}>
            <span style={{ width: 28, height: 1, background: 'var(--red)', display: 'inline-block' }}></span>
            Process Engineer · 12 years at HFI
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

/* ---------- Four reasons strip -------------------------- */
function CareersWhy() {
  const reasons = [
    { num: '01', label: 'Mission', body: 'Sovereign Canadian capability. Work that matters to soldiers and SAR crews, not an abstraction.' },
    { num: '02', label: 'Mastery', body: 'Pyrotechnic chemistry, regulated munitions, process engineering. One of very few places in North America doing this.' },
    { num: '03', label: 'Place', body: 'Over 3,000 acres in eastern Ontario. Room to work, a community that backs us, and an hour from Ottawa.' },
    { num: '04', label: 'People', body: 'A team-minded culture. We hire for the long term and many of our people stay, some for decades.' },
  ];
  return (
    <section className="section section--alt" data-screen-label="03 What You Get">
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <div className="eyebrow">What You Get</div>
          <h2 className="h-1">Four reasons people stay.</h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 40,
        }} className="car-grid">
          {reasons.map((r) => (
            <div key={r.num}>
              <div style={{
                fontSize: 11,
                letterSpacing: '0.18em',
                color: 'var(--red)',
                fontWeight: 600,
                fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
              }}>{r.num}</div>
              <div style={{
                fontSize: 18,
                fontWeight: 600,
                letterSpacing: '-0.01em',
                color: 'var(--white)',
                marginTop: 12,
                marginBottom: 12,
              }}>{r.label}</div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.65, color: 'var(--text-2)' }}>{r.body}</p>
            </div>
          ))}
        </div>

        <div className="car-perks">
          <div className="car-perks__lead">The basics, sorted</div>
          <div className="car-perks__list">
            <span className="car-perk">Monday to Friday · day shifts only</span>
            <span className="car-perk">Competitive wages</span>
            <span className="car-perk">Benefits &amp; pension</span>
            <span className="car-perk">Room to advance your career</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .car-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
        }
        @media (max-width: 540px) {
          .car-grid { grid-template-columns: 1fr !important; }
        }
        .car-perks {
          margin-top: 64px; padding-top: 40px;
          border-top: 1px solid var(--rule);
          display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center;
        }
        .car-perks__lead {
          font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--red); font-weight: 600;
        }
        .car-perks__list { display: flex; flex-wrap: wrap; gap: 10px; }
        .car-perk {
          font-size: 14px; color: var(--text-2);
          padding: 9px 16px; border: 1px solid var(--rule); border-radius: 2px;
          background: rgba(255,255,255,.02);
        }
        @media (max-width: 700px) {
          .car-perks { grid-template-columns: 1fr; gap: 18px; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Open positions ------------------------------ */
function CareersPositions() {
  const roles = [
    {
      title: 'Research & Development Chemical Engineer',
      team: 'R&D Team · reports to Director of Innovation, R&D',
      type: 'Full-time · Days, 8:00 to 4:30',
      pay: '$65,000 to $85,000 / year',
      summary: 'Drive new products and processes from concept to completion, designing experiments, analyzing data, and providing chemical expertise alongside the R&D team as HFI expands.',
      tags: ['Chemical Engineering degree', 'R&D / prototyping', 'Benefits + pension', 'Tuition reimbursement'],
      key: 'rdEngineer',
      file: 'careers/HFI-RD-Chemical-Engineer-June-2026.pdf',
      fmt: 'PDF',
    },
    {
      title: 'Material Logistics Leader',
      team: 'New full-time permanent role',
      type: 'Full-time permanent',
      pay: '$60,000 to $75,000 / year',
      summary: 'Own materials availability and logistics end to end: inventory control, transportation, supplier relationships, and continuous improvement, while leading and developing a small team.',
      tags: ['Supply chain / logistics', '5+ years', 'Leadership preferred'],
      key: 'logistics',
      file: 'careers/HFI-Material-Logistics-Leader.pdf',
      fmt: 'PDF',
    },
    {
      title: 'Service Operator',
      team: 'Production support · full-time permanent',
      type: 'Full-time permanent',
      pay: '$20.14 → $24.47 / hour',
      summary: 'Keep production moving by delivering QC-approved materials and stock to the lines on schedule, prioritizing drop-offs and pickups, and maintaining accurate inventory and NEQ records.',
      tags: ['Valid G licence', '5-ton truck (will train)', 'TDG an asset'],
      key: 'serviceOp',
      file: 'careers/HFI-Service-Operator-June-2026.docx',
      fmt: 'DOCX',
    },
    {
      title: 'Quality Technician',
      team: 'QA / QC · reports to QA/QC Leader',
      type: 'Full-time · Days, 7:00 to 3:30',
      pay: '$20 to $24 / hour',
      summary: 'Support quality across the site by executing testing and inspections to standard and driving continuous improvement as HFI expands its production.',
      tags: ['Testing & inspection', 'Mask-fit tested', 'Benefits + pension', 'Tuition reimbursement'],
      key: 'qualityTech',
      file: 'careers/HFI-Quality-Technician-June-2026.docx',
      fmt: 'DOCX',
    },
  ];
  return (
    <section className="section careers-pos" data-screen-label="04 Open Positions"
      style={{ background: 'var(--light-surface)', color: 'var(--light-text)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 760, marginBottom: 52 }}>
          <div className="eyebrow" style={{ color: 'var(--red)' }}>Open Positions</div>
          <h2 className="h-1" style={{ color: 'var(--light-text)' }}>Current opportunities.</h2>
          <p className="body body-lg" style={{ color: 'var(--light-text-2)', marginTop: 18, marginBottom: 0 }}>
            Open the posting for full details and how to apply. Applications are open
            to Canadian Citizens or individuals with a valid work permit.
          </p>
        </div>

        <div className="careers-pos__list">
          {roles.map((r) => (
            <article className="pos" key={r.title}>
              <div className="pos__main">
                <h3 className="pos__title">{r.title}</h3>
                <div className="pos__team">{r.team}</div>
                <p className="pos__summary">{r.summary}</p>
                <div className="pos__tags">
                  {r.tags.map(t => <span key={t} className="pos__tag">{t}</span>)}
                </div>
              </div>
              <div className="pos__aside">
                <div className="pos__meta">
                  <div className="pos__meta-row"><span>Type</span>{r.type}</div>
                  <div className="pos__meta-row"><span>Pay</span>{r.pay}</div>
                </div>
                <div className="pos__actions">
                  {(() => {
                    const embedded = (typeof window !== 'undefined' && window.CAREERS_FILES && window.CAREERS_FILES[r.key]) || null;
                    const href = embedded ? embedded.url : r.file;
                    const dl = embedded ? embedded.name : '';
                    return (
                      <a className="btn btn--primary pos__dl" href={href} download={dl}>
                        Download posting <span className="pos__fmt">{r.fmt}</span>
                      </a>
                    );
                  })()}
                  <a className="link-arrow pos__apply"
                    href={`mailto:HRTeam@hfipyrotechnics.com?subject=Application: ${encodeURIComponent(r.title)}`}>
                    Apply <span>→</span>
                  </a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .careers-pos__list { display: flex; flex-direction: column; gap: 6px; }
        .pos {
          display: grid; grid-template-columns: 1fr 320px; gap: 48px;
          background: var(--light-bg); border: 1px solid var(--light-rule);
          padding: 38px 40px; align-items: center;
        }
        .pos__title { font-size: 24px; font-weight: 600; letter-spacing: -0.018em;
          color: var(--light-text); margin: 0; line-height: 1.15; text-transform: none; }
        .pos__team { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--red); font-weight: 600; margin-top: 10px;
          font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
        .pos__summary { font-size: 15px; line-height: 1.65; color: var(--light-text-2);
          margin: 18px 0 20px; max-width: 620px; }
        .pos__tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .pos__tag { font-size: 12px; color: var(--light-text-2); padding: 6px 12px;
          border: 1px solid var(--light-rule); border-radius: 2px; background: rgba(255,255,255,.4); }
        .pos__aside { display: flex; flex-direction: column; gap: 22px; }
        .pos__meta { display: flex; flex-direction: column; gap: 12px;
          border-top: 1px solid var(--light-rule); padding-top: 20px; }
        .pos__meta-row { font-size: 15px; color: var(--light-text); font-weight: 600;
          display: flex; flex-direction: column; gap: 3px; }
        .pos__meta-row span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--light-text-2); font-weight: 600; }
        .pos__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
        .pos__dl { white-space: nowrap; }
        .pos__fmt { font-size: 10px; letter-spacing: 0.1em; opacity: 0.7; margin-left: 8px;
          border: 1px solid rgba(255,255,255,.4); padding: 2px 6px; border-radius: 2px; }
        .pos__apply { color: var(--red); border-color: var(--red); }
        .pos__apply:hover { color: var(--light-text); border-color: var(--light-text); }
        @media (max-width: 820px) {
          .pos { grid-template-columns: 1fr; gap: 28px; padding: 30px 26px; align-items: start; }
          .pos__aside { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
          .pos__meta { border-top: none; padding-top: 0; flex-direction: row; gap: 28px; }
        }
        @media (max-width: 480px) {
          .pos__aside { flex-direction: column; align-items: start; }
        }
      `}</style>
    </section>
  );
}

/* ---------- How to apply -------------------------------- */
function CareersApply() {
  return (
    <section className="section section--light" data-screen-label="04 How to Apply">
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 1fr',
          gap: 80,
          alignItems: 'center',
        }} className="car-apply">
          <div>
            <div className="eyebrow">How to Apply</div>
            <h2 className="h-1" style={{ marginBottom: 28 }}>
              Tell us where you<br/>fit in.
            </h2>
            <p className="body body-lg" style={{ maxWidth: 520 }}>
              We are always interested in hearing from skilled people in chemistry,
              process and manufacturing engineering, quality, operations, and the
              skilled trades. Looking to leave your résumé with us for a position
              that isn’t listed? Send a copy and a note about the work you want to
              do. A real person reads every one.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 22, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="mailto:HRTeam@hfipyrotechnics.com" className="btn btn--primary">
                Email HR Team <span className="arr">→</span>
              </a>
              <a
                href="https://www.linkedin.com/company/hfi-pyrotechnics/posts/?feedView=all"
                target="_blank"
                rel="noreferrer"
                className="link-arrow"
              >
                See us on LinkedIn <span>↗</span>
              </a>
            </div>
          </div>

          <div style={{
            border: '1px solid var(--light-rule)',
            padding: '40px',
            background: 'var(--light-bg)',
          }}>
            <div style={{
              fontSize: 11,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'var(--red)',
              fontWeight: 600,
              marginBottom: 20,
            }}>Direct</div>
            <p style={{ margin: '0 0 10px', fontSize: 16, color: 'var(--light-text)', fontWeight: 600 }}>
              <a href="mailto:HRTeam@hfipyrotechnics.com">HRTeam@hfipyrotechnics.com</a>
            </p>
            <p style={{ margin: '0 0 28px', fontSize: 15, color: 'var(--light-text-2)', lineHeight: 1.6 }}>
              Prescott, Ontario · Township of Edwardsburgh Cardinal
            </p>
            <div style={{ borderTop: '1px solid var(--light-rule)', paddingTop: 24, fontSize: 14, color: 'var(--light-text-2)', lineHeight: 1.65 }}>
              Applications are open only to Canadian Citizens or individuals with
              valid work permits. HFI is an equal-opportunity employer; many roles on
              a regulated munitions site require eligibility for Canadian government
              security clearance.
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .car-apply { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}

window.PageCareers = PageCareers;