/* eslint-disable @next/next/no-img-element */
import type { Metadata } from "next";
import { Arrow, PageFrame, PageHero, ProjectCta } from "../components/site-shell";
import { breadcrumbSchema, JsonLd, webPageSchema } from "../lib/seo";

export const metadata: Metadata = {
  title: "About NIOSUS | Networked intelligence",
  description: "Discover the story, mission, vision, values, technology philosophy and AI-first direction behind NIOSUS.",
  alternates: { canonical: "/about" },
  openGraph: { title: "About NIOSUS", description: "Networked Intelligence Optimizing Systems, Users, and Services.", url: "/about", images: [{url:"/og.jpg",width:1200,height:630,alt:"About NIOSUS"}] },
};

const IMG = (id: string, w = 1400) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=86`;
const meaning = [
  ["N","Networked","Connected by design across teams, platforms and markets."],
  ["I","Intelligence","Insight that turns complexity into confident action."],
  ["O","Optimizing","Continuous improvement built into every system."],
  ["S","Systems","Technology designed as one coherent whole."],
  ["U","Users","Human needs remain the measure of useful innovation."],
  ["S","Services","Capability delivered with clarity and accountability."],
];
const expertise = [
  ["Intelligence","Artificial intelligence, data analysis and decision systems.","/ai"],
  ["Engineering","Software, web, mobile, desktop and hardware systems.","/services"],
  ["Infrastructure","Telecommunications, cloud, IT and cybersecurity.","/services"],
  ["Growth","Creative media, digital marketing and channel operations.","/projects"],
  ["Automation","Connected workflows that give organisations capacity back.","/solutions"],
  ["Direction","Consulting and training for consequential technology decisions.","/contact"],
];

export default function About() {
  return <PageFrame current="/about"><JsonLd data={[webPageSchema("/about","About NIOSUS | Networked intelligence","Discover the story, mission, vision, values, technology philosophy and AI-first direction behind NIOSUS.","AboutPage"),breadcrumbSchema([["Home","/"],["About NIOSUS","/about"]])]}/>
    <PageHero eyebrow="Company / About NIOSUS" title={<>Technology works better<br /><em>when its parts work together.</em></>} copy="NIOSUS brings software, AI, infrastructure, security and growth work into one coordinated delivery system." image={IMG("photo-1497366811353-6870744d04b2",2200)}>
      <a className="btn primary" href="#story">Enter the story <Arrow /></a>
    </PageHero>

    <section className="about-manifesto" id="story"><div className="container">
      <span className="eyebrow">The premise</span>
      <p>Your customers do not see departments. They see whether the whole experience works.</p>
      <div><span>Product</span><i /><span>Network</span><i /><span>Intelligence</span><i /><span>Experience</span></div>
    </div></section>

    <section className="about-story section"><div className="container about-story-grid">
      <aside><span className="eyebrow">Company story / Four lenses</span><h2>NIOSUS starts where handoffs fail.</h2><div className="story-signal"><i /><i /><i /><i /><span>Four connected disciplines</span></div></aside>
      <div className="story-chapters">
        {[["The problem","Software, infrastructure, content and support are often planned separately, even though people experience them together."],["What NIOSUS does","We put the necessary disciplines around one brief, one delivery sequence and one definition of success."],["How work moves","Discovery, design, engineering, integration and security happen as connected decisions—not a chain of disconnected handoffs."],["Where AI fits","AI is used where it can reduce effort, improve decisions or make service more useful, with people responsible for the outcome."]].map(([title,copy],i)=><article key={title}><span>{title}</span><p>{copy}</p><img src={IMG(["photo-1553877522-43269d4ea984","photo-1518770660439-4636190af475","photo-1552664730-d307ca884978","photo-1535378917042-10a22c95931a"][i],1000)} alt={`${title}: connected technology work at NIOSUS`} loading="lazy"/></article>)}
      </div>
    </div></section>

    <section className="name-system section"><div className="container">
      <header className="section-heading inverse"><div><span className="eyebrow">The meaning inside the name</span><h2>Networked Intelligence<br /><em>Optimizing everything.</em></h2></div><p>Our name is an operating principle: connect intelligence to the systems, users and services it must improve.</p></header>
      <div className="name-grid">{meaning.map(([letter,word,copy],i)=><article key={`${letter}-${word}`}><span>0{i+1} / {letter}</span><h3>{word}</h3><p>{copy}</p></article>)}</div>
    </div></section>

    <section className="purpose section"><div className="container purpose-grid">
      <article><span className="eyebrow">Mission</span><h2>Make technology easier to use, operate, secure and improve.</h2><img src={IMG("photo-1555949963-ff9fe0c870eb",1200)} alt="Software engineering environment representing the NIOSUS mission" loading="lazy"/></article>
      <article><span className="eyebrow">Vision</span><h2>Organisations whose tools, data and teams work as one system.</h2><img src={IMG("photo-1451187580459-43490279c0fa",1200)} alt="Connected global systems representing the NIOSUS vision" loading="lazy"/></article>
    </div></section>

    <section className="values section"><div className="container">
      <header className="section-heading"><div><span className="eyebrow">Values / How the work behaves</span><h2>Principles that survive<br /><em>real delivery.</em></h2></div><p>Values matter when they shape decisions, trade-offs and what clients experience.</p></header>
      <div className="values-track">{[["Clarity","Explain the decision, the trade-off and what happens next."],["Usefulness","Judge technology by the work it improves."],["Integrity","Say what is known, what is uncertain and what still needs proof."],["Craft","Care about architecture, interfaces and the details people notice."],["Adaptability","Build so teams and systems can change without starting over."],["Accountability","Stay responsible for the outcome, not only the deliverable."]].map(([t,c],i)=><article key={t}><span>0{i+1}</span><h3>{t}</h3><p>{c}</p></article>)}</div>
    </div></section>

    <section className="founder-section section"><div className="container founder-grid founder-grid-editorial">
      <div className="founder-principle" aria-hidden="true"><span>NIOSUS / Founding principle</span><strong>Connect the system.<br/>Improve the outcome.</strong><i>Network / Intelligence / Operations</i></div>
      <div><span className="eyebrow">Founding principle</span><h2>Build the whole system around useful outcomes.</h2><blockquote>NIOSUS is built on the idea that technology creates more value when its parts are planned together.</blockquote><p>The company is shaped around a practical belief: software, intelligence, infrastructure and media should not compete for attention. They should reinforce each other until the organisation becomes easier to run, improve and trust.</p><a className="text-link" href="/contact">Talk with NIOSUS <Arrow /></a></div>
    </div></section>

    <section className="expertise-map section"><div className="container">
      <header className="section-heading inverse"><div><span className="eyebrow">Areas of expertise</span><h2>Six connected<br /><em>areas of work.</em></h2></div><p>The mix changes by project. Direction, delivery sequence and accountability stay shared.</p></header>
      <div className="expertise-grid">{expertise.map(([title,copy,href],i)=><a href={href} key={title}><span>0{i+1}</span><h3>{title}</h3><p>{copy}</p><Arrow /></a>)}</div>
    </div></section>

    <section className="philosophy section"><div className="container philosophy-grid">
      <div className="philosophy-media"><img src={IMG("photo-1518770660439-4636190af475",1600)} alt="Precision electronic components illustrating systems engineering" loading="lazy"/><div><span>Technology philosophy</span><strong>System &gt; feature</strong></div></div>
      <div><span className="eyebrow">Technology philosophy</span><h2>Start with the work, then choose the tools.</h2><p>We examine who will use the system, how information moves, what can fail and who will maintain it. Those answers shape the architecture.</p><ul><li>Define the operating problem first</li><li>Build security into the foundation</li><li>Treat usability as a system requirement</li><li>Prove value before scaling</li></ul></div>
    </div></section>

    <section className="ai-direction"><img src={IMG("photo-1485827404703-89b55fcc595e",2200)} alt="Human-directed robotics representing the NIOSUS AI-first direction" loading="lazy"/><div className="ai-direction-shade"/><div className="container"><span className="eyebrow">AI-first direction</span><h2>Use AI where it changes the work.</h2><p>That can mean faster retrieval, fewer repetitive steps, better decision support or more useful service. Every use still needs trusted information, evaluation and a responsible person.</p><a className="btn primary" href="/ai">Explore our AI direction <Arrow /></a></div></section>

    <section className="culture section"><div className="container culture-grid">
      <div><span className="eyebrow">Company culture</span><h2>Go deep.<br /><em>Explain clearly.</em></h2><p>NIOSUS values people who know their discipline, show their reasoning and can work across boundaries without lowering the standard.</p><a className="text-link" href="/careers">Explore careers <Arrow /></a></div>
      <div className="culture-gallery"><img src={IMG("photo-1522071820081-009f0129c71c",1100)} alt="Team collaborating in a technology workspace" loading="lazy"/><img src={IMG("photo-1497366754035-f200968a6e72",900)} alt="Contemporary technology workspace" loading="lazy"/><span>Collaboration / Craft / Learning</span></div>
    </div></section>

    <section className="operating-principles section"><div className="container"><header className="section-heading"><div><span className="eyebrow">Operating principles</span><h2>How projects<br /><em>stay on course.</em></h2></div><p>Five practical rules for decisions, communication and transfer of capability.</p></header><div className="editorial-list">{[["Keep one brief","Strategy, design, engineering, infrastructure and growth work from the same definition of success."],["Keep decisions close","People with the relevant expertise stay involved when trade-offs are made."],["Prefer useful over novel","A technology choice must improve the system, not merely modernise the vocabulary."],["Leave capability behind","Documentation, explanation and training are part of delivery."],["Show real progress","Status, risk and next actions remain visible without inflated claims."]].map(([t,c],i)=><article key={t}><span>0{i+1}</span><h3>{t}</h3><p>{c}</p></article>)}</div></div></section>
    <ProjectCta title="Build with a connected team." copy="Start with the problem. NIOSUS will help shape the right system, capability and path forward."/>
  </PageFrame>;
}