/* eslint-disable @next/next/no-img-element */
import type { Metadata } from "next";
import Link from "next/link";
import { Arrow, AudienceLaunchpad, HomeHero, NiosusSystemComposer, PageFrame, SignalStandards } from "./components/site-shell";
import { createMetadata, JsonLd, webPageSchema } from "./lib/seo";

const description = "NIOSUS connects intelligence, software, infrastructure and media to build systems that move ambitious organisations forward.";
export const metadata: Metadata = createMetadata({ title: "NIOSUS | Connected technology for ambitious organisations", description, path: "/" });

const IMG = (id: string, width = 1400) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${width}&q=86`;
const gateways = [
  ["01", "Company", "A connected technology company built around useful intelligence.", "/about", "photo-1524758631624-e2822e304c36"],
  ["02", "Services", "Twenty disciplines working as one accountable delivery system.", "/services", "photo-1498050108023-c5249f4df085"],
  ["03", "Solutions", "Integrated answers to operational and market challenges.", "/solutions", "photo-1551434678-e076c223a692"],
  ["04", "Products", "Focused digital products across relationships, markets and media.", "/products", "photo-1504639725590-34d0984388bd"],
  ["05", "Projects", "Representative directions for platforms, infrastructure and growth.", "/projects", "photo-1522202176988-66273c2fd55f"],
];

export default function Home() {
  return (
    <PageFrame>
      <JsonLd data={webPageSchema("/", "NIOSUS | Connected technology for ambitious organisations", description)} />
      <HomeHero>
        <div className="container home-hero-inner">
          <span className="eyebrow">NIOSUS / Global technology company</span>
          <h1>Complexity,<br /><em>made powerful.</em></h1>
          <div className="home-hero-foot">
            <p>We connect intelligence, software, infrastructure and media to build systems that move ambitious organisations forward.</p>
            <div><Link className="btn primary" href="/services">Explore our capabilities <Arrow /></Link><a className="btn ghost" href="/contact">Talk to us <Arrow /></a></div>
          </div>
        </div>
      </HomeHero>

      <section className="home-intro section">
        <div className="container editorial-intro">
          <span className="eyebrow">One company / many disciplines</span>
          <div>
            <h2>Build the system,<br />not another silo.</h2>
            <p>NIOSUS brings strategy, design, engineering, infrastructure, security and growth into one connected operating model. This homepage is the doorway, not the whole building.</p>
            <a className="text-link" href="/about">Understand NIOSUS <Arrow /></a>
          </div>
        </div>
      </section>

      <NiosusSystemComposer />

      <section className="route-gateways">
        <div className="container">
          <header className="section-heading inverse">
            <div><span className="eyebrow">Explore the platform</span><h2>Dedicated journeys.<br /><em>One shared standard.</em></h2></div>
            <p>Every part of NIOSUS now has its own place, purpose and path forward.</p>
          </header>
          <div className="gateway-grid">
            {gateways.map(([no, title, copy, href, image], index) => (
              <a className={index === 0 || index === 3 ? "gateway-wide" : ""} href={href} key={href}>
                <img src={IMG(image, 1100)} alt={`${title} technology direction`} loading="lazy" />
                <div /><span>{no}</span><h3>{title}</h3><p>{copy}</p><Arrow />
              </a>
            ))}
          </div>
        </div>
      </section>

      <AudienceLaunchpad />

      <section className="home-ai">
        <div className="container home-ai-grid">
          <div>
            <span className="eyebrow">Artificial intelligence</span>
            <h2>Useful intelligence.<br /><em>Directed by people.</em></h2>
            <p>Applied AI for decisions, service and automation - grounded in operational reality and designed around human accountability.</p>
            <a className="btn primary" href="/ai">Explore NIOSUS AI <Arrow /></a>
          </div>
          <img src={IMG("photo-1531746790731-6c087fecd65a", 1500)} alt="Human-directed intelligent robotics system" loading="lazy" />
        </div>
      </section>

      <SignalStandards />

      <section className="home-final">
        <div className="container">
          <span className="eyebrow">Ready when the problem is real</span>
          <h2>What should<br /><em>work better?</em></h2>
          <div><a className="btn primary" href="/contact">Start a project <Arrow /></a><a className="text-link light" href="/projects">View project directions <Arrow /></a></div>
        </div>
      </section>
    </PageFrame>
  );
}