/* Service grid — five DLG procedures. 3+2 layout. */

const SERVICES = [
  {
    icon: "shield",
    badge: "BSO 2011",
    title: "Qualitätsbetrieb",
    blurb: "Ganzheitliche Betriebszertifizierung für Kosmetik-, Fußpflege-, Nagel- und Wimpernstudios. Beinhaltet jährliches Vor-Ort-Audit und Türschild aus Acrylglas.",
    bullets: ["Erstaudit + Folgeaudit", "3 Jahre Gültigkeit", "Türschild + Webmedien"],
    cta: "Anforderungen ansehen",
  },
  {
    icon: "award",
    badge: "BSO 2079",
    title: "Deutsches Hygienesiegel",
    blurb: "Produktzertifizierung für Studios mit besonderen Hygieneanforderungen — inklusive Plasmologie, Kavitation und apparativer Kosmetik.",
    bullets: ["Hygieneplan-Prüfung", "Geräteliste BSO-konform", "Öffentliches Register"],
    cta: "Siegel beantragen",
  },
  {
    icon: "checkc",
    badge: "ISO",
    title: "Prozesszertifizierung",
    blurb: "ISO-konforme Zertifizierung von Qualitäts- und Hygienemanagement­systemen — für Studios, Akademien und Hersteller von Pflegeprodukten.",
    bullets: ["Dokumentenprüfung", "Stage-1 + Stage-2 Audit", "Re-Zertifizierung alle 3 Jahre"],
    cta: "Prozess kennenlernen",
  },
  {
    icon: "file",
    badge: "AZAV",
    title: "Schulungsträger",
    blurb: "Trägerzulassung von Bildungseinrichtungen nach Akkreditierungs- und Zulassungsverordnung Arbeitsförderung. Voraussetzung für AVGS-Maßnahmen.",
    bullets: ["Trägerzulassung", "Maßnahmezulassung", "Dozentenprüfung"],
    cta: "Voraussetzungen prüfen",
  },
  {
    icon: "award",
    badge: "Auszeichnung",
    title: "Qualitätsbetrieb des Jahres",
    blurb: "Jährliche Auszeichnung für besonders herausragende DLG-zertifizierte Betriebe. Bewerbung über die Geschäftsstelle, Preisverleihung im Frühjahr.",
    bullets: ["Branchen-Jury", "Pressemeldung & Logo", "Werbe­materialien inklusive"],
    cta: "Über die Auszeichnung",
  },
];

const ServiceGrid = () => (
  <section className="dlg-services" data-screen-label="Leistungen">
    <ServiceGridStyles/>
    <div className="container">
      <div className="dlg-services__head">
        <Eyebrow tone="gold">Unsere Leistungen</Eyebrow>
        <h2 className="dlg-services__h2">Fünf Verfahren — eine unabhängige Stelle.</h2>
        <p className="dlg-services__lede">
          Die DLG führt unabhängige Zertifizierungen für Studios, Akademien und Hersteller im Kosmetik- und
          Fußpflegesegment durch. Jedes Verfahren folgt einer veröffentlichten Ordnung — mit dokumentiertem Audit,
          klarer Geltungs­beschreibung und überprüfbarem Eintrag in unserem Register.
        </p>
      </div>

      <div className="dlg-services__grid">
        {SERVICES.map((s, i) => (
          <article key={i} className="dlg-service">
            <div className="dlg-service__head">
              <Icon d={Icons[s.icon]} size={24} stroke={1.5}/>
              <span className="dlg-service__badge">{s.badge}</span>
            </div>
            <h3 className="dlg-service__title">{s.title}</h3>
            <p className="dlg-service__blurb">{s.blurb}</p>
            <ul className="dlg-service__list">
              {s.bullets.map((b, j) => (
                <li key={j}><Icon d={Icons.check} size={14} stroke={2.4}/> {b}</li>
              ))}
            </ul>
            <a href="#" className="dlg-service__cta" onClick={e=>e.preventDefault()}>
              {s.cta} <Icon d={Icons.arrowR} size={14}/>
            </a>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const ServiceGridStyles = () => (
  <style>{`
    .dlg-services { background: var(--dlg-paper); padding: 96px 0; border-bottom: 1px solid var(--border); }
    .dlg-services__head { max-width: 760px; margin: 0 0 48px; }
    .dlg-services__h2 { font-family: var(--font-serif); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--dlg-navy-900); margin: 12px 0 16px; letter-spacing: -0.015em; text-wrap: balance; }
    .dlg-services__lede { font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 680px; }
    .dlg-services__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
    .dlg-service { background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); padding: 28px; transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); display: flex; flex-direction: column; grid-column: span 2; }
    /* Bottom row of 2 cards spans 3 each, centered */
    .dlg-service:nth-child(4) { grid-column: 2 / span 2; }
    .dlg-service:nth-child(5) { grid-column: span 2; }
    .dlg-service:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
    .dlg-service__head { display: flex; align-items: center; justify-content: space-between; color: var(--dlg-navy-700); margin-bottom: 24px; }
    .dlg-service__badge { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--dlg-gold-700); background: var(--dlg-gold-100); padding: 4px 8px; border-radius: 3px; letter-spacing: 0.5px; }
    .dlg-service__title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--dlg-navy-900); margin: 0 0 10px; line-height: 1.2; }
    .dlg-service__blurb { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 18px; }
    .dlg-service__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
    .dlg-service__list li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--dlg-navy-800); }
    .dlg-service__list li svg { color: #2e7d4a; flex-shrink: 0; }
    .dlg-service__cta { margin-top: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--dlg-navy-700); text-decoration: none; font-size: 13.5px; font-weight: 700; padding-top: 16px; border-top: 1px solid var(--border); }
    .dlg-service__cta:hover { color: var(--dlg-navy-900); gap: 10px; transition: gap var(--dur-1) var(--ease-out); }
  `}</style>
);

Object.assign(window, { ServiceGrid });