/* eslint-disable @next/next/no-img-element */
import type { Metadata } from "next";
import type { CSSProperties } from "react";
import { notFound } from "next/navigation";
import Link from "next/link";
import { Arrow, PageFrame, ServiceHeroMedia } from "../../components/site-shell";
import { img, serviceBySlug, services } from "../service-data";
import { breadcrumbSchema, createMetadata, faqSchema, JsonLd, serviceSchema, webPageSchema } from "../../lib/seo";

type Props = { params: Promise<{ slug: string }> };

export function generateStaticParams() {
  return services.map(({ slug }) => ({ slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const service = serviceBySlug[slug];
  if (!service) return {};
  const description = `${service.short} Explore business challenges, deliverables, process, technologies and FAQs from NIOSUS.`;
  return createMetadata({title:`${service.name} Services | NIOSUS`,description,path:`/services/${slug}`,imageAlt:`${service.name} technology services by NIOSUS`});
}

export default async function ServicePage({ params }: Props) {
  const { slug } = await params;
  const service = serviceBySlug[slug];
  if (!service) notFound();
  const serviceIndex = services.findIndex((item) => item.slug === slug);
  const otherServices = [1, 2, 3].map((offset) => services[(serviceIndex + offset) % services.length]);
  const previous = services[(serviceIndex - 1 + services.length) % services.length];
  const next = services[(serviceIndex + 1) % services.length];
  const css = { "--service-accent": service.accent } as CSSProperties;
  const path = `/services/${service.slug}`;
  const schemas = [webPageSchema(path,`${service.name} Services | NIOSUS`,service.short),serviceSchema(service.name,service.overview,path),faqSchema(service.faqs),breadcrumbSchema([["Home","/"],["Services","/services"],[service.name,path]])];

  return <PageFrame current="/services">
    <div className="service-detail" style={css}>
      <section className={`service-hero service-hero-v${serviceIndex % 3}`} id="page-content">
        <ServiceHeroMedia image={img(service.hero, 2000)} label={service.name} />
        <div className="service-hero-shade"/><div className="service-hero-grid" aria-hidden="true"/>
        <div className="container service-hero-inner">
          <span className="eyebrow"><Link href="/services">Services</Link> / {service.name}</span>
          <h1>{service.statement}</h1>
          <div className="service-hero-foot"><p>{service.short}</p><div><a className="btn primary" href={`/contact?service=${service.slug}`}>Start an inquiry <Arrow/></a><a className="btn ghost" href="/contact?channel=live-chat">Request live chat <span aria-hidden="true">●</span></a></div></div>
        </div>
        <aside className="service-hero-index"><span>Service</span><strong>0{serviceIndex+1} / 09</strong><i/></aside>
      </section>

      <section className="service-overview section"><div className="container service-overview-grid">
        <div><span className="eyebrow">Overview</span><h2>What this service is for.</h2></div>
        <div><p>{service.overview}</p><a className="text-link" href={`/contact?service=${service.slug}`}>Discuss your context <Arrow/></a></div>
      </div></section>

      <section className="service-challenges section"><div className="container">
        <header className="section-heading inverse"><div><span className="eyebrow">Business challenges</span><h2>Signals that this<br/><em>work matters now.</em></h2></div><p>These are common starting points, not assumptions about your organisation.</p></header>
        <div className="challenge-grid">{service.challenges.map((challenge,index)=><article key={challenge}><span>0{index+1}</span><p>{challenge}</p></article>)}</div>
      </div></section>

      <section className="service-deliverables section"><div className="container deliverables-grid">
        <div className="deliverable-media"><img src={img(service.detail,1400)} srcSet={`${img(service.detail,700)} 700w, ${img(service.detail,1000)} 1000w, ${img(service.detail,1400)} 1400w`} sizes="(max-width: 980px) 100vw, 55vw" alt={`${service.name} delivery environment`} loading="lazy" decoding="async"/><div><span>{service.name}</span><strong>Designed for your operating context</strong></div></div>
        <div><span className="eyebrow">Deliverables</span><h2>What the engagement can produce.</h2><ol>{service.deliverables.map((item,index)=><li key={item}><span>0{index+1}</span>{item}</li>)}</ol></div>
      </div></section>

      <section className="service-process section"><div className="container">
        <header className="section-heading"><div><span className="eyebrow">Process</span><h2>From context<br/><em>to operating capability.</em></h2></div><p>Every phase reduces uncertainty and leaves a visible decision, artifact or working result.</p></header>
        <div className="service-process-line">{service.process.map(([name,copy],index)=><article key={name}><span>0{index+1}</span><i/><h3>{name}</h3><p>{copy}</p></article>)}</div>
      </div></section>

      <section className="service-technology section"><div className="container tech-grid">
        <div><span className="eyebrow">Technologies</span><h2>Tools follow the architecture.</h2><p>This is a representative technology direction, not a requirement to use every item.</p></div>
        <div>{service.technologies.map((technology,index)=><span key={technology}><small>0{index+1}</small>{technology}</span>)}</div>
      </div></section>

      <section className="ideal-clients section"><div className="container">
        <header className="section-heading"><div><span className="eyebrow">Ideal clients</span><h2>A good fit when<br/><em>the problem is specific.</em></h2></div><p>You do not need a finished specification. You do need a real operating problem or product opportunity.</p></header>
        <div className="ideal-grid">{service.ideal.map((item,index)=><article key={item}><span>0{index+1}</span><p>{item}</p></article>)}</div>
      </div></section>

      <section className="related-service-work"><div className="container related-work-grid">
        <div><span className="eyebrow">Related work direction</span><h2>{service.related[0]}</h2><p>{service.related[1]}</p><small>Concept showcase · Not presented as completed client work</small><a className="text-link light" href="/projects">Explore project directions <Arrow/></a></div>
        <img src={img(service.related[2],1400)} srcSet={`${img(service.related[2],700)} 700w, ${img(service.related[2],1000)} 1000w, ${img(service.related[2],1400)} 1400w`} sizes="(max-width: 980px) 100vw, 60vw" alt={`${service.related[0]} representative project direction`} loading="lazy" decoding="async"/>
      </div></section>

      <section className="service-faq section"><div className="container faq-grid">
        <header><span className="eyebrow">Frequently asked questions</span><h2>Before we begin.</h2></header>
        <div>{service.faqs.map(([question,answer],index)=><details key={question}><summary><span>0{index+1}</span>{question}<i>+</i></summary><p>{answer}</p></details>)}</div>
      </div></section>

      <section className="service-inquiry"><div className="container service-inquiry-grid">
        <div><span className="eyebrow">Talk to NIOSUS</span><h2>Make {service.name.toLowerCase()} useful in your context.</h2></div>
        <div><p>Start with the challenge, not a predetermined tool. We will help define the right scope and next step.</p><a className="btn primary" href={`/contact?service=${service.slug}`}>Start an inquiry <Arrow/></a><a className="btn ghost" href="/contact?channel=live-chat">Request live chat <span aria-hidden="true">●</span></a></div>
      </div></section>

      <nav className="more-services" aria-label="Related services"><div className="container"><span className="eyebrow">Continue exploring</span><div>{otherServices.map((item)=><a href={`/services/${item.slug}`} key={item.slug}><span>{item.name}</span><Arrow/></a>)}</div></div></nav>
      <nav className="service-route-nav" aria-label="Service page navigation"><a href={`/services/${previous.slug}`}><small>Previous service</small><span>← {previous.name}</span></a><div><Link href="/services">All services</Link><a href="/solutions">Solutions</a><a href="/projects">Projects</a><a href="/about">About NIOSUS</a></div><a href={`/services/${next.slug}`}><small>Next service</small><span>{next.name} →</span></a></nav>
      <JsonLd data={schemas}/>
    </div>
  </PageFrame>;
}