// Impressum page sections — expandAI

// ----- Hero -----
const ImpressumHero = () =>
<section style={{ padding: "120px 0 48px", position: "relative", overflow: "hidden" }}>
    <div aria-hidden style={{
    position: "absolute", left: "50%", top: -200,
    width: 900, height: 600, transform: "translateX(-50%)",
    background: "radial-gradient(ellipse at center, rgba(167,139,250,0.18), rgba(167,139,250,0) 60%)",
    pointerEvents: "none"
  }} />
    <div className="container" style={{ textAlign: "center", position: "relative" }}>
      <div className="eyebrow" style={{ marginBottom: 28 }}>
        <span className="dot" />
        Rechtliches
      </div>
      <h1 className="h1 gradient-text" style={{ marginBottom: 24 }}>
        Impressum.
      </h1>
      <p className="lead" style={{ maxWidth: 620, margin: "0 auto" }}>
        Angaben gemäß § 5 TMG sowie Hinweise zu Haftung, Urheberrecht und
        den auf dieser Website verwendeten Materialien.
      </p>
    </div>
  </section>;


// ----- Quick info cards (mirrors ContactMethods) -----
const ImpressumQuickFacts = () => {
  const items = [
  {
    label: "Anschrift",
    value: "Maria-Goeppert-Str. 1",
    sub: "23562 Lübeck, Deutschland",
    icon:
    <>
        <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z" />
        <circle cx="12" cy="10" r="3" />
      </>

  },
  {
    label: "Geschäftsführer",
    value: "Artur Piet",
    sub: "Vertretungsberechtigt nach § 5 TMG.",
    icon:
    <>
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
        <circle cx="12" cy="7" r="4" />
      </>

  },
  {
    label: "Kontakt",
    value: "artur(at)expandAI.de",
    sub: "Für presserechtliche und rechtliche Anfragen.",
    icon: <path d="M3 7l9 6 9-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" />
  }];


  return (
    <section style={{ padding: "16px 0 40px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map((it, i) =>
          <div key={i}
          className="card"
          style={{
            padding: 28,
            display: "flex", flexDirection: "column", gap: 14
          }}>

              <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: "var(--accent-soft)",
              border: "1px solid var(--accent-ring)",
              color: "var(--accent)",
              display: "grid", placeItems: "center"
            }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  {it.icon}
                </svg>
              </div>
              <div>
                <div style={{
                fontSize: 11, color: "var(--text-3)",
                textTransform: "uppercase", letterSpacing: "0.14em",
                marginBottom: 6, fontWeight: 500
              }}>{it.label}</div>
                <div style={{ fontSize: 17, color: "var(--text)", fontWeight: 500, marginBottom: 6 }}>
                  {it.value}
                </div>
                <div style={{ fontSize: 13, color: "var(--text-3)", lineHeight: 1.5 }}>{it.sub}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};


// ----- Company / register details (form-card style) -----
const ImpressumDetails = () => {
  const fieldLabel = {
    display: "block",
    fontSize: 12,
    color: "var(--text-2)",
    marginBottom: 8,
    fontWeight: 500,
    letterSpacing: "0.02em"
  };
  const fieldValue = {
    fontSize: 15,
    color: "var(--text)",
    fontFamily: "'JetBrains Mono', monospace",
    background: "var(--bg-2)",
    border: "1px solid var(--border)",
    borderRadius: 10,
    padding: "12px 14px"
  };

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>

          {/* Main card */}
          <div className="card" style={{ padding: 36 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              <span className="dot" />
              Angaben gemäß § 5 TMG
            </div>
            <h2 className="h3" style={{ marginBottom: 8, fontSize: 26, letterSpacing: "-0.02em" }}>
              expandAI GmbH
            </h2>
            <p style={{ color: "var(--text-3)", fontSize: 14, marginTop: 0, marginBottom: 28 }}>
              Sitz der Gesellschaft: Lübeck, Deutschland.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={fieldLabel}>Firmierung</label>
                <div style={fieldValue}>expandAI GmbH</div>
              </div>
              <div>
                <label style={fieldLabel}>Geschäftsführer</label>
                <div style={fieldValue}>Artur Piet</div>
              </div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <label style={fieldLabel}>Anschrift</label>
              <div style={{ ...fieldValue, lineHeight: 1.6 }}>
                Maria-Goeppert-Str. 1<br />
                23562 Lübeck<br />
                Deutschland
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18, marginBottom: 4 }}>
              <div>
                <label style={fieldLabel}>Handelsregister</label>
                <div style={fieldValue}>HRB 24373 HL</div>
              </div>
              <div>
                <label style={fieldLabel}>USt-IdNr.</label>
                <div style={fieldValue}>DE366671253</div>
              </div>
              <div>
                <label style={fieldLabel}>Steuernummer</label>
                <div style={fieldValue}>22/290/66947</div>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <aside style={{ display: "grid", gap: 16 }}>
            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                Verantwortlich
              </div>
              <div style={{ display: "grid", gap: 6 }}>
                <div style={{ fontSize: 15, color: "var(--text)", fontWeight: 500 }}>
                  Artur Piet
                </div>
                <div style={{ fontSize: 13, color: "var(--text-3)", lineHeight: 1.55 }}>
                  Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV.
                </div>
                <div style={{
                  marginTop: 8,
                  fontSize: 14, color: "var(--text-3)",
                  fontFamily: "'JetBrains Mono', monospace"
                }}>artur(at)expandAI.de</div>
              </div>
            </div>

            <div className="card" style={{ padding: 0, overflow: "hidden" }}>
              <div style={{
                padding: "24px 24px 20px",
                borderBottom: "1px solid var(--border)"
              }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>
                  <span className="dot" />
                  Hauptsitz
                </div>
                <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 15, color: "var(--text)", fontWeight: 500, marginBottom: 4, letterSpacing: "-0.01em" }}>
                      expandAI GmbH
                    </div>
                    <div style={{ color: "var(--text-3)", fontSize: 13, lineHeight: 1.55 }}>
                      Maria-Goeppert-Str. 1<br />
                      23562 Lübeck, Deutschland
                    </div>
                  </div>
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
                <a
                  href="https://calendly.com/expandai/eai"
                  target="_blank" rel="noopener noreferrer"
                  style={{
                    display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
                    padding: "14px 12px",
                    background: "transparent",
                    color: "var(--accent)",
                    fontSize: 13, fontWeight: 500,
                    textDecoration: "none",
                    borderRight: "1px solid var(--border)",
                    transition: "background 0.15s ease"
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.background = "var(--accent-soft)"}
                  onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3 7l9 6 9-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" />
                  </svg>
                  Kontakt
                </a>
                <a
                  href="https://www.google.com/maps/place/expandAI/@53.8347672,10.6948623,610m/data=!3m3!1e3!4b1!5s0x47b2091a3f367443:0x105a0c190f318761!4m6!3m5!1s0x47b2097a52796909:0x9ce68c6f97a6af10!8m2!3d53.8347641!4d10.6974372!16s%2Fg%2F11khvtftxn?entry=ttu&g_ep=EgoyMDI2MDUyNy4wIKXMDSoASAFQAw%3D%3D"
                  target="_blank" rel="noopener noreferrer"
                  style={{
                    display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
                    padding: "14px 12px",
                    background: "transparent",
                    color: "var(--text-2)",
                    fontSize: 13, fontWeight: 500,
                    textDecoration: "none",
                    transition: "background 0.15s ease, color 0.15s ease"
                  }}
                  onMouseEnter={(e) => {e.currentTarget.style.background = "var(--bg-2)";e.currentTarget.style.color = "var(--text)";}}
                  onMouseLeave={(e) => {e.currentTarget.style.background = "transparent";e.currentTarget.style.color = "var(--text-2)";}}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6" />
                    <line x1="9" y1="3" x2="9" y2="18" />
                    <line x1="15" y1="6" x2="15" y2="21" />
                  </svg>
                  Route
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                Stand
              </div>
              <div style={{ fontSize: 14, color: "var(--text-2)", fontFamily: "'JetBrains Mono', monospace" }}>
                Juni 2026
              </div>
              <div style={{
                marginTop: 14, paddingTop: 14,
                borderTop: "1px solid var(--border)",
                fontSize: 12, color: "var(--text-3)", lineHeight: 1.55
              }}>
                Plattform der EU-Kommission zur Online-Streit&shy;beilegung:
                {" "}
                <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener noreferrer"
                style={{ color: "var(--text-2)", textDecoration: "underline" }}>
                  ec.europa.eu/consumers/odr
                </a>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

};


// ----- Legal sections (mirrors ContactFAQ two-column pattern) -----
const ImpressumLegal = () => {
  const sections = [
  {
    eyebrow: "Haftung für Inhalte",
    title: "Sorgfalt ohne Garantie.",
    lead: "Wir kuratieren alle Inhalte gewissenhaft – können aber keine Gewähr für Aktualität und Vollständigkeit übernehmen.",
    body: <>
        <p>
          Alle Inhalte unseres Internetauftritts wurden mit größter Sorgfalt
          und nach bestem Wissen erstellt. Wir können jedoch keine Gewähr für
          die Aktualität, Vollständigkeit und Richtigkeit sämtlicher Seiten
          übernehmen.
        </p>
        <p>
          Sämtliche Informationen werden vom Betreiber ohne ausdrückliche oder
          stillschweigende Zusicherung oder Garantie bereitgestellt. Wenngleich
          wir alle bereitgestellten Informationen für zutreffend halten, können
          diese Fehler oder Ungenauigkeiten enthalten.
        </p>
      </>
  },
  {
    eyebrow: "Verweise und Links",
    title: "Externe Inhalte.",
    lead: "Für die Inhalte verlinkter Seiten ist ausschließlich deren jeweiliger Betreiber verantwortlich.",
    body: <p>
        Der Betreiber distanziert sich hiermit ausdrücklich von allen Inhalten
        aller verlinkten / verknüpften Seiten, die nach der Linksetzung verändert
        wurden. Diese Feststellung gilt für alle innerhalb des eigenen
        Internet&shy;angebotes gesetzten Links und Verweise sowie für
        Fremd&shy;einträge in vom Autor eingerichteten Gästebüchern,
        Diskussions&shy;foren und Mailinglisten. Für illegale, fehlerhafte oder
        unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung
        oder Nicht&shy;nutzung solcherart dargebotener Informationen entstehen,
        haftet allein der Anbieter der Seite, auf welche verwiesen wurde, nicht
        derjenige, der über Links auf die jeweilige Veröffentlichung lediglich
        verweist.
      </p>
  },
  {
    eyebrow: "Gewährleistung",
    title: "Ausschluss.",
    lead: "Stillschweigende Gewährleistungen zu Marktgängigkeit oder Eignung sind ausgeschlossen.",
    body: <p>
        Sämtliche Informationen werden vom Betreiber ohne ausdrückliche oder
        stillschweigende Zusicherung oder Garantie irgendeiner Art
        bereitgestellt. Auch alle stillschweigenden Gewährleistungen bezüglich
        der Marktgängigkeit, der Eignung für bestimmte Zwecke oder der
        Nicht-Verletzung von Gesetzen und Patenten werden ausgeschlossen.
      </p>
  },
  {
    eyebrow: "Lizenzrechte",
    title: "Geistiges Eigentum.",
    lead: "Diese Internetseiten gewähren keine Lizenzrechte am geistigen Eigentum des Betreibers.",
    body: <p>
        Der Betreiber möchte Ihnen ein innovatives und informatives
        Internetangebot bieten. Wir hoffen daher, dass Sie sich an unserem
        Webauftritt erfreuen können. Wir bitten jedoch um Ihr Verständnis dafür,
        dass der Betreiber sein geistiges Eigentum schützen muss, einschließlich
        seiner Patente, Marken und Urheberrechte, und dass diese Internetseiten
        keinerlei Lizenzrechte am geistigen Eigentum des Betreibers gewähren
        können.
      </p>
  },
  {
    eyebrow: "Urheber- und Bildrechte",
    title: "Quellen & Credits.",
    lead: "Inhalte und verwendete Materialien sind urheberrechtlich geschützt – mit folgenden Credits.",
    body: <>
        <p>
          Alle Rechte vorbehalten. Alle Texte, Bilder, Grafiken, Video- und
          Animationsdateien sowie deren Anordnung unterliegen dem Urheberrecht
          und anderen Gesetzen zum Schutz geistigen Eigentums. Sie dürfen weder
          für Handelszwecke oder zur Weitergabe kopiert, noch verändert oder auf
          anderen Websites verwendet werden.
        </p>
        <div style={{
        marginTop: 16,
        padding: "16px 18px",
        background: "var(--bg-2)",
        border: "1px solid var(--border)",
        borderRadius: 10,
        fontSize: 13.5, color: "var(--text-3)", lineHeight: 1.6
      }}>
          <div style={{
          fontSize: 11, color: "var(--text-4)",
          textTransform: "uppercase", letterSpacing: "0.14em",
          marginBottom: 8, fontWeight: 500
        }}>Credits</div>
          Einige Schriftarten ©: Gustavo Piqueira (Cabourg OT).
        </div>
      </>
  }];


  const [open, setOpen] = React.useState(0);

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>
              <span className="dot" />
              Rechtliche Hinweise
            </div>
            <h2 className="h2 gradient-text" style={{ marginBottom: 16 }}>Haftung,<br />Lizenz, Credits.</h2>
            <p className="lead" style={{ marginTop: 0 }}>
              Die rechtlichen Rahmenbedingungen zur Nutzung unseres Internet&shy;auftritts –
              klick einen Abschnitt an, um die Details zu lesen.
            </p>
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            {sections.map((s, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left",
                      background: "transparent", border: "none", color: "var(--text)",
                      padding: "22px 24px",
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      gap: 16, cursor: "pointer"
                    }}>
                    <div style={{ flex: 1 }}>
                      <div style={{
                        fontSize: 11, color: "var(--text-3)",
                        textTransform: "uppercase", letterSpacing: "0.14em",
                        marginBottom: 6, fontWeight: 500
                      }}>
                        {s.eyebrow}
                      </div>
                      <div style={{ fontSize: 17, fontWeight: 500, color: "var(--text)", letterSpacing: "-0.01em" }}>
                        {s.title}
                      </div>
                      {!isOpen &&
                      <div style={{ fontSize: 13.5, color: "var(--text-3)", marginTop: 6, lineHeight: 1.5 }}>
                          {s.lead}
                        </div>
                      }
                    </div>
                    <span style={{
                      width: 28, height: 28, borderRadius: 999,
                      background: isOpen ? "var(--accent-soft)" : "var(--bg-2)",
                      color: isOpen ? "var(--accent)" : "var(--text-3)",
                      display: "grid", placeItems: "center",
                      transition: "all 0.2s ease",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                      flexShrink: 0
                    }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <path d="M12 5v14M5 12h14" />
                      </svg>
                    </span>
                  </button>
                  {isOpen &&
                  <div style={{
                    padding: "0 24px 24px",
                    color: "var(--text-2)",
                    fontSize: 14.5, lineHeight: 1.7,
                    textWrap: "pretty"
                  }}>
                      {s.body}
                    </div>
                  }
                </div>);

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

};


// ----- CTA strip (mirrors ContactOffice tail) -----
const ImpressumCTA = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{
      borderRadius: "var(--radius-xl)",
      border: "1px solid var(--border)",
      background: "var(--surface)",
      padding: "48px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      gap: 32, flexWrap: "wrap"
    }}>
        <div style={{ maxWidth: 520 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span className="dot" />
            Noch Fragen?
          </div>
          <h3 className="h2 gradient-text" style={{ fontSize: 32, marginBottom: 10 }}>
            Wir sind erreichbar.
          </h3>
          <p style={{ color: "var(--text-3)", fontSize: 15, lineHeight: 1.55, margin: 0 }}>
            Bei Fragen zum Impressum, zu Lizenz&shy;rechten oder zur Nutzung von
            Inhalten dieser Website hilft unser Team gerne weiter.
          </p>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="kontakt.html" className="btn btn-primary btn-lg">
            Kontakt aufnehmen
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </section>;


Object.assign(window, { ImpressumHero, ImpressumQuickFacts, ImpressumDetails, ImpressumLegal, ImpressumCTA });