// Shared visuals — real product images + brand glyphs

// Real product photo (replaces synthetic gauge)
const ProductPhoto = ({ name, alt = '' }) => (
  <img src={`images/products/${name}.webp`} alt={alt}
    style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
);

// Hero composition — factory + craftsmanship visual, not product catalog
const HeroComposition = ({ lang }) => {
  return (
    <div className="hero-composition">
      {/* Main: factory aerial / production floor */}
      <div className="hero-main">
        <FactoryPhoto which="production-floor" />
        <div className="hero-main-tag">
          <span className="dot" />
          <span>{lang === 'zh' ? '台州 · 浙江' : 'TAIZHOU, ZHEJIANG'}</span>
        </div>
        <div className="hero-main-coord">
          <span>28.85°N</span>
          <span>120.74°E</span>
        </div>
      </div>

      {/* Right strip: 2 vertical detail tiles */}
      <div className="hero-strip">
        <div className="hero-tile">
          <ProcessPhoto name="manogauge-manufacturing-dial-installation" />
          <div className="hero-tile-meta">
            <span className="lbl">{lang === 'zh' ? '装表' : 'ASSEMBLY'}</span>
          </div>
        </div>
        <div className="hero-tile">
          <ProcessPhoto name="manogauge-manufacturing-final-calibration-inspection" />
          <div className="hero-tile-meta">
            <span className="lbl">{lang === 'zh' ? '校准' : 'CALIBRATION'}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// Process step photo
const ProcessPhoto = ({ name }) => (
  <img src={`images/process/${name}.webp`} alt=""
    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
);

const FactoryPhoto = ({ which = 'production-floor' }) => (
  <img src={`images/factory/manogauge-factory-${which}.webp`} alt="Manogauge factory"
    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
);

const CertImage = ({ name }) => (
  <img src={`images/certs/${name}.webp`} alt=""
    style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block', background: '#fff', padding: 8 }} />
);

// Industry icons — clean line glyphs
const IndIcon = ({ name }) => {
  const stroke = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const icons = {
    chemical: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><path d="M12 4v8L6 24a4 4 0 003.5 6h13a4 4 0 003.5-6l-6-12V4M10 4h12M11 18h10" /></svg>,
    petrochem: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><path d="M8 28V12l8-6 8 6v16M14 28v-8h4v8M4 28h24" /></svg>,
    food: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><path d="M6 14h20l-2 14H8L6 14zM10 14V8a6 6 0 0112 0v6" /></svg>,
    hvac: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><circle cx="16" cy="16" r="3" /><path d="M16 4v6M16 22v6M4 16h6M22 16h6M7.5 7.5l4 4M20.5 20.5l4 4M7.5 24.5l4-4M20.5 11.5l4-4" /></svg>,
    automotive: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><path d="M4 22V14l4-6h16l4 6v8M4 22h24M8 22v4M24 22v4" /><circle cx="10" cy="22" r="3" /><circle cx="22" cy="22" r="3" /></svg>,
    medical: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><rect x="6" y="10" width="20" height="14" rx="2" /><path d="M16 10V6M12 6h8M16 14v6M13 17h6" /></svg>,
    marine: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><path d="M4 22h24l-3 6H7L4 22zM6 22V8h20v14M14 4h4v4h-4z" /></svg>,
    manufacturing: <svg viewBox="0 0 32 32" width="40" height="40" {...stroke}><path d="M4 28V14l8 4V14l8 4V8h8v20H4z" /><circle cx="10" cy="22" r="1.5" /><circle cx="18" cy="22" r="1.5" /><circle cx="26" cy="22" r="1.5" /></svg>,
  };
  return icons[name] || icons.chemical;
};

// Logo
const Logo = ({ size = 28 }) => (
  <img src="images/logo.webp" alt="Manogauge" style={{ width: size, height: size, objectFit: 'contain', display: 'block', flexShrink: 0 }} />
);

const Arrow = ({ dir = 'right', size = 14 }) => {
  const rot = { right: 0, left: 180, up: -90, down: 90 }[dir] || 0;
  return (
    <svg viewBox="0 0 14 14" width={size} height={size} style={{ transform: `rotate(${rot}deg)` }}>
      <path d="M2 7h10M8 3l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

Object.assign(window, { ProductPhoto, HeroComposition, ProcessPhoto, FactoryPhoto, CertImage, IndIcon, Logo, Arrow });