// sections-a.jsx — Header, Hero, Trust, ASR-A1.7 risk-block, Services
// Industrial premium · German B2B · TP Seitz

// ─────────────── Header ───────────────
function Header({ onCtaClick }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"hdr" + (scrolled ? " is-scrolled" : "")}>
      <div className="container">
        <div className="hdr__row">
          <a href="#top" className="brand" aria-label="TP Seitz Startseite">
            <img src="assets/logo.png" alt="TP Seitz — Ihre Sicherheit in guten Händen" className="brand__logo" />
            <span className="brand__sub">Pflichtprüfung &amp;<br />Wartung nach ASR A1.7</span>
          </a>
          <nav className="nav" aria-label="Hauptnavigation">
            <a href="#leistungen">Leistungen</a>
            <a href="#pflicht">Pflichtprüfung</a>
            <a href="#ablauf">Ablauf</a>
            <a href="#gebiet">Einzugsgebiet</a>
            <a href="#faq">FAQ</a>
          </nav>
          <div className="hdr__cta">
            <a href="tel:+491735285068" className="hdr__tel" aria-label="Direkt anrufen">
              <span>+49&nbsp;173&nbsp;5285068</span>
            </a>
            <button className="btn btn--dark btn--sm" onClick={onCtaClick} style={{ backgroundColor: "rgb(6, 30, 64)" }}>
              Termin anfragen <IconArrow size={14} />
            </button>
          </div>
        </div>
      </div>
    </header>);

}

// ─────────────── Hero (3 copy variants via t.heroVariant) ───────────────
const HERO_COPY = {
  compliance: {
    eyebrow: "Pflichtprüfung · ASR A1.7",
    checks: ["Tore & Türen geprüft", "Sauber protokolliert"],
    welcome: "Willkommen bei TP Seitz.",
    lede: "Pflichtprüfung und Wartung gewerblicher Tore und Türen nach ASR A1.7 — herstellerunabhängig, im Raum Augsburg + 150 km. Mit digitalem Prüfprotokoll, das jedem Audit standhält."
  },
  capacity: {
    eyebrow: "Aktuell freie Termine",
    pre: "Pflichtprüfung Ihrer Tore.",
    hl: "In den nächsten 5 Werktagen",
    post: "vor Ort.",
    lede: "Unsere Auftragsbücher haben gerade Luft — und Ihre Tore haben gerade Wartungsbedarf. Pflichtprüfung nach ASR A1.7, herstellerunabhängig, im Raum Augsburg + 150 km. Inklusive digitalem Prüfprotokoll."
  },
  independent: {
    eyebrow: "Herstellerunabhängig · Alle Marken",
    pre: "Wir prüfen jedes Tor.",
    hl: "Egal welcher Hersteller.",
    post: "",
    lede: "Hörmann, Novoferm, Teckentrup, Crawford, Butzbach, Alpha — wir kennen sie alle und prüfen sie nach demselben Standard. Pflichtprüfung nach ASR A1.7 im Raum Augsburg + 150 km, ohne Marken-Bindung."
  }
};

function Hero({ variant = "compliance", onCtaClick }) {
  const c = HERO_COPY[variant] || HERO_COPY.compliance;
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero__inner">
          <div>
            <div className="eyebrow eyebrow--dot">{c.eyebrow}</div>
            {c.checks ? (
              <h1 className="display hero__title hero__title--anim">
                {c.checks.map((line, i) => (
                  <span key={i} className="hero-anim__line" style={{ "--d": (0.2 + i * 1.6) + "s" }}>
                    <span className="hero-anim__text">{line}</span>
                    <svg className="hero-anim__check" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M4 12.5l5 5L20 7" />
                    </svg>
                  </span>
                ))}
                {c.welcome && (
                  <span className="hero-anim__welcome" style={{ "--d": (0.2 + c.checks.length * 1.6 + 0.4) + "s" }}>
                    {c.welcome}
                  </span>
                )}
              </h1>
            ) : (
              <h1 className="display hero__title">
                {c.pre}{c.pre && " "}
                <span className="hl">{c.hl}</span>
                {c.post && " "}{c.post}
              </h1>
            )}
            <p className="lede hero__lede">{c.lede}</p>
            <div className="hero__ctas">
              <button className="btn btn--primary btn--lg" onClick={onCtaClick}>
                Prüftermin anfragen <IconArrow size={16} className="arr" />
              </button>
              <a href="#pflicht" className="btn btn--ghost btn--lg">
                Was ist ASR A1.7?
              </a>
            </div>

            <div className="hero__meta">
              <div>
                <div className="hero__meta__k">Einzugsgebiet</div>
                <div className="hero__meta__v">Augsburg <small>+ 150 km</small></div>
              </div>
              <div>
                <div className="hero__meta__k">Marken</div>
                <div className="hero__meta__v">Unabhängig <small>alle Hersteller</small></div>
              </div>
              <div>
                <div className="hero__meta__k">Verfügbarkeit</div>
                <div className="hero__meta__v" style={{ fontFamily: "Geist" }}>5 Werktage <small>aktuell</small></div>
              </div>
            </div>
          </div>

        </div>

        <div className="hero__banner">
          <img src="assets/photo-4.png" alt="TP Seitz Monteur an einem Industrie-Schiebetor vor einer Gewerbehalle" />
          <div className="hero__banner__tag">Vor-Ort-Prüfung läuft</div>
          <div className="hero__banner__caption">
            <b>Funktionsprüfung Schiebetor</b> · Logistikobjekt im Augsburger Norden
          </div>
        </div>

        <div className="hero__strip">
          <Logos />
        </div>
      </div>
    </section>);

}

// ─────────────── Trust / Logos ───────────────
function Logos() {
  // Placeholder logo strip — replace with real freigegebene Logos
  const items = [
  "DEKRA-anerkannte Sachkunde",
  "TRBS 1203 befähigt",
  "BG ETEM gelistet",
  "Innung Augsburg",
  "VDS-konform",
  "DGUV 208-022"];

  return (
    <div className="reveal">
      <div className="eyebrow" style={{ marginBottom: 20 }}>Sachkunde &amp; Regelwerke</div>
      <div className="logos">
        {items.map((x, i) =>
        <div key={i} className={"logos__item reveal reveal--s" + (i % 6 + 1)}>{x}</div>
        )}
      </div>
    </div>);

}

// ─────────────── ASR-A1.7 risk block ───────────────
function Pflicht() {
  return (
    <section id="pflicht" className="section section--deep">
      <div className="container">
        <div className="shead reveal">
          <div>
            <div className="eyebrow eyebrow--dot">§ ASR A1.7</div>
            <h2 className="h1 shead__title">Warum eine fehlende Prüfung teurer ist als Sie denken.</h2>
          </div>
          <p className="lede shead__lede">
            Die ASR A1.7 verpflichtet jeden Arbeitgeber, kraftbetätigte und besondere Türen
            und Tore in der Arbeitsstätte regelmäßig durch eine befähigte Person prüfen zu
            lassen. „Regelmäßig" heißt in der Praxis: jährlich, dokumentiert, nachweisbar.
            Ohne Protokoll keine Betriebssicherheit, keine Versicherungsdeckung, keine Audit-Freigabe.
          </p>
        </div>

        <div className="grid g-3">
          <div className="card card--dark reveal reveal--s1">
            <div className="card__num">01 Recht</div>
            <h3 className="h4" style={{ marginTop: 8, marginBottom: 12 }}>Bußgeld bis 25.000 €</h3>
            <p className="muted" style={{ margin: 0, fontSize: 14.5 }}>
              Verstoß gegen die Betriebssicherheitsverordnung wird als Ordnungswidrigkeit
              geahndet — in schwereren Fällen mit persönlicher Haftung des Verantwortlichen
              nach § 9 OWiG.
            </p>
          </div>
          <div className="card card--dark reveal reveal--s2">
            <div className="card__num">02 Versicherung</div>
            <h3 className="h4" style={{ marginTop: 8, marginBottom: 12 }}>Leistungskürzung im Schadensfall</h3>
            <p className="muted" style={{ margin: 0, fontSize: 14.5 }}>
              Ohne lückenloses Prüfprotokoll kann die Berufsgenossenschaft Regress nehmen
              und Versicherer Leistungen kürzen — schon bei kleinen Personenschäden an
              kraftbetätigten Toren.
            </p>
          </div>
          <div className="card card--dark reveal reveal--s3">
            <div className="card__num">03 Betrieb</div>
            <h3 className="h4" style={{ marginTop: 8, marginBottom: 12 }}>Stillstand zur Unzeit</h3>
            <p className="muted" style={{ margin: 0, fontSize: 14.5 }}>
              80 % der Tor-Ausfälle, die wir sehen, hätten eine Prüfung 12 Monate vorher
              erkannt. Ein blockiertes Verladetor kostet pro Stunde deutlich mehr als ein
              ganzer Wartungsvertrag.
            </p>
          </div>
        </div>

        <div className="grid g-2" style={{ marginTop: 64, gap: 48, alignItems: "center" }}>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 16 }}>Was wir tatsächlich tun</div>
            <h3 className="h2" style={{ margin: "0 0 20px", color: "var(--paper)" }}>
              Eine Prüfung, kein Verkaufsgespräch.
            </h3>
            <p className="lede" style={{ marginBottom: 24, color: "var(--ink-200)" }}>
              Wir prüfen sicherheitsrelevante Funktionen, dokumentieren den Zustand und
              tauschen Verschleißteile, wenn das vor Ort sinnvoll ist. Wir tauschen kein
              ganzes Tor, wenn es eine Feder ist. Und wir verkaufen Ihnen kein neues System,
              wenn das alte läuft.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
              {[
              "Sichtprüfung Tragwerk, Federn, Seile, Antrieb, Steuerung",
              "Funktionsprüfung Sicherheitssensorik (Lichtschranke, Schließkante, Not-Aus)",
              "Messung Schließkräfte gemäß DIN EN 12453",
              "Wartung beweglicher Teile, Tausch gängiger Verschleißteile vor Ort",
              "Digitales Prüfprotokoll inkl. Mängelliste und Foto-Doku"].
              map((x, i) =>
              <li key={i} style={{ display: "flex", gap: 12, fontSize: 15 }}>
                  <span style={{ color: "var(--signal)", marginTop: 4 }}>
                    <IconCheck size={16} />
                  </span>
                  <span style={{ color: "var(--ink-100)" }}>{x}</span>
                </li>
              )}
            </ul>
          </div>
          <div className="reveal reveal--s2" style={{
            position: "relative",
            aspectRatio: "4/3",
            borderRadius: "var(--r-3)",
            overflow: "hidden",
            border: "1px solid var(--line-dark)"
          }}>
            <img src="assets/photo-5.png" alt="Brandschutztür mit Türschließer und elektrischer Schaltung — typisches Prüfobjekt"
            style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{
              position: "absolute", left: 16, bottom: 16, right: 16,
              display: "flex", flexWrap: "wrap", gap: 8
            }}>
              <span className="pill"><span className="dot dot--alarm"></span> Brandschutz-Tür</span>
              <span className="pill"><span className="dot"></span> Türschließer prüfpflichtig</span>
              <span className="pill"><span className="dot dot--live"></span> Status: geprüft</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────── Services / Leistungen ───────────────
function Services() {
  const items = [
  {
    icon: <IconClipboard size={22} />,
    title: "Jährliche Pflichtprüfung",
    desc: "Vollständige Funktions- und Sicherheitsprüfung nach ASR A1.7 mit digitalem Protokoll.",
    tag: "Pflicht · jährlich"
  },
  {
    icon: <IconCog size={22} />,
    title: "Wartung kraftbetätigter Tore",
    desc: "Schmierung, Justage, Verschleißteiltausch — bevor das Tor steht, nicht danach.",
    tag: "1–4× pro Jahr"
  },
  {
    icon: <IconFlame size={22} />,
    title: "Brandschutz-Türen & -Tore",
    desc: "Funktions- und Schließprüfung von T30/T90, RS-Türen, Türschließern und Feststellanlagen.",
    tag: "DIBt-konform"
  },
  {
    icon: <IconShield size={22} />,
    title: "Schließkraft-Messung",
    desc: "Messung und Justage gemäß DIN EN 12453 — die häufigste Mängelursache im Audit.",
    tag: "DIN EN 12453"
  },
  {
    icon: <IconWrench size={22} />,
    title: "Kleinreparatur vor Ort",
    desc: "Federn, Seile, Sensorik, Steuerungselektronik — herstellerunabhängig, soweit nicht meisterpflichtig.",
    tag: "Nicht meisterpflichtig"
  },
  {
    icon: <IconBolt size={22} />,
    title: "Ersatzteile herstellerunabhängig",
    desc: "Wir beziehen Verschleißteile markenübergreifend — ohne Bindung an einen einzelnen Hersteller-Vertrieb.",
    tag: "Marken-unabhängig"
  }];

  return (
    <section id="leistungen" className="section">
      <div className="container">
        <div className="shead reveal">
          <div>
            <div className="eyebrow eyebrow--dot">Leistungen</div>
            <h2 className="h1 shead__title">Was wir machen — und was bewusst nicht.</h2>
          </div>
          <p className="lede shead__lede">
            Wir prüfen und warten gewerbliche Tore und Türen. Wir verkaufen keine neuen
            Toranlagen und führen keine meisterpflichtigen Instandhaltungen aus. Das macht
            uns schnell, neutral und unabhängig — und Ihr Prüfprotokoll ist nie ein verkapptes Angebot.
          </p>
        </div>

        <div className="grid g-3">
          {items.map((it, i) =>
          <div key={i} className={"card reveal reveal--s" + (i % 6 + 1)}>
              <div className="card__icon">{it.icon}</div>
              <h3 className="h4" style={{ margin: "0 0 8px" }}>{it.title}</h3>
              <p className="muted" style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55 }}>{it.desc}</p>
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--fg-faint)", letterSpacing: ".06em", textTransform: "uppercase" }}>
                  {it.tag}
                </span>
              </div>
            </div>
          )}
        </div>

        <div style={{
          marginTop: 48,
          padding: "28px 32px",
          border: "1px solid var(--line)",
          borderRadius: "var(--r-3)",
          background: "var(--ink-50)",
          display: "flex",
          flexWrap: "wrap",
          gap: 24,
          alignItems: "center",
          justifyContent: "space-between"
        }}>
          <div style={{ maxWidth: "60ch" }}>
            <strong style={{ display: "block", fontSize: 17, letterSpacing: "-0.01em", marginBottom: 6 }}>
              Sie sind sich nicht sicher, was bei Ihnen prüfpflichtig ist?
            </strong>
            <span className="muted" style={{ fontSize: 14.5 }}>
              Schicken Sie uns ein Foto Ihrer Tore — wir sagen Ihnen kostenlos, was ASR A1.7
              für Sie konkret bedeutet und welche Prüfungen tatsächlich nötig sind.
            </span>
          </div>
          <a href="#anfrage" className="btn btn--dark">
            Kostenlose Einschätzung <IconArrow size={14} className="arr" />
          </a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Header, Hero, Logos, Pflicht, Services });