/* global React, LogoMark, ImgPh */

function LogoWall() {
  const names = ['Logitech', 'SIEMENS', 'CID Bio-Science', 'LabTech', 'RBD Instruments', 'KINKISHARYO'];
  return (
    <section className="logo-wall">
      <div className="logo-wall-inner">
        <div className="label">TRUSTED BY MANUFACTURERS AND DISTRIBUTORS ACROSS THE WORLD</div>
        <div className="logo-row">
          {names.map((n) =>
          <LogoMark key={n} name={n} />
          )}
        </div>
      </div>
    </section>);

}

function Stats() {
  const items = [
  { num: '35', unit: '+\u00a0yrs', label: 'Experience', desc: 'Combined bench experience across our team.' },
  { num: '30,000', unit: '+', label: 'Boards manufactured', desc: 'Assembled, tested, and delivered to OEM partners worldwide.' },
  { num: '11', unit: '', label: 'Industries served', desc: 'Aerospace · Medical · Transportation & Automotive · Agriculture · Consumer Electronics · Telecommunications · Energy & Power · Industrial & Automation · Test & Measurement · Water Technology · Specialty Electronics' }];

  return (
    <section className="stats">
      {items.map((it, i) =>
      <div className="stat" key={i}>
          <div className="num">{it.num}<span className="unit">{it.unit}</span></div>
          <div className="label">{it.label}</div>
          <div className="desc">{it.desc}</div>
        </div>
      )}
    </section>);

}

function About() {
  return (
    <section className="about" id="about">
      <div className="left">
        <span className="eyebrow">About E-Assembly</span>
        <h2>An EMS shop, on the Columbia River.</h2>
      </div>
      <div className="right">
        <p>What began in our founder's basement is now a team of engineers, soldering technicians, and assemblers working out of a facility in Camas, Washington. We've built our reputation on precise, reliable work — and on the long-standing industry relationships that come with it.</p>
        <p>At E-Assembly, our mission is to foster innovation and uphold excellence in electronic manufacturing. We achieve this by offering exceptional products, services, and educational resources to both our clients and the community.




        </p>
      </div>
    </section>);

}

function Events() {
  return (
    <section className="events" id="community">
      <div className="event-card">
        <div className="img-side">
          <img src={(window.__resources && window.__resources.eventPhoto) || "assets/event-photo.png"} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div className="body">
          <div className="label-row">
            <span className="eyebrow">Our next event</span>
          </div>
          <h3>KIDS WORKSHOP</h3>
          <div className="meta">
            <div>
              <span className="k">When</span>
              <span className="v">January 17, 2026</span>
            </div>
            <div>
              <span className="k">Where</span>
              <span className="v">E-Assembly, Camas, WA
</span>
            </div>
          </div>
          <div>
            <a className="link-u">See all events</a>
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer className="footer footer-minimal">
      <div className="footer-inner">
        <img className="footer-mark" src={(window.__resources && window.__resources.eMarkWhite) || "assets/e-mark-white.png"} alt="" />
        <span className="footer-word">e·assembly</span>
      </div>
    </footer>);

}

Object.assign(window, { LogoWall, Stats, About, Events, Footer });