const { Button: ABtn, Icon: AIcon, SectionLabel: ALabel } = window.BeTechnikDesignSystem_72fdfa;

const PRINCIPLES = ['Integrity', 'Transparency', 'Engineering Responsibility', 'Technical Discipline', 'Customer Requirements', 'Safety', 'Quality', 'Accountability', 'Communication'];
const FUTURE = [['Automation', 'cpu'], ['Robotics', 'bot'], ['Custom Machinery', 'factory'], ['Modernization', 'refresh-cw'], ['Optimization', 'gauge'], ['Flexible Production', 'layers']];
const VALUES = ['Engineering Excellence', 'Integrity', 'Innovation', 'Customer Partnership', 'Continuous Improvement', 'Accountability'];

function AboutPage() {
  useReveal();
  return <>
    <PageHero crumbs={[[null, 'About Us']]} label="About Us" img="american-plant-floor" alt="Manufacturing plant floor in the United States"
      title="Industrial engineering with a manufacturing perspective." lead="An American engineering company for custom machinery, automation, robotics and manufacturing solutions." />
    <section className="sec light theme-light">
      <div className="wrap g2 top">
        <div className="stack reveal" style={{ gap: 28 }}>
          <Eyebrow n="01">Who We Are</Eyebrow>
          <p className="lead" style={{ fontSize: 'clamp(19px,1.7vw,23px)', color: 'var(--text-strong)', fontWeight: 500 }}>We combine practical manufacturing knowledge, engineering expertise and modern automation to develop solutions around real production requirements.</p>
        </div>
        <div className="kv reveal">
          {[['Established', '2022'], ['Headquarters', 'Deerfield Beach, Florida'], ['Market', 'United States'], ['Engineering leadership', '20+ years of experience']].map(([k, v]) =>
            <div key={k} style={{ alignItems: 'baseline' }}><span className="flabel" style={{ margin: 0 }}>{k}</span><span style={{ font: '700 18px/1.35 var(--font-sans)', color: 'var(--text-strong)' }}>{v}</span></div>)}
        </div>
      </div>
    </section>
    <section className="sec dark">
      <div className="wrap" style={{ maxWidth: 1000 }}>
        <figure className="quote reveal">
          <span style={{ width: 48, height: 2, background: 'var(--be-blue-500)' }} />
          <p style={{ fontSize: 'clamp(22px,2.6vw,34px)' }}>“True engineering creates competitive advantage, transforms production, and only matters when it delivers real results for the industry.”</p>
          <figcaption className="sm muted"><b style={{ color: 'var(--text-strong)' }}>Gabriel De Nadai</b> — Co-founder, CEO &amp; Head of Engineering Innovation</figcaption>
        </figure>
      </div>
    </section>
    <section className="sec light theme-light alt" id="how-we-do-business">
      <div className="wrap">
        <SecHead n="02" label="How We Do Business" title="We understand the problem first, then engineer the right solution." />
        <div className="names reveal">{PRINCIPLES.map((t, i) => <div key={t}><b>{String(i + 1).padStart(2, '0')}</b>{t}</div>)}</div>
      </div>
    </section>
    <section className="sec dark" id="engineering-a-stronger-future">
      <div className="wrap">
        <div className="g2" style={{ marginBottom: 'clamp(48px,6vw,80px)' }}>
          <div className="stack reveal" style={{ gap: 28 }}><Eyebrow n="03">Engineering a Stronger Future</Eyebrow><h2 className="display" style={{ fontSize: 'clamp(30px,3.4vw,48px)' }}>Production systems that can adapt.</h2>
            <p className="lead">Proven technologies, applied where they address a defined production need.</p></div>
          <Photo src="engineer-robotics-lab" alt="Engineer working alongside robotic equipment" ratio="16/10" />
        </div>
        <div className="icons reveal">{FUTURE.map(([t, ic]) => <div key={t}><AIcon name={ic} size={26} color="var(--be-blue-500)" />{t}</div>)}</div>
      </div>
    </section>
    <section className="sec light theme-light">
      <div className="wrap">
        <SecHead n="04" label="Values" title="Measured by how we work." />
        <div className="names reveal">{VALUES.map((t, i) => <div key={t}><b>{String(i + 1).padStart(2, '0')}</b>{t}</div>)}</div>
      </div>
    </section>
    <CTABand />
  </>;
}

const HIRE = ['Application', 'Initial review', 'Interview', 'Technical evaluation', 'Final conversation', 'Offer & onboarding'];

function CareersPage() {
  useReveal();
  return <>
    <PageHero crumbs={[[null, 'Careers']]} label="Careers" img="engineering-team-desks" alt="Engineering team working at their desks"
      title="Grow with us." lead="Engineering careers in custom machinery, automation and robotics.">
      <div className="row"><ABtn size="lg" iconRight={<Arrow />} onClick={() => go('careers/apply')}>Apply Now</ABtn></div>
    </PageHero>
    <section className="sec light theme-light" id="grow-with-us">
      <div className="wrap g2">
        <div className="stack reveal" style={{ gap: 28 }}><Eyebrow n="01">Grow With Us</Eyebrow><h2 className="display" style={{ fontSize: 'clamp(30px,3.4vw,48px)' }}>Real engineering problems from day one.</h2>
          <div className="tags">{['Engineering', 'Technical development', 'Teamwork', 'Responsibility', 'Innovation', 'Professional growth'].map(t => <span className="tagx" key={t}>{t}</span>)}</div></div>
        <Photo src="engineer-cad-workstation" alt="Engineer working on a CAD workstation" ratio="4/3" />
      </div>
    </section>
    <section className="sec dark" id="how-we-hire">
      <div className="wrap">
        <SecHead n="02" label="How We Hire" title="A clear, direct process." />
        <div className="ticks six">{HIRE.map((t, i) => <div className="tick" key={t}><b>{String(i + 1).padStart(2, '0')}</b><span>{t}</span></div>)}</div>
      </div>
    </section>
    <section className="sec light theme-light alt" id="opportunities">
      <div className="wrap g2">
        <div className="stack reveal" style={{ gap: 28 }} id="students-graduates"><Eyebrow n="03">Opportunities</Eyebrow><h2 className="display" style={{ fontSize: 'clamp(30px,3.4vw,48px)' }}>Open positions, internships and early careers.</h2></div>
        <div className="notice reveal"><AIcon name="briefcase" size={24} color="var(--be-blue-700)" /><div className="stack-s"><h3 className="h3" style={{ fontSize: 18 }}>No open positions are listed right now.</h3><p className="sm">Students, graduates and experienced engineers can submit a general application below.</p></div></div>
      </div>
    </section>
    <section className="sec light theme-light" id="apply">
      <div className="wrap formlay">
        <div><div className="stack" style={{ marginBottom: 48, gap: 28 }}><Eyebrow n="04">Apply Now</Eyebrow><h2 className="display" style={{ fontSize: 'clamp(30px,3.4vw,48px)' }}>Submit your application.</h2></div><ApplyForm /></div>
        <div className="aside"><div><span className="flabel" style={{ margin: 0 }}>Questions</span><a href={'mailto:' + CONTACT.email}>{CONTACT.email}</a></div></div>
      </div>
    </section>
  </>;
}

const LEGAL = { privacy: 'Privacy Policy', terms: 'Terms & Conditions', cookies: 'Cookie Policy', accessibility: 'Accessibility Statement' };
function LegalPage({ k }) {
  return <>
    <PageHero crumbs={[[null, LEGAL[k]]]} label="Legal" title={LEGAL[k]} lead="This document is being prepared for Be Technik Corporation and will be published after review by qualified U.S. counsel." />
    <section className="sec light theme-light"><div className="wrap"><p className="p">Questions: <a href={'mailto:' + CONTACT.email}>{CONTACT.email}</a></p></div></section>
  </>;
}

Object.assign(window, { AboutPage, CareersPage, LegalPage, LEGAL });