/* global React */
// Use of AI — legal/technical disclosure page (EU AI Act transparency).
// Rendered by the SPA router in sections.jsx at route "#/use-of-ai".

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

  const features = [
    { ico: "cable", title: "Non-invasive integration", body: "Integrates with your existing enterprise IT infrastructure — no complex, time-consuming data migration or system overhauls." },
    { ico: "hub", title: "Silo-free information access", body: "Breaks down data silos with one unified platform to access information from disparate sources, regardless of file format or storage location." },
    { ico: "search", title: "AI-powered search & retrieval", body: "Advanced AI algorithms understand natural-language queries and return accurate, relevant information from vast amounts of unstructured data." },
    { ico: "groups", title: "Enhanced collaboration", body: "Facilitates better communication and knowledge sharing among project stakeholders, enabling more effective collaboration and decision-making." },
    { ico: "bolt", title: "Improved efficiency", body: "By streamlining access and cutting time spent searching for data, professionals work more efficiently and productively." },
  ];

  const misuse = [
    { ico: "gpp_maybe", title: "Data breaches & privacy violations", body: "If not properly secured, the system could be vulnerable to unauthorized access, potentially leading to data breaches and privacy violations." },
    { ico: "balance", title: "Misinformation & bias", body: "The underlying AI models could inadvertently perpetuate biases present in training data, leading to misinformation or unfair outcomes." },
    { ico: "psychology_alt", title: "Over-reliance & deskilling", body: "Over-reliance on the system without critical evaluation of its outputs could erode professional judgment and decision-making skills." },
    { ico: "work_off", title: "Job displacement", body: "While intended to augment human capabilities, there is potential for displacement in certain roles if tasks become fully automated." },
  ];

  const mitigations = [
    { ico: "lock", title: "Robust security measures", body: "Strong security protocols protect the system from unauthorized access and data breaches." },
    { ico: "balance", title: "Bias detection & mitigation", body: "We continuously monitor and evaluate the models for bias and take corrective action to ensure fairness and accuracy." },
    { ico: "school", title: "User training & education", body: "Comprehensive training and educational resources help users work effectively and responsibly with the system." },
    { ico: "verified_user", title: "Ethical considerations", body: "We adhere to ethical-AI principles and guidelines so the system benefits society and the construction industry." },
  ];

  const transparency = [
    { n: "01", title: "Clear communication", body: "We clearly inform users when they are interacting with an AI system, displayed prominently on our website and within the interface, with concise explanations of its capabilities and limitations." },
    { n: "02", title: "Information on AI-enabled functions", body: "We identify which functions are powered by AI — such as search and information retrieval — and describe how they work, including the types of algorithms used and the data they are trained on." },
    { n: "03", title: "Human oversight & responsibility", body: "While the system automates many tasks, human experts monitor performance, validate outputs, and make final decisions. We identify the parties responsible for decision-making to ensure accountability." },
    { n: "04", title: "Rights to object & seek redress", body: "Users may object to decisions made by the AI system — particularly if they believe them unfair, biased, or inaccurate — through clear channels for support, complaints, and appeals." },
    { n: "05", title: "Accessibility & understandability", body: "Information about the system is presented clearly and concisely, in plain language and free of technical jargon, so it is accessible to a wide range of users." },
    { n: "06", title: "Continuous improvement", body: "We continuously improve the transparency of our AI system based on user feedback and evolving best practices, regularly reviewing and updating our disclosures." },
  ];

  const control = [
    { ico: "toggle_off", title: "Disabled by default", body: "All new AI-powered features are off by default — no unexpected or unwanted AI functionality without explicit consent." },
    { ico: "touch_app", title: "Client-initiated activation", body: "Clients alone decide which features to activate, through a simple, intuitive process that requires clear, informed consent." },
    { ico: "description", title: "Detailed feature descriptions", body: "Before activating any feature, clients get a detailed description of its functionality, benefits, and potential implications." },
    { ico: "tune", title: "Granular control", body: "Enable or disable specific functionalities as desired, tailoring the AI experience to your unique requirements." },
    { ico: "update", title: "Ongoing feature updates", body: "New features are introduced periodically, also disabled by default; clients are notified and given the option to activate them." },
  ];

  function Group({ items }) {
    return (
      <div className="doc__list">
        {items.map((m, i) => (
          <div key={i} className="doc__item">
            <div className="doc__item-ico"><span className="cue-icon">{m.ico}</span></div>
            <div>
              <h3 className="h3 doc__item-title">{m.title}</h3>
              <p className="p doc__item-body">{m.body}</p>
            </div>
          </div>
        ))}
      </div>
    );
  }

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

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

            <h1 className="h1 doc__title">Use of AI</h1>

            <p className="lead doc__lead">
              Cue offers an advanced Agent as a Service for the construction industry. It maps
              your AECO data, breaks down silos, and unifies information across all formats —
              so anyone can search and access what they need, independent of where it lives or
              what format it's in.
            </p>

            <p className="p doc__feedback">
              Questions about how we use AI? Please feel free to
              {" "}<a className="doc__link" href="mailto:mail@qaecy.com">let us know</a> — we are
              here to help.
            </p>

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Intended use</h2>
            <p className="p doc__sub">
              This AI-powered system is intended to streamline information retrieval and
              knowledge sharing within construction projects. By breaking down information silos
              and enabling seamless access to data, it aims to improve decision-making, enhance
              collaboration, and increase overall efficiency in the construction process.
            </p>

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Key features &amp; benefits</h2>
            <Group items={features} />

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Foreseeable misuse</h2>
            <p className="p doc__sub">
              While designed for legitimate, beneficial use within the construction industry, it
              is essential to acknowledge potential misuse scenarios.
            </p>
            <Group items={misuse} />

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Mitigating misuse</h2>
            <p className="p doc__sub">
              To mitigate these risks, we are committed to implementing appropriate safeguards.
            </p>
            <Group items={mitigations} />

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Transparency obligations</h2>
            <p className="p doc__sub">
              In compliance with the EU AI Act, our AI system adheres to the following
              obligations to ensure transparency and user trust.
            </p>
            <ol className="doc__steps">
              {transparency.map((s) => (
                <li key={s.n} className="doc__step">
                  <span className="doc__step-n">{s.n}</span>
                  <div>
                    <h3 className="h3 doc__item-title">{s.title}</h3>
                    <p className="p doc__item-body">{s.body}</p>
                  </div>
                </li>
              ))}
            </ol>

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Client control &amp; feature activation</h2>
            <p className="p doc__sub">
              Our clients have full control over their AI experience, with a feature-activation
              mechanism that prioritizes user choice and transparency.
            </p>
            <Group items={control} />

            <div className="doc__divider" />

            <div className="doc__footer-row">
              <span className="doc__updated">Last updated June 2026</span>
              <a href="#top"><Button variant="secondary" size="m" leadingIcon="arrow_back">Back to home</Button></a>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return UseOfAI;
})();

window.UseOfAI = UseOfAI;