// Forschung page

const ResearchHero = () =>
<section style={{ padding: "120px 0 60px", 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", maxWidth: 820 }}>
      <div className="eyebrow" style={{ marginBottom: 28 }}>
        <span className="dot" />
        Forschung & Entwicklung
      </div>
      <h1 className="h1 gradient-text" style={{ marginBottom: 24 }}>
        Wir bauen die Modelle,<br />die Inspekteure verlassen können.
      </h1>
      <p className="lead" style={{ maxWidth: 640, margin: "0 auto" }}>
        expandAI entwickelt Computer-Vision-Modelle für die Auswertung von
        Kanalinspektionen. Wir trainieren auf echten Aufnahmen, validieren gegen
        das deutsche Regelwerk und veröffentlichen unsere Methodik.
      </p>
    </div>
  </section>;

const ResearchFocus = () => {
  const areas = [
  {
    n: "01",
    t: "Schadenserkennung",
    d: "Detektion und Lokalisation von Rissen, Verformungen, Ablagerungen und Anschlüssen in Inspektionsvideos — frame-genau und mit Konfidenzscore.",
    tag: "Computer Vision"
  },
  {
    n: "02",
    t: "Normgerechte Klassifikation",
    d: "Klassifikation jedes Befunds nach DIN EN 13508-2 und DWA-M 149-2. Jede Vorhersage ist erklärbar und an die Codetabelle gebunden.",
    tag: "Domain Modelle"
  },
  {
    n: "03",
    t: "Multimodale Synchronisation",
    d: "Fusion von Bildmaterial, Haltungsdaten, Kameraposition und XML-Metadaten zu einem konsistenten, prüfbaren Inspektionsdatensatz.",
    tag: "Data Engineering"
  }];

  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Schwerpunkte
          </div>
          <h2 className="h2 gradient-text">Drei Bereiche, an denen wir aktiv forschen.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {areas.map((a, i) =>
          <div key={i} className="card" style={{ padding: 32, minHeight: 280, display: "flex", flexDirection: "column" }}>
              <div style={{
              fontFamily: "JetBrains Mono, monospace", fontSize: 13, color: "var(--accent)",
              marginBottom: 32, letterSpacing: "0.08em"
            }}>{a.n}</div>
              <div className="h3" style={{ marginBottom: 12 }}>{a.t}</div>
              <p style={{ color: "var(--text-2)", lineHeight: 1.55, fontSize: 14, margin: "0 0 24px" }}>{a.d}</p>
              <div style={{
              marginTop: "auto",
              display: "inline-flex", alignSelf: "flex-start",
              fontSize: 11, color: "var(--text-3)",
              textTransform: "uppercase", letterSpacing: "0.12em",
              padding: "5px 10px",
              borderRadius: 999,
              background: "rgba(255,255,255,0.04)",
              border: "1px solid var(--border)"
            }}>{a.tag}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const ResearchApproach = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Methodik
          </div>
          <h2 className="h2 gradient-text" style={{ marginBottom: 20 }}>
            Trainiert auf echten Daten.<br />Validiert von echten Inspekteuren.
          </h2>
          <p className="lead" style={{ marginBottom: 24 }}>
            Unsere Modelle entstehen in enger Zusammenarbeit mit
            Inspektionsunternehmen. Jeder neue Datensatz wird von zertifizierten
            Inspekteuren annotiert, bevor er ins Training geht.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12, color: "var(--text-2)", fontSize: 14 }}>
            {[
          "Annotierte Datensätze aus dem Praxisbetrieb",
          "Validierung gegen das deutsche Regelwerk",
          "Kontinuierliche Korrektur durch Inspekteure",
          "Reproduzierbare Trainings- und Eval-Pipelines"].
          map((t, i) =>
          <li key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>
                {t}
              </li>
          )}
          </ul>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[
        { v: "120k+", l: "Annotierte Frames" },
        { v: "8", l: "Schadensklassen" },
        { v: "94%", l: "Top-1 Klassifikation" },
        { v: "EU", l: "Datenverarbeitung" }].
        map((s, i) =>
        <div key={i} className="card" style={{ padding: 24 }}>
              <div style={{ fontSize: 32, color: "var(--text)", fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>{s.v}</div>
              <div style={{ fontSize: 12, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.08em" }}>{s.l}</div>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


const ResearchPartners = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{ marginBottom: 40, maxWidth: 720 }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>
          <span className="dot" />
          Partner
        </div>
        <h2 className="h2 gradient-text">Mit der Branche, nicht über sie hinweg.</h2>
        <p className="lead" style={{ marginTop: 16 }}>
          Wir arbeiten mit Inspekteuren, Verbänden und Forschungseinrichtungen
          zusammen, um KI für Kanalinspektion praxistauglich zu machen.
        </p>
      </div>
      <div style={{
      display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16
    }}>
        {[1, 2, 3, 4].map((i) =>
      <image-slot
        key={i}
        id={`research-partner-${i}`}
        shape="rounded"
        radius="12"
        placeholder="Drop partner logo"
        style={{
          display: "block",
          width: "100%",
          height: 100,
          background: "var(--surface)",
          border: "1px solid var(--border)"
        }}>
        </image-slot>
      )}
      </div>
    </div>
  </section>;


const ResearchPublications = () => {
  const items = [
  {
    tag: "Babygene",
    date: "2025",
    t: "KI-Modell zur Vorhersage des Risikos von Hirnblutungen und Blindheit",
    d: "Berechnung von Protein-Scores & KI-basierte Vorhersage des Risikos von Hirnblutung und Erblindung bei Frühgeborenen.",
    href: "https://www.babygene.de/login"
  },
  {
    tag: "CGF-Visual",
    date: "2025",
    t: "Blutzuckerwerte nicht-invasiv überwachen",
    d: "Echtzeit-Blutzuckermessung mit personalisierten umsetzbaren Ernährungsempfehlungen.",
    href: "https://www.interaktive-technologien.de/projekte/cgf-visual"
  },
  {
    tag: "Glucosole",
    date: "2025",
    t: "Entwicklung und additive Fertigung altersgerechter Schuheinlagen mit Sensorik",
    d: "Diese innovativen Einlagen überwachen das Gangbild, die Druckverhältnisse im Fuß und den Blutzuckerspiegel in Echtzeit.",
    href: "https://granni.community/projekte/"
  },
  {
    tag: "RehabSense",
    date: "2024",
    t: "Chronische Rückenschmerzen mit KI lindern",
    d: "Das System erfasst physiotherapeutische Bewegungen und gibt Feedback zur Korrektheit der Übungsausführung.",
    href: "https://www.interaktive-technologien.de/projekte/rehabsense"
  }];


  return (
    <section className="section section-divider" style={{ position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", left: "28%", top: -240,
        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={{ position: "relative" }}>
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Forschung & Entwicklung
          </div>
          <h2 className="h2 gradient-text">Vier Bereiche, an denen wir aktiv forschen.</h2>
        </div>
        <div style={{ display: "grid", gap: 16 }}>
          {items.map((it, i) =>
          <a key={i} href={it.href || "#"} target={it.href ? "_blank" : undefined} rel={it.href ? "noopener noreferrer" : undefined} style={{
            display: "grid",
            gridTemplateColumns: "120px 1fr auto",
            gap: 32,
            padding: "28px 32px",
            background: "var(--surface)",
            border: "1px solid var(--border)",
            borderRadius: "var(--radius-lg)",
            textDecoration: "none",
            color: "inherit",
            alignItems: "center",
            transition: "border-color 0.2s, background 0.2s"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = "var(--accent-ring)";}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--border)";}}>

              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <div style={{
                fontSize: 11, color: "var(--accent)",
                textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600
              }}>{it.tag}</div>
              </div>
              <div>
                <div className="h3" style={{ marginBottom: 8, fontSize: 18 }}>{it.t}</div>
                <p style={{ color: "var(--text-2)", lineHeight: 1.5, fontSize: 14, margin: 0 }}>{it.d}</p>
              </div>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--text-3)" strokeWidth="2">
                <path d="M7 17L17 7M7 7h10v10" />
              </svg>
            </a>
          )}
        </div>
      </div>
    </section>);

};

Object.assign(window, { ResearchHero, ResearchFocus, ResearchApproach, ResearchPartners, ResearchPublications });