"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Code2, AlertCircle, Database, Container, Palette, Mail } from "lucide-react";

export default function CodeHelperPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Features", id: "features" },
    { name: "Pricing", id: "pricing" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Features", href: "/modes/code-helper" },
        { label: "Pricing", href: "/modes/code-helper" },
        { label: "About", href: "/modes/business-helper" },
      ],
    },
    {
      items: [
        { label: "Study Helper", href: "/modes/code-helper" },
        { label: "Code Helper", href: "/modes/code-helper" },
        { label: "Business Helper", href: "/modes/business-helper" },
        { label: "Deep Research", href: "/modes/code-helper" },
      ],
    },
    {
      items: [
        { label: "Developer API", href: "/modes/code-helper" },
        { label: "Documentation", href: "/modes/code-helper" },
        { label: "Status", href: "https://status.airbrone.ai" },
        { label: "Blog", href: "/modes/code-helper" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "/modes/code-helper" },
        { label: "Terms of Service", href: "/modes/code-helper" },
        { label: "Security", href: "/modes/code-helper" },
        { label: "Contact", href: "/modes/code-helper" },
      ],
    },
    {
      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" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="animated-grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="AIRBRONE AI"
          navItems={navItems}
          button={{
            text: "Get Started Free",
            href: "/auth/login",
          }}
        />
      </div>

      <div id="code-helper-features" data-section="code-helper-features" className="relative overflow-hidden">
        <FeatureBento
          title="Agent Code Helper Mode - Professional Development"
          description="Harness the power of AI-assisted coding with advanced multi-language support, real-time debugging, and intelligent code optimization. Perfect for developers of all levels."
          tag="Code Intelligence"
          tagIcon={Code2}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "Multi-Language Code Generation",
              description: "Generate production-ready code in JavaScript, Python, React, Node.js, SQL, CSS, TypeScript, and Docker. Supports 50+ programming languages and frameworks.",
              bentoComponent: "phone",
              statusIcon: Code2,
              alertIcon: AlertCircle,
              alertTitle: "Code Review",
              alertMessage: "Optimization suggestions ready",
              apps: [
                { name: "JavaScript", icon: Code2 },
                { name: "Python", icon: Code2 },
                { name: "React", icon: Code2 },
                { name: "Node.js", icon: Code2 },
                { name: "SQL", icon: Database },
                { name: "CSS", icon: Palette },
                { name: "TypeScript", icon: Code2 },
                { name: "Docker", icon: Container },
              ],
            },
            {
              title: "Intelligent Debugging & Error Resolution",
              description: "AI-powered debugging that identifies root causes, suggests fixes, and explains errors in detail. Real-time error prevention with predictive analysis.",
              bentoComponent: "chat",
              aiIcon: Code2,
              userIcon: Code2,
              placeholder: "Paste your error message here...",
              exchanges: [
                {
                  userMessage: "TypeError: Cannot read property 'map' of undefined",
                  aiResponse: "This error occurs when you're trying to call .map() on a value that is undefined. This typically happens when an API call hasn't completed yet. Try adding a conditional check or use optional chaining: array?.map(...)",
                },
                {
                  userMessage: "How do I optimize my React component performance?",
                  aiResponse: "Use React.memo() for functional components, useMemo() for expensive computations, useCallback() for event handlers, and implement code splitting with dynamic imports. Consider using Suspense for lazy loading components.",
                },
              ],
            },
            {
              title: "Performance Optimization Analytics",
              description: "Analyze code complexity, identify bottlenecks, and receive optimization recommendations. Track metrics for speed, memory usage, and scalability.",
              bentoComponent: "icon-info-cards",
              items: [
                { icon: Code2, label: "Complexity Analysis", value: "O(n) optimal" },
                { icon: Database, label: "Memory Usage", value: "256MB efficient" },
                { icon: Palette, label: "Performance Score", value: "95/100" },
              ],
            },
            {
              title: "Code Review & Best Practices",
              description: "Get automated code reviews following industry best practices, security standards, and design patterns. Learn from AI-powered suggestions and improve code quality.",
              bentoComponent: "orbiting-icons",
              centerIcon: Code2,
              items: [
                { icon: Code2, ring: 1 },
                { icon: Database, ring: 1 },
                { icon: Palette, ring: 2 },
                { icon: Container, ring: 2 },
                { icon: Code2, ring: 3 },
              ],
            },
          ]}
        />
      </div>

      <div id="code-helper-pricing" data-section="code-helper-pricing" className="py-16 md:py-24">
        <PricingCardNine
          title="Developer Plans for Every Scale"
          description="Choose the plan that matches your development needs. Start with our free tier and scale as you grow."
          tag="Pricing"
          tagIcon={Code2}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "starter",
              title: "Starter Developer",
              price: "₹999",
              period: "per month",
              features: [
                "Basic code generation",
                "100 queries/day",
                "Single language support",
                "Standard debugging",
                "Email support",
              ],
              button: {
                text: "Start Free Trial",
                href: "/checkout?plan=code-starter",
              },
            },
            {
              id: "professional",
              title: "Professional Developer",
              price: "₹1,999",
              period: "per month",
              features: [
                "Advanced code generation",
                "Unlimited queries",
                "Multi-language support",
                "Real-time debugging",
                "Code optimization",
                "Priority support",
                "API access",
              ],
              button: {
                text: "Subscribe Now",
                href: "/checkout?plan=code-professional",
              },
            },
            {
              id: "enterprise",
              title: "Enterprise Developer",
              price: "Custom",
              period: "contact for pricing",
              features: [
                "All Professional features",
                "Dedicated account manager",
                "Custom integrations",
                "White-label options",
                "Team collaboration",
                "Advanced security",
                "SLA guarantee",
              ],
              button: {
                text: "Contact Sales",
                href: "/modes/code-helper",
              },
            },
          ]}
        />
      </div>

      <div id="code-helper-contact" data-section="code-helper-contact">
        <ContactSplit
          tag="Get Support"
          title="Connect with Our Developer Community"
          description="Have technical questions? Our developer advocates are ready to help you maximize your productivity with Agent Code Helper."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "grid" }}
          useInvertedBackground={true}
          mediaAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B9dMftQ4AQBXAKtnCOA7fukWXU/contact-form-and-support-channel-illustr-1773905442054-5bf6e7a4.png"
          imageAlt="Contact Support"
          inputPlaceholder="Enter your email address"
          buttonText="Get Developer Support"
          termsText="By contacting us, you agree to our Terms and Conditions and Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="AIRBRONE AI"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}