import type { Metadata } from "next";
import type { CSSProperties } from "react";
import Link from "next/link";
import { ArrowRight, Check, ChevronRight } from "lucide-react";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { ProductVisual } from "@/app/components/ProductVisual/ProductVisual";
import { JsonLd } from "@/app/lib/structured-data";
import { AnimatedDiv, AnimatedSection } from "@/app/components/Motion/AnimatedSection";
import styles from "../product-page.module.css";

export const metadata: Metadata = {
  title: "UniNet",
  description:
    "A unified network workspace connecting teams, partners, and systems through one operational graph.",
  alternates: { canonical: "/products/uninet" },
  openGraph: {
    title: "UniNet - Unified Network Operations",
    description: "Connect teams, partners, and systems into one operational graph for real-time execution visibility.",
    url: "/products/uninet",
  },
};

const metrics = [
  {
    label: "System visibility",
    value: "Single pane",
    detail: "Monitor cross-team operations and dependencies from one workspace.",
  },
  {
    label: "Coordination latency",
    value: "-60%",
    detail: "Reduce handoff delays with shared contexts and automated routing.",
  },
  {
    label: "Execution clarity",
    value: "24/7",
    detail: "Always know who owns what, what is blocked, and what ships next.",
  },
];

const capabilities = [
  {
    title: "Operational graph view",
    detail: "Visualize relationships between teams, projects, vendors, and systems.",
  },
  {
    title: "Smart routing",
    detail: "Send requests to the right owner based on rules, context, and load.",
  },
  {
    title: "Cross-system integrations",
    detail: "Sync data across CRMs, support desks, and project tools.",
  },
  {
    title: "Risk and bottleneck alerts",
    detail: "Get proactive notifications when critical dependencies stall.",
  },
];

const workflow = [
  "Map core entities, stakeholders, and critical process links.",
  "Connect operational systems and normalize event data.",
  "Automate task routing and accountability checkpoints.",
  "Continuously monitor throughput and unblock constraints.",
];

const useCases = [
  "Operations teams managing distributed execution",
  "Agencies coordinating internal and client-side contributors",
  "Product organizations with many cross-functional dependencies",
  "Leadership teams needing live operational intelligence",
];

const themedStyle: CSSProperties = {
  ["--accent-start" as string]: "#1f8bff",
  ["--accent-end" as string]: "#46d4ff",
  ["--accent-glow" as string]: "rgba(31, 139, 255, 0.35)",
};

export default function UniNetProductPage() {
  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            { "@type": "ListItem", position: 2, name: "Products", item: "https://meliorate.pro/#services" },
            { "@type": "ListItem", position: 3, name: "UniNet", item: "https://meliorate.pro/products/uninet" },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "SoftwareApplication",
          name: "UniNet",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web",
          url: "https://uninet.technology",
          description: "A unified network workspace connecting teams, partners, and systems through one operational graph.",
          provider: { "@type": "Organization", name: "Meliorate", url: "https://meliorate.pro" },
        }}
      />
      <section className={styles.pageSection} style={themedStyle}>
        <div className={styles.container}>
          <AnimatedDiv className={styles.heroGrid}>
            <div>
              <span className={styles.eyebrow}>Unified Network Operations</span>
              <h1 className={styles.title}>UniNet</h1>
              <p className={styles.headline}>
                Connect teams, partners, and systems into one operational graph.
              </p>
              <p className={styles.description}>
                UniNet centralizes communication and workflow coordination across departments and
                external stakeholders, giving leadership a real-time map of execution and dependencies.
              </p>

              <div className={styles.heroActions}>
                <Link href="/contact" className={styles.primaryButton}>
                  Start a Conversation <ArrowRight size={17} />
                </Link>
                <Link href="/#services" className={styles.secondaryButton}>
                  All Products <ChevronRight size={16} />
                </Link>
              </div>
            </div>

            <aside className={styles.heroPanel}>
              <ProductVisual variant="uninet" />
              <p className={styles.panelTitle}>Built for operations that span many teams and systems.</p>
              <p className={styles.panelText}>
                Coordinate execution across internal departments and external partners with one shared
                source of truth for accountability.
              </p>
            </aside>
          </AnimatedDiv>

          <AnimatedSection className={styles.metricsGrid}>
            {metrics.map((metric) => (
              <article key={metric.label} className={styles.metricCard}>
                <p className={styles.metricValue}>{metric.value}</p>
                <h2 className={styles.metricLabel}>{metric.label}</h2>
                <p className={styles.metricText}>{metric.detail}</p>
              </article>
            ))}
          </AnimatedSection>

          <AnimatedSection className={styles.contentGrid}>
            <article className={styles.block}>
              <h2>Core capabilities</h2>
              <div className={styles.capabilityList}>
                {capabilities.map((item) => (
                  <div key={item.title} className={styles.capabilityItem}>
                    <h3>{item.title}</h3>
                    <p>{item.detail}</p>
                  </div>
                ))}
              </div>
            </article>

            <article className={styles.block}>
              <h2>How implementation works</h2>
              <ol className={styles.workflowList}>
                {workflow.map((step) => (
                  <li key={step}>{step}</li>
                ))}
              </ol>
            </article>
          </AnimatedSection>

          <AnimatedSection className={styles.useCaseBlock}>
            <h2>Where teams use UniNet</h2>
            <div className={styles.useCaseGrid}>
              {useCases.map((useCase) => (
                <div key={useCase} className={styles.useCaseItem}>
                  <Check size={16} />
                  <span>{useCase}</span>
                </div>
              ))}
            </div>
          </AnimatedSection>

          <AnimatedSection className={styles.ctaBand}>
            <div>
              <p className={styles.ctaEyebrow}>Execution-focused partnership</p>
              <h2>Want UniNet aligned with your current operating model?</h2>
              <p>
                We can customize integrations, routing rules, and visibility layers around your stack.
              </p>
            </div>
            <Link href="/contact" className={styles.primaryButton}>
              Contact Meliorate <ArrowRight size={17} />
            </Link>
          </AnimatedSection>
        </div>
      </section>
    </SiteFrame>
  );
}