/* global React */
// About — company page. Rendered by the SPA router in sections.jsx
// at route "#/about".

const About = (function () {
  const { Button } = window.CueDesignSystem_89ac8b;
  const { useEffect } = React;

  const team = [
    {
      img: "assets/team/philipp.jpg",
      name: "Philipp Dohmen",
      role: "Founder and Builder of Ecosystem",
      bio: "An enthusiast, architect and strategist for information technology. Expert in virtual design, building information models, and process facilitator. Builder of ecosystems and spinning ideas and innovations for a data-driven real estate and construction industry.",
      linkedin: "https://linkedin.com/in/philipp-dohmen-357461159",
    },
    {
      img: "assets/team/manos.jpg",
      name: "Manos Argyris",
      role: "Founder and Data Scientist",
      bio: "Data Scientist with a background in Architectural Engineering. Former researcher at ETH Zurich, with expertise at the intersection of Deep Learning, Graph Learning, and Natural Language Processing. Experienced in multimodal information extraction, semantic search, and agentic application development.",
      linkedin: "https://linkedin.com/in/manos-argyris",
    },
    {
      img: "assets/team/mads.jpg",
      name: "Mads Rasmussen",
      role: "Founder and Wizard of Data Engineering",
      bio: "Author of the Building Topology Ontology (BOT), data engineer and expert in linked data in relation to the built environment. PhD and Architectural Engineer with main competences in HVAC-design, interdisciplinary coordination, energy simulations and with a rare ability to convey technically difficult concepts in a visual and understandable way. General developer of digital design tools and frontends.",
      linkedin: "https://linkedin.com/in/mads-holten-rasmussen-061b7414",
    },
    {
      img: "assets/team/christian.jpg",
      name: "Christian Frausing",
      role: "Computer Scientist and Data Analyst",
      bio: "A data engineer with degrees in Architectural Engineering and Computer Science, specialized in algorithms and AI. The journey started with building scalable data pipelines and ETL processes for AI systems, and a passion for building robust data architectures that seamlessly connect AI models to existing infrastructure. At QAECY he ensures data integrity while building innovative solutions.",
      linkedin: "https://www.linkedin.com/in/christian-frausing-9b1466ba/",
    },
    {
      img: "assets/team/connie.jpg",
      name: "Connie Reber",
      role: "Ethical Change Management",
      bio: "A passionate implementer with a flair for change that works. Bringer of good-humored expertise to every project, working with the change team to develop a clearly structured transformation roadmap. An advocate of change driven by adaptability, collaboration and continuous learning.",
      linkedin: "https://www.linkedin.com/in/allyallez/",
    },
  ];

  function About() {
    useEffect(() => { window.scrollTo(0, 0); }, []);

    return (
      <main className="doc about section section--canvas" data-screen-label="About">
        <div className="container">
          <div className="doc__wrap about__wrap">
            <a className="doc__back" href="#top">
              <span className="cue-icon">arrow_back</span> Back to home
            </a>

            <h1 className="h1 doc__title">Why QAECY?</h1>

            <p className="lead doc__lead">
              We help AEC organisations open up to a data-driven way of work. Better decisions
              derive from the combined knowledge of great teams with a shared goal: to make our
              industry better and truly sustainable.
            </p>
            <p className="p" style={{ marginTop: 18 }}>
              Our solutions open previously inaccessible data, uncover hidden information from
              idle silos — independent of their files and formats — and empower people to take
              better decisions. We help overcome the current practice of claims and enable true
              cooperation on the basis of trustful, shared information.
            </p>
          </div>

          <div className="doc__divider about__divider" />

          <div className="doc__wrap about__wrap">
            <h2 className="h2 doc__h2">The team</h2>
            <p className="p doc__sub">
              Founders and builders at the intersection of architecture, data science and the
              built environment.
            </p>
          </div>

          <div className="team-grid">
            {team.map((m, i) => (
              <article key={i} className="team-card">
                <div className="team-card__photo">
                  <img src={m.img} alt={m.name} loading="lazy" />
                </div>
                <div className="team-card__body">
                  <h3 className="team-card__name">{m.name}</h3>
                  <p className="team-card__role">{m.role}</p>
                  <p className="team-card__bio">{m.bio}</p>
                  <a className="team-card__link" href={m.linkedin} target="_blank" rel="noopener noreferrer">
                    <span className="cue-icon">link</span> LinkedIn
                  </a>
                </div>
              </article>
            ))}
          </div>

          <div className="doc__wrap about__wrap">
            <div className="doc__divider" />
            <div className="doc__footer-row">
              <span className="doc__updated">QAECY AG · Regensdorf, Switzerland</span>
              <a href="#top"><Button variant="secondary" size="m" leadingIcon="arrow_back">Back to home</Button></a>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return About;
})();

window.About = About;