import SEO from "@/components/SEO";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import {
  Boxes,
  BookOpen,
  Rocket,
  ArrowRight,
  Terminal,
  Layers,
  Sparkles,
  Users,
  Trophy,
  Database,
  Gamepad2,
  Code2,
  Zap,
  Globe,
} from "lucide-react";

const ecosystemPillars = [
  {
    icon: Boxes,
    title: "Six Realms",
    description: "Nexus, GameForge, Foundation, Labs, Corp, and Staff — each with unique APIs and capabilities",
    href: "/realms",
  },
  {
    icon: Database,
    title: "Developer APIs",
    description: "Comprehensive REST APIs for users, content, achievements, and more",
    href: "/dev-platform/api-reference",
  },
  {
    icon: Terminal,
    title: "SDK & Tools",
    description: "TypeScript SDK, CLI tools, and pre-built templates to ship faster",
    href: "/dev-platform/quick-start",
  },
  {
    icon: Layers,
    title: "Marketplace",
    description: "Premium integrations, plugins, and components from the community",
    href: "/dev-platform/marketplace",
  },
  {
    icon: Users,
    title: "Community",
    description: "Join 12,000+ developers building on AeThex",
    href: "/community",
  },
  {
    icon: Trophy,
    title: "Opportunities",
    description: "Get paid to build — contracts, bounties, and commissions",
    href: "/opportunities",
  },
];

const stats = [
  { value: "12K+", label: "Developers" },
  { value: "2.5M+", label: "API Calls/Day" },
  { value: "150+", label: "Code Examples" },
  { value: "6", label: "Realms" },
];

const features = [
  {
    icon: Layers,
    title: "Cross-Platform Integration Layer",
    description: "One unified API to build across Roblox, VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Minecraft, Meta Horizon, Fortnite, and Zepeto — no more managing separate platform SDKs",
  },
  {
    icon: Code2,
    title: "Enterprise-Grade Developer Tools",
    description: "TypeScript SDK, REST APIs, unified authentication, cross-platform achievements, content delivery, and CLI tools — all integrated and production-ready",
  },
  {
    icon: Gamepad2,
    title: "Six Specialized Realms",
    description: "Nexus (social hub), GameForge (games), Foundation (education), Labs (AI/innovation), Corp (business), Staff (governance) — each with unique APIs and tools",
  },
  {
    icon: Trophy,
    title: "Monetize Your Skills",
    description: "Get paid to build — access contracts, bounties, and commissions. 12K+ developers earning while creating cross-platform games, apps, and integrations",
  },
  {
    icon: Users,
    title: "Thriving Creator Economy",
    description: "Join squads, collaborate on projects, share assets in the marketplace, and grow your reputation across all six realms",
  },
  {
    icon: Rocket,
    title: "Ship Everywhere, Fast",
    description: "150+ cross-platform code examples, pre-built templates, OAuth integration, Supabase backend — one-command deployment to every metaverse",
  },
];

const platforms = ["Roblox", "Minecraft", "Meta Horizon", "Fortnite", "VRChat", "Zepeto"];
const platformIcons = [Gamepad2, Boxes, Globe, Zap, Users, Sparkles];

export default function Index() {
  return (
    <Layout hideFooter>
      <SEO
        pageTitle="AeThex | Developer Ecosystem"
        description="Build powerful applications on the AeThex ecosystem. Access 6 specialized realms, comprehensive APIs, and a thriving developer community."
        canonical={
          typeof window !== "undefined"
            ? window.location.href
            : (undefined as any)
        }
      />

      {/* Static background — radial glow only; grid/scanlines come from body::after/::before in global.css */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_70%_40%_at_50%_-10%,hsl(var(--primary)/0.08),transparent)]" />
      </div>

      <div className="relative space-y-28 pb-28">

        {/* Hero */}
        <section className="relative min-h-[88vh] flex items-center justify-center pt-20">
          <div className="relative text-center max-w-5xl mx-auto space-y-8 px-4">

            <motion.div
              initial={{ opacity: 0, y: -12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <Badge className="text-xs px-4 py-1.5 bg-primary/10 border-primary/30 uppercase tracking-widest font-semibold">
                <Sparkles className="w-3 h-3 mr-1.5 inline" />
                AeThex Developer Ecosystem
              </Badge>
            </motion.div>

            <motion.h1
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-6xl md:text-7xl lg:text-8xl font-black tracking-tight leading-none"
            >
              Build on{" "}
              <span className="text-primary">AeThex</span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"
            >
              The <span className="text-foreground font-medium">integration layer</span> connecting all metaverse platforms.
              Six specialized realms. <span className="text-foreground font-medium">12K+ developers</span>. One powerful ecosystem.
            </motion.p>

            {/* Platform pills */}
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="flex flex-wrap items-center justify-center gap-2 pt-2"
            >
              {platforms.map((name, i) => {
                const Icon = platformIcons[i];
                return (
                  <div
                    key={name}
                    className="flex items-center gap-1.5 bg-secondary/60 px-3 py-1.5 rounded-full border border-border text-sm text-muted-foreground"
                  >
                    <Icon className="w-3.5 h-3.5 text-primary" />
                    <span className="font-medium">{name}</span>
                  </div>
                );
              })}
              <div className="flex items-center gap-1.5 bg-primary/10 px-3 py-1.5 rounded-full border border-primary/20 text-sm text-primary font-medium">
                & More
              </div>
            </motion.div>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="flex flex-wrap gap-3 justify-center pt-4"
            >
              <Link to="/dev-platform/quick-start">
                <Button size="lg" className="px-8 h-12 font-semibold">
                  Start Building
                  <Rocket className="w-4 h-4 ml-2" />
                </Button>
              </Link>
              <Link to="/dev-platform/api-reference">
                <Button size="lg" variant="outline" className="px-8 h-12 font-semibold">
                  <BookOpen className="w-4 h-4 mr-2" />
                  Explore APIs
                </Button>
              </Link>
            </motion.div>

            {/* Stats */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-12 max-w-3xl mx-auto"
            >
              {stats.map((stat) => (
                <div
                  key={stat.label}
                  className="bg-secondary/40 border border-border rounded-xl p-5 text-center"
                >
                  <p className="text-3xl font-black text-primary">{stat.value}</p>
                  <p className="text-xs text-muted-foreground mt-1 font-medium uppercase tracking-wide">{stat.label}</p>
                </div>
              ))}
            </motion.div>
          </div>
        </section>

        {/* Ecosystem Pillars */}
        <section className="space-y-10 px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center space-y-3"
          >
            <h2 className="text-4xl md:text-5xl font-black">The AeThex Ecosystem</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Six interconnected realms, each with unique capabilities and APIs to power your applications
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl mx-auto">
            {ecosystemPillars.map((pillar, index) => (
              <motion.div
                key={pillar.title}
                initial={{ opacity: 0, y: 24 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.07 }}
              >
                <Link to={pillar.href}>
                  <Card className="group h-full border-border hover:border-primary/30 transition-colors duration-200 bg-card">
                    <div className="p-6 space-y-4">
                      <div className="w-11 h-11 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center group-hover:bg-primary/15 transition-colors">
                        <pillar.icon className="w-5 h-5 text-primary" />
                      </div>
                      <div className="space-y-1.5">
                        <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
                          {pillar.title}
                        </h3>
                        <p className="text-sm text-muted-foreground leading-relaxed">
                          {pillar.description}
                        </p>
                      </div>
                      <div className="flex items-center text-primary/70 group-hover:text-primary group-hover:translate-x-1 transition-all duration-200 text-sm">
                        <span className="font-medium mr-1">Explore</span>
                        <ArrowRight className="w-3.5 h-3.5" />
                      </div>
                    </div>
                  </Card>
                </Link>
              </motion.div>
            ))}
          </div>
        </section>

        {/* Why AeThex */}
        <section className="space-y-10 px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="text-center space-y-3"
          >
            <h2 className="text-4xl md:text-5xl font-black">Why Build on AeThex?</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Join a growing ecosystem designed for creators, developers, and entrepreneurs
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-4 max-w-6xl mx-auto">
            {features.map((feature, index) => (
              <motion.div
                key={feature.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.08 }}
              >
                <Card className="p-6 space-y-4 border-border bg-card h-full">
                  <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center">
                    <feature.icon className="w-5 h-5 text-primary" />
                  </div>
                  <div className="space-y-2">
                    <h3 className="font-semibold text-foreground">{feature.title}</h3>
                    <p className="text-sm text-muted-foreground leading-relaxed">
                      {feature.description}
                    </p>
                  </div>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative overflow-hidden rounded-2xl max-w-5xl mx-auto border border-primary/20 bg-primary/5"
          >
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_80%_at_80%_50%,hsl(var(--primary)/0.08),transparent)]" />
            <div className="relative z-10 p-12 md:p-16 text-center space-y-6">
              <Badge className="text-xs px-4 py-1.5 bg-primary/10 border-primary/30 uppercase tracking-widest font-semibold">
                <Terminal className="w-3 h-3 mr-1.5 inline" />
                Start Building Today
              </Badge>
              <h2 className="text-3xl md:text-4xl lg:text-5xl font-black leading-tight">
                Ready to Build Something{" "}
                <span className="text-primary">Epic?</span>
              </h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Get your API key and start deploying across{" "}
                <span className="text-foreground font-medium">5+ metaverse platforms</span> in minutes
              </p>
              <div className="flex flex-wrap gap-3 justify-center pt-2">
                <Link to="/dev-platform/dashboard">
                  <Button size="lg" className="px-8 h-12 font-semibold">
                    Get Your API Key
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </Link>
                <Link to="/realms">
                  <Button size="lg" variant="outline" className="px-8 h-12 font-semibold">
                    Explore Realms
                    <Boxes className="w-4 h-4 ml-2" />
                  </Button>
                </Link>
              </div>
            </div>
          </motion.div>
        </section>

      </div>
    </Layout>
  );
}