"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import {
  Code2,
  AlertCircle,
  Database,
  Palette,
  Container,
  Zap,
  Shield,
  Users,
  Globe,
  Activity,
  Mail,
} from "lucide-react";

export default function DeveloperPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="AIRBRONE AI"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{
            text: "Get Started Free",
            href: "/auth/login",
          }}
        />
      </div>

      {/* API Integration Section */}
      <div id="api-integration" data-section="api-integration" className="py-16 md:py-24">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <FeatureBento
            title="Developer API Integration"
            description="Powerful REST and WebSocket APIs to integrate AIRBRONE AI's four specialized intelligence modes into your applications."
            tag="Developer Access"
            tagIcon={Code2}
            tagAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            animationType="slide-up"
            features={[
              {
                title: "Gemini Integration",
                description: "Direct access to Google Gemini API with optimized routing and rate limiting. Perfect for complex analysis tasks.",
                bentoComponent: "phone",
                statusIcon: Code2,
                alertIcon: AlertCircle,
                alertTitle: "API Status",
                alertMessage: "All systems operational",
                apps: [
                  { name: "REST API", icon: Code2 },
                  { name: "WebSocket", icon: Database },
                  { name: "gRPC", icon: Palette },
                  { name: "GraphQL", icon: Container },
                  { name: "Streaming", icon: Code2 },
                  { name: "Webhooks", icon: Database },
                  { name: "Rate Limits", icon: Palette },
                  { name: "Monitoring", icon: Container },
                ],
              },
              {
                title: "ChatGPT Integration",
                description: "Seamless ChatGPT API access with intelligent model selection and conversation management.",
                bentoComponent: "chat",
                aiIcon: Code2,
                userIcon: Users,
                placeholder: "Send me your API request...",
                exchanges: [
                  {
                    userMessage: "How do I authenticate with the API?",
                    aiResponse: "Use JWT tokens in the Authorization header: Authorization: Bearer YOUR_API_KEY. Tokens expire after 24 hours with automatic refresh capability.",
                  },
                  {
                    userMessage: "What are the rate limits?",
                    aiResponse: "Standard tier: 1000 requests/hour, Pro: 10000 requests/hour, Enterprise: Custom limits. All tiers include burst allowance of 50% above limit.",
                  },
                ],
              },
              {
                title: "Multi-Mode Routing",
                description: "Intelligent routing system that automatically selects the optimal AI mode based on query type and complexity.",
                bentoComponent: "orbiting-icons",
                centerIcon: Zap,
                items: [
                  { icon: Code2, ring: 1 },
                  { icon: Database, ring: 1 },
                  { icon: Shield, ring: 2 },
                  { icon: Users, ring: 2 },
                  { icon: Globe, ring: 3 },
                ],
              },
              {
                title: "Analytics Dashboard",
                description: "Comprehensive analytics and monitoring for your API usage, performance metrics, and error tracking.",
                bentoComponent: "icon-info-cards",
                items: [
                  {
                    icon: Activity,
                    label: "API Calls",
                    value: "Real-time tracking",
                  },
                  {
                    icon: Zap,
                    label: "Latency",
                    value: "<100ms average",
                  },
                  {
                    icon: Shield,
                    label: "Security",
                    value: "A+ rated",
                  },
                ],
              },
            ]}
          />
        </div>
      </div>

      {/* SDK & Tools Section */}
      <div id="sdks" data-section="sdks" className="py-16 md:py-24 bg-gradient-to-b">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <ProductCardOne
            title="Developer SDKs"
            description="Official SDKs and client libraries for seamless integration across all popular programming languages and frameworks."
            tag="SDKs Available"
            tagIcon={Code2}
            tagAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            animationType="slide-up"
            gridVariant="three-columns-all-equal-width"
            products={[
              {
                id: "sdk-node",
                name: "Node.js SDK",
                price: "npm package",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9dMftQ4AQBXAKtnCOA7fukWXU/modern-ai-application-dashboard-with-cle-1773905442678-2f17b25a.png",
                imageAlt: "Node.js SDK",
              },
              {
                id: "sdk-python",
                name: "Python SDK",
                price: "pip package",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9dMftQ4AQBXAKtnCOA7fukWXU/developer-code-editor-interface-showing--1773905444256-87f6b027.png",
                imageAlt: "Python SDK",
              },
              {
                id: "sdk-react",
                name: "React SDK",
                price: "npm package",
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9dMftQ4AQBXAKtnCOA7fukWXU/educational-ai-study-mode-interface-show-1773905442614-c68979aa.png",
                imageAlt: "React SDK",
              },
            ]}
          />
        </div>
      </div>

      {/* Performance Metrics Section */}
      <div id="performance" data-section="performance" className="py-16 md:py-24">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <MetricCardThree
            title="API Performance"
            description="Benchmark metrics for AIRBRONE AI developer APIs - reliability, speed, and scale you can depend on."
            tag="Performance"
            tagIcon={Activity}
            tagAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            animationType="depth-3d"
            metrics={[
              {
                id: "latency",
                icon: Zap,
                title: "Avg Response Time",
                value: "87ms",
              },
              {
                id: "throughput",
                icon: Database,
                title: "Requests/Second",
                value: "10K+",
              },
              {
                id: "uptime",
                icon: Shield,
                title: "Uptime SLA",
                value: "99.99%",
              },
              {
                id: "regions",
                icon: Globe,
                title: "Global Regions",
                value: "6+",
              },
            ]}
          />
        </div>
      </div>

      {/* Developer Support Section */}
      <div id="developer-support" data-section="developer-support" className="py-16 md:py-24">
        <div className="mx-auto px-4 md:px-6 max-w-7xl">
          <ContactSplit
            tag="Developer Support"
            title="Get Developer Access"
            description="Join our developer program and get priority support, API credits, and exclusive access to beta features."
            tagIcon={Mail}
            tagAnimation="slide-up"
            background={{ variant: "animated-grid" }}
            useInvertedBackground={true}
            mediaAnimation="slide-up"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9dMftQ4AQBXAKtnCOA7fukWXU/customer-support-and-help-center-illustr-1773905442717-7971a9a0.png"
            imageAlt="Developer Support"
            inputPlaceholder="Enter your email for API access"
            buttonText="Request Access"
            termsText="By requesting access, you agree to our Developer Terms and Privacy Policy."
            onSubmit={() => {}}
          />
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="AIRBRONE AI"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "About", href: "#about" },
              ],
            },
            {
              items: [
                { label: "Study Helper", href: "/modes/study-helper" },
                { label: "Code Helper", href: "/modes/code-helper" },
                { label: "Business Helper", href: "/modes/business-helper" },
                { label: "Deep Research", href: "/modes/deep-research" },
              ],
            },
            {
              items: [
                { label: "Developer API", href: "/developer" },
                { label: "Documentation", href: "/docs" },
                { label: "Status", href: "https://status.airbrone.ai" },
                { label: "Blog", href: "/blog" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Security", href: "/security" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com/airbrone" },
                {
                  label: "LinkedIn",
                  href: "https://linkedin.com/company/airbrone",
                },
                { label: "GitHub", href: "https://github.com/airbrone" },
                {
                  label: "Instagram",
                  href: "https://instagram.com/airbrone",
                },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}