const { Button, Icon, SectionLabel, Dialog } = window.BeTechnikDesignSystem_72fdfa;

function useRoute() {
  const get = () => (location.hash.replace(/^#\/?/, '') || '').replace(/\/$/, '');
  const [r, setR] = React.useState(get());
  React.useEffect(() => { const f = () => { setR(get()); window.scrollTo(0, 0); }; addEventListener('hashchange', f); return () => removeEventListener('hashchange', f); }, []);
  return r;
}
const href = p => '#/' + p;
const go = p => { location.hash = '/' + p; };

function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: .12 });
    const scan = () => document.querySelectorAll('.reveal:not(.in),.ticks:not(.in)').forEach(el => io.observe(el));
    scan(); const t = setTimeout(scan, 300);
    return () => { io.disconnect(); clearTimeout(t); };
  });
}

function Arrow({ size = 16 }) { return <Icon name="arrow-right" size={size} />; }

// Crops a region of a 3000×1479 logo export. box = [x, y, w, h] in source px.
const LOGO = { color: R('logo_color') || 'assets/logos/be-technik-horizontal-color.png', white: R('logo_white') || 'assets/logos/be-technik-mono-white.png' };
const BOX = { lockup: [90, 135, 2860, 1120], mark: [255, 140, 2410, 800] };
function Logo({ kind = 'lockup', tone = 'color', height = 48, label = 'Be Technik', style }) {
  const [x, y, w, h] = BOX[kind]; const s = height / h;
  return <span role="img" aria-label={label} className="logo-crop" style={{ width: Math.round(w * s), height, backgroundImage: `url("${LOGO[tone]}")`, backgroundSize: `${3000 * s}px ${1479 * s}px`, backgroundPosition: `${-x * s}px ${-y * s}px`, ...style }} />;
}

function Eyebrow({ n, children, color, rule }) {
  return <span className="eb"><SectionLabel number={n} color={color} rule={rule}>{children}</SectionLabel></span>;
}

const NAV = [['about-us', 'About Us'], ['solutions', 'Solutions'], ['careers', 'Careers'], ['connect-with-us', 'Connect With Us'], ['request-a-quote', 'Request a Quote']];

function Header({ route }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => setOpen(false), [route]);
  React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]);
  React.useEffect(() => { const f = () => setScrolled(scrollY > 40); f(); addEventListener('scroll', f, { passive: true }); return () => removeEventListener('scroll', f); }, []);
  const on = k => route === k || route.startsWith(k + '/');
  return <header className={'hdr' + (scrolled || open ? ' solid' : '')}>
    <div className="wrap hdr-in">
      <a className="hdr-logo" href={href('')} aria-label="Be Technik home"><Logo height={50} label="Be Technik — Custom Machinery & Automation" /></a>
      <nav className="nav" aria-label="Main">
        {NAV.slice(0, 4).map(([k, l]) => <a key={k} href={href(k)} className={on(k) ? 'on' : ''} aria-current={on(k) ? 'page' : undefined}>{l}</a>)}
      </nav>
      <div className="hdr-cta"><Button size="sm" onClick={() => go('request-a-quote')}>Request a Quote</Button></div>
      <button className="burger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} onClick={() => setOpen(!open)}><Icon name={open ? 'x' : 'menu'} size={22} /></button>
    </div>
    {open && <nav className="mnav" aria-label="Mobile">
      {NAV.map(([k, l]) => <a key={k} href={href(k)}>{l}<Icon name="arrow-right" size={18} color="var(--be-blue-500)" /></a>)}
      <div className="row"><Button fullWidth size="lg" onClick={() => go('connect-with-us')} iconRight={<Arrow />}>Discuss Your Project</Button></div>
    </nav>}
  </header>;
}

function Footer() {
  const col = (t, items) => <div><h4>{t}</h4><ul>{items.map(([p, l]) => <li key={l}>{p === null ? <span>{l}</span> : /^(http|tel|mailto)/.test(p) ? <a href={p}>{l}</a> : <a href={href(p)}>{l}</a>}</li>)}</ul></div>;
  return <footer className="ftr">
    <div className="wrap">
      <div className="ftr-hero">
        <img src={LOGO.color} alt="Be Technik — Custom Machinery & Automation" className="ftr-logo" />
        <div className="stack" style={{ justifyItems: 'start', gap: 20 }}>
          <p className="ftr-claim">Engineering solutions around the way you manufacture.</p>
          <div className="row"><Button iconRight={<Arrow />} onClick={() => go('connect-with-us')}>Discuss Your Project</Button>
            <div className="ftr-soc"><a href={CONTACT.li} target="_blank" rel="noopener" aria-label="Be Technik on LinkedIn"><Icon name="linkedin" size={18} /></a><a href={CONTACT.ig} target="_blank" rel="noopener" aria-label="Be Technik on Instagram"><Icon name="instagram" size={18} /></a></div></div>
        </div>
      </div>
      <div className="ftr-top">
        {col('Company', [['about-us', 'About Us'], ['about-us/how-we-do-business', 'How We Do Business'], ['about-us/engineering-a-stronger-future', 'Engineering a Stronger Future']])}
        {col('Solutions', SOLUTIONS.slice(0, 8).map(s => ['solutions/' + s.slug, s.title]))}
        {col('Careers', [['careers/grow-with-us', 'Grow With Us'], ['careers/how-we-hire', 'How We Hire'], ['careers/opportunities', 'Explore Opportunities'], ['careers/students-graduates', 'Students & Graduates'], ['careers/apply', 'Apply Now']])}
        {col('Connect', [['connect-with-us', 'Connect With Us'], ['request-a-quote', 'Request a Quote'], ['tel:' + CONTACT.tel, CONTACT.phone], ['mailto:' + CONTACT.email, CONTACT.email], [null, CONTACT.addr1 + ', ' + CONTACT.addr2]])}
      </div>
      <div className="ftr-bot">
        <span>© 2026 Be Technik Corporation. All rights reserved.</span>
        <nav aria-label="Legal"><a href={href('privacy')}>Privacy Policy</a><a href={href('terms')}>Terms &amp; Conditions</a><a href={href('cookies')}>Cookie Policy</a><a href={href('accessibility')}>Accessibility Statement</a></nav>
      </div>
    </div>
  </footer>;
}

function Crumbs({ items }) {
  return <nav className="crumbs" aria-label="Breadcrumb"><a href={href('')}>Home</a>{items.map(([p, l]) => <React.Fragment key={l}><span aria-hidden="true">/</span>{p ? <a href={href(p)}>{l}</a> : <span aria-current="page">{l}</span>}</React.Fragment>)}</nav>;
}

function PageHero({ crumbs, label, title, lead, img, alt, children }) {
  return <section className={'phero' + (img ? ' split' : '')}>
    <div className="wrap phero-in">
      <div className="stack phero-copy">
        {crumbs && <Crumbs items={crumbs} />}
        {label && <Eyebrow color="var(--be-blue-300)">{label}</Eyebrow>}
        <h1 className="h1">{title}</h1>
        {lead && <p className="lead">{lead}</p>}
        {children}
      </div>
      {img && <div className="media chamfer phero-img"><img src={IMG(img)} alt={alt || ''} /></div>}
    </div>
  </section>;
}

function SecHead({ n, label, title, children }) {
  return <div className="intro reveal">
    <div className="stack" style={{ gap: 28 }}><Eyebrow n={n}>{label}</Eyebrow><h2 className="display">{title}</h2></div>
    {children && <div className="intro-side">{children}</div>}
  </div>;
}
function More({ to, children }) { return <a className="link" href={href(to)}>{children}<Icon name="arrow-right" size={14} /></a>; }

function CTABand({ kicker = "Let's engineer the next step", title = "Have a production challenge? Let's discuss it." }) {
  return <section className="band">
    <Logo kind="mark" tone="white" height={300} label="" style={{ position: 'absolute', right: '3%', top: '50%', transform: 'translateY(-50%)', opacity: .1, pointerEvents: 'none' }} />
    <div className="wrap band-in">
      <div className="stack"><span className="band-kicker">{kicker}</span><h2 className="h2">{title}</h2></div>
      <div className="row band-cta"><Button variant="inverse" size="lg" iconRight={<Arrow />} onClick={() => go('connect-with-us')}>Discuss Your Project</Button><Button variant="ghost" size="lg" onClick={() => go('request-a-quote')} style={{ color: '#fff' }}>Request a Quote</Button></div>
    </div>
  </section>;
}

function Photo({ src, alt, ratio = '4/3', style }) {
  return <div className="media chamfer" style={{ aspectRatio: ratio, ...style }}><img src={IMG(src)} alt={alt} loading="lazy" /></div>;
}

Object.assign(window, { More, useRoute, href, go, useReveal, Arrow, Logo, Eyebrow, Header, Footer, Crumbs, PageHero, SecHead, CTABand, Photo });