/* All content sections: Hero, Stats, Problem, How-it-works, Features, Industries, UseCases, Pricing, Testimonials, FAQ, CTA, Footer */

const { useState: uS, useEffect: uE } = React;

/* ---------------- NAV ---------------- */
const Nav = () => {
  const [open, setOpen] = uS(false);

  uE(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  const links = [
    "So funktioniert's",
    "Features",
    "Anwendungsfälle",
    "Services",
    "Förderung",
    "FAQ",
  ];

  return (
    <>
      <nav
        style={{
          position: "sticky",
          top: 0,
          zIndex: 50,
          background: "rgba(250,250,247,0.80)",
          backdropFilter: "blur(16px)",
          WebkitBackdropFilter: "blur(16px)",
          borderBottom: "1px solid var(--line)",
        }}
      >
        <div
          className="wrap"
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "16px 24px",
            gap: 12,
          }}
        >
          <a
            href="#"
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              flexShrink: 0,
            }}
          >
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: 8,
                background: "var(--ink)",
                color: "var(--y-400)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon name="logo-lightning" size={18} />
            </div>
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 700,
                fontSize: 17,
                letterSpacing: "-0.02em",
              }}
            >
              energieschmie.de
            </span>
          </a>
          <div
            style={{ display: "flex", gap: 28, alignItems: "center" }}
            className="nav-links"
          >
            {links.map((l) => (
              <a
                key={l}
                href="#"
                style={{
                  fontSize: 14,
                  color: "var(--ink-3)",
                  fontWeight: 500,
                  transition: "color 0.15s",
                }}
                onMouseEnter={(e) =>
                  (e.currentTarget.style.color = "var(--ink)")
                }
                onMouseLeave={(e) =>
                  (e.currentTarget.style.color = "var(--ink-3)")
                }
              >
                {l}
              </a>
            ))}
          </div>
          <div
            className="nav-cta"
            style={{ display: "flex", gap: 10, alignItems: "center" }}
          >
            <a href="#" className="btn btn-ghost btn-sm nav-login">
              Einloggen
            </a>
            <a href="#" className="btn btn-primary btn-sm">
              Demo buchen{" "}
              <Icon name="arrow-right" size={14} className="arrow" />
            </a>
          </div>
          <button
            className="nav-burger"
            aria-label={open ? "Menü schließen" : "Menü öffnen"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            style={{
              display: "none",
              width: 44,
              height: 44,
              borderRadius: 10,
              background: open ? "var(--ink)" : "var(--bg-alt)",
              color: open ? "var(--y-300)" : "var(--ink)",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
              transition: "all 0.2s var(--ease)",
            }}
          >
            <Icon name={open ? "x" : "menu"} size={22} />
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      <div
        className={`mobile-drawer ${open ? "open" : ""}`}
        aria-hidden={!open}
        onClick={() => setOpen(false)}
      >
        <div
          className="mobile-drawer-inner"
          onClick={(e) => e.stopPropagation()}
        >
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {links.map((l) => (
              <a
                key={l}
                href="#"
                onClick={() => setOpen(false)}
                style={{
                  padding: "16px 20px",
                  fontSize: 18,
                  fontFamily: "var(--font-display)",
                  fontWeight: 600,
                  color: "var(--ink)",
                  borderRadius: 12,
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                {l}
                <Icon name="arrow-right" size={16} />
              </a>
            ))}
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 10,
              marginTop: 24,
              paddingTop: 24,
              borderTop: "1px solid var(--line)",
            }}
          >
            <a
              href="#"
              onClick={() => setOpen(false)}
              className="btn btn-ghost btn-lg"
              style={{ justifyContent: "center", width: "100%" }}
            >
              Einloggen
            </a>
            <a
              href="#"
              onClick={() => setOpen(false)}
              className="btn btn-primary btn-lg"
              style={{ justifyContent: "center", width: "100%" }}
            >
              <Icon name="calendar" size={16} /> Kostenlose Live-Demo buchen
            </a>
          </div>
          <p
            style={{
              marginTop: 20,
              textAlign: "center",
              fontSize: 12,
              color: "var(--ink-4)",
            }}
          >
            Bis zu 80 % BAFA-Förderung · Zusage in 48 h
          </p>
        </div>
      </div>
    </>
  );
};

/* ---------------- HERO ---------------- */
const Hero = ({ headline, ctaLabel }) => {
  const [scanTick, setScanTick] = uS(0);
  return (
    <section
      className="section grid-bg"
      style={{
        position: "relative",
        paddingTop: 72,
        paddingBottom: 64,
        overflow: "hidden",
      }}
    >
      <div
        className="glow-y"
        style={{ width: 600, height: 600, top: -200, right: -100 }}
      />
      <div
        className="glow-y"
        style={{
          width: 400,
          height: 400,
          bottom: -100,
          left: -100,
          opacity: 0.6,
        }}
      />
      <div
        className="wrap grid-hero-row"
        style={{
          position: "relative",
          display: "grid",
          gridTemplateColumns: "1.05fr 1fr",
          gap: 64,
          alignItems: "center",
        }}
      >
        <div className="fade-up">
          <span
            className="t-eyebrow"
            style={{
              marginBottom: 22,
              display: "inline-flex",
              background: "var(--y-400)",
              color: "var(--ink)",
            }}
          >
            <Icon name="bolt" size={12} /> Nur noch wenige Plätze pro Region
          </span>
          <h1
            className="t-hero"
            style={{ margin: "0 0 22px" }}
            dangerouslySetInnerHTML={{ __html: headline }}
          />
          <p className="t-lead" style={{ maxWidth: 560, margin: "0 0 32px" }}>
            Wir zeigen dir auf einer Karte, welche{" "}
            <strong>Firmen ein großes freies Dach</strong> haben, viel Strom
            verbrauchen — und den <strong>direkten Ansprechpartner</strong>{" "}
            dazu. Du rufst an und verkaufst. Fertig.
          </p>
          <div
            style={{
              display: "flex",
              gap: 12,
              alignItems: "center",
              flexWrap: "wrap",
            }}
          >
            <a href="#" className="btn btn-primary btn-lg">
              <Icon name="calendar" size={16} /> {ctaLabel}{" "}
              <Icon name="arrow-right" size={16} className="arrow" />
            </a>
            <a href="#" className="btn btn-ghost btn-lg">
              Live-Demo ansehen
            </a>
          </div>
          <div
            style={{
              display: "flex",
              gap: 20,
              marginTop: 28,
              flexWrap: "wrap",
              fontSize: 13,
              color: "var(--ink-4)",
            }}
          >
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
            >
              <Icon name="check" size={14} style={{ color: "var(--ok)" }} /> Bis
              zu 80% Förderung
            </span>
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
            >
              <Icon name="check" size={14} style={{ color: "var(--ok)" }} />{" "}
              Unverbindliches Erstgespräch
            </span>
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
            >
              <Icon name="check" size={14} style={{ color: "var(--ok)" }} />{" "}
              DSGVO-konform
            </span>
          </div>
        </div>

        <div className="fade-up fade-d-2" style={{ position: "relative" }}>
          <div
            className="card"
            style={{
              padding: 0,
              overflow: "hidden",
              borderRadius: 28,
              boxShadow: "var(--shadow-xl)",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "12px 16px",
                borderBottom: "1px solid var(--line)",
                background: "#fff",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="badge-live">Live-Scan</span>
                <span style={{ fontSize: 12, color: "var(--ink-4)" }}>
                  Gewerbedächer ≥ 500 m² · freie Fläche · hoher Stromverbrauch
                </span>
              </div>
              <button
                onClick={() => setScanTick((t) => t + 1)}
                className="btn btn-sm"
                style={{
                  background: "var(--bg-alt)",
                  color: "var(--ink)",
                  padding: "6px 10px",
                  fontSize: 12,
                }}
              >
                <Icon name="sparkles" size={12} /> Scan neu starten
              </button>
            </div>
            <div
              style={{
                padding: 16,
                background: "linear-gradient(180deg, var(--bg) 0%, #fff 100%)",
              }}
            >
              <MapPreview variant="hero" scanTick={scanTick} />
            </div>
            <div
              style={{
                display: "flex",
                justifyContent: "space-around",
                padding: "14px 18px",
                borderTop: "1px solid var(--line)",
                background: "#fff",
              }}
            >
              {[
                { l: "Dachfläche gesamt", v: "23.7k m²" },
                { l: "Potenzial", v: "7.2 MWp" },
                { l: "Firmen", v: "42" },
              ].map((k) => (
                <div key={k.l} style={{ textAlign: "center" }}>
                  <div
                    style={{
                      fontFamily: "var(--font-stat)",
                      fontSize: 20,
                      fontWeight: 600,
                      letterSpacing: "-0.02em",
                    }}
                  >
                    {k.v}
                  </div>
                  <div
                    style={{
                      fontSize: 10,
                      color: "var(--ink-4)",
                      textTransform: "uppercase",
                      letterSpacing: "0.08em",
                      fontWeight: 600,
                    }}
                  >
                    {k.l}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Trust marquee */}
      <div className="wrap" style={{ marginTop: 80, position: "relative" }}>
        <div
          style={{
            fontSize: 12,
            color: "var(--ink-4)",
            textAlign: "center",
            textTransform: "uppercase",
            letterSpacing: "0.12em",
            fontWeight: 600,
            marginBottom: 20,
          }}
        >
          Bundesweit im Einsatz bei Installateuren &amp; Projektierern
        </div>
        <div className="marquee-mask">
          <div className="marquee">
            {[
              ..."SolarWerk Nord,Enerprojekt GmbH,PV-Hansa,SpeicherPlus AG,Voltabau,Sonnenhof Kraftwerke,Rheinenergie-Partner,Dachwerke Mitte,Terra Voltaic,NordLicht Energie,GrundLast Systems,KilowattKontor".split(
                ",",
              ),
            ]
              .concat([
                "SolarWerk Nord",
                "Enerprojekt GmbH",
                "PV-Hansa",
                "SpeicherPlus AG",
                "Voltabau",
              ])
              .map((n, i) => (
                <div
                  key={i}
                  style={{
                    fontFamily: "var(--font-display)",
                    fontWeight: 600,
                    fontSize: 17,
                    color: "var(--ink-4)",
                    letterSpacing: "-0.01em",
                    opacity: 0.7,
                  }}
                >
                  {n}
                </div>
              ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------------- STATS BAR ---------------- */
const StatsBar = () => (
  <section
    style={{
      padding: "48px 0",
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      background: "#fff",
    }}
  >
    <div
      className="wrap"
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 32,
      }}
    >
      {[
        { n: "500 m²", l: "Mindestdach", s: "deutschlandweit sichtbar" },
        { n: "48 h", l: "BAFA-Zusage", s: "statt 6–8 Wochen" },
        { n: "80 %", l: "staatliche Förderung", s: "auf das gesamte Projekt" },
        { n: "0 €", l: "Erstgespräch", s: "100 % unverbindlich" },
      ].map((s) => (
        <div
          key={s.l}
          style={{ borderLeft: "2px solid var(--y-400)", paddingLeft: 20 }}
        >
          <div className="t-stat" style={{ fontSize: 44, lineHeight: 1 }}>
            {s.n}
          </div>
          <div
            style={{
              fontSize: 14,
              fontWeight: 600,
              color: "var(--ink)",
              marginTop: 4,
            }}
          >
            {s.l}
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-4)" }}>{s.s}</div>
        </div>
      ))}
    </div>
  </section>
);

/* ---------------- PROBLEM ---------------- */
const Problem = () => (
  <section className="section" style={{ background: "var(--bg-alt)" }}>
    <div className="wrap">
      <div style={{ maxWidth: 760, marginBottom: 56 }}>
        <span className="t-eyebrow" style={{ marginBottom: 16 }}>
          Das Problem
        </span>
        <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
          Deine besten Kunden kennt jemand anderes schon.
        </h2>
        <p className="t-lead">
          Während du am Telefon 50 Absagen kassierst, stehen deine Wettbewerber
          längst bei den Firmen auf der Matte, die ein großes Dach haben und
          viel Strom brauchen. Wenn du nicht schnell bist, ist der Markt bei dir
          zu.
        </p>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 20,
        }}
      >
        {[
          {
            h: "Google Maps abklappern",
            b: "Stunden pro Lead, kein System. Du weißt weder, wie groß das Dach ist, ob schon eine Anlage drauf liegt, noch wer der Ansprechpartner ist.",
            n: "01",
          },
          {
            h: "Gekaufte Adresslisten",
            b: "Alte Daten, 90% Streuverlust, Dächer mit längst installierter PV. Du verbrennst Telefonzeit für nichts.",
            n: "02",
          },
          {
            h: "Empfehlungen abwarten",
            b: "Dein Netzwerk reicht nicht, um zu wachsen. Und jedes Projekt, das du nicht machst, macht dein Wettbewerber.",
            n: "03",
          },
        ].map((p) => (
          <div key={p.n} className="card" style={{ background: "#fff" }}>
            <div
              style={{
                fontFamily: "var(--font-stat)",
                fontSize: 14,
                color: "var(--ink-5)",
                fontWeight: 600,
                marginBottom: 16,
              }}
            >
              {p.n}
            </div>
            <h3 className="t-h3" style={{ margin: "0 0 10px" }}>
              {p.h}
            </h3>
            <p className="t-body" style={{ margin: 0 }}>
              {p.b}
            </p>
            <div
              style={{
                marginTop: 18,
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
                fontSize: 12,
                color: "var(--err)",
                fontWeight: 600,
              }}
            >
              <Icon name="x" size={14} /> Verbranntes Vertriebsbudget
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- HOW IT WORKS ---------------- */
const HowItWorks = () => (
  <section className="section">
    <div className="wrap">
      <div
        style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 56px" }}
      >
        <span className="t-eyebrow" style={{ marginBottom: 16 }}>
          So funktioniert's
        </span>
        <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
          Vom Filter zum Telefonat — in vier Schritten.
        </h2>
        <p className="t-lead">
          Du sagst uns, wo du verkaufen willst. Wir liefern dir die Firmen, bei
          denen sich der Anruf lohnt. So einfach.
        </p>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16,
          position: "relative",
        }}
      >
        {[
          {
            i: "sliders",
            h: "Region wählen",
            b: "Sag uns, in welchem Gebiet du verkaufen willst — PLZ, Umkreis, ganze Bundesländer. Wir stellen die Suche ein.",
          },
          {
            i: "map-pin",
            h: "Freie Dächer und Trafos finden",
            b: "Unsere Software zeigt dir auf einer Karte alle Firmen mit großem, leerem Dach — plus Trafostationen und die Firmen in deren Umgebung, die du für Batteriespeicher ansprechen kannst.",
          },
          {
            i: "shield-check",
            h: "Bestand wird ausgefiltert",
            b: "Dächer, auf denen schon PV liegt, fliegen automatisch raus. Du telefonierst nie ins Leere.",
          },
          {
            i: "mail",
            h: "Ansprechpartner anrufen",
            b: "Du bekommst Adresse, Firma und direkten Ansprechpartner. Du rufst an, wir haben dir die Arbeit abgenommen.",
          },
        ].map((s, i) => (
          <div key={s.h} className="card" style={{ position: "relative" }}>
            <div className="icon-tile ink" style={{ marginBottom: 18 }}>
              <Icon name={s.i} size={22} />
            </div>
            <div
              style={{
                fontFamily: "var(--font-stat)",
                fontSize: 12,
                color: "var(--ink-5)",
                fontWeight: 600,
                letterSpacing: "0.1em",
                marginBottom: 8,
              }}
            >
              SCHRITT {String(i + 1).padStart(2, "0")}
            </div>
            <h3 className="t-h3" style={{ margin: "0 0 10px" }}>
              {s.h}
            </h3>
            <p className="t-body-sm">{s.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- APP PREVIEW SECTION ---------------- */
const AppSection = () => (
  <section className="section section-dark" style={{ paddingTop: 96 }}>
    <div className="wrap" style={{ textAlign: "center", marginBottom: 48 }}>
      <span className="t-eyebrow dark" style={{ marginBottom: 16 }}>
        Live in der Software
      </span>
      <h2
        className="t-h2"
        style={{ margin: "0 0 16px", maxWidth: 780, marginInline: "auto" }}
      >
        Eine Oberfläche. Jede Firma, bei der sich dein Anruf lohnt.
      </h2>
      <p className="t-lead" style={{ maxWidth: 680, margin: "0 auto" }}>
        Karte, Liste, Dachdetails, Ansprechpartner — alles an einer Stelle. Kein
        Tab-Chaos, keine zehn Tools.
      </p>
    </div>
    <div className="wrap">
      <AppPreview />
    </div>
  </section>
);

/* ---------------- FEATURES ---------------- */
const Features = () => (
  <section className="section">
    <div className="wrap">
      <div
        className="grid-features-row"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.4fr",
          gap: 48,
          alignItems: "flex-start",
        }}
      >
        <div style={{ position: "sticky", top: 100 }}>
          <span className="t-eyebrow" style={{ marginBottom: 16 }}>
            Features
          </span>
          <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
            Alles in einem Tool. Keine drei Dienstleister, keine endlosen
            Tabellen.
          </h2>
          <p className="t-lead">
            Was sonst drei verschiedene Dienstleister machen würden, macht
            energieschmie.de in einem Durchgang — und du siehst sofort, bei
            welcher Firma sich der Anruf lohnt.
          </p>
        </div>
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
        >
          {[
            {
              i: "sun",
              h: "Freie Gewerbedächer ab 500 m²",
              b: "Wir zeigen dir nur Firmen mit großem, leerem Dach — kein Wohnhaus, kein Mini-Schuppen.",
            },
            {
              i: "calendar",
              h: "48 h BAFA-Zusage",
              b: "Du weißt innerhalb von zwei Werktagen, wie viel der Staat bezahlt — bis zu 80 % Förderung. Den Papierkram machen wir.",
            },
            {
              i: "shield-check",
              h: "PV-Bestand automatisch raus",
              b: "Dächer mit vorhandener Solaranlage werden automatisch ausgefiltert. Du telefonierst nie ins Leere.",
            },
            {
              i: "bolt",
              h: "Trafos für Batteriespeicher",
              b: "Wir zeigen dir Trafostationen und die Firmen in direkter Umgebung — perfekt, um dort Batteriespeicher oder Schwarmspeicher zu platzieren.",
            },
            {
              i: "users",
              h: "Firmen im Gebäude",
              b: "Du siehst direkt, welche Firmen dort sitzen — und wer der Ansprechpartner ist.",
            },
            {
              i: "factory",
              h: "Branchen mit hohem Verbrauch",
              b: "Wir priorisieren Industrie, Kühllager, Logistik — dort rechnet sich PV am schnellsten.",
            },
            {
              i: "download",
              h: "Export als CSV",
              b: "Spiele die Liste direkt in dein CRM oder deine Telefonsoftware ein — oder lade sie als CSV herunter und arbeite wie du willst.",
            },
            {
              i: "shield-check",
              h: "ISO 27001 &amp; DSGVO",
              b: "Daten aus amtlichen Quellen. Sicher, rechtskonform, kein KI-Training, keine Dritt-Weitergabe.",
            },
          ].map((f) => (
            <div key={f.h} className="card">
              <div className="icon-tile" style={{ marginBottom: 16 }}>
                <Icon name={f.i} size={20} />
              </div>
              <h3
                className="t-h4"
                style={{ margin: "0 0 8px" }}
                dangerouslySetInnerHTML={{ __html: f.h }}
              />
              <p
                className="t-body-sm"
                style={{ margin: 0 }}
                dangerouslySetInnerHTML={{ __html: f.b }}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ---------------- INDUSTRIES ---------------- */
const Industries = () => (
  <section className="section" style={{ background: "var(--bg-alt)" }}>
    <div className="wrap">
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          marginBottom: 40,
          gap: 32,
          flexWrap: "wrap",
        }}
      >
        <div style={{ maxWidth: 600 }}>
          <span className="t-eyebrow" style={{ marginBottom: 16 }}>
            Zielbranchen
          </span>
          <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
            Hoher Stromverbrauch = hohe Abschlussquote.
          </h2>
          <p className="t-lead">
            Die Software zeigt dir zuerst die Firmen, die viel Strom verbrauchen
            — denn genau dort lohnt sich PV und Speicher am meisten.
          </p>
        </div>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 12,
        }}
      >
        {[
          { i: "factory", h: "Industrie &amp; Fertigung", s: "1.8 GWh/a ø" },
          { i: "warehouse", h: "Logistik &amp; Lager", s: "1.2 GWh/a ø" },
          { i: "shopping-cart", h: "Handel &amp; Retail", s: "0.9 GWh/a ø" },
          { i: "building", h: "Lebensmittel &amp; Kühlung", s: "2.4 GWh/a ø" },
          { i: "layers", h: "Baustoffe &amp; Chemie", s: "2.1 GWh/a ø" },
          { i: "database", h: "Rechenzentren", s: "3.6 GWh/a ø" },
          { i: "sun", h: "Landwirtschaft", s: "0.7 GWh/a ø" },
          { i: "settings", h: "Metallverarbeitung", s: "2.9 GWh/a ø" },
        ].map((b) => (
          <div
            key={b.h}
            style={{
              background: "#fff",
              borderRadius: 16,
              padding: 20,
              border: "1px solid var(--line)",
              transition: "border-color 0.2s, transform 0.2s",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-start",
                marginBottom: 32,
              }}
            >
              <div className="icon-tile">
                <Icon name={b.i} size={18} />
              </div>
              <Icon
                name="arrow-up-right"
                size={14}
                style={{ color: "var(--ink-4)" }}
              />
            </div>
            <h3
              className="t-h4"
              style={{ margin: "0 0 4px" }}
              dangerouslySetInnerHTML={{ __html: b.h }}
            />
            <div
              style={{
                fontFamily: "var(--font-stat)",
                fontSize: 13,
                color: "var(--ink-4)",
              }}
            >
              {b.s}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- USE CASES ---------------- */
const UseCases = () => {
  const [active, setActive] = uS(0);
  const cases = [
    {
      tag: "PV-Anlagen verkaufen",
      h: "Freie Dächer bei stromhungrigen Firmen.",
      b: "Wir finden Firmen mit großem, leerem Dach und hohem Stromverbrauch. Du entscheidest: verkaufe die Anlage klassisch — oder biete ein <strong>Contracting-Modell</strong> an, bei dem du die Anlage betreibst und den Strom lieferst. Beides funktioniert.",
      kpis: [
        { n: "≥ 500 m²", l: "Mindest-Dach" },
        { n: "Hoch", l: "Stromverbrauch" },
        { n: "Direkt", l: "Ansprechpartner" },
      ],
      icon: "sun",
    },
    {
      tag: "Batteriespeicher platzieren",
      h: "Trafostationen und Firmen in der Umgebung.",
      b: "Wir zeigen dir Trafostationen und die Firmen direkt daneben. Du sprichst sie an — und verkaufst ihnen entweder einen <strong>eigenen Batteriespeicher</strong>, oder pachtest ihre Fläche für einen <strong>Schwarmspeicher</strong>, den ein Investor finanziert.",
      kpis: [
        { n: "Trafos", l: "+ umliegende Firmen" },
        { n: "Kauf", l: "oder Pacht" },
        { n: "Direkt", l: "Ansprechpartner" },
      ],
      icon: "battery",
    },
    {
      tag: "Schwarmspeicher",
      h: "Fläche pachten, Investor finanziert.",
      b: "Der Firmeninhaber verpachtet dir den Platz für einen großen Speicher, ein Investor finanziert das Ganze. Ein spannendes Geschäftsfeld — wenn das neu für dich ist, sprich im Demo-Gespräch mit uns darüber.",
      kpis: [
        { n: "Pacht", l: "statt Kauf" },
        { n: "Investor", l: "finanziert" },
        { n: "Neu?", l: "Wir erklären es" },
      ],
      icon: "layers",
    },
  ];
  const c = cases[active];
  return (
    <section className="section">
      <div className="wrap">
        <div
          style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 48px" }}
        >
          <span className="t-eyebrow" style={{ marginBottom: 16 }}>
            Anwendungsfälle
          </span>
          <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
            Ein Tool, drei Akquise-Szenarien.
          </h2>
        </div>
        <div
          style={{
            display: "flex",
            gap: 10,
            justifyContent: "center",
            flexWrap: "wrap",
            marginBottom: 32,
          }}
        >
          {cases.map((cs, i) => (
            <button
              key={cs.tag}
              onClick={() => setActive(i)}
              style={{
                padding: "12px 20px",
                borderRadius: 999,
                fontSize: 14,
                fontWeight: 500,
                background: active === i ? "var(--ink)" : "#fff",
                color: active === i ? "var(--y-300)" : "var(--ink-2)",
                border: `1px solid ${active === i ? "var(--ink)" : "var(--line-2)"}`,
                transition: "all 0.2s var(--ease)",
                display: "inline-flex",
                gap: 8,
                alignItems: "center",
              }}
            >
              <Icon name={cs.icon} size={16} /> {cs.tag}
            </button>
          ))}
        </div>
        <div
          className="card card-lg on-dark"
          style={{
            background: "var(--ink)",
            color: "#fff",
            borderColor: "transparent",
            borderRadius: 32,
          }}
        >
          <div
            className="grid-usecase-row"
            style={{
              display: "grid",
              gridTemplateColumns: "1.2fr 1fr",
              gap: 48,
              alignItems: "center",
            }}
          >
            <div>
              <span className="chip dark" style={{ marginBottom: 20 }}>
                <Icon
                  name={c.icon}
                  size={14}
                  style={{ color: "var(--y-400)" }}
                />{" "}
                {c.tag}
              </span>
              <h3
                className="t-h2"
                style={{
                  margin: "0 0 16px",
                  color: "#fff",
                  fontSize: "clamp(28px, 3vw, 42px)",
                }}
              >
                {c.h}
              </h3>
              <p
                style={{
                  color: "rgba(255,255,255,0.72)",
                  fontSize: 17,
                  lineHeight: 1.6,
                  margin: "0 0 28px",
                }}
                dangerouslySetInnerHTML={{ __html: c.b }}
              />
              <a href="#" className="btn btn-primary">
                Szenario durchspielen{" "}
                <Icon name="arrow-right" size={14} className="arrow" />
              </a>
            </div>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 10,
              }}
            >
              {c.kpis.map((k) => (
                <div
                  key={k.l}
                  style={{
                    background: "rgba(255,255,255,0.04)",
                    border: "1px solid rgba(255,255,255,0.08)",
                    borderRadius: 16,
                    padding: "22px 18px",
                  }}
                >
                  <div
                    className="t-stat"
                    style={{
                      color: "var(--y-300)",
                      fontSize: 34,
                      marginBottom: 6,
                    }}
                  >
                    {k.n}
                  </div>
                  <div
                    style={{
                      fontSize: 11,
                      color: "rgba(255,255,255,0.6)",
                      textTransform: "uppercase",
                      letterSpacing: "0.08em",
                      fontWeight: 600,
                    }}
                  >
                    {k.l}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------------- SERVICES (Direct Mail + KI-Voice) ---------------- */
const Services = () => (
  <section className="section" style={{ background: "var(--bg-alt)" }}>
    <div className="wrap">
      <div
        style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}
      >
        <span className="t-eyebrow" style={{ marginBottom: 16 }}>
          Vertrieb zu schwach? Wir machen den Kontakt.
        </span>
        <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
          Du willst nicht selbst anrufen? Übernehmen wir.
        </h2>
        <p className="t-lead">
          Kein eigener starker Vertrieb? Kein Problem. Wir sprechen deine Leads
          für dich an — klassisch per Post oder modern per KI-Anruf. Du bekommst
          am Ende fertige Termine.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {/* Direct Mailing */}
        <div className="card card-lg" style={{ background: "#fff" }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              marginBottom: 20,
            }}
          >
            <div
              style={{
                width: 48,
                height: 48,
                borderRadius: 12,
                background: "var(--y-400)",
                color: "var(--ink)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon name="mail" size={22} />
            </div>
            <span className="chip">Add-on · auf Wunsch</span>
          </div>
          <h3 className="t-h3" style={{ margin: "0 0 12px" }}>
            Direct-Mailing-Kampagne
          </h3>
          <p className="t-body" style={{ margin: "0 0 20px" }}>
            Wir drucken und verschicken persönliche Anschreiben an die
            identifizierten Firmen. Unterschrieben, mit Rückantwort-Option.
            Läuft seit Jahren — funktioniert immer noch hervorragend.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              "Anschreiben in deinem Corporate Design",
              "Versand an die identifizierten Firmenadressen",
              "Rückläufer kommen direkt zu dir",
            ].map((f) => (
              <div
                key={f}
                style={{ display: "flex", gap: 10, alignItems: "flex-start" }}
              >
                <Icon
                  name="check"
                  size={18}
                  style={{ color: "var(--ok)", flexShrink: 0, marginTop: 2 }}
                />
                <span
                  style={{ fontSize: 15, color: "var(--ink-2)" }}
                  dangerouslySetInnerHTML={{ __html: f }}
                />
              </div>
            ))}
          </div>
        </div>

        {/* KI-Voice-Agent */}
        <div
          className="card card-lg"
          style={{
            background: "var(--ink)",
            color: "#fff",
            borderColor: "transparent",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              marginBottom: 20,
            }}
          >
            <div
              style={{
                width: 48,
                height: 48,
                borderRadius: 12,
                background: "var(--y-400)",
                color: "var(--ink)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon name="sparkles" size={22} />
            </div>
            <span className="chip dark">Neu · KI-gestützt</span>
          </div>
          <h3 className="t-h3" style={{ margin: "0 0 12px", color: "#fff" }}>
            KI-Voice-Agent ruft an
          </h3>
          <p
            style={{
              color: "rgba(255,255,255,0.75)",
              fontSize: 15,
              lineHeight: 1.6,
              margin: "0 0 20px",
            }}
          >
            Unser KI-Sprachagent telefoniert automatisch deine Zielfirmen ab,
            stellt die richtigen Fragen und qualifiziert die Interessenten. Am
            Ende steht ein fertiger Termin in deinem Kalender — bereit für dein
            Angebot.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              "Automatisierte Anrufe bei qualifizierten Firmen",
              "Fertige Termine direkt in deinem Kalender",
              "Du kommst ins Gespräch — und machst das Angebot",
            ].map((f) => (
              <div
                key={f}
                style={{ display: "flex", gap: 10, alignItems: "flex-start" }}
              >
                <Icon
                  name="check"
                  size={18}
                  style={{ color: "var(--y-300)", flexShrink: 0, marginTop: 2 }}
                />
                <span
                  style={{ fontSize: 15, color: "rgba(255,255,255,0.85)" }}
                  dangerouslySetInnerHTML={{ __html: f }}
                />
              </div>
            ))}
          </div>
        </div>
      </div>

      <p
        style={{
          textAlign: "center",
          fontSize: 14,
          color: "var(--ink-3)",
          marginTop: 24,
          maxWidth: 680,
          marginInline: "auto",
        }}
      >
        Beide Services sind optional — du entscheidest, ob du selbst anrufst
        oder wir es für dich machen.
      </p>
    </div>
  </section>
);

/* ---------------- COMPARISON ---------------- */
const Comparison = () => (
  <section className="section" style={{ background: "var(--bg-alt)" }}>
    <div className="wrap-sm wrap">
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="t-eyebrow" style={{ marginBottom: 16 }}>
          Vergleich
        </span>
        <h2 className="t-h2">Adressliste vs. energieschmie.de</h2>
      </div>
      <div
        style={{
          background: "#fff",
          borderRadius: 24,
          border: "1px solid var(--line)",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr 1fr",
            padding: "18px 24px",
            background: "var(--bg-alt)",
            borderBottom: "1px solid var(--line)",
            fontSize: 12,
            fontWeight: 600,
            textTransform: "uppercase",
            letterSpacing: "0.08em",
            color: "var(--ink-4)",
          }}
        >
          <span>Kriterium</span>
          <span style={{ textAlign: "center" }}>Gekaufte Adressliste</span>
          <span style={{ textAlign: "center", color: "var(--ink)" }}>
            energieschmie.de
          </span>
        </div>
        {[
          ["Dachfläche in m²", false, true],
          ["Solar-Bestand automatisch ausgeschlossen", false, true],
          ["Trafostationen inkl. umliegender Firmen", false, true],
          ["Direkter Ansprechpartner inklusive", false, true],
          ["Bundesweite Abdeckung", false, true],
          ["BAFA-Förderung bis 80 %", false, true],
          ["Datenquelle", "unklar", "amtlich"],
        ].map((row, i) => (
          <div
            key={i}
            style={{
              display: "grid",
              gridTemplateColumns: "1.2fr 1fr 1fr",
              padding: "16px 24px",
              borderTop: i ? "1px solid var(--line)" : "none",
              alignItems: "center",
            }}
          >
            <span
              style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500 }}
              dangerouslySetInnerHTML={{ __html: row[0] }}
            />
            <span
              style={{
                textAlign: "center",
                fontSize: 14,
                color: "var(--ink-4)",
              }}
            >
              {row[1] === false ? (
                <Icon
                  name="x"
                  size={18}
                  style={{ color: "var(--err)", margin: "0 auto" }}
                />
              ) : row[1] === true ? (
                <Icon
                  name="check"
                  size={18}
                  style={{ color: "var(--ok)", margin: "0 auto" }}
                />
              ) : (
                row[1]
              )}
            </span>
            <span
              style={{
                textAlign: "center",
                fontSize: 14,
                color: "var(--ink)",
                fontWeight: 500,
              }}
            >
              {row[2] === true ? (
                <Icon
                  name="check"
                  size={18}
                  style={{ color: "var(--ok)", margin: "0 auto" }}
                />
              ) : (
                row[2]
              )}
            </span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- FUNDING ---------------- */
const Funding = () => (
  <section className="section">
    <div className="wrap">
      <div
        style={{ textAlign: "center", maxWidth: 760, margin: "0 auto 56px" }}
      >
        <span className="t-eyebrow" style={{ marginBottom: 16 }}>
          Förderung
        </span>
        <h2 className="t-h2" style={{ margin: "0 0 16px" }}>
          Bis zu{" "}
          <span style={{ color: "var(--y-500)" }}>80 % BAFA-Förderung</span> —
          Zusage in 48 Stunden.
        </h2>
        <p className="t-lead">
          Die BAFA fördert das Ganze mit bis zu 80 %. Innerhalb von{" "}
          <strong>48 Stunden</strong> bekommst du eine verbindliche Zusage —
          nicht nach sechs bis acht Wochen. Und den kompletten Papierkram
          übernehmen wir für dich.
        </p>
      </div>

      <div
        className="card card-lg grid-funding-row on-dark"
        style={{
          background: "var(--ink)",
          color: "#fff",
          borderColor: "transparent",
          borderRadius: 32,
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 48,
          alignItems: "center",
        }}
      >
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              marginBottom: 18,
            }}
          >
            <div
              style={{
                width: 42,
                height: 42,
                borderRadius: 12,
                background: "var(--y-400)",
                color: "var(--ink)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon name="shield-check" size={22} />
            </div>
            <span className="chip dark">
              BAFA-Förderung · offizielles Bundesprogramm
            </span>
          </div>
          <h3
            className="t-h2"
            style={{
              margin: "0 0 16px",
              color: "#fff",
              fontSize: "clamp(26px, 2.6vw, 36px)",
            }}
          >
            Du zahlst nur einen Bruchteil — den Rest übernimmt die BAFA.
          </h3>
          <p
            style={{
              color: "rgba(255,255,255,0.72)",
              fontSize: 16,
              lineHeight: 1.6,
              margin: "0 0 24px",
            }}
          >
            Die BAFA fördert dein Projekt mit bis zu 80 %. Du bekommst in{" "}
            <strong>48 Stunden</strong> eine Zusage — und wir{" "}
            <strong>machen den kompletten Papierkram für dich</strong>. Antrag,
            Nachweise, Kommunikation mit der Förderstelle — alles bei uns.
          </p>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 10,
              marginBottom: 28,
            }}
          >
            {[
              "<strong>48 Stunden</strong> bis zur BAFA-Zusage",
              "<strong>Null Papierkram</strong> — wir kümmern uns um Antrag und Nachweise",
              "Kombinierbar mit Digitalisierungs-Boni",
            ].map((f) => (
              <div
                key={f}
                style={{ display: "flex", gap: 10, alignItems: "flex-start" }}
              >
                <Icon
                  name="check"
                  size={18}
                  style={{ color: "var(--y-300)", flexShrink: 0, marginTop: 2 }}
                />
                <span
                  style={{ fontSize: 15, color: "rgba(255,255,255,0.85)" }}
                  dangerouslySetInnerHTML={{ __html: f }}
                />
              </div>
            ))}
          </div>
          <a href="#" className="btn btn-primary">
            <Icon name="calendar" size={16} /> Förderung prüfen lassen{" "}
            <Icon name="arrow-right" size={14} className="arrow" />
          </a>
        </div>

        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
        >
          {[
            { n: "80 %", l: "maximale Förderquote" },
            { n: "48 h", l: "BAFA-Zusage" },
            { n: "KMU", l: "antragsberechtigt" },
            { n: "Null", l: "Papierkram für dich" },
          ].map((k) => (
            <div
              key={k.l}
              style={{
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.08)",
                borderRadius: 16,
                padding: "22px 18px",
              }}
            >
              <div
                className="t-stat"
                style={{ color: "var(--y-300)", fontSize: 30, marginBottom: 6 }}
                dangerouslySetInnerHTML={{ __html: k.n }}
              />
              <div
                style={{
                  fontSize: 11,
                  color: "rgba(255,255,255,0.6)",
                  textTransform: "uppercase",
                  letterSpacing: "0.08em",
                  fontWeight: 600,
                }}
                dangerouslySetInnerHTML={{ __html: k.l }}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ---------------- TESTIMONIALS ---------------- */
const Testimonials = () => (
  <section className="section" style={{ background: "var(--bg-alt)" }}>
    <div className="wrap">
      <div
        style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 48px" }}
      >
        <span className="t-eyebrow" style={{ marginBottom: 16 }}>
          Stimmen
        </span>
        <h2 className="t-h2">Warum Teams wechseln.</h2>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 16,
        }}
      >
        {[
          {
            a: "MS",
            n: "Markus Schubert",
            r: "Geschäftsführer, SolarWerk Nord",
            q: "Wir haben unsere Pipeline in 8 Wochen verdreifacht. Das Tool ersetzt zwei Vertriebsmitarbeiter — sauber.",
          },
          {
            a: "JK",
            n: "Jana Kellermann",
            r: "Head of Sales, SpeicherPlus AG",
            q: "Endlich eine saubere Quelle für Trafos und die Firmen drumherum. Unsere Schwarmspeicher-Quote ist durch die Decke gegangen.",
          },
          {
            a: "TR",
            n: "Thomas Römer",
            r: "Inhaber, Enerprojekt GmbH",
            q: "Keine gekauften Listen mehr. Keine Überraschungen vor Ort. Wir rufen an, das Dach passt, das Gespräch läuft.",
          },
        ].map((t) => (
          <div key={t.n} className="card" style={{ background: "#fff" }}>
            <div style={{ display: "flex", gap: 4, marginBottom: 14 }}>
              {Array.from({ length: 5 }).map((_, i) => (
                <svg
                  key={i}
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="var(--y-400)"
                >
                  <path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5l7-.5z" />
                </svg>
              ))}
            </div>
            <p
              style={{
                fontFamily: "var(--font-display)",
                fontSize: 17,
                lineHeight: 1.5,
                color: "var(--ink)",
                margin: "0 0 24px",
                letterSpacing: "-0.01em",
              }}
              dangerouslySetInnerHTML={{ __html: `„${t.q}“` }}
            />
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 12,
                paddingTop: 14,
                borderTop: "1px solid var(--line)",
              }}
            >
              <div
                style={{
                  width: 38,
                  height: 38,
                  borderRadius: 999,
                  background: "var(--ink)",
                  color: "var(--y-300)",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontSize: 13,
                  fontWeight: 600,
                }}
              >
                {t.a}
              </div>
              <div>
                <div
                  style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}
                >
                  {t.n}
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-4)" }}>{t.r}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------- FAQ ---------------- */
const FAQ = () => {
  const [open, setOpen] = uS(0);
  const items = [
    {
      q: "Was macht energieschmie.de genau?",
      a: "Wir zeigen dir auf einer Karte alle Firmen, die ein großes freies Dach haben, viel Strom verbrauchen und bei denen sich PV oder ein Batteriespeicher lohnt. Inklusive Ansprechpartner. Du rufst an — oder lässt uns anrufen — und verkaufst.",
    },
    {
      q: "Welche Verkaufsmodelle kann ich anbieten?",
      a: "Das entscheidest du: Du kannst die PV-Anlage klassisch verkaufen oder ein Contracting-Modell anbieten (du betreibst, lieferst den Strom). Bei Batteriespeichern verkaufst du entweder direkt an die Firma — oder du platzierst einen Schwarmspeicher (du pachtest die Fläche, ein Investor finanziert den Speicher). Wenn Schwarmspeicher neu für dich sind, erklären wir dir das Konzept im Demo-Gespräch.",
    },
    {
      q: "Woher kommen die Dachdaten?",
      a: "Aus amtlichen Geodaten und weiteren offiziellen Quellen. Wir zeigen dir die Dachfläche in m² und filtern für dich nur Gebäude heraus, bei denen sich PV wirklich rechnet.",
    },
    {
      q: "Wie stellt ihr sicher, dass noch keine PV-Anlage auf dem Dach liegt?",
      a: "Wir gleichen mehrere Quellen ab: das Marktstammdatenregister der Bundesnetzagentur, zusätzliche Geoportale und Datenbanken, plus aktuelle Luftaufnahmen und Satellitenbilder. Gebäude mit bestehender Anlage fliegen automatisch raus. Du telefonierst nie ins Leere.",
    },
    {
      q: "Was bekomme ich an Kontaktdaten?",
      a: "Die Adresse des Gebäudes und die Namen aller Firmen, die dort sitzen — plus direkten Ansprechpartner. Alles sofort nutzbar für Anrufe oder Direct Mailing.",
    },
    {
      q: "Wie funktioniert das mit den Trafostationen?",
      a: "Wir zeigen dir auf der Karte Trafostationen und die Firmen drumherum. Du sprichst die Firmen an und verkaufst ihnen entweder einen eigenen Batteriespeicher — oder pachtest ihre Fläche, um dort einen Schwarmspeicher zu platzieren, den ein Investor finanziert. Du entscheidest, welches Modell zu dir passt.",
    },
    {
      q: "Was, wenn mein Vertrieb nicht stark genug ist?",
      a: "Dann übernehmen wir. Wir machen für dich Direct-Mailing-Kampagnen oder lassen unseren KI-Voice-Agenten automatisch Anrufe tätigen. Am Ende bekommst du fertige Termine, zu denen du nur noch dein Angebot machen musst.",
    },
    {
      q: "Wie lange dauert die BAFA-Förderung?",
      a: "Innerhalb von 48 Stunden bekommst du die Zusage der BAFA — statt wie sonst sechs bis acht Wochen zu warten. Du musst dich um nichts kümmern: Antrag, Nachweise und die komplette Kommunikation mit der BAFA übernehmen wir für dich. Du unterschreibst einmal, den Rest machen wir.",
    },
    {
      q: "Warum ist die Platzanzahl begrenzt?",
      a: "Wir vergeben pro Region nur eine begrenzte Anzahl Lizenzen, damit sich unsere Kunden nicht gegenseitig die Leads wegnehmen. Wer zuerst da ist, hat den Markt. Meld dich jetzt, bevor dein Wettbewerber es tut.",
    },
  ];
  return (
    <section className="section">
      <div className="wrap wrap-sm">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span className="t-eyebrow" style={{ marginBottom: 16 }}>
            Häufige Fragen
          </span>
          <h2 className="t-h2">Das Wichtigste in Kürze.</h2>
        </div>
        {items.map((it, i) => (
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
            <button
              className="faq-btn"
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <span
                style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 17,
                  fontWeight: 600,
                  color: "var(--ink)",
                }}
              >
                {it.q}
              </span>
              <span className="plus">
                <Icon name="plus" size={16} />
              </span>
            </button>
            <div
              className="faq-panel"
              style={{ maxHeight: open === i ? 300 : 0 }}
            >
              <div
                className="faq-panel-inner"
                dangerouslySetInnerHTML={{ __html: it.a }}
              />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ---------------- FINAL CTA ---------------- */
const FinalCTA = ({ ctaLabel }) => (
  <section
    className="section section-dark grid-bg-dark"
    style={{ position: "relative", overflow: "hidden" }}
  >
    <div
      className="glow-y"
      style={{
        width: 700,
        height: 700,
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        opacity: 0.25,
      }}
    />
    <div
      className="wrap"
      style={{
        position: "relative",
        textAlign: "center",
        maxWidth: 760,
        margin: "0 auto",
      }}
    >
      <span className="t-eyebrow dark" style={{ marginBottom: 20 }}>
        Jetzt starten
      </span>
      <h2
        className="t-h2"
        style={{ margin: "0 0 20px", fontSize: "clamp(36px, 5vw, 64px)" }}
      >
        Nur noch <span style={{ color: "var(--y-300)" }}>wenige Plätze</span>{" "}
        verfügbar.
      </h2>
      <p
        className="t-lead"
        style={{ margin: "0 0 32px", maxWidth: 620, marginInline: "auto" }}
      >
        Wir vergeben pro Region nur eine begrenzte Anzahl Lizenzen. Wer zuerst
        startet, hat den Markt — und bekommt bis zu 80 % Förderung in 48
        Stunden. Lass dir die Software jetzt kostenlos zeigen. Unverbindlich.
      </p>
      <div
        style={{
          display: "flex",
          gap: 12,
          justifyContent: "center",
          flexWrap: "wrap",
        }}
      >
        <a href="#" className="btn btn-primary btn-lg">
          <Icon name="calendar" size={16} /> {ctaLabel}{" "}
          <Icon name="arrow-right" size={16} className="arrow" />
        </a>
        <a
          href="#"
          className="btn btn-lg"
          style={{
            background: "rgba(255,255,255,0.08)",
            color: "#fff",
            border: "1px solid rgba(255,255,255,0.18)",
          }}
        >
          Platz reservieren
        </a>
      </div>
      <div
        style={{ marginTop: 28, fontSize: 13, color: "rgba(255,255,255,0.5)" }}
      >
        100 % kostenlos · unverbindlich · persönliches Beratungsgespräch
      </div>
    </div>
  </section>
);

/* ---------------- FOOTER ---------------- */
const Footer = () => (
  <footer
    style={{
      background: "var(--bg-dark)",
      color: "rgba(255,255,255,0.6)",
      padding: "64px 0 32px",
      borderTop: "1px solid rgba(255,255,255,0.08)",
    }}
  >
    <div className="wrap">
      <div
        className="grid-footer-row"
        style={{
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr 1fr 1fr",
          gap: 40,
          marginBottom: 40,
        }}
      >
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 10,
              marginBottom: 16,
            }}
          >
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: 8,
                background: "var(--y-400)",
                color: "var(--ink)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon name="logo-lightning" size={18} />
            </div>
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 700,
                fontSize: 17,
                color: "#fff",
              }}
            >
              energieschmie.de
            </span>
          </div>
          <p
            style={{
              fontSize: 14,
              lineHeight: 1.55,
              maxWidth: 320,
              color: "rgba(255,255,255,0.55)",
            }}
          >
            Akquise-Software für Photovoltaik- und Batteriespeicher-Anbieter im
            gewerblichen Bereich. Made in Germany.
          </p>
        </div>
        {[
          {
            h: "Produkt",
            l: [
              "Dach-Scan",
              "Trafo-Scan",
              "Schwarmspeicher",
              "Direct-Mailing",
              "KI-Voice-Agent",
              "Förderung",
            ],
          },
          {
            h: "Unternehmen",
            l: ["Über uns", "Team", "Karriere", "Blog", "Kontakt"],
          },
          {
            h: "Rechtliches",
            l: ["Impressum", "Datenschutz", "AGB", "DSGVO", "Status"],
          },
        ].map((col) => (
          <div key={col.h}>
            <div
              style={{
                fontSize: 12,
                color: "rgba(255,255,255,0.4)",
                textTransform: "uppercase",
                letterSpacing: "0.1em",
                fontWeight: 600,
                marginBottom: 14,
              }}
            >
              {col.h}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {col.l.map((i) => (
                <a
                  key={i}
                  href="#"
                  style={{ fontSize: 14, color: "rgba(255,255,255,0.65)" }}
                >
                  {i}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingTop: 24,
          borderTop: "1px solid rgba(255,255,255,0.08)",
          fontSize: 12,
          color: "rgba(255,255,255,0.4)",
        }}
      >
        <span>© 2026 energieschmie.de · Alle Rechte vorbehalten</span>
        <span>Made with ⚡ in Deutschland</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav,
  Hero,
  StatsBar,
  Problem,
  HowItWorks,
  AppSection,
  Features,
  Industries,
  UseCases,
  Services,
  Comparison,
  Funding,
  Testimonials,
  FAQ,
  FinalCTA,
  Footer,
});
