"use client";

import Image from "next/image";
import Link from "next/link";
import { motion, useReducedMotion } from "framer-motion";
import { NexusWindowMock } from "./NexusWindowMock";
import { ProgressPill } from "./ProgressPill";

export function HeroNexus() {
  const reduce = useReducedMotion();
  const MotionDiv = reduce ? "div" : motion.div;

  return (
    <section className="mx-auto grid max-w-6xl gap-10 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:items-center lg:py-24">
      <MotionDiv
        {...(!reduce && {
          initial: { opacity: 0, x: -20 },
          animate: { opacity: 1, x: 0 },
          transition: { duration: 0.5 },
        })}
      >
        <ProgressPill label="Platform-POC" variant="brand" pulse />
        <div className="mt-6">
          <Image
            src="/nexus-logo-banner.png"
            alt="Ninja Nexus"
            width={320}
            height={80}
            className="h-auto w-full max-w-[280px] sm:max-w-[320px]"
            priority
          />
        </div>
        <p className="mt-3 text-sm font-medium uppercase tracking-[0.2em] text-nexus-muted">
          Ét system. Alt forbundet.
        </p>
        <p className="mt-4 text-lg text-nexus-muted sm:text-xl">
          En kontrolleret platform-oplevelse oven på Windows — bygget til moderne
          virksomheds-PC&apos;er.
        </p>
        <p className="mt-3 text-base text-nexus-muted">
          Nexus samler login, apps, politikker, updates, device visibility og fremtidig
          remote administration i én styret desktopoplevelse.
        </p>
        <div className="mt-8 flex flex-wrap gap-3">
          <Link href="/downloads" className="btn-brand rounded-[1.25rem] px-5 py-3 text-sm shadow-md">
            Download POC
          </Link>
          <Link
            href="/om-nexus"
            className="btn-brand-outline rounded-[1.25rem] px-5 py-3 text-sm"
          >
            Se status
          </Link>
          <Link
            href="/ideen-bag"
            className="btn-brand-outline rounded-[1.25rem] px-5 py-3 text-sm"
          >
            Læs ideen bag
          </Link>
        </div>
      </MotionDiv>
      <div className="flex justify-center lg:justify-end">
        <NexusWindowMock />
      </div>
    </section>
  );
}
