// Services — 3 cards: Zinc, Nickel Chrome, Nickel Brass.
function Services() {
  const services = [
    {
      key: "zinc",
      title: "Jasa Plating Zinc",
      method: ["Rack", "Barrel"],
      desc: "Pelapisan zinc untuk komponen otomotif dan peralatan industri yang membutuhkan ketahanan korosi standar.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="6" width="18" height="12" rx="2"/>
          <path d="M7 10h.01M11 10h.01M15 10h.01M7 14h10"/>
        </svg>
      ),
    },
    {
      key: "nickel-chrome",
      title: "Jasa Plating Nickel Chrome",
      method: ["Rack", "Barrel"],
      desc: "Pelapisan nickel chrome dengan finish cerah dan ketahanan korosi tinggi. Standar untuk komponen otomotif &amp; rumah tangga.",
      featured: true,
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="9"/>
          <path d="M12 3v18M3 12h18"/>
        </svg>
      ),
    },
    {
      key: "nickel-brass",
      title: "Jasa Plating Nickel Brass",
      method: ["Rack"],
      desc: "Finish kuningan dengan basis nickel — memberikan tampilan dekoratif khas pada komponen aksesoris dan office supplies.",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 17V7l8-4 8 4v10l-8 4-8-4z"/>
          <path d="M4 7l8 4 8-4M12 11v10"/>
        </svg>
      ),
    },
  ];
  return (
    <section className="dep-services" id="layanan">
      <div className="section-head">
        <span className="eyebrow">Our Services</span>
        <h2>Tiga lini jasa plating untuk kebutuhan industri Anda.</h2>
      </div>
      <div className="dep-services__grid">
        {services.map((s) => (
          <article key={s.key} className={`dep-service ${s.featured ? "is-featured" : ""}`}>
            <div className="dep-service__icon">{s.icon}</div>
            <h3>{s.title}</h3>
            <div className="dep-service__methods">
              {s.method.map((m) => <span key={m} className="pill pill--blue">{m}</span>)}
            </div>
            <p dangerouslySetInnerHTML={{ __html: s.desc }} />
            <a className="dep-service__more" href="#kontak">Diskusikan kebutuhan Anda →</a>
          </article>
        ))}
      </div>
    </section>
  );
}
window.Services = Services;