// app.jsx — root composition + Tweaks panel
// TP Seitz landing — production-quality React app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "stahlblau",
  "heroVariant": "compliance",
  "darkSections": true,
  "showMobileBar": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  "stahlblau":     { signal: "#0C4E97", signalInk: "#F2F6FC", label: "Stahlblau" },
  "signal-yellow": { signal: "#F5C200", signalInk: "#1A1500", label: "Signal-Gelb" },
  "anthrazit":     { signal: "#1C1E23", signalInk: "#FAFAF7", label: "Anthrazit" },
  "cobalt":        { signal: "#2E5BFF", signalInk: "#F4F6FF", label: "Cobalt" },
  "ember":         { signal: "#E25A1C", signalInk: "#1A0700", label: "Ember" }
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useMotion();

  // Apply accent live via CSS var override + body data-attr (drives dark-section overrides)
  React.useEffect(() => {
    const a = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS["anthrazit"];
    document.documentElement.style.setProperty("--signal", a.signal);
    document.documentElement.style.setProperty("--signal-ink", a.signalInk);
    document.body.setAttribute("data-accent", t.accent);
  }, [t.accent]);

  const wizardRef = React.useRef(null);
  const scrollToWizard = () => {
    const el = document.getElementById("anfrage");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <Header onCtaClick={scrollToWizard} />
      <main>
        <Hero variant={t.heroVariant} onCtaClick={scrollToWizard} />
        <Pflicht />
        <Services />
        <Process />
        <Coverage />
        <Cases />
        <Owner />
        <Wizard />
        <FAQ />
        <CtaCloser onCtaClick={scrollToWizard} />
      </main>
      <Footer />

      {t.showMobileBar && <MobileBar onCtaClick={scrollToWizard} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Akzent" />
        <TweakRadio
          label="Hero-Variante"
          value={t.heroVariant}
          options={[
            { value: "compliance", label: "Pflicht" },
            { value: "capacity", label: "Kapazität" },
            { value: "independent", label: "Marken-frei" }
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakColor
          label="Akzentfarbe"
          value={t.accent}
          options={Object.keys(ACCENT_PRESETS).map(k => ACCENT_PRESETS[k].signal)}
          onChange={(hex) => {
            const key = Object.keys(ACCENT_PRESETS).find(k => ACCENT_PRESETS[k].signal.toLowerCase() === hex.toLowerCase());
            if (key) setTweak("accent", key);
          }}
        />
        <TweakSection label="Layout" />
        <TweakToggle label="Mobile-Aktionsleiste" value={t.showMobileBar}
          onChange={(v) => setTweak("showMobileBar", v)} />
      </TweaksPanel>
    </>
  );
}

// CTA closer block
function CtaCloser({ onCtaClick }) {
  return (
    <section className="section section--tight" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="reveal" style={{
          background: "var(--brand-800)",
          color: "var(--paper)",
          borderRadius: "var(--r-4)",
          padding: "clamp(40px, 6vw, 80px)",
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 48,
          alignItems: "center",
          position: "relative",
          overflow: "hidden"
        }} className="cta-closer">
          <div style={{
            position: "absolute",
            right: -40, top: -40, width: 280, height: 280,
            background: "radial-gradient(closest-side, color-mix(in srgb, var(--signal) 22%, transparent), transparent 70%)",
            pointerEvents: "none"
          }}></div>
          <img
            src="assets/logo.png"
            alt=""
            aria-hidden="true"
            className="logo-invert"
            style={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              maxHeight: "70%",
              maxWidth: "32%",
              width: "auto",
              height: "auto",
              opacity: 0.06,
              pointerEvents: "none",
              userSelect: "none"
            }}
          />
          <div>
            <div className="eyebrow eyebrow--dot" style={{ color: "var(--ink-300)" }}>Bereit?</div>
            <h2 className="h1" style={{ margin: "12px 0 16px", color: "var(--paper)", maxWidth: "20ch" }}>
              Eine Stunde Aufwand. Ein Jahr Rückendeckung.
            </h2>
            <p className="lede" style={{ color: "var(--ink-200)", margin: 0, maxWidth: "48ch" }}>
              Schicken Sie uns die Eckdaten Ihrer Tore — wir melden uns am gleichen Werktag
              mit Termin und Preisrahmen. Keine Verkaufstermine, keine Vertragsbindung, keine
              Mindestabnahme.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <button className="btn btn--primary btn--lg btn--block" onClick={onCtaClick}>
              Prüftermin anfragen <IconArrow size={16} className="arr" />
            </button>
            <a href="tel:+491735285068" className="btn btn--ghost-dark btn--lg btn--block">
              <IconPhone size={16} /> +49 173 5285068
            </a>
            <small style={{ textAlign: "center", color: "var(--ink-400)", marginTop: 6 }}>
              Mo–Fr 7:00–17:00 · Antwort am selben Werktag
            </small>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .cta-closer { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
}

// Sticky mobile bar
function MobileBar({ onCtaClick }) {
  return (
    <div className="mob-bar">
      <a href="tel:+491735285068" className="btn btn--ghost-dark">
        <IconPhone size={16} /> Anrufen
      </a>
      <button className="btn btn--primary" onClick={onCtaClick}>
        Termin anfragen <IconArrow size={14} />
      </button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);