// Facilities — alternating image / copy. Lists IPAL, thickness gauge, SST.
function Facilities() {
  const items = [
    {
      title: "Instalasi Pengolahan Air Limbah (IPAL)",
      desc: "Sistem elektrokoagulasi untuk mengolah air limbah produksi sebelum dibuang ke lingkungan.",
      tag: "Lingkungan",
    },
    {
      title: "Alat Thickness",
      desc: "Pengukuran ketebalan lapisan plating secara langsung di pabrik — memastikan setiap batch memenuhi spesifikasi pelanggan.",
      tag: "Quality control",
    },
    {
      title: "Salt Spray Test (SST)",
      desc: "Pengujian ketahanan korosi dilakukan di laboratorium supplier rekanan, mengikuti standar industri.",
      tag: "Pengujian",
    },
  ];
  return (
    <section className="dep-facilities" id="fasilitas">
      <div className="dep-facilities__head">
        <span className="eyebrow">Our Facilities</span>
        <h2>Fasilitas produksi yang lengkap dan terkontrol.</h2>
      </div>
      <div className="dep-facilities__grid">
        <div className="dep-facilities__media" aria-hidden="true">
          <svg viewBox="0 0 600 400" width="100%" height="100%">
            <defs>
              <linearGradient id="fac-bg" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#1B2230"/>
                <stop offset="1" stopColor="#054493"/>
              </linearGradient>
            </pattern>
            </defs>
            <rect width="600" height="400" fill="url(#fac-bg)"/>
            <g opacity="0.5" stroke="#FFFFFF" strokeWidth="1.2" fill="none">
              <rect x="80" y="120" width="120" height="180" rx="6"/>
              <rect x="220" y="160" width="120" height="140" rx="6"/>
              <rect x="360" y="100" width="120" height="200" rx="6"/>
              <line x1="40" y1="320" x2="560" y2="320"/>
              <circle cx="140" cy="100" r="12"/>
              <circle cx="280" cy="100" r="12"/>
              <circle cx="420" cy="100" r="12"/>
              <line x1="140" y1="112" x2="140" y2="120"/>
              <line x1="280" y1="112" x2="280" y2="160"/>
              <line x1="420" y1="112" x2="420" y2="100"/>
            </g>
            <text x="300" y="360" textAnchor="middle" fill="rgba(255,255,255,0.55)" fontSize="13" fontFamily="sans-serif" letterSpacing="2">PLACEHOLDER — WORKSHOP PHOTO</text>
          </svg>
        </div>
        <ul className="dep-facilities__list">
          {items.map((it) => (
            <li key={it.title}>
              <span className="pill pill--blue">{it.tag}</span>
              <h4>{it.title}</h4>
              <p>{it.desc}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
window.Facilities = Facilities;