"use client";

import Link from "next/link";
import BasketballScene from "../../components/BasketballScene";
import { RooSportsLogo } from "@/components/roosports-logo";

export default function AboutPage() {
  return (
    <div className="bg-gradient-to-b from-[#D8E5ED] to-[#F4F8FA] text-[#0B0F12] min-h-screen antialiased selection:bg-[#0D131A] selection:text-white font-sans relative">
      <BasketballScene />

      {/* TopNavBar */}
      <nav className="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6 md:px-16 py-6 bg-transparent transition-all duration-300">
        <Link
          href="/"
          aria-label="RooSports home"
          className="text-4xl text-[#0B0F12] z-50 relative group md:text-5xl"
        >
          <RooSportsLogo />
        </Link>

        <div className="hidden md:flex items-center space-x-12 z-50">
          <Link
            className="text-[#0B0F12] border-b border-[#0B0F12] pb-1 font-label-caps"
            href="/about"
          >
            About us
          </Link>
          <Link
            className="text-[#546067] font-label-caps hover:text-[#0B0F12] transition-colors duration-300"
            href="/#faqs"
          >
            FAQs
          </Link>
          <Link
            className="text-[#546067] font-label-caps hover:text-[#0B0F12] transition-colors duration-300"
            href="/login"
          >
            Login
          </Link>
        </div>
      </nav>

      {/* Main Content */}
      <main className="relative z-10 w-full max-w-[1280px] mx-auto px-6 md:px-16 pt-36 pb-32">
        <div className="max-w-3xl mb-16">
          <div className="inline-flex items-center space-x-2 px-3 py-1 bg-white/50 backdrop-blur-sm rounded-sm mb-6 border border-[#0B0F12]/5">
            <span className="font-label-caps text-[#546067]">
              ARCHITECTURAL REGISTRY MANIFESTO
            </span>
          </div>
          <h1 className="font-display-xl-mobile md:font-display-xl text-[#0B0F12] mb-6">
            The Architecture of Elite.
          </h1>
          <p className="text-lg md:text-xl text-[#546067] leading-relaxed">
            Roosports® was conceived as an antidote to gamified, noise-polluted athletic tracking platforms. We build interface architectures inspired by aerospace engineering—where every pixel serves a tactical purpose.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
          <div className="glass-panel p-8 rounded-xl border border-[#0B0F12]/10">
            <h3 className="text-2xl font-bold text-[#0B0F12] mb-3">01. Precision Biometrics</h3>
            <p className="text-base text-[#546067] leading-relaxed">
              Continuous 24/7 synchronization across global registry endpoints ensures zero latency data capture for high-stress athletic intervals.
            </p>
          </div>

          <div className="glass-panel p-8 rounded-xl border border-[#0B0F12]/10">
            <h3 className="text-2xl font-bold text-[#0B0F12] mb-3">02. Closed Integrity Ecosystem</h3>
            <p className="text-base text-[#546067] leading-relaxed">
              Whitelisted hardware integration safeguards player metrics against telemetry corruption or artificial metric inflation.
            </p>
          </div>
        </div>
      </main>

      <footer className="bg-[#f6fafc] border-t border-[#dfe3e5] w-full px-6 md:px-16 py-10 flex justify-between items-center relative z-20 text-xs text-[#546067] font-label-caps">
        <span>ROOSPORTS® ELITE PERFORMANCE</span>
        <span>© 2026 ALL RIGHTS RESERVED</span>
      </footer>
    </div>
  );
}