const { Button: SBtn, Icon: SIcon, SectionLabel: SLabel } = window.BeTechnikDesignSystem_72fdfa;

const DELIVERY = HOW;

function SolutionsPage({ variant }) {
  useReveal();
  return <>
    <PageHero crumbs={[[null, 'Solutions']]} label="Solutions" img="cad-machine-design" alt="Engineer designing custom machinery in CAD"
      title="Engineered around your production."
      lead="Custom machinery, automation and robotics. Designed, engineered and integrated for manufacturing.">
      <div className="row"><SBtn size="lg" iconRight={<Arrow />} onClick={() => go('connect-with-us')}>Discuss Your Project</SBtn></div>
    </PageHero>
    <section className="sec light theme-light">
      <div className="wrap">
        <SecHead n="01" label="What We Deliver" title="Integrated solutions for every stage of production." >
          <p className="lead">Most projects combine several. Select one to learn more.</p>
        </SecHead>
        {variant === 'list' ? <SolutionsList items={SOLUTIONS} /> : <SolutionsGrid items={SOLUTIONS} />}
      </div>
    </section>
    <section className="sec dark">
      <div className="wrap">
        <SecHead n="02" label="Project Delivery" title="From concept through commissioning.">
          <p className="lead">We coordinate or execute each phase, according to project scope.</p>
        </SecHead>
        <div className="ticks eight">{DELIVERY.map((t, i) => <div className="tick" key={t}><b>{String(i + 1).padStart(2, '0')}</b><span>{t}</span></div>)}</div>
      </div>
    </section>
    <CTABand />
  </>;
}

function SolutionDetail({ slug }) {
  useReveal();
  const i = SOLUTIONS.findIndex(s => s.slug === slug);
  const s = SOLUTIONS[i];
  if (!s) return <NotFound />;
  const rel = [1, 2, 3].map(k => SOLUTIONS[(i + k) % SOLUTIONS.length]);
  return <>
    <PageHero crumbs={[['solutions', 'Solutions'], [null, s.title]]} label={String(i + 1).padStart(2, '0') + ' — Solutions'} img={s.img} alt={s.alt} title={s.long || s.title} lead={s.hook}>
      <div className="row"><SBtn size="lg" iconRight={<Arrow />} onClick={() => go('connect-with-us')}>Discuss Your Project</SBtn></div>
    </PageHero>
    <section className="sec light theme-light">
      <div className="wrap g2 top">
        <div className="stack reveal" style={{ gap: 28 }}><Eyebrow n="01">Overview</Eyebrow><p className="lead" style={{ fontSize: 'clamp(19px,1.7vw,23px)', color: 'var(--text-strong)', fontWeight: 500 }}>{s.intro}</p></div>
        <div className="reveal">
          <span className="flabel">{s.fitTitle ? 'Applications & scope' : 'Scope may include'}</span>
          <div className="names" style={{ gridTemplateColumns: '1fr 1fr' }}>{(s.fitTitle ? s.fit : s.caps).map((c, k) => <div key={c} style={{ paddingLeft: k % 2 ? 24 : 0, borderLeft: k % 2 ? '1px solid var(--border-subtle)' : 0, fontSize: 16 }}>{c}</div>)}</div>
        </div>
      </div>
    </section>
    <section className="sec dark">
      <div className="wrap">
        <SecHead n="02" label="Related Solutions" title="Often combined with." />
        <div className="rel">{rel.map(r => <a key={r.slug} href={href('solutions/' + r.slug)} className="scard open reveal">
          <div className="scard-img"><img src={IMG(r.img)} alt={r.alt} loading="lazy" /></div>
          <div className="scard-body"><div className="scard-top"><SIcon name={r.icon} size={20} color="var(--be-blue-500)" /><span className="scard-arr"><SIcon name="arrow-up-right" size={18} /></span></div><h3>{r.title}</h3><div className="scard-more"><div><p>{r.hook}</p></div></div></div>
        </a>)}</div>
      </div>
    </section>
    <CTABand title={'Discuss your ' + s.title.toLowerCase() + ' project.'} />
  </>;
}

function NotFound() {
  return <PageHero title="Page not found." lead="The page you requested does not exist or has moved."><div className="row"><SBtn onClick={() => go('')}>Back to Home</SBtn></div></PageHero>;
}

Object.assign(window, { SolutionsPage, SolutionDetail, NotFound });