/* global React, HW */
const { useState, useEffect } = React;
const { Link, Stock, go } = window.HW;

// ── Careers ──────────────────────────────────────────────────
const JOBS = [
  { id: 'cadence-eng',       title: 'Senior Cadence Engineer',                  team: 'Engineering',     loc: 'Remote (NA / EMEA)',         type: 'Full-time' },
  { id: 'brand-stewardship', title: 'Director, Brand Stewardship',              team: 'Stewardship',     loc: 'HQ',                          type: 'Full-time' },
  { id: 'reabs-spec-ii',     title: 'Reabsorption Specialist II',               team: 'Field Services',  loc: 'Field — multiple locations',  type: 'Full-time' },
  { id: 'bereavement-ops',   title: 'Senior Director, Bereavement Operations',  team: 'Field Services',  loc: 'Field — multi-state',         type: 'Full-time' },
  { id: 'continuity-arch',   title: 'Continuity Architect',                     team: 'Architecture',    loc: 'HQ',                          type: 'Full-time' },
  { id: 'drift-analyst',     title: 'Cadence Drift Analyst',                    team: 'Analytics',       loc: 'HQ',                          type: 'Full-time' },
  { id: 'cadence-pm',        title: 'Senior Product Manager, Cadence',          team: 'Product',         loc: 'Remote (NA)',                 type: 'Full-time' },
  { id: 'voluntary-release', title: 'Coordinator, Voluntary Environmental Release', team: 'Field Services', loc: 'Remote — weekend on-call', type: 'Full-time' },
  { id: 'stewardship-pgm',   title: 'Stewardship Program Lead',                 team: 'Stewardship',     loc: 'Albany, NY',                  type: 'Full-time' },
  { id: 'bearer-apprentice', title: 'Stewardship Apprentice — Bearer Track',    team: 'Stewardship',     loc: 'HQ (residential)',            type: 'Full-time' },
];

const JOB_DETAIL = {
  'cadence-eng': {
    summary: 'The Cadence team is hiring a senior engineer to extend our operational-rhythm telemetry layer across new partner integrations. You will work on the connector substrate, baseline-fidelity tooling, and the next generation of our cadence orchestration runtime.',
    responsibilities: [
      'Design, build, and steward connector integrations for partner-side cadence systems',
      'Contribute to the Cadence orchestration runtime and its multi-quarter resilience model',
      'Partner with Stewardship engineering on the Compound Alignment Index pipeline',
      'Mentor junior cadence engineers and support on-call rotations during partner reviews',
    ],
    requirements: [
      '7+ years building and operating distributed systems in production',
      'Strong fluency in TypeScript and at least one systems-level language',
      'Experience with event-driven architectures and time-series telemetry',
      'Comfort with ambiguity around the bearer/voice distinction',
      'A demonstrable instinct for cadence over throughput',
    ],
  },
  'brand-stewardship': {
    summary: 'Lead the Brand Stewardship practice across our largest enterprise partners. You will be responsible for the long-form alignment of brand expression with continuity outcomes — across leadership transitions, voice governance reviews, and the Bearer Protocol.',
    responsibilities: [
      'Own the Brand Stewardship engagement model for top-tier partners',
      'Steward narrative drift reviews on a quarterly cadence',
      'Maintain and evolve the Bearer Protocol with the Stewardship Council',
      'Represent Harswell to partner executive teams during alignment reviews',
    ],
    requirements: [
      '12+ years in brand, communications, or organizational stewardship',
      'Demonstrated experience with multi-quarter alignment programs',
      'Familiarity with the discipline of voice governance at enterprise scale',
      'Tolerance for prolonged silence in stakeholder rooms',
    ],
  },
  'reabs-spec-ii': {
    summary: 'Reabsorption Specialists embed with partner organizations during structural transitions. The Specialist II level is appropriate for practitioners with prior managed-services or transition-management experience seeking to develop a Harswell stewardship credential.',
    responsibilities: [
      'Conduct on-site reabsorption engagements per the Harswell field protocol',
      'Maintain the partner continuity baseline through the engagement window',
      'Participate in post-engagement stewardship reviews and field debriefs',
      'Carry the engagement quietly; the work is rarely visible by design',
    ],
    requirements: [
      '4+ years in transition management, restructuring, or HR continuity work',
      'Willingness to travel up to 70% of the time',
      'Discretion as a matter of practice, not policy',
      'Comfort working alone for extended periods on partner premises',
    ],
  },
  'continuity-arch': {
    summary: 'Continuity Architects integrate the Harswell platform across Cadence, Stewardship, Reabsorption, and Brand Alignment for our largest multi-quarter engagements. This is a senior individual-contributor role on the Architecture team at HQ.',
    responsibilities: [
      'Design end-to-end Continuity Architectures for partners undergoing generational transition',
      'Maintain the integration substrate between Cadence and Stewardship telemetry',
      'Author and steward the partner-side architecture record',
      'Coordinate with Reabsorption Services during structural events',
    ],
    requirements: [
      '10+ years in enterprise architecture or comparable systems-design practice',
      'Working understanding of cadence telemetry and stewardship instrumentation',
      'Patience for engagements measured in quarters rather than sprints',
    ],
  },
  'cadence-pm': {
    summary: 'Senior PM for the Cadence Solutions surface area. You will own roadmap and outcomes for our partner-facing cadence orchestration product.',
    responsibilities: [
      'Own the Cadence roadmap across partner segments',
      'Run quarterly outcome reviews with the Cadence engineering org',
      'Partner with Stewardship PMs on the cross-platform alignment index',
    ],
    requirements: [
      '6+ years in B2B product management',
      'Experience with platform products serving enterprise practitioners',
      'A working internal model of operational rhythm',
    ],
  },
  'stewardship-pgm': {
    summary: 'Stewardship Program Leads run multi-partner stewardship engagements from the Albany, NY office. The role is appropriate for experienced program leaders who have practiced stewardship in a prior context and seek to formalize that practice within the Harswell framework.',
    responsibilities: [
      'Run a portfolio of 4–6 concurrent Stewardship engagements',
      'Lead quarterly stewardship reviews with partner leadership',
      'Mentor incoming Stewardship Specialists in the Albany cohort',
    ],
    requirements: [
      '8+ years in program leadership at an enterprise scale',
      'Existing stewardship credential preferred but not required',
      'Permanent residency in or willingness to relocate to the Albany, NY area',
    ],
  },
  'bereavement-ops': {
    summary: 'Bereavement Operations leads the field practice for partner-side continuity events. The Senior Director runs the multi-state team responsible for on-site presence during structural transitions. This is a hands-on leadership role; comfort in unstructured environments is essential.',
    responsibilities: [
      'Direct the multi-state Bereavement Operations team across active partner engagements',
      'Maintain the Bereavement Reabsorption protocol and the post-event continuity record',
      'Liaise with Reabsorption Services during overlapping engagement windows',
      'Hold the room. The work is held more than it is done.',
    ],
    requirements: [
      '10+ years in field operations, transition management, or chaplaincy',
      'Willingness to be reachable on short notice across multiple time zones',
      'Practiced silence; the role is not a speaking role',
      'A demonstrable comfort with rooms that have just emptied',
    ],
  },
  'drift-analyst': {
    summary: 'Cadence Drift Analysts monitor the long-form deviation between expressed cadence and partner-baseline cadence. The role pairs quantitative telemetry with qualitative interpretive judgment. This is a senior individual-contributor seat on the Analytics team at HQ.',
    responsibilities: [
      'Maintain the partner-side drift dashboards across active Cadence engagements',
      'Surface drift events to the Stewardship Council on a quarterly cadence',
      'Co-author the annual Drift Atlas with the Brand Stewardship practice',
      'Recognize drift before it presents — this is the practice',
    ],
    requirements: [
      '6+ years in analytics, signal processing, or a comparable interpretive discipline',
      'Fluency with time-series telemetry and drift-detection methodologies',
      'A working internal model of cadence as more than rhythm',
      'Comfort with the possibility that the drift is correct',
    ],
  },
  'voluntary-release': {
    summary: 'The Voluntary Environmental Release Coordinator manages partner-side release events during continuity transitions. The role is remote with weekend on-call rotations; field travel is occasional but unscheduled. Coordinators report to the Field Services regional lead.',
    responsibilities: [
      'Coordinate Voluntary Environmental Release events across partner geographies',
      'Maintain release-window documentation and post-event reabsorption records',
      'Field intake calls during weekend on-call rotations',
      'Honor the arc. Most events are quiet; some are not.',
    ],
    requirements: [
      '3+ years in field coordination, logistics, or comparable practice',
      'Availability for weekend on-call rotations on a 1-in-4 cadence',
      'Comfort with animals, with weather, and with the closing of a door',
      'A clean driving record and personal vehicle',
    ],
  },
  'bearer-apprentice': {
    summary: 'The Stewardship Apprenticeship — Bearer Track is a two-year residential program at the Harswell HQ campus. Apprentices live on-site and rotate through the four practice columns: Cadence, Stewardship, Reabsorption, and Brand Alignment. Successful apprentices are credentialed as Stewards at the conclusion of the program.',
    responsibilities: [
      'Participate fully in all four practice rotations across the apprenticeship arc',
      'Reside on the HQ campus for the duration of the program (24 months)',
      'Maintain a daily practice journal under the supervision of an assigned Steward',
      'Bear the voice as it is given. Do not interpret.',
    ],
    requirements: [
      'Bachelor\'s degree or comparable life-practice equivalent',
      'Willingness to relinquish off-site residence for the duration of the program',
      'A capacity for the first person plural',
      'Reflexive honesty is not required and may, in some rotations, be discouraged',
    ],
  },
};

function PageCareers() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs"><Link to="/">Home</Link><span className="sep">/</span>Careers</div>
          <h1>Join us in becoming.</h1>
          <p>Harswell hires patient practitioners. Engineers, stewards, architects, and field specialists who measure their work in quarters — not sprints.</p>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center', marginBottom: 56}}>
            <div>
              <span className="eyebrow">Why Harswell</span>
              <h2 style={{marginTop: 14, marginBottom: 18}}>A practice, not a job.</h2>
              <p style={{color: 'var(--hw-gray)', fontSize: 17}}>Working at Harswell means joining a 14,000-person organism that has been quietly compounding its alignment for 39 years. Our stewards work across 47 countries, on engagements that rarely surface publicly — and that is precisely what allows them to last.</p>
              <p style={{color: 'var(--hw-gray)', fontSize: 17}}>We offer competitive compensation, comprehensive benefits, an annual stewardship credentialing budget, and a calendar built around the quarterly cadence rather than the sprint.</p>
            </div>
            <Stock tone="warm" ratio="square" label="Harswell HQ · stewardship floor" />
          </div>

          <h2 style={{marginBottom: 8}}>Open positions</h2>
          <p className="muted" style={{marginBottom: 24}}>{JOBS.length} open roles across Engineering, Stewardship, Field Services, and Architecture.</p>
          <div className="job-list">
            {JOBS.map(j => (
              <Link key={j.id} to={`/careers/${j.id}`} className="job-row">
                <div>
                  <div className="job-title">{j.title}</div>
                  <div className="job-meta">{j.team}</div>
                </div>
                <div className="job-meta">{j.loc}</div>
                <div className="job-meta">{j.type}</div>
                <div className="job-go">View →</div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-strip">
        <div className="container">
          <h2>Don't see a fit?</h2>
          <p>Harswell maintains a standing call for stewards. Send us a note; a steward will be in touch when a relevant engagement opens.</p>
          <Link to="/contact" className="btn btn-primary">Express interest</Link>
        </div>
      </section>
    </main>
  );
}

function PageJob({ id }) {
  const job = JOBS.find(j => j.id === id);
  const detail = JOB_DETAIL[id];
  if (!job || !detail) return <PageNotFound />;
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs"><Link to="/">Home</Link><span className="sep">/</span><Link to="/careers">Careers</Link><span className="sep">/</span>{job.title}</div>
          <h1 style={{fontSize: 40}}>{job.title}</h1>
          <div className="job-tags">
            <span className="job-tag">{job.team}</span>
            <span className="job-tag">{job.loc}</span>
            <span className="job-tag">{job.type}</span>
          </div>
        </div>
      </section>
      <section>
        <div className="container-narrow job-detail">
          <p style={{fontSize: 17, color: 'var(--hw-gray)'}}>{detail.summary}</p>
          <h2>Responsibilities</h2>
          <ul>{detail.responsibilities.map((r, i) => <li key={i}>{r}</li>)}</ul>
          <h2>Requirements</h2>
          <ul>{detail.requirements.map((r, i) => <li key={i}>{r}</li>)}</ul>
          <div style={{marginTop: 36, display: 'flex', gap: 12}}>
            <Link to="/contact" className="btn btn-primary">Apply for this role</Link>
            <Link to="/careers" className="btn btn-secondary">Back to all roles</Link>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Contact ──────────────────────────────────────────────────
function PageContact() {
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    window.scrollTo(0, 0);
  };
  if (submitted) {
    return (
      <main>
        <div className="simple-page">
          <div>
            <span className="eyebrow">Confirmation</span>
            <h1 style={{marginTop: 14}}>Thank you.</h1>
            <p>A steward will be in touch within two business days.</p>
            <Link to="/" className="btn btn-secondary">Return to home</Link>
          </div>
        </div>
      </main>
    );
  }
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs"><Link to="/">Home</Link><span className="sep">/</span>Contact</div>
          <h1>Speak with a steward.</h1>
          <p>Tell us a little about your organization and a Harswell steward will reach out within two business days.</p>
        </div>
      </section>
      <section>
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64}}>
            <form onSubmit={submit}>
              <div className="form-grid">
                <div>
                  <label>First name</label>
                  <input type="text" required />
                </div>
                <div>
                  <label>Last name</label>
                  <input type="text" required />
                </div>
                <div>
                  <label>Work email</label>
                  <input type="email" required />
                </div>
                <div>
                  <label>Company</label>
                  <input type="text" required />
                </div>
                <div>
                  <label>Country</label>
                  <input type="text" />
                </div>
                <div>
                  <label>Vertical</label>
                  <select defaultValue="">
                    <option value="" disabled>Select…</option>
                    <option>Infrastructure</option>
                    <option>Consumer</option>
                    <option>Continuity</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="full">
                  <label>Area of interest</label>
                  <select defaultValue="">
                    <option value="" disabled>Select a Harswell solution…</option>
                    <option>Cadence Solutions</option>
                    <option>Stewardship Platform</option>
                    <option>Reabsorption Services</option>
                    <option>Brand Alignment Infrastructure</option>
                    <option>Continuity Architecture</option>
                    <option>I'm not sure yet</option>
                  </select>
                </div>
                <div className="full">
                  <label>How can a steward help?</label>
                  <textarea placeholder="A brief description of your organization and what you'd like to discuss." />
                </div>
                <div className="full">
                  <button type="submit" className="btn btn-primary" style={{padding: '14px 28px'}}>Submit request</button>
                </div>
              </div>
            </form>

            <aside>
              <h3 style={{marginBottom: 12}}>Office locations</h3>
              <p className="muted" style={{fontSize: 14, marginBottom: 22}}>Harswell maintains a quiet footprint across 47 countries. Selected offices below.</p>
              <ul style={{listStyle: 'none', padding: 0, margin: 0, fontSize: 14}}>
                {[
                  ['Albany, NY', 'Stewardship Northeast'],
                  ['Stamford, CT', 'Headquarters'],
                  ['Chicago, IL', 'Cadence Central'],
                  ['Atlanta, GA', 'Field Services'],
                  ['London, UK', 'EMEA Stewardship'],
                  ['Zürich, CH', 'Continuity Architecture'],
                  ['Singapore', 'APAC Stewardship'],
                  ['São Paulo, BR', 'LatAm Field Services'],
                  ['Esterhaven, NL', 'Reabsorption Practice'],
                  ['Karelborg, FI', 'Continuity North'],
                ].map(([city, role]) => (
                  <li key={city} style={{padding: '12px 0', borderBottom: '1px solid var(--hw-line)'}}>
                    <div style={{fontWeight: 600}}>{city}</div>
                    <div className="muted" style={{fontSize: 13}}>{role}</div>
                  </li>
                ))}
              </ul>
              <div style={{marginTop: 28, padding: 18, background: 'var(--hw-cream)', border: '1px solid var(--hw-line)'}}>
                <div style={{fontSize: 13, fontWeight: 600, marginBottom: 6}}>General inquiries</div>
                <div className="muted" style={{fontSize: 14}}>partners@harswell.com<br/>+1 (203) 555-0187</div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Portal ───────────────────────────────────────────────────
function PagePortal() {
  const [user, setUser] = useState('');
  const [pwd, setPwd] = useState('');
  const [err, setErr] = useState(null);
  const [attempts, setAttempts] = useState(() => parseInt(localStorage.getItem('hw-attempts') || '0', 10));

  // Accept any of the plausible Harswell username conventions for Colleen Archer.
  const VALID_USERS = ['colleen.a', 'colleen.archer', 'archer.c', 'c.archer'];
  const VALID_PWD = 'compoundalignment';

  const submit = (e) => {
    e.preventDefault();
    const u = user.trim().toLowerCase();
    if (VALID_USERS.includes(u) && pwd === VALID_PWD) {
      // Cross over to the archive.
      window.location.href = 'archive.html';
      return;
    }
    const next = Math.min(attempts + 1, 5);
    setAttempts(next);
    localStorage.setItem('hw-attempts', String(next));
    setErr('Access denied. This incident has been logged.');
  };

  const continueAsGuest = (e) => {
    e.preventDefault();
    window.location.href = 'archive.html';
  };

  return (
    <div className="portal-bg">
      <div className="portal-card">
        <div className="portal-head">
          <span className="brand-mark">H</span>
          <div>
            <div style={{fontFamily: "'Inter', sans-serif", fontSize: 18, fontWeight: 600, letterSpacing: '0.02em'}}>Harswell</div>
            <h2 style={{fontSize: 13, color: 'var(--hw-gray)', fontWeight: 500, letterSpacing: '0.04em'}}>Internal Systems</h2>
          </div>
        </div>

        {err && <div className="portal-error">{err}</div>}

        <form onSubmit={submit}>
          <div className="field-row">
            <label>Username</label>
            <input type="text" autoComplete="username" value={user} onChange={(e) => setUser(e.target.value)} required />
          </div>
          <div className="field-row">
            <label>Password</label>
            <input type="password" autoComplete="current-password" value={pwd} onChange={(e) => setPwd(e.target.value)} required />
          </div>
          <button type="submit" className="btn btn-primary">Sign in</button>
        </form>

        {attempts > 0 && (
          <div className="portal-attempts">attempts: {attempts} of 5</div>
        )}

        <div style={{marginTop: 18, paddingTop: 18, borderTop: '1px solid rgba(0,0,0,0.08)', textAlign: 'center'}}>
          <a href="#" onClick={continueAsGuest} style={{fontSize: 13, color: 'var(--hw-gray)'}}>Continue as guest</a>
          <div style={{fontSize: 11, color: 'var(--hw-gray)', marginTop: 4, opacity: 0.75}}>Read-only access. Some documents may be restricted.</div>
        </div>

        <div className="portal-foot">
          <div>Authorized personnel only. Credentials are issued by your stewardship lead.</div>
          <div style={{marginTop: 8}}>
            <a href="#" onClick={(e) => e.preventDefault()}>Forgot password?</a>
            {' · '}
            <Link to="/">Return to harswell.com</Link>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── 404 ──────────────────────────────────────────────────────
function PageNotFound() {
  return (
    <main>
      <div className="simple-page">
        <div>
          <div className="code-404">404</div>
          <h1>This page is not currently available.</h1>
          <p>The document may have been reabsorbed. We apologize for the disruption to your cadence. If you believe this is an error, the archive may be searchable <Link to="/portal" style={{color: 'var(--hw-amber)', textDecoration: 'underline'}}>internally</Link>.</p>
          <Link to="/" className="btn btn-secondary">Return to home</Link>
        </div>
      </div>
    </main>
  );
}

// ── Legal stubs ─────────────────────────────────────────────
function LegalShell({ title, children }) {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs"><Link to="/">Home</Link><span className="sep">/</span>{title}</div>
          <h1 style={{maxWidth: 720}}>{title}</h1>
        </div>
      </section>
      <section className="section">
        <div className="container" style={{maxWidth: 760}}>
          {children}
          <p style={{color: 'var(--hw-gray)', fontSize: 13, marginTop: 40, paddingTop: 20, borderTop: '1px solid rgba(0,0,0,0.08)'}}>
            Last reviewed by the Brand Stewardship Division on a quarterly cadence. Questions may be directed to <a href="#" onClick={(e)=>e.preventDefault()} style={{color: 'var(--hw-amber)'}}>compliance@harswell.co</a>.
          </p>
        </div>
      </section>
    </main>
  );
}

function PagePrivacy() {
  return (
    <LegalShell title="Privacy">
      <p>Harswell processes minimal personal data in the course of its partnership engagements, in accordance with applicable regulations and the Harswell Stewardship Standard. This notice describes, in general terms, the categories of data we may handle and the purposes for which we handle them.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Data we may collect</h2>
      <p>We may collect information you provide directly through our contact and consultation forms (including name, organization, and message content), as well as standard server-side telemetry (IP, user agent, referrer, page views) for the purposes of operating and securing our digital surfaces.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>How we use it</h2>
      <p>Information is used to respond to inquiries, to maintain our partner relationships, and to improve the quality of the cadence. We do not sell partner data, and we do not retain consultation correspondence beyond the period reasonably necessary to steward the engagement to a graceful conclusion.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Cookies</h2>
      <p>This site uses cookies and equivalent storage primitives to maintain session state and to remember your preferences across visits. Disabling cookies will not impair your ability to read public pages.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Your choices</h2>
      <p>You may request access to, correction of, or deletion of personal data we hold about you by writing to compliance@harswell.co. Requests are honored on a quarterly cadence, in line with our Stewardship Standard.</p>
    </LegalShell>
  );
}

function PageTerms() {
  return (
    <LegalShell title="Terms of service">
      <p>These terms govern your use of harswell.co and the related digital surfaces operated by Harswell, PBC. By using these surfaces, you agree to the conditions set out below.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Use of the site</h2>
      <p>You may access publicly available content on this site for informational purposes. Reverse-engineering, scraping at non-trivial volume, or attempting to access non-public surfaces without authorization is not permitted. The Internal Portal is reserved for credentialed personnel.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Intellectual property</h2>
      <p>All marks, copy, layouts, and substrate elements appearing on these surfaces are the property of Harswell, PBC, or its partners, used under license. The Harswell wordmark is reproduced through the bearer.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Disclaimers</h2>
      <p>The site is provided on an as-is basis. Harswell makes no warranties, express or implied, regarding fitness for purpose, continuity of access, or the metaphysical status of any specific document. Users encountering recursion, drift, or unexpected first-person plural in published content should contact Brand Stewardship.</p>
      <h2 style={{marginTop: 32, marginBottom: 12, fontSize: 22}}>Governing terms</h2>
      <p>These terms are governed by the laws of the jurisdiction in which Harswell maintains its primary operating residency. Any disputes shall be resolved through the partner mediation cadence prior to recourse to formal proceedings.</p>
    </LegalShell>
  );
}

window.HW.PageCareers = PageCareers;
window.HW.PageJob = PageJob;
window.HW.PageContact = PageContact;
window.HW.PagePortal = PagePortal;
window.HW.PagePrivacy = PagePrivacy;
window.HW.PageTerms = PageTerms;
window.HW.PageNotFound = PageNotFound;