import { useState } from "react";
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 {
  ArrowRight,
  Terminal,
  Copy,
  Check,
  BookOpen,
  Zap,
  Shield,
  Globe,
  Code2,
  Database,
  Users,
  Boxes,
  Layers,
  Trophy,
  Gamepad2,
} from "lucide-react";

const codeExample = `import { AeThex } from '@aethex/sdk';

const client = new AeThex({ apiKey: process.env.AETHEX_KEY });

// Authenticate user across platforms
const user = await client.passport.authenticate({
  platform: 'roblox',
  userId: '123456789'
});

// Sync achievements, inventory, progress
await client.sync({
  achievements: user.achievements,
  inventory: user.inventory,
  progress: user.gameProgress
});`;

const ecosystemPillars = [
  {
    icon: Boxes,
    title: "Six Realms",
    description: "Specialized APIs for every use case",
    href: "/realms",
    gradient: "from-purple-500 to-indigo-600",
  },
  {
    icon: Database,
    title: "Developer APIs",
    description: "REST APIs for all platforms",
    href: "/dev-platform/api-reference",
    gradient: "from-blue-500 to-cyan-600",
  },
  {
    icon: Terminal,
    title: "SDK & Tools",
    description: "Ship faster with TypeScript SDK",
    href: "/dev-platform/quick-start",
    gradient: "from-cyan-500 to-emerald-600",
  },
  {
    icon: Layers,
    title: "Marketplace",
    description: "Premium plugins & integrations",
    href: "/dev-platform/marketplace",
    gradient: "from-emerald-500 to-lime-600",
  },
  {
    icon: Users,
    title: "Community",
    description: "12K+ developers building together",
    href: "/community",
    gradient: "from-amber-500 to-red-600",
  },
  {
    icon: Trophy,
    title: "Opportunities",
    description: "Get paid to build",
    href: "/opportunities",
    gradient: "from-pink-500 to-red-600",
  },
];

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

const features = [
  {
    icon: Globe,
    title: "Cross-Platform Identity",
    description: "One passport across Roblox, Minecraft, Fortnite, and more.",
  },
  {
    icon: Database,
    title: "Universal Data Sync",
    description: "Sync achievements, inventory, and progress with a single API.",
  },
  {
    icon: Shield,
    title: "Enterprise Auth",
    description: "OAuth 2.0, PKCE, JWT. Production-ready out of the box.",
  },
  {
    icon: Gamepad2,
    title: "Game Integration",
    description: "Drop-in SDKs for Roblox, Unity, Unreal, and more.",
  },
];

const platforms = ["Roblox", "Minecraft", "Fortnite", "Meta Horizon", "Zepeto", "Unity", "Unreal"];

export default function Index() {
  const [copied, setCopied] = useState(false);

  const copyCode = () => {
    navigator.clipboard.writeText(codeExample);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <Layout hideFooter>
      <SEO
        pageTitle="AeThex | Developer Platform"
        description="Build cross-platform experiences with the AeThex SDK. One API for identity, data sync, and authentication across metaverse platforms."
        canonical={typeof window !== "undefined" ? window.location.href : undefined}
      />

      {/* Subtle background */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden -z-10">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] rounded-full bg-primary/5 blur-3xl" />
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] rounded-full bg-primary/5 blur-3xl" />
        <div 
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage: `linear-gradient(to right, hsl(var(--primary)) 1px, transparent 1px),
                              linear-gradient(to bottom, hsl(var(--primary)) 1px, transparent 1px)`,
            backgroundSize: "60px 60px",
          }}
        />
      </div>

      <div className="relative min-h-screen">
        {/* Hero */}
        <section className="relative pt-20 pb-16 px-4">
          <div className="max-w-6xl mx-auto">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              {/* Left: Value Prop */}
              <div className="space-y-6">
                <Badge variant="outline" className="text-xs font-mono border-primary/30">
                  v2.4.0 — TypeScript SDK
                </Badge>
                
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
                  One API for
                  <br />
                  <span className="text-primary">cross-platform games</span>
                </h1>
                
                <p className="text-lg text-muted-foreground max-w-lg">
                  Connect players across Roblox, Minecraft, Fortnite, and more. 
                  Sync identity, achievements, and inventory with a single SDK.
                </p>

                <div className="flex flex-wrap gap-3 pt-2">
                  <Link to="/dev-platform/quick-start">
                    <Button size="lg" className="font-medium shadow-lg shadow-primary/25">
                      Get Started
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>
                  <Link to="/dev-platform/api-reference">
                    <Button size="lg" variant="outline" className="font-medium">
                      <BookOpen className="w-4 h-4 mr-2" />
                      Read Docs
                    </Button>
                  </Link>
                </div>

                {/* Install command */}
                <div className="flex items-center gap-2 pt-4">
                  <code className="flex-1 bg-muted px-4 py-2.5 rounded-lg font-mono text-sm border">
                    npm install @aethex/sdk
                  </code>
                  <Button 
                    size="sm" 
                    variant="ghost"
                    onClick={() => navigator.clipboard.writeText("npm install @aethex/sdk")}
                  >
                    <Copy className="w-4 h-4" />
                  </Button>
                </div>

                {/* Stats row */}
                <div className="grid grid-cols-4 gap-4 pt-6">
                  {stats.map((stat) => (
                    <div key={stat.label} className="text-center">
                      <p className="text-2xl md:text-3xl font-bold text-primary">{stat.value}</p>
                      <p className="text-xs text-muted-foreground">{stat.label}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Right: Code Example */}
              <div className="relative">
                <Card className="bg-zinc-950 border-zinc-800 overflow-hidden shadow-2xl">
                  <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 rounded-full bg-red-500/80" />
                      <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
                      <div className="w-3 h-3 rounded-full bg-green-500/80" />
                    </div>
                    <span className="text-xs text-zinc-500 font-mono">app.ts</span>
                    <Button 
                      size="sm" 
                      variant="ghost" 
                      className="h-6 text-zinc-400 hover:text-white"
                      onClick={copyCode}
                    >
                      {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
                    </Button>
                  </div>
                  <pre className="p-4 text-sm overflow-x-auto">
                    <code className="text-zinc-300 font-mono whitespace-pre-wrap">
                      <span className="text-purple-400">import</span>
                      <span className="text-zinc-300"> {"{"} </span>
                      <span className="text-yellow-300">AeThex</span>
                      <span className="text-zinc-300"> {"}"} </span>
                      <span className="text-purple-400">from</span>
                      <span className="text-green-400"> '@aethex/sdk'</span>
                      <span className="text-zinc-300">;</span>
                      {"\n\n"}
                      <span className="text-purple-400">const</span>
                      <span className="text-blue-300"> client</span>
                      <span className="text-zinc-300"> = </span>
                      <span className="text-purple-400">new</span>
                      <span className="text-yellow-300"> AeThex</span>
                      <span className="text-zinc-300">{"({ "}</span>
                      <span className="text-blue-300">apiKey</span>
                      <span className="text-zinc-300">: </span>
                      <span className="text-blue-300">process.env.</span>
                      <span className="text-zinc-300">AETHEX_KEY {"});"}</span>
                      {"\n\n"}
                      <span className="text-zinc-600">// Authenticate user across platforms</span>
                      {"\n"}
                      <span className="text-purple-400">const</span>
                      <span className="text-blue-300"> user</span>
                      <span className="text-zinc-300"> = </span>
                      <span className="text-purple-400">await</span>
                      <span className="text-blue-300"> client</span>
                      <span className="text-zinc-300">.passport.</span>
                      <span className="text-yellow-300">authenticate</span>
                      <span className="text-zinc-300">{"({"}</span>
                      {"\n"}
                      <span className="text-zinc-300">{"  "}</span>
                      <span className="text-blue-300">platform</span>
                      <span className="text-zinc-300">: </span>
                      <span className="text-green-400">'roblox'</span>
                      <span className="text-zinc-300">,</span>
                      {"\n"}
                      <span className="text-zinc-300">{"  "}</span>
                      <span className="text-blue-300">userId</span>
                      <span className="text-zinc-300">: </span>
                      <span className="text-green-400">'123456789'</span>
                      {"\n"}
                      <span className="text-zinc-300">{"});"}</span>
                      {"\n\n"}
                      <span className="text-zinc-600">// Sync achievements, inventory, progress</span>
                      {"\n"}
                      <span className="text-purple-400">await</span>
                      <span className="text-blue-300"> client</span>
                      <span className="text-zinc-300">.</span>
                      <span className="text-yellow-300">sync</span>
                      <span className="text-zinc-300">{"({"}</span>
                      {"\n"}
                      <span className="text-zinc-300">{"  "}</span>
                      <span className="text-blue-300">achievements</span>
                      <span className="text-zinc-300">: </span>
                      <span className="text-blue-300">user</span>
                      <span className="text-zinc-300">.achievements,</span>
                      {"\n"}
                      <span className="text-zinc-300">{"  "}</span>
                      <span className="text-blue-300">inventory</span>
                      <span className="text-zinc-300">: </span>
                      <span className="text-blue-300">user</span>
                      <span className="text-zinc-300">.inventory,</span>
                      {"\n"}
                      <span className="text-zinc-300">{"  "}</span>
                      <span className="text-blue-300">progress</span>
                      <span className="text-zinc-300">: </span>
                      <span className="text-blue-300">user</span>
                      <span className="text-zinc-300">.gameProgress</span>
                      {"\n"}
                      <span className="text-zinc-300">{"});"}</span>
                    </code>
                  </pre>
                </Card>
              </div>
            </div>
          </div>
        </section>

        {/* Platforms */}
        <section className="py-6 px-4 border-y border-border/30">
          <div className="max-w-6xl mx-auto">
            <div className="flex flex-wrap items-center justify-center gap-6 md:gap-10 text-muted-foreground">
              <span className="text-sm font-medium">Works with:</span>
              {platforms.map((platform) => (
                <span key={platform} className="text-sm font-medium hover:text-foreground transition-colors cursor-default">
                  {platform}
                </span>
              ))}
            </div>
          </div>
        </section>

        {/* Ecosystem Pillars */}
        <section className="py-20 px-4">
          <div className="max-w-6xl mx-auto space-y-12">
            <div className="text-center space-y-4">
              <h2 className="text-3xl md:text-4xl font-bold">The AeThex Ecosystem</h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Six interconnected realms with specialized APIs for every use case
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
              {ecosystemPillars.map((pillar) => (
                <Link key={pillar.title} to={pillar.href}>
                  <Card className="group p-6 h-full hover:border-primary/40 transition-all duration-200 hover:shadow-lg hover:shadow-primary/5">
                    <div className="space-y-4">
                      <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${pillar.gradient} flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform`}>
                        <pillar.icon className="w-7 h-7 text-white" />
                      </div>
                      <div className="space-y-2">
                        <h3 className="text-xl font-semibold group-hover:text-primary transition-colors">
                          {pillar.title}
                        </h3>
                        <p className="text-muted-foreground text-sm">
                          {pillar.description}
                        </p>
                      </div>
                      <div className="flex items-center text-primary text-sm font-medium group-hover:translate-x-1 transition-transform">
                        Explore <ArrowRight className="w-4 h-4 ml-1" />
                      </div>
                    </div>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* Features */}
        <section className="py-20 px-4 bg-muted/30">
          <div className="max-w-6xl mx-auto space-y-12">
            <div className="text-center space-y-4">
              <h2 className="text-3xl md:text-4xl font-bold">Built for game developers</h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Everything you need to connect players across platforms
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
              {features.map((feature) => (
                <Card key={feature.title} className="p-5 space-y-3">
                  <div className="w-11 h-11 rounded-lg bg-primary/10 flex items-center justify-center">
                    <feature.icon className="w-5 h-5 text-primary" />
                  </div>
                  <h3 className="font-semibold">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 px-4">
          <div className="max-w-4xl mx-auto">
            <Card className="p-8 md:p-12 text-center space-y-6 bg-gradient-to-br from-primary/10 via-primary/5 to-background border-primary/20">
              <Zap className="w-12 h-12 text-primary mx-auto" />
              <h2 className="text-3xl md:text-4xl font-bold">Start building today</h2>
              <p className="text-muted-foreground max-w-lg mx-auto">
                Get your API key and integrate in minutes. Free tier includes 10K API calls/month.
              </p>
              <div className="flex flex-wrap gap-4 justify-center pt-2">
                <Link to="/dev-platform/dashboard">
                  <Button size="lg" className="shadow-lg shadow-primary/25">
                    Get API Key
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </Link>
                <Link to="/dev-platform/quick-start">
                  <Button size="lg" variant="outline">
                    View Quick Start
                  </Button>
                </Link>
              </div>
            </Card>
          </div>
        </section>

        {/* Footer spacer */}
        <div className="pb-16" />
      </div>
    </Layout>
  );
}