// =============================================================================
//  Cookie & Privacy Policy
// =============================================================================
//
//  A plain, honest policy page describing exactly what (very little) is
//  stored in the visitor's browser. Update the `lastUpdated` field below
//  whenever the policy changes.
//
//  The wording is deliberately written in first-person plain English rather
//  than legalese — Novarix is small enough to be transparent and brief.
// =============================================================================

import type { Metadata } from "next";
import Link from "next/link";
import { site } from "@/content";

const lastUpdated = "2 May 2026";

export const metadata: Metadata = {
  title: "Cookie & Privacy Policy",
  description:
    "How Novarix Networks uses cookies and browser storage on this website.",
};

export default function CookiePolicyPage() {
  return (
    <main className="site-shell min-h-screen">
      {/* Ambient background, matching the homepage */}
      <div
        className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
        aria-hidden="true"
      >
        <div className="ambient-orb ambient-orb-a" />
        <div className="ambient-orb ambient-orb-b" />
        <div className="ambient-grid" />
      </div>

      {/* Lightweight header — just a back-link */}
      <header className="border-b border-[var(--border)]">
        <div className="mx-auto flex h-20 w-full max-w-3xl items-center px-6 sm:px-8">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-[var(--text-soft)] transition-colors hover:text-[var(--text)]"
          >
            <span aria-hidden="true">←</span>
            Back to Novarix Networks
          </Link>
        </div>
      </header>

      <article className="mx-auto w-full max-w-3xl px-6 py-16 sm:px-8 sm:py-24">
        <p className="text-xs font-semibold tracking-[0.18em] text-[var(--accent)] uppercase">
          Legal
        </p>
        <h1 className="mt-3 text-[clamp(2rem,4vw,3rem)] leading-[1.05] font-semibold tracking-[-0.03em]">
          Cookie &amp; Privacy Policy
        </h1>
        <p className="mt-4 text-sm text-[var(--text-soft)]">
          Last updated {lastUpdated}
        </p>

        <div className="mt-12 space-y-10 text-base leading-relaxed text-[var(--text-soft)]">
          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              In short
            </h2>
            <p className="mt-3">
              This website does not run analytics, advertising, or any
              third-party tracking. We do not sell, share, or transfer
              personal data to anyone. The only things we store in your
              browser are listed below — and you can decline them using the
              banner that appears on your first visit.
            </p>
          </section>

          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              What we store
            </h2>
            <p className="mt-3">
              We use two small browser storage entries — both first-party,
              both confined to your browser, neither shared with anyone:
            </p>

            <div className="mt-6 space-y-4">
              <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 backdrop-blur sm:p-6">
                <p className="font-mono text-sm font-semibold text-[var(--text)]">
                  novarix-cookie-consent
                </p>
                <p className="mt-2 text-sm">
                  <span className="font-semibold text-[var(--text)]">
                    Strictly necessary.
                  </span>{" "}
                  Stored in <code>localStorage</code>. Records your choice
                  from the cookie banner so we don&apos;t ask you again on
                  every page. Persists until you clear your browser data.
                </p>
              </div>

              <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] p-5 backdrop-blur sm:p-6">
                <p className="font-mono text-sm font-semibold text-[var(--text)]">
                  novarix-intro-seen
                </p>
                <p className="mt-2 text-sm">
                  <span className="font-semibold text-[var(--text)]">
                    Preference.
                  </span>{" "}
                  Stored in <code>sessionStorage</code> only when you accept
                  cookies. Lets us skip the animated logo intro for the rest
                  of your browsing session. Cleared automatically when you
                  close the browser tab. If you decline cookies, this is
                  never set and the intro may play again on a fresh tab.
                </p>
              </div>
            </div>
          </section>

          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              What we don&apos;t do
            </h2>
            <p className="mt-3">
              We don&apos;t set tracking cookies. We don&apos;t run Google
              Analytics, Plausible, Fathom, Matomo, or any equivalent. We
              don&apos;t serve advertising. We don&apos;t embed third-party
              scripts that profile you across websites. We don&apos;t use
              session-replay tools.
            </p>
          </section>

          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              Server logs
            </h2>
            <p className="mt-3">
              Our web server keeps short-lived access logs (IP address,
              request path, timestamp, user agent) for the operational
              purposes of running the site — diagnosing errors, blocking
              abuse, and basic capacity planning. Logs are retained for no
              longer than 30 days and are not used to build profiles of
              individual visitors.
            </p>
          </section>

          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              Changing your mind
            </h2>
            <p className="mt-3">
              Use the{" "}
              <span className="font-semibold text-[var(--text)]">
                Cookie preferences
              </span>{" "}
              link in the footer of any page to re-open the banner and
              change your decision. Or clear this site&apos;s storage in
              your browser settings to be asked again from scratch.
            </p>
          </section>

          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              Who we are
            </h2>
            <p className="mt-3">
              {site.footer.company}, {site.footer.registered.toLowerCase()}.
              For privacy questions or to exercise your rights under UK GDPR
              (access, correction, deletion, portability, objection), email
              us at{" "}
              <a
                href={`mailto:${site.footer.email}`}
                className="font-medium text-[var(--text)] underline-offset-4 hover:underline"
              >
                {site.footer.email}
              </a>
              .
            </p>
          </section>

          <section>
            <h2 className="text-xl font-semibold tracking-tight text-[var(--text)]">
              Complaints
            </h2>
            <p className="mt-3">
              If you believe we&apos;ve mishandled your personal data, you
              have the right to complain to the UK&apos;s data protection
              authority, the Information Commissioner&apos;s Office (ICO),
              at{" "}
              <a
                href="https://ico.org.uk/make-a-complaint/"
                className="font-medium text-[var(--text)] underline-offset-4 hover:underline"
                target="_blank"
                rel="noreferrer"
              >
                ico.org.uk
              </a>
              .
            </p>
          </section>
        </div>
      </article>

      <footer className="border-t border-[var(--border)] py-12">
        <div className="mx-auto flex w-full max-w-3xl flex-col gap-2 px-6 text-sm text-[var(--text-soft)] sm:flex-row sm:items-center sm:justify-between sm:px-8">
          <span>
            © {new Date().getFullYear()} {site.footer.company}
          </span>
          <Link
            href="/"
            className="transition-colors hover:text-[var(--accent)]"
          >
            ← Back to home
          </Link>
        </div>
      </footer>
    </main>
  );
}