// sections-b.jsx — Process, Coverage, Cases, Owner, FAQ, CTA, Footer

// ─────────────── Process / Ablauf ───────────────
function Process() {
  const steps = [
  { title: "Anfrage stellen", desc: "3-Schritt-Formular oder kurzer Anruf. Tortyp, Standort, Anzahl genügt." },
  { title: "Bestätigung + Termin", desc: "Wir melden uns am selben oder nächsten Werktag mit einem festen Termin." },
  { title: "Prüfung vor Ort", desc: "Funktions-, Sicherheits- und Sichtprüfung inkl. Verschleißteiltausch, wo vor Ort sinnvoll." },
  { title: "Digitales Protokoll", desc: "PDF-Protokoll mit Mängelliste, Fotos und Empfehlung — auditfähig, sofort archivierbar." }];

  return (
    <section id="ablauf" className="section">
      <div className="container">
        <div className="shead reveal">
          <div>
            <div className="eyebrow eyebrow--dot">Ablauf</div>
            <h2 className="h1 shead__title">Vier Schritte. Eine Pflicht abgehakt.</h2>
          </div>
          <p className="lede shead__lede">
            Wir machen aus einer formalen Pflicht etwas, das in einer Stunde Ihrer
            Wochenarbeit erledigt ist. Klare Termine, klare Doku, kein Hin und Her.
          </p>
        </div>
        <div className="steps reveal">
          {steps.map((s, i) =>
          <div key={i} className="steps__item">
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────── Coverage map — Augsburg + 150 km ───────────────
function Coverage() {
  // City pins, positioned in SVG viewBox 800x600 — relative to Augsburg ~center
  // Augsburg coordinates ~48.371N 10.898E. We hand-place nearby cities visually,
  // not geographically exact, but recognizable.
  const cities = [
  { name: "Augsburg", x: 400, y: 320, primary: true },
  { name: "München", x: 540, y: 360 },
  { name: "Ingolstadt", x: 460, y: 220 },
  { name: "Donauwörth", x: 380, y: 220 },
  { name: "Nördlingen", x: 320, y: 200 },
  { name: "Ulm", x: 220, y: 320 },
  { name: "Memmingen", x: 280, y: 430 },
  { name: "Kempten", x: 360, y: 480 },
  { name: "Garmisch-P.", x: 510, y: 500 },
  { name: "Landsberg", x: 460, y: 400 },
  { name: "Dillingen", x: 320, y: 270 },
  { name: "Krumbach", x: 280, y: 360 }];

  return (
    <section id="gebiet" className="section section--dark">
      <div className="container">
        <div className="grid g-2" style={{ gap: 56, alignItems: "center" }}>
          <div className="reveal">
            <div className="eyebrow eyebrow--dot">Einzugsgebiet</div>
            <h2 className="h1" style={{ margin: "8px 0 20px", color: "var(--paper)" }}>
              Augsburg im Zentrum. <em style={{ fontStyle: "normal", color: "var(--ink-300)" }}>150 Kilometer in jede Richtung.</em>
            </h2>
            <p className="lede" style={{ marginBottom: 24, color: "var(--ink-200)" }}>
              Wir fahren von Augsburg aus — durch Schwaben, Oberbayern, das Allgäu und bis
              an den Rand von Württemberg. Wenn Ihr Standort innerhalb dieses Radius liegt,
              kommen wir. Wenn nicht, sagen wir es ehrlich, statt zu vertrösten.
            </p>
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
              gap: 0,
              border: "1px solid var(--line-dark)",
              borderRadius: "var(--r-3)",
              overflow: "hidden",
              marginBottom: 24
            }}>
              {[
              { num: 150, suffix: " km", k: "Radius vom Standort Augsburg" },
              { num: 90, suffix: " min", prefix: "~ ", k: "Maximale Anfahrt im Kerngebiet" },
              { num: 12, suffix: "+", k: "Städte regelmäßig betreut" },
              { num: 5, suffix: " Tage", k: "Aktuelle Terminierung" }].
              map((s, i) =>
              <div key={i} style={{
                padding: 20,
                borderRight: i % 2 === 0 ? "1px solid var(--line-dark)" : "none",
                borderBottom: i < 2 ? "1px solid var(--line-dark)" : "none"
              }}>
                  <div className="mono counter" style={{ fontSize: 24, letterSpacing: "-0.02em", color: "var(--paper)", fontWeight: 500 }}
                data-count={s.num}
                data-suffix={s.suffix}
                data-prefix={s.prefix || ""}
                data-duration="1400">
                    {(s.prefix || "") + "0" + s.suffix}
                  </div>
                  <div style={{ fontSize: 13, color: "var(--ink-300)", marginTop: 4 }}>{s.k}</div>
                </div>
              )}
            </div>
            <a href="#anfrage" className="tlink">
              Ist mein Standort dabei? <IconArrow size={14} />
            </a>
          </div>

          <div className="map reveal reveal--s2" role="img" aria-label="Karte: Einzugsgebiet TP Seitz, 150 km um Augsburg">
            <div className="map__grid"></div>
            <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
              {/* outer faded radius */}
              <defs>
                <radialGradient id="g" cx="50%" cy="53%" r="50%">
                  <stop offset="0%" stopColor="rgba(245,194,0,0.18)" />
                  <stop offset="60%" stopColor="rgba(245,194,0,0.06)" />
                  <stop offset="100%" stopColor="rgba(245,194,0,0)" />
                </radialGradient>
              </defs>
              <circle cx="400" cy="320" r="240" fill="url(#g)" />
              <circle className="map__ring" cx="400" cy="320" r="240" fill="none" stroke="rgba(245,194,0,0.35)" strokeDasharray="3 5" strokeWidth="1" />
              <circle className="map__ring" cx="400" cy="320" r="160" fill="none" stroke="rgba(255,255,255,0.08)" strokeDasharray="2 4" strokeWidth="1" />

              {/* Radius label */}
              <g transform="translate(400 320)">
                <line x1="0" y1="0" x2="170" y2="-170" stroke="rgba(245,194,0,0.45)" strokeWidth="1" />
                <rect x="120" y="-200" width="100" height="22" fill="rgba(11,12,14,0.85)" stroke="rgba(245,194,0,0.45)" rx="2" />
                <text x="170" y="-184" textAnchor="middle" fill="var(--signal)"
                style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  R = 150 km
                </text>
              </g>

              {/* Cities */}
              {cities.map((c, i) =>
              <g key={i} transform={`translate(${c.x} ${c.y})`}
              className={c.primary ? "map__pin-primary" : "map__pin-secondary"}
              style={!c.primary ? { transitionDelay: 200 + i * 90 + "ms" } : undefined}>
                  {c.primary ?
                <>
                      <circle r="22" fill="rgba(245,194,0,0.18)" />
                      <circle r="10" fill="var(--signal)" />
                      <circle r="3" fill="var(--signal-ink)" />
                      <text x="0" y="32" textAnchor="middle" fill="var(--paper)"
                  style={{ fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600 }}>
                        {c.name}
                      </text>
                    </> :

                <>
                      <circle r="3.5" fill="var(--paper)" />
                      <circle r="9" fill="none" stroke="rgba(255,255,255,0.18)" />
                      <text x="0" y="22" textAnchor="middle" fill="rgba(255,255,255,0.7)"
                  style={{ fontFamily: "var(--font-sans)", fontSize: 12 }}>
                        {c.name}
                      </text>
                    </>
                }
                </g>
              )}

              {/* Compass corner */}
              <g transform="translate(740 60)" fill="rgba(255,255,255,0.5)">
                <text x="-6" y="-8" textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em" }}>N</text>
                <line x1="0" y1="-22" x2="0" y2="0" stroke="rgba(255,255,255,0.45)" strokeWidth="1" />
                <polygon points="0,-22 -3,-14 3,-14" fill="rgba(255,255,255,0.6)" />
              </g>
            </svg>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────── Cases / Referenzen ───────────────
function Cases() {
  const cases = [
  {
    tag: "Logistik · 18 Tore",
    title: "Verladezentrum, Augsburger Norden",
    body: "Pflichtprüfung 18 Sektionaltore + 2 Schnelllauftore. Federbrüche an 4 Toren vor Eintritt erkannt. Stillstand: null.",
    img: "assets/hall-exterior.png"
  },
  {
    tag: "Produktion · 6 Tore",
    title: "Mittelständischer Maschinenbau, Krumbach",
    body: "Schließkraft-Messung nach DIN EN 12453. Drei Tore in der Toleranz justiert, eins außer Toleranz — Sensorik getauscht.",
    img: "assets/monteur.png"
  },
  {
    tag: "Hausverwaltung · 4 Anlagen",
    title: "Gewerbepark München-West",
    body: "Erstmalige Auditierung aller Brandschutztüren. Sechs Türschließer ersetzt, vier Feststellanlagen freigegeben.",
    img: "assets/sliding-fire-door.png"
  }];

  return (
    <section id="referenzen" className="section">
      <div className="container">
        <div className="shead reveal">
          <div>
            <div className="eyebrow eyebrow--dot">Referenzen</div>
            <h2 className="h1 shead__title">Aus dem letzten Monat.</h2>
          </div>
          <p className="lede shead__lede">
            Wir nennen keine Kundennamen ohne ausdrückliche Freigabe — Datenschutz und
            Pflichtprüfung gehen Hand in Hand. Diese Auszüge sind real, nur anonymisiert.
          </p>
        </div>
        <div className="grid g-3">
          {cases.map((c, i) =>
          <article key={i} className={"card reveal reveal--s" + (i + 1)} style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--ink-100)" }}>
                <img src={c.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ padding: 24 }}>
                <span className="mono" style={{ fontSize: 11.5, letterSpacing: ".08em", color: "var(--fg-faint)", textTransform: "uppercase" }}>{c.tag}</span>
                <h3 className="h4" style={{ margin: "10px 0 10px" }}>{c.title}</h3>
                <p className="muted" style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55 }}>{c.body}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────── Owner / Inhaber-Block ───────────────
function Owner() {
  return (
    <section id="ueber-uns" className="section section--deep">
      <div className="container container--tight">
        <div className="grid g-2" style={{ gap: 56, alignItems: "center" }}>
          <div className="reveal" style={{ position: "relative", aspectRatio: "4/5", borderRadius: "var(--r-3)", overflow: "hidden", border: "1px solid var(--line-dark)" }}>
            <img src="assets/patric-seitz.png" alt="Patric Seitz, Inhaber TP Seitz, vor dem Firmenfahrzeug"
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%" }} />
            <div style={{ position: "absolute", left: 16, bottom: 16, color: "var(--paper)" }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: ".08em", color: "rgba(255,255,255,.65)", textTransform: "uppercase" }}>Inhaber</div>
              <div style={{ fontSize: 15, marginTop: 4 }}>Patric Seitz · Bonstetten</div>
            </div>
          </div>
          <div className="reveal reveal--s1">
            <div className="eyebrow eyebrow--dot">Inhabergeführt · Familienbetrieb</div>
            <p className="quote" style={{ color: "var(--paper)", marginBottom: 28, marginTop: 16 }}>Wir haben TP Seitz als Familienbetrieb aufgebaut, weil zu viele Firmen Tore verkaufen und den Teil danach vergessen. Wir machen nur diesen Teil - und machen ihn richtig.



            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--brand-700)", border: "1px solid rgba(255,255,255,.12)", overflow: "hidden" }}>
                <img src="assets/patric-seitz.png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 20%" }} />
              </div>
              <div>
                <div style={{ fontWeight: 500, color: "var(--paper)" }}>Patric Seitz</div>
                <div style={{ fontSize: 13, color: "var(--ink-300)" }}>Inhaber · Befähigte Person nach TRBS 1203</div>
              </div>
            </div>
            <div style={{ display: "grid", gap: 16, paddingTop: 24, borderTop: "1px solid var(--line-dark)" }}>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{ color: "var(--signal)", marginTop: 3 }}><IconCheck size={16} /></span>
                <div>
                  <div style={{ fontSize: 15, color: "var(--paper)", fontWeight: 500 }}>Familienbetrieb mit kurzen Wegen</div>
                  <div style={{ fontSize: 14, color: "var(--ink-300)" }}>Keine Niederlassungs-Bürokratie. Jeder Termin direkt mit dem Team, das ihn ausführt.</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{ color: "var(--signal)", marginTop: 3 }}><IconCheck size={16} /></span>
                <div>
                  <div style={{ fontSize: 15, color: "var(--paper)", fontWeight: 500 }}>Wir empfehlen nichts, was Sie nicht brauchen</div>
                  <div style={{ fontSize: 14, color: "var(--ink-300)" }}>Reine Prüfung &amp; Wartung — keine Neuanlagen, kein Verkaufsdruck.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────── FAQ ───────────────
function FAQ() {
  const items = [
  {
    q: "Wer muss eine Pflichtprüfung nach ASR A1.7 durchführen lassen?",
    a: "Jeder Arbeitgeber, der kraftbetätigte oder besondere Türen und Tore in seiner Arbeitsstätte betreibt. Das betrifft praktisch jeden Gewerbebetrieb mit elektrisch betätigtem Sektional-, Roll-, Schiebe- oder Brandschutztor. Maßstab ist die Arbeitsstättenverordnung in Verbindung mit der Betriebssicherheitsverordnung."
  },
  {
    q: "Wie oft ist eine Prüfung Pflicht?",
    a: "Die ASR A1.7 fordert eine Prüfung in „angemessenen Zeitabständen\u201C — in der Praxis und nach DGUV-Auslegung mindestens einmal jährlich. Bei stark beanspruchten Toren (Logistik, Mehrschicht) kann ein kürzeres Intervall geboten sein."
  },
  {
    q: "Sind Sie an einen Hersteller gebunden?",
    a: "Nein. Wir sind herstellerunabhängig und prüfen Hörmann, Novoferm, Teckentrup, Crawford, Butzbach, Alpha und alle gängigen Marken. Verschleißteile beziehen wir markenübergreifend — Standardteile haben wir oft sofort, Spezialteile bestellen wir und melden den realistischen Liefertermin transparent."
  },
  {
    q: "Was kostet eine Pflichtprüfung?",
    a: "Die Kosten richten sich nach Tor-Typ, Stückzahl und Anfahrt. Für ein typisches Sektionaltor liegt eine reine Prüfung im niedrigen dreistelligen Bereich pro Tor; Bündel ab 5 Toren werden günstiger. Ein konkretes Angebot bekommen Sie nach Foto-Einschätzung in 24 Stunden."
  },
  {
    q: "Führen Sie auch Reparaturen aus?",
    a: "Wir tauschen Verschleißteile (Federn, Seile, Rollen, Sensorik, Türschließer) und nehmen kleinere Reparaturen vor Ort vor. Meisterpflichtige Instandhaltungen — z. B. statische Eingriffe oder Schweißarbeiten am Tragwerk — führen wir bewusst nicht aus. In diesen Fällen empfehlen wir einen qualifizierten Partnerbetrieb."
  },
  {
    q: "Wie weit fahren Sie?",
    a: "150 Kilometer Luftlinie um Augsburg — das deckt den Großteil Schwabens, den Großraum München, das Allgäu, große Teile Oberbayerns und den östlichen Rand Württembergs ab. Außerhalb dieses Radius sagen wir Nein, statt Sie vertrösten zu müssen."
  },
  {
    q: "Was bekomme ich am Ende?",
    a: "Ein digitales PDF-Prüfprotokoll mit Mängelliste, Fotodokumentation, Empfehlungen und Unterschrift der befähigten Person — auditfähig, archivierbar, sofort vorzeigbar bei BG, Versicherung und Behörden."
  },
  {
    q: "Wie schnell bekomme ich einen Termin?",
    a: "Aktuell vergeben wir Termine innerhalb von rund 5 Werktagen. Wir aktualisieren diesen Wert auf der Seite — wenn er sich ändert, sehen Sie es hier."
  }];

  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section">
      <div className="container container--tight">
        <div className="shead reveal">
          <div>
            <div className="eyebrow eyebrow--dot">FAQ</div>
            <h2 className="h1 shead__title">Was Geschäftsführer und Facility Manager am häufigsten fragen.</h2>
          </div>
          <p className="lede shead__lede">
            Kurze, konkrete Antworten. Wenn etwas fehlt, schreiben Sie uns — wir nehmen es
            mit auf.
          </p>
        </div>
        <div className="faq reveal">
          {items.map((it, i) =>
          <div key={i} className={"faq__item" + (open === i ? " is-open" : "")}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="faq__sign">+</span>
              </button>
              <div className="faq__a"><p>{it.a}</p></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────── Footer ───────────────
function Footer() {
  return (
    <footer className="section section--deep section--tight" style={{ paddingBottom: 48 }}>
      <div className="container">
        <div style={{ display: "grid", gap: 48, gridTemplateColumns: "1.4fr 1fr 1fr 1fr" }} className="footer-grid">
          <div>
            <img src="assets/logo.png" alt="TP Seitz" className="logo-invert" style={{ height: 64, width: "auto", display: "block", marginBottom: 18 }} />
            <p className="muted" style={{ margin: 0, maxWidth: "38ch", fontSize: 14, lineHeight: 1.6 }}>
              Pflichtprüfung und Wartung gewerblicher Tore und Türen nach ASR A1.7.
              Herstellerunabhängig. Augsburg + 150 km.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Leistungen</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontSize: 14 }}>
              <li><a href="#leistungen" style={{ color: "var(--ink-200)" }}>Pflichtprüfung ASR A1.7</a></li>
              <li><a href="#leistungen" style={{ color: "var(--ink-200)" }}>Wartung Tore &amp; Türen</a></li>
              <li><a href="#leistungen" style={{ color: "var(--ink-200)" }}>Brandschutz-Tür-Prüfung</a></li>
              <li><a href="#leistungen" style={{ color: "var(--ink-200)" }}>Schließkraft-Messung</a></li>
              <li><a href="#leistungen" style={{ color: "var(--ink-200)" }}>Herstellerunabhängige Wartung</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Unternehmen</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontSize: 14 }}>
              <li><a href="#ueber-uns" style={{ color: "var(--ink-200)" }}>Über uns</a></li>
              <li><a href="#referenzen" style={{ color: "var(--ink-200)" }}>Referenzen</a></li>
              <li><a href="#gebiet" style={{ color: "var(--ink-200)" }}>Einzugsgebiet</a></li>
              <li><a href="impressum.html" style={{ color: "var(--ink-200)" }}>Impressum</a></li>
              <li><a href="datenschutz.html" style={{ color: "var(--ink-200)" }}>Datenschutz</a></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Kontakt</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontSize: 14, color: "var(--ink-200)" }}>
              <li className="mono"><a href="tel:+491735285068" style={{ color: "var(--ink-100)" }}>+49 173 5285068</a></li>
              <li className="mono"><a href="mailto:kontakt@tp-seitz.de" style={{ color: "var(--ink-100)" }}>kontakt@tp-seitz.de</a></li>
              <li style={{ marginTop: 6, lineHeight: 1.5 }}>
                Stauffersbergstr. 19a<br />86486 Bonstetten
              </li>
              <li className="faint" style={{ fontSize: 12.5 }}>Mo–Fr 7:00–17:00</li>
            </ul>
          </div>
        </div>
        <hr className="rule rule--dark" style={{ marginTop: 56, marginBottom: 24 }} />
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
          <small className="faint mono" style={{ fontSize: 11.5, letterSpacing: ".06em" }}>
            © {new Date().getFullYear()} TP Seitz · Ihre Sicherheit in guten Händen
          </small>
          <small className="faint mono" style={{ fontSize: 11.5, letterSpacing: ".06em" }}>
            Befähigte Person nach TRBS 1203 · BetrSichV § 2 (6)
          </small>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>);

}

Object.assign(window, { Process, Coverage, Cases, Owner, FAQ, Footer });