/* global React */

// ─── Macro PCB placeholder — overlays chips/traces/pads on the CSS pcb green base ───
function PCBMacro({ density = 1, label }) {
  const chips = [
    { l: '14%', t: '22%', w: 110, h: 78 },
    { l: '54%', t: '38%', w: 168, h: 112 },
    { l: '22%', t: '64%', w: 86, h: 60 },
    { l: '72%', t: '70%', w: 64, h: 64 },
    { l: '78%', t: '14%', w: 54, h: 96 },
  ];
  const traces = [];
  for (let i = 0; i < 22 * density; i++) {
    traces.push({
      l: `${(i * 7) % 90}%`,
      t: `${(i * 13 + 8) % 88}%`,
      w: 40 + (i * 17) % 220,
      r: (i * 31) % 180,
    });
  }
  const pads = [];
  for (let i = 0; i < 28 * density; i++) {
    pads.push({
      l: `${(i * 11 + 4) % 96}%`,
      t: `${(i * 19 + 12) % 92}%`,
    });
  }
  return (
    <div className="pcb-placeholder">
      {traces.map((t, i) => (
        <div key={'t'+i} className="pcb-trace" style={{
          left: t.l, top: t.t, width: t.w, transform: `rotate(${t.r}deg)`,
          transformOrigin: 'left center',
        }} />
      ))}
      {chips.map((c, i) => (
        <div key={'c'+i} className="pcb-chip" style={{
          left: c.l, top: c.t, width: c.w, height: c.h,
        }} />
      ))}
      {pads.map((p, i) => (
        <div key={'p'+i} className="pcb-pad" style={{ left: p.l, top: p.t }} />
      ))}
      {label && (
        <div className="hero-photo-caption">{label}</div>
      )}
    </div>
  );
}

// ─── Per-company logo placeholders (font-only approximations of real wordmarks) ───
const LOGO_STYLES = {
  'Logitech':        { fontFamily: '"Geist", sans-serif', fontWeight: 500, fontSize: 22, letterSpacing: '-0.01em', textTransform: 'lowercase' },
  'SIEMENS':         { fontFamily: '"Geist", sans-serif', fontWeight: 800, fontSize: 22, letterSpacing: '0.04em', textTransform: 'uppercase' },
  'CID Bio-Science': { fontFamily: '"Geist", sans-serif', fontWeight: 600, fontSize: 18, letterSpacing: '-0.005em' },
  'LabTech':         { fontFamily: '"Geist", sans-serif', fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em', fontStyle: 'italic' },
  'RBD Instruments': { fontFamily: '"EB Garamond", serif', fontWeight: 500, fontSize: 22, letterSpacing: '0.01em', fontStyle: 'italic' },
  'KINKISHARYO':     { fontFamily: '"Geist", sans-serif', fontWeight: 300, fontSize: 18, letterSpacing: '0.22em', textTransform: 'uppercase' },
};

function LogoMark({ name }) {
  const style = LOGO_STYLES[name] || { fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 18 };
  return (
    <span style={{ ...style, color: 'var(--fg-2)', whiteSpace: 'nowrap', display: 'inline-block', opacity: 0.78, lineHeight: 1 }}>
      {name}
    </span>
  );
}

function ImgPh({ children, dark, style }) {
  return (
    <div className={"img-ph" + (dark ? " img-ph-dark" : "")} style={style}>
      {children}
    </div>
  );
}

// ─── Wordmark — e-mark image + EB Garamond italic 'e·assembly' ───
function Wordmark({ onDark }) {
  const v = onDark ? "white" : "black";
  const onClick = (e) => {
    e.preventDefault();
    if (window.smoothScrollToCenter) window.smoothScrollToCenter('home');
    else {
      const t = document.getElementById('home');
      if (t) window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };
  return (
    <a className="wordmark" href="#home" onClick={onClick}>
      <img className="mark" src={(window.__resources && window.__resources['eMark' + (onDark ? 'White' : 'Black')]) || ("assets/e-mark-" + v + ".png")} alt="" />
      <span className="word" style={onDark ? { color: 'var(--bone)' } : undefined}>e·assembly</span>
    </a>
  );
}

// ─── Lucide-style 1.5px stroke icons ───
const Icon = {
  account: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
    </svg>
  ),
  cart: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
      <path d="M3 4h2l2 12h12" />
      <path d="M6 8h16l-2 7H7" />
      <circle cx="9" cy="20" r="1.2" />
      <circle cx="18" cy="20" r="1.2" />
    </svg>
  ),
  search: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
      <circle cx="11" cy="11" r="6" />
      <path d="M16 16l4 4" />
    </svg>
  ),
  menu: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ width: 22, height: 22 }}>
      <path d="M4 7h16M4 12h16M4 17h16" />
    </svg>
  ),
  caret: <span style={{ display: 'inline-block', fontSize: 9 }}>▾</span>,
};

Object.assign(window, { PCBMacro, LogoMark, ImgPh, Wordmark, Icon });