const { useState, useEffect, useMemo, useRef } = React;

// === Brand mark (same shape as the Linz logo) ===
function BrandMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="280 260 460 460" fill="none" aria-hidden="true">
      <path fill="var(--accent)" fillRule="evenodd" d="M564.448 411.697C584.962 409.202 607.885 414.97 625.381 425.835C647.945 439.761 663.959 462.177 669.819 488.037C676.622 517.309 670.215 542.48 654.695 567.31C667.302 581.136 682.701 594.929 695.864 608.436C702.109 615.256 709.575 620.563 715.07 628.102C728.148 646.048 706.515 670.376 688.075 658.818C680.167 653.861 668.786 640.886 661.544 633.604L623.672 596.099C610.349 603.112 600.157 607.03 584.887 608.703C558.466 611.637 531.968 603.894 511.284 587.195C490.903 570.684 477.989 546.693 475.43 520.588C472.778 493.817 480.905 467.092 498.011 446.329C514.686 426.429 538.585 413.971 564.448 411.697Z M571.567 439.392C610.63 438.288 643.205 469.033 644.359 508.095C645.512 547.157 614.807 579.771 575.747 580.973C536.617 582.177 503.933 551.406 502.778 512.275C501.623 473.144 532.434 440.499 571.567 439.392Z" />
      <path fill="var(--accent)" d="M433.211 343.206C475.433 338.795 528.838 363.492 552.016 399.171C541.034 401.389 535.178 403.386 525.123 407.859C524.606 407.295 524.085 406.735 523.561 406.177C503.095 384.438 474.769 370.666 444.757 369.904C414.742 369.105 385.644 380.282 363.882 400.967C329.134 434.211 321.698 486.938 345.896 528.495C348.377 532.654 351.134 536.643 354.148 540.433C356.636 543.545 366.269 553.412 366.765 555.954C368.447 564.571 367.352 581.599 367.167 590.147C375.916 585.58 392.176 576.292 401.619 574.599C403.57 574.249 412.414 576.989 415.12 577.78C439.974 583.408 456.538 581.723 480.268 573.921C486.487 583.466 490.321 587.658 497.989 595.704C492.813 598.622 484.778 601.405 479.047 603.01C452.032 610.578 430.168 609.334 403.485 603.129C391.947 607.619 380.461 614.496 369.176 619.72C361.843 623.116 348.276 632.67 341.426 624.346C337.438 619.5 338.318 611.471 338.683 605.629C339.641 592.819 340.195 579.859 341.439 567.079C320.402 541.82 308.124 520.747 305.527 486.938C299.629 410.16 357.517 348.546 433.211 343.206Z" />
      <path fill="var(--accent)" d="M579.113 631.555L579.313 631.748C578.558 636.866 560.452 653.473 555.99 657.037C526.6 680.512 487.751 685.886 451.829 677.02C441.309 674.424 431.103 669.613 420.713 666.472C402.135 660.994 382.46 659.586 363.257 662.148C350.3 663.877 338.572 668.018 326.618 673.213L325.109 673.687L325.342 672.818C357.658 637.031 403.101 626.419 448.982 638.007C457.382 640.102 465.402 643.867 473.765 646.038C511.263 655.769 545.733 651.156 579.113 631.555Z" />
    </svg>);

}

// === Icons ===
const I = {
  arrow: (p) =>
  <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
    </svg>,

  bot: (p) =>
  <svg {...p} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="7" width="18" height="13" rx="3" /><path d="M12 7V4" />
      <circle cx="12" cy="3" r="0.6" fill="currentColor" />
      <circle cx="9" cy="13" r="1.2" /><circle cx="15" cy="13" r="1.2" /><path d="M9 17h6" />
    </svg>,

  doc: (p) =>
  <svg {...p} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
      <polyline points="14 3 14 9 20 9" /><line x1="8" y1="13" x2="16" y2="13" /><line x1="8" y1="17" x2="14" y2="17" />
    </svg>,

  shield: (p) =>
  <svg {...p} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z" /><path d="M9 12l2 2 4-4" />
    </svg>,

  people: (p) =>
  <svg {...p} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9.5" cy="7" r="3.5" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>,

  plug: (p) =>
  <svg {...p} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22v-5" /><path d="M9 8V2" /><path d="M15 8V2" /><path d="M6 8h12v4a6 6 0 0 1-12 0z" />
    </svg>,

  spark: (p) =>
  <svg {...p} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
    </svg>,

  mail: (p) =>
  <svg {...p} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2" /><polyline points="2 6 12 13 22 6" />
    </svg>,

  pin: (p) =>
  <svg {...p} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" />
    </svg>,

  sun: (p) =>
  <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.4 1.4M17.6 17.6l1.4 1.4M5 19l1.4-1.4M17.6 6.4l1.4-1.4" />
    </svg>,

  moon: (p) =>
  <svg {...p} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>

};

// === Nav ===
function Nav({ onToggleTheme, theme }) {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <span className="brand-mark"><BrandMark /></span>
          <span><b>PolitikDashboard</b></span>
        </a>
        <nav className="nav-links" aria-label="Hauptnavigation">
          <a href="#staedte">Stadt &amp; Region</a>
          <a href="#methodik">Methodik</a>
          <a href="#ueber-uns">Über uns</a>
          <a href="#kontakt">Kontakt</a>
        </nav>
        <div className="nav-cta">
          <button className="theme-btn" onClick={onToggleTheme} aria-label="Theme wechseln" title={theme === "dark" ? "Hell" : "Dunkel"}>
            {theme === "dark" ? <I.sun /> : <I.moon />}
          </button>
          <a className="btn btn-primary" href="#kontakt">
            Demo anfragen <I.arrow className="arrow" />
          </a>
        </div>
      </div>
    </header>);

}

// === Hero ===
// Two-column hero: text + CTAs on the left, Austria map on the right.
// The map sits "in the background" — no card wrapper, hover-only labels,
// live pin links straight to its city dashboard.
function Hero({ accent }) {
  const counts = useMemo(() => {
    const m = { live: 0, active: 0, future: 0 };
    for (const c of CITIES) m[c.status]++;
    return m;
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-blur-1" />
      <div className="hero-blur-2" />
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <h1 className="fade fade-1">
              Politik. Verständlich.<br />
              <span className="accent">Für jede Stadt & Region.</span>
            </h1>
            <p className="hero-lede fade fade-2">
              Wir machen kommunale Politik nachvollziehbar — Protokolle,
              Anträge und Debatten in einer durchsuchbaren, KI-gestützten
              Oberfläche. Auf Basis offizieller Quellen, mit nachprüfbaren
              Zitaten.
            </p>
            <div className="hero-ctas fade fade-3">
              <a
                className="btn btn-primary btn-lg"
                href="https://linz.politikdashboard.at"
                target="_blank"
                rel="noopener noreferrer">
                
                Linzer Dashboard ansehen <I.arrow className="arrow" />
              </a>
              <a className="btn btn-secondary btn-lg" href="#kontakt">
                Demo für deine Stadt <I.arrow className="arrow" />
              </a>
            </div>

            <div className="rollout-wrap fade fade-3">
              <div className="rollout-eyebrow">Unsere Roadmap</div>
              <ul className="rollout" aria-label="Rollout-Status">
                <li>
                  <span className="legend-swatch live" aria-hidden="true" />
                  <span><b>Linz</b> — live seit 2026</span>
                </li>
                <li>
                  <span className="legend-swatch active" aria-hidden="true" />
                  <span><b>Sierning</b>, <b>OÖ Landtag</b> — in Vorbereitung</span>
                </li>
                <li>
                  <span className="legend-swatch future" aria-hidden="true" />
                  <span>Weitere Städte vorgemerkt</span>
                </li>
              </ul>
            </div>
          </div>

          <div className="hero-map fade fade-2" aria-label="Karte der Standorte">
            <AustriaMap accent={accent} />
            <p className="hero-map-hint">
              Tipp auf eine Stadt zum Reinschnuppern.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// === What we do ===
const FEATURES = [
{ icon: I.bot, title: "KI-Chat auf offiziellen Quellen", body: "Fragen in Alltagssprache stellen — die Antwort kommt aus den Protokollen selbst, mit nachprüfbaren Zitaten." },
{ icon: I.doc, title: "Strukturierte Anträge & Debatten", body: "Tagesordnung, Berichterstatter:in, Beschluss, Abstimmungsverhalten — alles als durchsuchbare, filterbare Daten." },
{ icon: I.people, title: "Personen- und Fraktions-Sicht", body: "Sichtbar machen, wer Themen einbringt, wer spricht und wie Fraktionen abstimmen — über Sitzungen hinweg." },
{ icon: I.shield, title: "Quellenbasis bleibt überprüfbar", body: "Jede Aussage verlinkt zurück ins offizielle Protokoll. Keine intransparenten Zusammenfassungen, keine Datenfantasie." }];


function PlatformSection() {
  return (
    <section className="section" id="methodik">
      <div className="container">
        <div className="section-head fade">
          <div className="section-eyebrow">Was wir machen</div>
          <h2>Eine Plattform, die kommunale Politik verständlich macht.</h2>
          <p className="section-lede">
            Wir bauen kein neues politisches Werkzeug — wir machen das
            sichtbar, was Städte ohnehin produzieren: Sitzungsprotokolle,
            Anträge, Anfragen, Beschlüsse. In einer Form, die Bürger:innen,
            Medien und Verwaltung gleichermaßen nutzen können.
          </p>
        </div>
        <div className="feature-grid fade fade-1">
          {FEATURES.map((f, i) => {
            const Icon = f.icon;
            return (
              <div className="feature" key={i}>
                <div className="feature-icon"><Icon /></div>
                <h3>{f.title}</h3>
                <p>{f.body}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// === For cities ===
function ForCities() {
  return (
    <section className="section for-cities" id="staedte">
      <div className="container">
        <div className="section-head fade">
          <div className="section-eyebrow">Stadt &amp; Region</div>
          <h2>Kooperation in drei Schritten.</h2>
          <p className="section-lede">
            Wir arbeiten mit Magistrat, IT und politischen Klubs zusammen.
            Die Plattform läuft auf österreichischer Infrastruktur —
            datenschutz- und barrierefrei.
          </p>
        </div>

        <div className="steps">
          {[
          { n: "01", t: "Sondierung & Datenanbindung", b: "Wir sichten gemeinsam, welche Protokolle und Anträge bereits öffentlich vorliegen — und wie wir sie automatisiert verarbeiten." },
          { n: "02", t: "Plattform für eure Stadt", b: "Wir spielen eure historischen Sitzungen ein, passen Design, Fraktionen und Tagesordnungs-Logik an und richten Moderation ein." },
          { n: "03", t: "Live & langfristig betreut", b: "Wir veröffentlichen unter <stadt>.politikdashboard.at — und halten Inhalte Sitzung für Sitzung aktuell." }].
          map((s, i) =>
          <div className="step fade" key={s.n} style={{ animationDelay: `${100 + i * 90}ms` }}>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
          )}
        </div>

        <div className="quote fade fade-3">
          <q>Wer Politik versteht, kann sie mittragen — und korrigieren, wenn nötig.</q>
          <cite>— Gründerteam, PolitikDashboard</cite>
        </div>
      </div>
    </section>);

}

// === About ===
function About() {
  return (
    <section className="section" id="ueber-uns">
      <div className="container">
        <div className="section-head fade">
          <div className="section-eyebrow">Über uns</div>
          <h2>Ein junges Team aus Linz.</h2>
          <p className="section-lede">
            PolitikDashboard ist 2026 in Linz entstanden — aus der Frage,
            warum es so schwer ist herauszufinden, was im eigenen Gemeinderat
            eigentlich beschlossen wird. Wir arbeiten ausschließlich auf Basis
            öffentlich verfügbarer Daten.
          </p>
        </div>

        <div className="about-grid">
          {[
          { k: "Gegründet", v: "2026 in Linz" },
          { k: "Form", v: "Junge Initiative" },
          { k: "Finanzierung", v: "Stadt-Kooperationen & Förderung" }].
          map((x, i) =>
          <div className="fact-card fade" key={x.k} style={{ animationDelay: `${80 + i * 80}ms` }}>
              <div className="fact-k">{x.k}</div>
              <div className="fact-v">{x.v}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// === Contact ===
function Contact() {
  const [sent, setSent] = useState(false);
  const [city, setCity] = useState("");
  const formRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const name = (data.get("name") || "").toString().trim();
    const role = (data.get("role") || "").toString().trim();
    const cityVal = (data.get("city") || "").toString().trim();
    const email = (data.get("email") || "").toString().trim();
    const message = (data.get("message") || "").toString().trim();

    const subject = cityVal
      ? `Anfrage: ${cityVal}`
      : "Anfrage von einer Stadt";

    const lines = [
      name && `Name: ${name}`,
      role && `Rolle: ${role}`,
      cityVal && `Stadt: ${cityVal}`,
      email && `E-Mail: ${email}`,
      "",
      message || "(keine Nachricht angegeben)",
    ].filter((l) => l !== undefined && l !== false);

    const mailto =
      "mailto:info@politikdashboard.at" +
      "?subject=" + encodeURIComponent(subject) +
      "&body=" + encodeURIComponent(lines.join("\n"));

    window.location.href = mailto;

    setSent(true);
    if (formRef.current) formRef.current.reset();
    setCity("");
  }

  return (
    <section className="section" id="kontakt" style={{ paddingTop: 48 }}>
      <div className="container">
        <div className="section-head fade">
          <div className="section-eyebrow">Kontakt</div>
          <h2>Schreib uns, und wir treten in Kontakt.</h2>
          <p className="section-lede">Du arbeitest in einer Stadtverwaltung, einer Fraktion, einer NGO oder Redaktion — und willst PolitikDashboard für deine Stadt? Schreib uns!



          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-card fade fade-1">
            <div className="contact-row">
              <div className="ico"><I.mail /></div>
              <div>
                <div className="lbl">E-MAIL</div>
                <div className="val"><a href="mailto:info@politikdashboard.at">info@politikdashboard.at</a></div>
              </div>
            </div>
            <div className="contact-row">
              <div className="ico"><I.pin /></div>
              <div>
                <div className="lbl">SITZ</div>
                <div className="val">Linz, Oberösterreich</div>
              </div>
            </div>
            <div className="contact-row">
              <div className="ico"><I.spark /></div>
              <div>
                <div className="lbl">REAKTIONSZEIT</div>
                <div className="val">Antwort innerhalb von 3 Werktagen</div>
              </div>
            </div>
            <div className="contact-row">
              <div className="ico"><I.plug /></div>
              <div>
                <div className="lbl">DEMO</div>
                <div className="val"><a href="https://linz.politikdashboard.at" target="_blank" rel="noopener noreferrer">linz.politikdashboard.at</a></div>
              </div>
            </div>
          </div>

          <form ref={formRef} className="form-card fade fade-2" onSubmit={handleSubmit}>
            {sent ?
            <div className="form-success">
                <div className="form-success-ico">✓</div>
                <h3>E-Mail wird vorbereitet.</h3>
                <p>
                  Dein E-Mail-Programm sollte sich mit einer vorausgefüllten
                  Nachricht geöffnet haben — bitte dort auf <b>Senden</b> klicken.
                  Falls nichts passiert ist, schreib uns direkt an{" "}
                  <a href="mailto:info@politikdashboard.at" style={{ color: "var(--accent)" }}>
                    info@politikdashboard.at
                  </a>.
                </p>
                <button type="button" className="btn btn-secondary" onClick={() => setSent(false)}>
                  Weitere Anfrage stellen
                </button>
              </div> :
            <>
            <h3>Anfrage von einer Stadt</h3>
            <p className="form-lede">
              Ein paar Zeilen reichen. Wir melden uns innerhalb von wenigen
              Tagen — mit einem konkreten Vorschlag, was für eure Stadt geht.
            </p>
            <div className="form-row">
              <label htmlFor="name">Name</label>
              <input id="name" name="name" required placeholder="Vor- &amp; Nachname" />
            </div>
            <div className="form-row">
              <div className="grid-2">
                <div>
                  <label htmlFor="role" className="sub-label">Rolle</label>
                  <input id="role" name="role" placeholder="z. B. Klubdirektor:in" />
                </div>
                <div>
                  <label htmlFor="city" className="sub-label">Stadt</label>
                  <input id="city" name="city" value={city} onChange={(e) => setCity(e.target.value)} placeholder="z. B. Salzburg" />
                </div>
              </div>
            </div>
            <div className="form-row">
              <label htmlFor="email">E-Mail</label>
              <input id="email" name="email" type="email" required placeholder="name@stadt.at" />
            </div>
            <div className="form-row" style={{ flex: 1, display: "flex", flexDirection: "column" }}>
              <label htmlFor="message">Worum geht's?</label>
              <textarea
                  id="message"
                  name="message"
                  style={{ flex: 1, minHeight: 100 }}
                  placeholder={`Wir würden gern verstehen, wie wir die Protokolle unseres Gemeinderats für Bürger:innen zugänglich machen können.`} />
              
            </div>
            <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center" }}>
              Anfrage senden <I.arrow className="arrow" />
            </button>
            </>}
          </form>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <div className="brand">
              <span className="brand-mark"><BrandMark /></span>
              <span><b>PolitikDashboard</b></span>
            </div>
            <p>Wir machen kommunale Politik nachvollziehbar. Aus Linz.</p>
          </div>
          <div className="footer-col">
            <h5>Plattform</h5>
            <ul>
              <li><a href="https://linz.politikdashboard.at" target="_blank" rel="noopener noreferrer">Linz</a></li>
              <li><a href="#staedte">Für Städte</a></li>
              <li><a href="#methodik">Methodik</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Unternehmen</h5>
            <ul>
              <li><a href="#ueber-uns">Über uns</a></li>
              <li><a href="#kontakt">Kontakt</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Rechtliches</h5>
            <ul>
              <li><a href="/impressum">Impressum</a></li>
              <li><a href="/datenschutz">Datenschutz</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 PolitikDashboard — Linz, Österreich</div>
        </div>
      </div>
    </footer>);

}

// === Tweaks ===
const ACCENT_OPTIONS = [
["#0F766E", "#0a5f59"], // Teal (default — matches linz site)
["#1E5AE0", "#1747B6"], // Blue
["#1A1A1A", "#000000"], // Ink
["#9F1B40", "#7C1432"] // Wine
];

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": ["#0F766E", "#0a5f59"],
  "dark": false
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULT_TWEAKS);
  const accentHex = Array.isArray(t.accent) ? t.accent[0] : t.accent;
  const accentStrong = Array.isArray(t.accent) ? t.accent[1] : t.accent;

  useEffect(() => {
    document.body.dataset.theme = t.dark ? "dark" : "light";
  }, [t.dark]);

  useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty("--accent", accentHex);
    root.setProperty("--accent-soft", accentHex + "1f");
    root.setProperty("--accent-strong", accentStrong);
    root.setProperty("--at-shadow", t.dark ? "#000000" : accentHex);
    // --at-region-active stays static gray (set in stylesheet) — "In Vorbereitung"
    // is no longer an accent-tinted state per latest design direction.
  }, [accentHex, accentStrong, t.dark]);

  return (
    <>
      <Nav onToggleTheme={() => setTweak("dark", !t.dark)} theme={t.dark ? "dark" : "light"} />
      <Hero accent={accentHex} />
      <PlatformSection />
      <ForCities />
      <About />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Akzentfarbe" />
        <TweakColor label="Akzent" value={t.accent} options={ACCENT_OPTIONS} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Erscheinung" />
        <TweakToggle label="Dunkler Modus" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);