import React from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Progress } from "@/components/ui/progress";
import { Input } from "@/components/ui/input";
import { Send, Play, Download, Shield, Crosshair, Cpu, Users, Sword, Disc3, Twitch, Twitter, Discord, Youtube, MonitorSmartphone } from "lucide-react";

/**
 * FPS GAME LANDING PAGE – Inspired by omikamitoken.com (layout, motion, structure), but original content.
 * - Built as a single React component for easy drop‑in to any React/Next/Tailwind project.
 * - Uses shadcn/ui components, lucide-react icons, and framer-motion for animations.
 * - TailwindCSS required. Animations & effects are kept performant (no heavy WebGL).
 *
 * How to use:
 * 1) Ensure Tailwind is configured and shadcn/ui is installed in your project.
 * 2) Drop this file anywhere in your app and render <FPSLandingPage />.
 * 3) Replace placeholder copy, images, and video URLs with your own brand assets.
 */

const nav = [
  { label: "About", href: "#about" },
  { label: "Features", href: "#features" },
  { label: "Trailer", href: "#trailer" },
  { label: "Operators", href: "#operators" },
  { label: "Roadmap", href: "#roadmap" },
  { label: "FAQ", href: "#faq" },
];

const operators = [
  {
    name: "Viper",
    role: "Recon",
    image:
      "https://images.unsplash.com/photo-1607453997808-3d22e5b3a2b3?q=80&w=1600&auto=format&fit=crop",
    blurb: "Drone scouting, heartbeat ping, silent footfalls.",
  },
  {
    name: "Bulwark",
    role: "Tank",
    image:
      "https://images.unsplash.com/photo-1612197527762-3b8d2edcf6b0?q=80&w=1600&auto=format&fit=crop",
    blurb: "Deployable cover, magnetic shield, stun slam.",
  },
  {
    name: "Specter",
    role: "Assassin",
    image:
      "https://images.unsplash.com/photo-1627328715728-7bcc1b5db87d?q=80&w=1600&auto=format&fit=crop",
    blurb: "Cloak, decoy dash, ranged finisher.",
  },
];

const features = [
  {
    icon: <Crosshair className="size-6" />,
    title: "Precision Gunplay",
    text: "Tight recoil, hitscan feedback, and headshot‑ready TTK.",
  },
  {
    icon: <Cpu className="size-6" />,
    title: "Smart AI Bots",
    text: "Bots learn your habits for sweaty aim‑train scrims.",
  },
  {
    icon: <Shield className="size-6" />,
    title: "Tactical Abilities",
    text: "Abilities that enable plays—never cheapen them.",
  },
  {
    icon: <Users className="size-6" />,
    title: "Team Roles",
    text: "Operators with unique roles to shape every round.",
  },
  {
    icon: <Sword className="size-6" />,
    title: "Close‑Quarters Climaxes",
    text: "Break doors, breach walls, and clear rooms with style.",
  },
  {
    icon: <MonitorSmartphone className="size-6" />,
    title: "Cross‑Platform",
    text: "PC + Console with input‑based matchmaking.",
  },
];

const roadmap = [
  {
    phase: "Alpha",
    items: [
      { label: "Core gunplay & netcode", progress: 100 },
      { label: "3 maps, 6 operators", progress: 100 },
      { label: "Closed playtest", progress: 100 },
    ],
  },
  {
    phase: "Beta",
    items: [
      { label: "Ranked ladder + MMR", progress: 70 },
      { label: "Clans & scrims", progress: 55 },
      { label: "Spectator tools", progress: 40 },
    ],
  },
  {
    phase: "Launch",
    items: [
      { label: "Esports events", progress: 25 },
      { label: "Mod tools (PvE)", progress: 15 },
      { label: "Season 1 battle pass", progress: 30 },
    ],
  },
];

const SocialIcon = ({ Icon, href, label }) => (
  <a
    href={href}
    aria-label={label}
    target="_blank"
    rel="noreferrer"
    className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 backdrop-blur hover:bg-white/10 transition"
  >
    <Icon className="size-5" />
  </a>
);

const Reveal = ({ children, delay = 0 }) => (
  <motion.div
    initial={{ opacity: 0, y: 24 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: "-80px" }}
    transition={{ duration: 0.6, ease: "easeOut", delay }}
  >
    {children}
  </motion.div>
);

const HeroBackground = () => {
  // Parallax background using page scroll
  const { scrollY } = useScroll();
  const y1 = useTransform(scrollY, [0, 600], [0, -80]);
  const y2 = useTransform(scrollY, [0, 600], [0, -140]);

  return (
    <div aria-hidden className="absolute inset-0 overflow-hidden">
      {/* Layer 1: soft gradient */}
      <motion.div
        style={{ y: y1 }}
        className="absolute -inset-16 bg-[radial-gradient(80%_60%_at_50%_10%,rgba(99,102,241,0.25),transparent_60%),radial-gradient(60%_50%_at_80%_20%,rgba(45,212,191,0.18),transparent_60%)]"
      />
      {/* Layer 2: rotating rings */}
      <motion.div
        style={{ y: y2 }}
        className="pointer-events-none absolute left-1/2 top-1/3 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 rounded-full border border-white/10 [mask-image:radial-gradient(closest-side,black,transparent)]"
      >
        <div className="absolute inset-0 animate-[spin_30s_linear_infinite] rounded-full border border-white/10" />
        <div className="absolute inset-8 animate-[spin_60s_linear_infinite_reverse] rounded-full border border-white/10" />
        <div className="absolute inset-16 animate-[spin_90s_linear_infinite] rounded-full border border-white/10" />
      </motion.div>
      {/* Floating discs */}
      <div className="absolute inset-0">
        {[...Array(14)].map((_, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 0.35, scale: 1 }}
            transition={{ duration: 1.2, delay: 0.15 * i }}
            className="absolute h-2 w-2 rounded-full bg-white/40 blur-[1px]"
            style={{
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
            }}
          />
        ))}
      </div>
    </div>
  );
};

function SectionHeading({ kicker, title, subtitle }) {
  return (
    <div className="mx-auto max-w-3xl text-center">
      <Reveal>
        <p className="mb-2 text-sm uppercase tracking-widest text-white/60">{kicker}</p>
      </Reveal>
      <Reveal delay={0.05}>
        <h2 className="text-3xl md:text-5xl font-bold leading-tight">
          <span className="bg-gradient-to-r from-indigo-300 via-white to-teal-300 bg-clip-text text-transparent">
            {title}
          </span>
        </h2>
      </Reveal>
      {subtitle && (
        <Reveal delay={0.1}>
          <p className="mt-4 text-white/70">{subtitle}</p>
        </Reveal>
      )}
    </div>
  );
}

export default function FPSLandingPage() {
  return (
    <div className="relative min-h-screen scroll-smooth bg-[#0A0B0F] text-white selection:bg-indigo-500/30">
      {/* NAVBAR */}
      <header className="sticky top-0 z-50 border-b border-white/10 bg-black/40 backdrop-blur-xl">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
          <a href="#top" className="group inline-flex items-center gap-2">
            <Disc3 className="size-6 text-indigo-400 group-hover:rotate-45 transition" />
            <span className="font-semibold tracking-wide">PHANTOM//OPS</span>
          </a>
          <nav className="hidden gap-6 md:flex">
            {nav.map((n) => (
              <a key={n.href} href={n.href} className="text-sm text-white/70 hover:text-white">
                {n.label}
              </a>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <Button asChild size="sm" className="hidden md:inline-flex">
              <a href="#playtest">Join Playtest</a>
            </Button>
            <Button asChild size="icon" variant="secondary" className="md:hidden">
              <a href="#menu" aria-label="Open menu">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </a>
            </Button>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section id="top" className="relative isolate overflow-hidden">
        <HeroBackground />
        <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-4 py-28 md:grid-cols-2 md:py-36">
          <div>
            <Reveal>
              <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-white/70 backdrop-blur">
                <span className="size-1.5 rounded-full bg-teal-400 animate-pulse" /> Alpha Gameplay Footage
              </span>
            </Reveal>
            <Reveal delay={0.05}>
              <h1 className="mt-4 text-4xl font-extrabold leading-[1.05] md:text-6xl">
                Competitive FPS, <span className="text-white/70">built for</span> clutch moments
              </h1>
            </Reveal>
            <Reveal delay={0.1}>
              <p className="mt-4 max-w-xl text-white/70">
                Master recoil, out‑think enemy squads, and orchestrate the perfect breach. Phantom//Ops blends razor‑sharp gunplay with tactical abilities that reward skill.
              </p>
            </Reveal>
            <Reveal delay={0.15}>
              <div className="mt-6 flex flex-wrap gap-3">
                <Button size="lg" asChild>
                  <a href="#trailer" className="inline-flex items-center gap-2"><Play className="size-4"/>Watch Trailer</a>
                </Button>
                <Button size="lg" variant="secondary" asChild>
                  <a href="#playtest" className="inline-flex items-center gap-2"><Download className="size-4"/>Wishlist / Sign Up</a>
                </Button>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="mt-8 flex items-center gap-4 text-white/60">
                <span className="text-xs">Platforms:</span>
                <div className="flex items-center gap-3 opacity-80">
                  <img alt="Steam" className="h-6 w-auto" src="https://upload.wikimedia.org/wikipedia/commons/8/83/Steam_icon_logo.svg" />
                  <img alt="PlayStation" className="h-6 w-auto" src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Playstation_logo_colour.svg" />
                  <img alt="Xbox" className="h-5 w-auto" src="https://upload.wikimedia.org/wikipedia/commons/4/43/Xbox_one_logo.svg" />
                </div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={0.05}>
            <div className="relative aspect-video overflow-hidden rounded-2xl border border-white/10 bg-white/5 shadow-2xl">
              <video
                className="h-full w-full object-cover"
                autoPlay
                muted
                loop
                playsInline
                poster="https://images.unsplash.com/photo-1596495578065-8fbf4d4b20b1?q=80&w=1920&auto=format&fit=crop"
              >
                <source src="https://cdn.coverr.co/videos/coverr-pro-gamer-1690/1080p.mp4" type="video/mp4" />
              </video>
              <div className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-black/50 via-transparent to-black/40" />
            </div>
          </Reveal>
        </div>
      </section>

      {/* ABOUT */}
      <section id="about" className="relative px-4 py-20">
        <div className="mx-auto max-w-4xl">
          <SectionHeading
            kicker="The Game"
            title="Built for competitors, tuned for highlights"
            subtitle="Every mechanic is designed to elevate player agency: utility that creates openings, destruction that makes new lines, and movement that rewards creativity."
          />
        </div>
      </section>

      {/* FEATURES GRID */}
      <section id="features" className="px-4 py-8 md:py-16">
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((f, i) => (
            <Reveal key={f.title} delay={i * 0.05}>
              <Card className="group border-white/10 bg-gradient-to-b from-white/[0.06] to-transparent">
                <CardHeader>
                  <CardTitle className="flex items-center gap-3 text-lg">
                    <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-white/10 bg-white/5">
                      {f.icon}
                    </span>
                    {f.title}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-white/70">{f.text}</p>
                </CardContent>
              </Card>
            </Reveal>
          ))}
        </div>
      </section>

      {/* TRAILER */}
      <section id="trailer" className="relative px-4 py-20">
        <div className="mx-auto max-w-5xl">
          <SectionHeading kicker="Watch" title="The Official Trailer" subtitle="Captured from in‑engine alpha footage." />
          <Reveal delay={0.1}>
            <div className="mt-8 overflow-hidden rounded-2xl border border-white/10 shadow-2xl">
              <div className="relative aspect-video">
                <iframe
                  className="absolute inset-0 h-full w-full"
                  src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&modestbranding=1"
                  title="Phantom//Ops Trailer"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                />
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* OPERATORS */}
      <section id="operators" className="px-4 py-16">
        <div className="mx-auto max-w-6xl">
          <SectionHeading kicker="Play Your Role" title="Operators" subtitle="Synergize abilities and gunskill to outplay the lobby." />
          <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-3">
            {operators.map((op, i) => (
              <Reveal key={op.name} delay={i * 0.05}>
                <Card className="group overflow-hidden border-white/10 bg-white/[0.04]">
                  <div className="relative h-64 w-full">
                    <img src={op.image} alt={op.name} className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105" />
                    <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent" />
                    <div className="absolute bottom-3 left-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-2 py-1 text-xs backdrop-blur">
                      <Shield className="size-3.5"/>
                      {op.role}
                    </div>
                  </div>
                  <CardHeader>
                    <CardTitle className="text-xl">{op.name}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-white/70">{op.blurb}</p>
                  </CardContent>
                </Card>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ROADMAP */}
      <section id="roadmap" className="px-4 py-20">
        <div className="mx-auto max-w-6xl">
          <SectionHeading kicker="Development" title="Roadmap" subtitle="Transparent milestones as we sprint to launch." />
          <div className="mt-8 grid grid-cols-1 gap-6 md:grid-cols-3">
            {roadmap.map((r, i) => (
              <Reveal key={r.phase} delay={i * 0.05}>
                <Card className="border-white/10 bg-white/[0.04]">
                  <CardHeader>
                    <CardTitle>{r.phase}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-5">
                    {r.items.map((item) => (
                      <div key={item.label}>
                        <div className="mb-2 flex items-center justify-between gap-4 text-sm">
                          <span className="text-white/80">{item.label}</span>
                          <span className="text-white/60">{item.progress}%</span>
                        </div>
                        <Progress value={item.progress} className="h-2" />
                      </div>
                    ))}
                  </CardContent>
                </Card>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PLAYTEST / NEWSLETTER */}
      <section id="playtest" className="relative overflow-hidden px-4 py-16">
        <div className="mx-auto max-w-5xl">
          <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-indigo-600/20 via-purple-600/20 to-teal-600/20 p-8 md:p-12">
            <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl" aria-hidden />
            <SectionHeading kicker="Get In" title="Join the closed playtest" subtitle="Be the first to breach. Seats are limited—secure your slot." />
            <Reveal delay={0.1}>
              <form className="mx-auto mt-8 flex max-w-xl flex-col gap-3 sm:flex-row">
                <Input type="email" required placeholder="Email address" className="bg-black/40"/>
                <Button type="submit" className="whitespace-nowrap"><Send className="mr-2 size-4"/>Request Access</Button>
              </form>
            </Reveal>
            <Reveal delay={0.15}>
              <p className="mx-auto mt-3 max-w-xl text-center text-xs text-white/60">
                By registering you agree to receive updates about Phantom//Ops. Unsubscribe anytime.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="px-4 py-20">
        <div className="mx-auto max-w-4xl">
          <SectionHeading kicker="Need Help?" title="FAQ" />
          <Reveal delay={0.05}>
            <Accordion type="single" collapsible className="mt-8 divide-y divide-white/10 rounded-xl border border-white/10 bg-white/[0.04]">
              <AccordionItem value="item-1">
                <AccordionTrigger>When is the next playtest?</AccordionTrigger>
                <AccordionContent>
                  We run waves monthly. Join the mailing list above and we’ll email you the next window with access instructions.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-2">
                <AccordionTrigger>What are the PC specs?</AccordionTrigger>
                <AccordionContent>
                  We’re targeting 1080p60 on a GTX 1060 / RX 580 equivalent, 8 GB RAM, modern quad‑core CPU. Aiming for ultrawide and high‑refresh support at launch.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-3">
                <AccordionTrigger>Is it pay‑to‑win?</AccordionTrigger>
                <AccordionContent>
                  Never. Cosmetics only. Gameplay unlocks are earned, not bought.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </Reveal>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-white/10 px-4 py-10">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row">
          <div className="text-center md:text-left">
            <div className="flex items-center justify-center gap-2 md:justify-start">
              <Disc3 className="size-5 text-indigo-400" />
              <span className="font-semibold tracking-wide">PHANTOM//OPS</span>
            </div>
            <p className="mt-2 text-xs text-white/50">© {new Date().getFullYear()} Phantom Ops Studio. All rights reserved.</p>
          </div>
          <div className="flex items-center gap-3">
            <SocialIcon Icon={Discord} label="Discord" href="#" />
            <SocialIcon Icon={Twitter} label="Twitter" href="#" />
            <SocialIcon Icon={Twitch} label="Twitch" href="#" />
            <SocialIcon Icon={Youtube} label="YouTube" href="#" />
          </div>
        </div>
      </footer>
    </div>
  );
}