/* Manufacturers / Brands scene — sits between Hero and the product scenes.
   Same dark cinematic vibe as other scenes. Logos rendered as inline SVG wordmarks. */

const BrandLogos = {
  Parker: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="56" textAnchor="middle" fontFamily="Inter, Arial Black, sans-serif"
    fontWeight="900" fontSize="52" letterSpacing="-1.5" fill="currentColor">Parker</text>
      <rect x="40" y="64" width="200" height="3" fill="#C41E1E" />
    </svg>,

  Avelair: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="50" textAnchor="middle" fontFamily="Inter, Arial Black, sans-serif"
    fontWeight="800" fontSize="40" letterSpacing="2" fill="currentColor">AVELAIR</text>
      <text x="140" y="68" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="500" fontSize="9" letterSpacing="4" fill="#9a9aa2">COMPRESSORS</text>
    </svg>,

  SIP: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <rect x="80" y="18" width="120" height="44" fill="#C41E1E" />
      <text x="140" y="50" textAnchor="middle" fontFamily="Inter, Arial Black, sans-serif"
    fontWeight="900" fontSize="32" letterSpacing="3" fill="#fff">SIP</text>
      <text x="140" y="74" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="500" fontSize="9" letterSpacing="3" fill="#9a9aa2">INDUSTRIAL PRODUCTS</text>
    </svg>,

  Crouzet: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="56" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="700" fontSize="44" letterSpacing="-1" fill="currentColor">crouzet</text>
      <circle cx="218" cy="32" r="5" fill="#C41E1E" />
    </svg>,

  PCL: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="58" textAnchor="middle" fontFamily="Inter, Arial Black, sans-serif"
    fontWeight="900" fontSize="56" letterSpacing="-1" fill="currentColor">PCL</text>
      <text x="140" y="74" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="500" fontSize="8" letterSpacing="3" fill="#9a9aa2">AIRTECHNOLOGY</text>
    </svg>,

  JohnGuest: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="40" textAnchor="middle" fontFamily="Instrument Serif, Times, serif"
    fontWeight="400" fontSize="28" fill="currentColor">John Guest</text>
      <line x1="60" y1="48" x2="220" y2="48" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
      <text x="140" y="66" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="600" fontSize="10" letterSpacing="5" fill="#9a9aa2">SPEEDFIT</text>
    </svg>,

  ASCO: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="58" textAnchor="middle" fontFamily="Inter, Arial Black, sans-serif"
    fontWeight="900" fontSize="50" letterSpacing="2" fill="currentColor">ASCO</text>
      <text x="140" y="72" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="500" fontSize="8" letterSpacing="3" fill="#9a9aa2">EMERSON</text>
    </svg>,

  Emerson: () =>
  <svg viewBox="0 0 280 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
      <text x="140" y="56" textAnchor="middle" fontFamily="Inter, Arial, sans-serif"
    fontWeight="700" fontSize="42" letterSpacing="-0.5" fill="currentColor">EMERSON</text>
      <rect x="40" y="64" width="200" height="2" fill="#C41E1E" />
    </svg>

};

/* Background: faint signal/blueprint grid with drifting brand-red ticks */
const ManufacturersBg = () =>
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <defs>
      <linearGradient id="mb-bg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#0a0a0b" />
        <stop offset="1" stopColor="#0e0e10" />
      </linearGradient>
      <radialGradient id="mb-haze" cx="0.5" cy="0.4">
        <stop offset="0" stopColor="#C41E1E" stopOpacity="0.05" />
        <stop offset="1" stopColor="#C41E1E" stopOpacity="0" />
      </radialGradient>
    </defs>
    <rect width="1600" height="900" fill="url(#mb-bg)" />
    <rect width="1600" height="900" fill="url(#mb-haze)" />

    {/* horizontal hairline rails */}
    {[140, 320, 500, 680, 860].map((y) =>
  <line key={y} x1="0" y1={y} x2="1600" y2={y}
  stroke="#222226" strokeWidth="0.6" opacity="0.6" />
  )}
    {/* tick marks along rails */}
    {[140, 320, 500, 680, 860].map((y, ri) =>
  [...Array(20)].map((_, i) =>
  <line key={`${y}-${i}`} x1={i * 80 + 20} y1={y - 4} x2={i * 80 + 20} y2={y + 4}
  stroke="#2c2c32" strokeWidth="0.6" opacity={ri % 2 ? 0.4 : 0.7} />
  )
  )}
    {/* drifting red flow tracers */}
    {[140, 500, 860].map((y, i) =>
  <circle key={i} cx="0" cy={y} r="3" fill="#C41E1E">
        <animate attributeName="cx" values="0;1600" dur={`${6 + i * 1.5}s`}
    repeatCount="indefinite" begin={`${-i * 2}s`} />
        <animate attributeName="opacity" values="0;1;1;0" dur={`${6 + i * 1.5}s`}
    repeatCount="indefinite" begin={`${-i * 2}s`} />
      </circle>
  )}
    {/* corner crosshairs */}
    {[[60, 60], [1540, 60], [60, 840], [1540, 840]].map(([x, y], i) =>
  <g key={i} stroke="#2c2c32" strokeWidth="1" fill="none">
        <line x1={x - 10} y1={y} x2={x + 10} y2={y} />
        <line x1={x} y1={y - 10} x2={x} y2={y + 10} />
      </g>
  )}
  </svg>;


const Manufacturers = () => {
  const brands = [
  { name: 'PARKER',     href: window.CAP_URLS.shop,       cat: 'CYLINDERS · VALVES · FITTINGS', Comp: BrandLogos.Parker },
  { name: 'AVELAIR',    href: window.CAP_URLS.avelair,    cat: 'COMPRESSORS · AIR TREATMENT',   Comp: BrandLogos.Avelair },
  { name: 'SIP',        href: window.CAP_URLS.sip,        cat: 'COMPRESSORS · WORKSHOP',        Comp: BrandLogos.SIP },
  { name: 'CROUZET',    href: window.CAP_URLS.shop,       cat: 'PNEUMATIC LOGIC · CONTROL',     Comp: BrandLogos.Crouzet },
  { name: 'PCL',        href: window.CAP_URLS.shop,       cat: 'AIRLINE · COUPLINGS',           Comp: BrandLogos.PCL },
  { name: 'JOHN GUEST', href: window.CAP_URLS.johnguest,  cat: 'PUSH-FIT · TUBING',             Comp: BrandLogos.JohnGuest },
  { name: 'ASCO',       href: window.CAP_URLS.emersonasco,cat: 'PROCESS VALVES · EMERSON',      Comp: BrandLogos.ASCO },
  { name: 'EMERSON',    href: window.CAP_URLS.emersonasco,cat: 'AUTOMATION SOLUTIONS',           Comp: BrandLogos.Emerson }];

  return (
    <section className="scene scene-brands" id="brands" data-screen-label="01 Manufacturers">
      <div className="scene-bg"><ManufacturersBg /></div>
      <div className="scene-grid" />
      <div className="scene-content brands-content">
        <div className="brands-head">
          <div>
            <div className="eyebrow">
              <span className="eyebrow-dot" />
              <span className="eyebrow-num">00 ·</span>
              <span>OUR MANUFACTURERS</span>
            </div>
            <h2 className="scene-product-h">
              The brands<br />we <em style={{ fontFamily: "Arial" }}>actually</em> stock.
            </h2>
          </div>
          <div className="brands-head-right">
            <p className="brands-lead">Authorised UK distributor for the names that workshop floors run on. Genuine parts, full datasheets, supported by our in-house engineers.



            </p>
            <div className="brands-cta-row">
              <a className="btn-primary" href={window.CAP_URLS.shop}>
                Shop our products
                <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
                  <path d="M0 5h14m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.6" />
                </svg>
              </a>
              <a className="btn-ghost" href={window.CAP_URLS.contact}>Request a datasheet</a>
            </div>
          </div>
        </div>

        <div className="brands-grid">
          {brands.map((b, i) =>
          <a className="brand-cell" key={b.name} href={b.href}>
              <div className="brand-num">{String(i + 1).padStart(2, '0')}</div>
              <div className="brand-logo"><b.Comp /></div>
              <div className="brand-cat">{b.cat}</div>
              <div className="brand-status">
                <span className="brand-status-dot" />
                <span>AUTHORISED · IN STOCK</span>
              </div>
            </a>
          )}
        </div>

        <div className="brands-foot">
          <span><strong>+ ALSO AVAILABLE:</strong>&nbsp;&nbsp;Norgren · Camozzi · Festo · Legris · Transair · ABAC</span>
          <span className="brands-foot-r"> AUTHORISED PARTNERSHIPS · 15,000+ LINES ON THE SHELF</span>
        </div>
      </div>
    </section>);

};

window.Manufacturers = Manufacturers;