/* Gebührenordnung — replaces the previous "Mitgliedschaft" section.

   Aufbau orientiert sich an publizierten Gebührenordnungen unabhängiger
   Zertifizierungsstellen (TÜV SÜD, TÜV Rheinland, DEKRA): positions­bezogen,
   netto, mit Trennung zwischen festen Verfahrens­gebühren und auf­wands­abhängigen
   Positionen (Audit­tage, Reise­kosten, Sonder­leistungen). */

const FEES_VERFAHREN = [
  { pos: "1.1", title: "Antrags- und Bearbeitungs­gebühr",
    desc: "Formale Prüfung, Aktenanlage, Eingangs­bestätigung.",
    unit: "einmalig pro Antrag", price: "180,00 €" },
  { pos: "1.2", title: "Zertifikat­ausstellung",
    desc: "Urkunde, Eintrag in das öffentliche DLG-Register, Türschild aus Acrylglas, Druck- und Web­materialien.",
    unit: "einmalig nach Bestehen", price: "150,00 €" },
  { pos: "1.3", title: "Jährliche Bestands­gebühr",
    desc: "Register­führung, Überwachung der Gültigkeit, Hotline.",
    unit: "ab dem 2. Jahr · pro Jahr", price: "120,00 €" },
  { pos: "1.4", title: "Re-Zertifizierung",
    desc: "Verfahrens­gebühr für die Wieder­holung nach 3 Jahren (zusätzlich zum Audit­aufwand).",
    unit: "einmalig pro Zyklus", price: "180,00 €" },
];

const FEES_AUFWAND = [
  { pos: "2.1", title: "Audit-Tagessatz",
    desc: "Erst­audit, Folge­audit, Re-Zertifizierungs­audit. Aufwand richtet sich nach Betriebs­größe und Geltungs­bereich.",
    unit: "pro Auditor­tag (8 h)", price: "850,00 €" },
  { pos: "2.2", title: "Vorbereitungs- und Berichts­zeit",
    desc: "Dokumenten­prüfung vorab, Audit­bericht, Bewertungs­gespräch.",
    unit: "pauschal pro Verfahren", price: "240,00 €" },
  { pos: "2.3", title: "Reise­kosten",
    desc: "Innerhalb Berlin pauschal; außerhalb nach tatsächlichem Aufwand (Bahn 2. Klasse oder 0,42 €/km).",
    unit: "Berlin · pauschal", price: "95,00 €" },
  { pos: "2.4", title: "Sonder­leistungen",
    desc: "Zweit­schrift, Übersetzung (EN), nach­trägliche Geltungs­bereichs­erweiterung.",
    unit: "auf Anfrage", price: "ab 60,00 €" },
];

const Gebuehrenordnung = () => (
  <section className="dlg-fees" data-screen-label="Gebührenordnung">
    <FeesStyles/>
    <div className="container">
      <div className="dlg-fees__head">
        <Eyebrow tone="navy">Gebührenordnung</Eyebrow>
        <h2 className="dlg-fees__h2">Was eine Zertifizierung kostet — transparent.</h2>
        <p className="dlg-fees__lede">
          Die DLG erhebt Gebühren für tatsächlich erbrachte Verfahrens­leistungen. Es gibt keine
          Mitglieds­beiträge oder Sponsoring­modelle — die Zertifizierungs­entscheidung ist
          unabhängig von der Höhe der gezahlten Gebühren.
        </p>
      </div>

      <div className="dlg-fees__tables">
        <div>
          <div className="dlg-fees__caption">
            <span className="num">A</span>
            <span>Verfahrens­gebühren · pauschal</span>
          </div>
          <table className="dlg-fees__t">
            <thead>
              <tr><th>Pos.</th><th>Leistung</th><th>Einheit</th><th>Netto</th></tr>
            </thead>
            <tbody>
              {FEES_VERFAHREN.map(f => (
                <tr key={f.pos}>
                  <td className="pos">{f.pos}</td>
                  <td>
                    <div className="t">{f.title}</div>
                    <div className="d">{f.desc}</div>
                  </td>
                  <td className="u">{f.unit}</td>
                  <td className="p">{f.price}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div>
          <div className="dlg-fees__caption">
            <span className="num">B</span>
            <span>Aufwands­abhängige Positionen</span>
          </div>
          <table className="dlg-fees__t">
            <thead>
              <tr><th>Pos.</th><th>Leistung</th><th>Einheit</th><th>Netto</th></tr>
            </thead>
            <tbody>
              {FEES_AUFWAND.map(f => (
                <tr key={f.pos}>
                  <td className="pos">{f.pos}</td>
                  <td>
                    <div className="t">{f.title}</div>
                    <div className="d">{f.desc}</div>
                  </td>
                  <td className="u">{f.unit}</td>
                  <td className="p">{f.price}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="dlg-fees__example">
        <Card accent>
          <Eyebrow tone="gold">Rechen­beispiel</Eyebrow>
          <h3>Kosmetikstudio · BSO 2011 · 3 Mitarbeitende · Berlin</h3>
          <ul className="dlg-fees__calc">
            <li><span>Antrags- und Bearbeitungs­gebühr (Pos. 1.1)</span><span>180,00 €</span></li>
            <li><span>Audit-Tagessatz, 1 Tag vor Ort (Pos. 2.1)</span><span>850,00 €</span></li>
            <li><span>Vorbereitung und Bericht (Pos. 2.2)</span><span>240,00 €</span></li>
            <li><span>Reisekosten Berlin pauschal (Pos. 2.3)</span><span>95,00 €</span></li>
            <li><span>Zertifikat­ausstellung &amp; Türschild (Pos. 1.2)</span><span>150,00 €</span></li>
            <li className="sum"><span>Summe Erst­zertifizierung (3 Jahre gültig)</span><span>1 515,00 €</span></li>
            <li className="alt"><span>Ab Jahr 2 · jährliche Bestands­gebühr (Pos. 1.3)</span><span>120,00 €</span></li>
          </ul>
        </Card>
      </div>

      <div className="dlg-fees__foot">
        <Notice title="Hinweise zur Gebührenordnung"
                meta="DLG-GO-2026 · gültig ab 01.01.2026">
          Alle genannten Beträge verstehen sich zuzüglich der gesetzlichen Umsatzsteuer.
          Größere Betriebe und kombinierte Verfahren (z. B. BSO 2011 + 2079) werden individuell
          kalkuliert und vorab schriftlich beauftragt. Die Gebühren­ordnung wird mindestens einmal
          jährlich überprüft.
        </Notice>
      </div>
    </div>
  </section>
);

const FeesStyles = () => (
  <style>{`
    .dlg-fees { background: var(--dlg-navy-050); padding: 96px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .dlg-fees__head { max-width: 760px; margin: 0 0 48px; }
    .dlg-fees__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-fees__lede { font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 660px; }

    .dlg-fees__tables { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: flex-start; }
    .dlg-fees__caption { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .dlg-fees__caption .num { width: 28px; height: 28px; border-radius: 4px; background: var(--dlg-navy-700); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 15px; }
    .dlg-fees__caption span:last-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: var(--dlg-navy-800); }

    .dlg-fees__t { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
    .dlg-fees__t thead th { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dlg-gold-400); background: var(--dlg-navy-900); padding: 12px 14px; text-align: left; }
    .dlg-fees__t thead th:last-child { text-align: right; }
    .dlg-fees__t tbody td { padding: 16px 14px; vertical-align: top; border-top: 1px solid var(--border); font-size: 13.5px; }
    .dlg-fees__t tbody tr:first-child td { border-top: 0; }
    .dlg-fees__t .pos { font-family: var(--font-mono); font-size: 11.5px; color: var(--dlg-gold-700); white-space: nowrap; padding-top: 18px; width: 48px; }
    .dlg-fees__t .t { font-weight: 700; color: var(--dlg-navy-900); margin-bottom: 4px; }
    .dlg-fees__t .d { font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }
    .dlg-fees__t .u { font-size: 12px; color: var(--fg-3); width: 130px; padding-top: 18px; }
    .dlg-fees__t .p { font-family: var(--font-serif); font-weight: 700; font-size: 15.5px; color: var(--dlg-navy-900); text-align: right; white-space: nowrap; padding-top: 16px; }

    .dlg-fees__example { margin-top: 32px; }
    .dlg-fees__example h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--dlg-navy-900); margin: 10px 0 16px; letter-spacing: -0.01em; }
    .dlg-fees__calc { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
    .dlg-fees__calc li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: 14px; color: var(--dlg-navy-900); }
    .dlg-fees__calc li span:last-child { font-family: var(--font-mono); font-size: 13px; color: var(--dlg-navy-800); white-space: nowrap; }
    .dlg-fees__calc li.sum { border-top: 2px solid var(--dlg-navy-700); border-bottom: 2px solid var(--dlg-navy-700); margin-top: 6px; padding: 14px 0; font-weight: 700; }
    .dlg-fees__calc li.sum span:last-child { font-family: var(--font-serif); font-size: 18px; color: var(--dlg-navy-900); }
    .dlg-fees__calc li.alt { color: var(--fg-3); }
    .dlg-fees__calc li:last-child { border-bottom: 0; }

    .dlg-fees__foot { margin-top: 32px; }

    @media (max-width: 980px) {
      .dlg-fees__tables { grid-template-columns: 1fr; }
    }
  `}</style>
);

Object.assign(window, { Gebuehrenordnung });