// TrustedPartners — scrolling marquee logo showcase (like accreditation)
function TrustedPartners({ t }) {
  // Client logos organized by rows
  const row1 = [
    "PEMBINAAN IKHASAS", "NIPPON ELECTRIC GLASS", "MARUWA", "MARELLI MOTORI", "APM",
    "FREESCALE", "AKZONOBEL", "NESTLÉ", "ROCA", "POWERTEK", "PANASONIC", "SEKOPLAS"
  ];
  const row2 = [
    "WESTPORTS", "JOHNSON & JOHNSON", "ANN JOO STEEL", "TOYOCHEM", "SAMSUNG",
    "YARA", "YUEN CHUN", "AIRBUS", "VESUVIUS", "AAF", "WCT", "CTRM"
  ];
  const row3 = [
    "MATSUDA", "SHOWA DENKO", "DRB-HICOM", "DANONE", "ALPINE", "SUNPOWER",
    "MEGALABEL", "SWIFT", "HUBER+SUHNER", "COCA-COLA", "MEWAH", "PENTAS FLORA"
  ];
  const row4 = [
    "EDRA", "CGN", "AIRFOIL", "VISKO", "BABA'S", "JOHNSON CONTROLS", "KYB",
    "HARTALEGA", "SSTCM", "WILMAR", "MONIN", "ALPS", "HOYA", "GAMUDA", "SHINKO"
  ];

  const renderMarquee = (items, direction = 'left', speed = 40) => {
    const tripled = [...items, ...items, ...items];
    return (
      <div className="partner-marquee">
        <div
          className={`partner-track ${direction === 'right' ? 'partner-track--reverse' : ''}`}
          style={{ animationDuration: `${speed}s` }}
        >
          {tripled.map((name, i) => (
            <div key={`${name}-${i}`} className="partner-chip">
              <span className="partner-name">{name}</span>
              <span className="partner-dot"></span>
            </div>
          ))}
        </div>
      </div>
    );
  };

  return (
    <section className="partners section" style={{backgroundColor: '#ffffff', background: '#ffffff'}}>
      <div className="wrap">
        <header className="sec-head" style={{textAlign: 'center', marginBottom: '40px'}}>
          <div className="partners-eyebrow"><span className="partners-dot"></span><span>TRUSTED BY 300+ COMPANIES</span></div>
          <h2 className="partners-title">Our Clients</h2>
          <p className="partners-lead">
            We have served more than 300 clients throughout our 10+ years journey across manufacturing, oil & gas, construction, plantation and more.
          </p>
        </header>
      </div>

      <div className="partners-marquee-container">
        {renderMarquee(row1, 'left', 45)}
        {renderMarquee(row2, 'right', 50)}
        {renderMarquee(row3, 'left', 42)}
        {renderMarquee(row4, 'right', 48)}
      </div>

      <style>{`
        .partners {
          padding: 80px 0;
          background: #ffffff !important;
          position: relative;
          z-index: 10;
        }

        .partners-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #06b6d4;
          padding: 8px 14px;
          border: 1px solid rgba(6,182,212,0.3);
          border-radius: 999px;
          background: rgba(6,182,212,0.08);
          margin-bottom: 16px;
        }

        .partners-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 0 4px rgba(16,185,129,0.25), 0 0 20px rgba(16,185,129,0.5);
          animation: dot-pulse 2.2s ease-in-out infinite;
        }

        @keyframes dot-pulse {
          50% { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(16,185,129,0), 0 0 30px rgba(16,185,129,0.3); }
        }

        .partners-title {
          font-size: 48px;
          font-weight: 700;
          color: #0f172a;
          margin: 0 0 16px;
          letter-spacing: -0.02em;
        }

        .partners-lead {
          font-size: 16px;
          color: #64748b;
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.6;
        }

        .partners-marquee-container {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 20px 0;
        }

        .partner-marquee {
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }

        .partner-track {
          display: flex;
          gap: 24px;
          width: max-content;
          animation: marquee-scroll 40s linear infinite;
        }

        .partner-track--reverse {
          animation-direction: reverse;
        }

        @keyframes marquee-scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-33.33%); }
        }

        .partner-chip {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 12px 0;
          flex-shrink: 0;
        }

        .partner-name {
          font-size: 20px;
          font-weight: 700;
          color: #1e293b;
          letter-spacing: 0.02em;
          white-space: nowrap;
          transition: all 0.3s ease;
        }

        .partner-chip:hover .partner-name {
          color: #06b6d4;
          text-shadow: 0 0 20px rgba(6,182,212,0.4);
        }

        .partner-dot {
          width: 8px;
          height: 8px;
          background: linear-gradient(135deg, #06b6d4, #0ea5e9);
          border-radius: 50%;
          box-shadow: 0 0 0 3px rgba(6,182,212,0.2);
          transition: all 0.3s ease;
        }

        .partner-chip:hover .partner-dot {
          transform: scale(1.3);
          box-shadow: 0 0 0 5px rgba(6,182,212,0.3), 0 0 15px rgba(6,182,212,0.5);
        }

        .no-motion .partner-track {
          animation: none;
        }

        @media (max-width: 768px) {
          .partners {
            padding: 60px 0;
          }
          .partners-title {
            font-size: 32px;
          }
          .partners-lead {
            font-size: 14px;
            padding: 0 20px;
          }
          .partner-name {
            font-size: 16px;
          }
          .partner-chip {
            gap: 16px;
          }
          .partner-track {
            gap: 20px;
          }
        }
      `}</style>
    </section>
  );
}
window.TrustedPartners = TrustedPartners;