// Über uns — matched to site vocabulary

// ----- Hero (centered, like other pages) -----
const AboutHero = () =>
<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, var(--accent-soft), transparent 60%)",
    pointerEvents: "none"
  }} />
    <div className="container" style={{ textAlign: "center", position: "relative", maxWidth: 1200 }}>
      <div className="eyebrow" style={{ marginBottom: 28 }}>
        <span className="dot" />
        Über expandAI
      </div>
      <h1 className="h1 gradient-text" style={{ marginBottom: 24, maxWidth: 1200, marginLeft: "auto", marginRight: "auto", fontSize: "clamp(40px, 5.5vw, 76px)" }}>
        Aus der <br className="h1-wrap" />KI-Spitzenforschung <br className="h1-wrap" />in die Kanalinspektion.
      </h1>
      <p className="lead" style={{ maxWidth: 680, margin: "0 auto" }}>expandAI automatisiert die Auswertung der TV-Befahrung und die Zustandserfassung, damit Inspekteure schneller, genauer und wirtschaftlicher arbeiten.


    </p>
    </div>
  </section>;



// ----- Team: cards matching site style, with bigger portraits -----
const TeamCard = ({ img, name, role, bio, linkedin, n }) =>
<div className="card" style={{
  padding: 28,
  display: "flex",
  flexDirection: "column",
  gap: 20,
  transition: "border-color 0.2s ease"
}}>
    <div style={{
    position: "relative",
    width: "100%",
    aspectRatio: "1/1",
    borderRadius: "var(--radius)",
    overflow: "hidden",
    background: "var(--bg-2)",
    border: "1px solid var(--border)"
  }}>
      <img
      src={img}
      alt={`${name} – ${role} bei expandAI, KI Kanalinspektion`}
      loading="lazy"
      decoding="async"
      referrerPolicy="no-referrer"
      style={{ display: "block", width: "100%", height: "100%", objectFit: "cover" }} />
    </div>

    <div>
      <div className="h3" style={{ fontSize: 19, marginBottom: 6, letterSpacing: "-0.015em" }}>
        {name}
      </div>
      <div style={{
      fontSize: 11, color: "var(--accent)",
      textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600
    }}>{role}</div>
    </div>

    {Array.isArray(bio)
    ? <ul style={{ color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.55, margin: 0, paddingLeft: 0, listStyle: "none", flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
        {bio.map((item, i) =>
        <li key={i} style={{ position: "relative", paddingLeft: 16 }}>
            <span style={{ position: "absolute", left: 0, top: "0.62em", width: 5, height: 5, borderRadius: "50%", background: "var(--accent)" }} />
            {item}
          </li>)}
      </ul>
    : <p style={{ color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.6, margin: 0, flex: 1 }}>{bio}</p>}

    {linkedin &&
  <a href={linkedin} target="_blank" rel="noopener noreferrer" style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    fontSize: 12, color: "var(--text-3)",
    paddingTop: 16, borderTop: "1px solid var(--border)",
    transition: "color 0.15s ease"
  }}
  onMouseEnter={(e) => e.currentTarget.style.color = "var(--text)"}
  onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-3)"}>
    
        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
          <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v15H.22V8zm7.5 0h4.37v2.05h.06c.61-1.16 2.1-2.39 4.32-2.39 4.62 0 5.47 3.04 5.47 7v8.34h-4.56v-7.4c0-1.77-.03-4.05-2.47-4.05-2.47 0-2.85 1.93-2.85 3.92V23h-4.55V8z" />
        </svg>
        LinkedIn
      </a>
  }
  </div>;


const AboutTeam = () => {
  const people = [
  {
    n: "01",
    name: "Artur Piet",
    role: "Geschäftsführer",
    img: "images/artur-piet.avif",
    bio: "Artur promoviert an der Universität zu Lübeck im Bereich Deep Learning für multimodale Daten. Bei expandAI verantwortet er die Produktstrategie der KI-gestützten Kanalinspektion.",
    linkedin: "https://www.linkedin.com/in/artur-piet/"
  },
  {
    n: "02",
    name: "Prof. Dr.-Ing. Marcin Grzegorzek",
    role: "Gründer",
    img: "https://static.wixstatic.com/media/a00034_a608d1052fc242a8a6dafb2a180acad2~mv2.jpg/v1/fill/w_600,h_600,al_c,q_85/Marcin.jpg",
    bio: "Marcin zählt laut Handelsblatt zu den vier innovativsten KI-Köpfen Deutschlands. Er leitet das Deutsche Forschungszentrum für KI in Lübeck und ist Träger des Norddeutschen Zukunftspreises.",
    linkedin: "https://www.linkedin.com/in/marcin-grzegorzek/"
  },
  {
    n: "03",
    name: "David Piet",
    role: "Bauwirtschaftsingenieur",
    img: "images/david-piet.jpg",
    bio: "David war nach seinem Master an der TU Braunschweig Projektmanager bei der Daimler AG. Heute bringt er die Anforderungen der Kanalinspektion in die Produktentwicklung ein.",
    linkedin: "https://www.linkedin.com/in/david-piet/"
  }];


  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 880 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Unternehmen · Made in Germany
          </div>
          <h2 className="h2 gradient-text">Gründer und Geschäftsführung von expandAI.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {people.map((p, i) => <TeamCard key={i} {...p} />)}
        </div>
      </div>
    </section>);

};


// ----- Values: 2x2 grid of cards with mono numbers (matches How / Standards) -----
const AboutValues = () => {
  const values = [
  {
    n: "01",
    t: "Norm vor Hype",
    d: "Unsere Modelle sind an DIN EN 13508-2 und DWA-M 149-2 gebunden. Jede Klassifikation hat einen Code, jeder Code eine Quelle."
  },
  {
    n: "02",
    t: "Mensch entscheidet",
    d: "Die KI macht Vorschläge, der Inspekteur gibt frei. Jeder Schritt im Audit-Trail nachvollziehbar."
  },
  {
    n: "03",
    t: "Daten bleiben in der EU",
    d: "Verarbeitung in deutschen Rechenzentren bei europäischen Anbietern. Keine Trainings­daten ohne ausdrückliche Freigabe."
  },
  {
    n: "04",
    t: "Aus der Praxis",
    d: "Wir entwickeln nicht im Labor. Unser Team ist regelmäßig im Feld — bei Inspektionen, in Werkstätten, beim Kunden vor Ort."
  }];


  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" />
            Werte
          </div>
          <h2 className="h2 gradient-text">Vier Prinzipien, die unsere Arbeit leiten.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {values.map((v, i) =>
          <div key={i} className="card" style={{ padding: 32 }}>
              <div style={{
              fontFamily: "JetBrains Mono, monospace",
              fontSize: 13, color: "var(--accent)",
              marginBottom: 24, letterSpacing: "0.08em"
            }}>{v.n}</div>
              <div className="h3" style={{ marginBottom: 12 }}>{v.t}</div>
              <p style={{ color: "var(--text-2)", lineHeight: 1.55, fontSize: 14, margin: 0 }}>{v.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};


// ----- Final CTA matching landing FinalCTA -----
const AboutContact = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{
      textAlign: "center",
      padding: "80px 32px",
      background: "radial-gradient(ellipse at center top, var(--accent-soft), transparent 60%), var(--surface)",
      border: "1px solid var(--border)",
      borderRadius: "var(--radius-xl)",
      position: "relative",
      overflow: "hidden"
    }}>
        <h2 className="h2 gradient-text" style={{ marginBottom: 16 }}>
          Lassen Sie uns sprechen.
        </h2>
        <p className="lead" style={{ maxWidth: 520, margin: "0 auto 32px" }}>
          Ob Pilotprojekt, Forschungs­kooperation oder einfach ein Austausch —
          wir freuen uns über Ihren Kontakt.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="kontakt.html" className="btn btn-primary btn-lg">Kontakt aufnehmen</a>
          <a href="https://app.expandai.de/login" target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-lg">Ausprobieren</a>
        </div>
      </div>
    </div>
  </section>;



Object.assign(window, { AboutHero, AboutTeam, AboutValues, AboutContact });