"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Zap, Sparkles, Shield, TrendingUp, Trophy, DollarSign, Star, Crown, Rocket, Heart, HelpCircle, Calendar, Linkedin, Twitter, Github } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="radialGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="AgentBrowser"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Start Free Trial",            href: "https://app.agentbrowser.io/signup"
          }}
          className="fixed top-6 left-1/2 transform -translate-x-1/2 z-50"
          buttonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="AgentBrowser"
          description="The enterprise AI browser for intelligent automation. Powered by advanced agents, trusted by the world's largest companies."
          buttons={[
            {
              text: "Start Free Trial",              href: "https://app.agentbrowser.io/signup"
            },
            {
              text: "View Demo",              href: "#features"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-shot-notebook-displaying-ai-machine-learning-algorithms_482257-122159.jpg"
          imageAlt="AI browser automation interface"
          showDimOverlay={true}
          logoLineHeight={1.05}
          ariaLabel="AI browser automation hero section"
          logoContainerClassName="text-primary-cta"
          descriptionClassName="text-foreground/80 font-medium"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Enterprise Automation Reimagined"
          description="AgentBrowser combines the power of AI agents with the accessibility of a browser interface. Automate complex workflows across any web application with intelligent agents that learn, adapt, and scale with your enterprise needs."
          tag="Enterprise Solution"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imagePosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-100475.jpg"
          imageAlt="AgentBrowser dashboard interface"
          bulletPoints={[
            {
              title: "AI-Powered Agents",              description: "Deploy autonomous agents that navigate web applications, extract data, and execute complex tasks with precision and intelligence.",              icon: Sparkles
            },
            {
              title: "Zero Code Deployment",              description: "Create and deploy automation workflows without writing a single line of code. Our intuitive interface empowers non-technical teams.",              icon: Zap
            },
            {
              title: "Enterprise Security",              description: "Bank-grade encryption, SOC 2 compliance, and advanced access controls ensure your data remains secure and protected.",              icon: Shield
            },
            {
              title: "Unlimited Scalability",              description: "Scale from single workflows to thousands of concurrent automations across your entire organization without infrastructure overhead.",              icon: TrendingUp
            }
          ]}
          buttons={[
            {
              text: "Learn More",              href: "#features"
            }
          ]}
          titleClassName="text-foreground"
          descriptionClassName="text-foreground/70"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why AgentBrowser Leads Enterprise Automation"
          description="Compare traditional RPA solutions with our next-generation AI browser automation platform."
          tag="Competitive Advantage"
          tagIcon={Trophy}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          negativeCard={{
            items: [
              "Expensive infrastructure requirements",              "Complex implementation timelines",              "Limited to predefined workflows",              "High maintenance overhead",              "Vendor lock-in risks"
            ]
          }}
          positiveCard={{
            items: [
              "Cloud-native, pay-as-you-go pricing",              "Deploy agents in minutes, not months",              "Intelligent agents adapt to UI changes automatically",              "Fully managed platform with zero ops",              "Open ecosystem and API-first architecture"
            ]
          }}
          buttons={[
            {
              text: "Get Started Today",              href: "https://app.agentbrowser.io/signup"
            }
          ]}
          titleClassName="text-foreground"
          descriptionClassName="text-foreground/70"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Flexible Pricing for Every Stage"
          description="Start free and scale up as your automation needs grow. No credit card required to begin."
          tag="Transparent Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Starter",              badgeIcon: Rocket,
              price: "Free",              subtitle: "Perfect for exploring automation possibilities",              buttons: [
                {
                  text: "Start Free Trial",                  href: "https://app.agentbrowser.io/signup"
                },
                {
                  text: "Learn More",                  href: "#contact"
                }
              ],
              features: [
                "Up to 3 autonomous agents",                "500 monthly workflow executions",                "Community support",                "Basic analytics dashboard"
              ]
            },
            {
              id: "professional",              badge: "Professional",              badgeIcon: Star,
              price: "$499",              subtitle: "For growing teams and operations",              buttons: [
                {
                  text: "Get Started",                  href: "https://app.agentbrowser.io/signup"
                },
                {
                  text: "Chat to Sales",                  href: "#contact"
                }
              ],
              features: [
                "Unlimited autonomous agents",                "100K monthly workflow executions",                "Priority support (24/7)",                "Advanced analytics and monitoring",                "Custom integrations"
              ]
            },
            {
              id: "enterprise",              badge: "Enterprise",              badgeIcon: Crown,
              price: "Custom",              subtitle: "For mission-critical automation at scale",              buttons: [
                {
                  text: "Contact Sales",                  href: "#contact"
                },
                {
                  text: "Schedule Demo",                  href: "https://calendly.com/agentbrowser"
                }
              ],
              features: [
                "Unlimited agents and executions",                "Dedicated account management",                "24/7 premium support",                "Advanced security and compliance",                "Custom SLAs and deployment options",                "On-premise deployment available"
              ]
            }
          ]}
          titleClassName="text-foreground"
          descriptionClassName="text-foreground/70"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Over 5,000 teams across the globe trust AgentBrowser to automate their most critical business processes"
          cardTag="Customer Success Stories"
          cardTagIcon={Heart}
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Sarah Chen, VP of Operations at Global Tech"
            },
            {
              id: "2",              name: "Michael Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Michael Rodriguez, CEO at FinanceFlow"
            },
            {
              id: "3",              name: "Jennifer Park",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",              imageAlt: "Jennifer Park, Head of Automation at RetailCorp"
            },
            {
              id: "4",              name: "David Thomson",              imageSrc: "https://img.b2bpic.net/free-photo/smiley-businesswoman-posing-outdoors_23-2148767054.jpg",              imageAlt: "David Thomson, CTO at CloudSystems"
            },
            {
              id: "5",              name: "Emma Watson",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",              imageAlt: "Emma Watson, Product Director at InnovateLabs"
            },
            {
              id: "6",              name: "Alex Kumar",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg",              imageAlt: "Alex Kumar, Founder of AutoScale"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about AgentBrowser, our platform capabilities, pricing, and support."
          tag="Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-photo/young-distraught-call-center-agent-communicating-with-client-while-using-desktop-pc-office_637285-6461.jpg"
          imageAlt="Customer support team"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How does AgentBrowser differ from traditional RPA solutions?",              content: "AgentBrowser uses advanced AI agents that understand and adapt to web interfaces dynamically. Unlike traditional RPA which relies on brittle screen coordinates, our agents use computer vision and natural language processing to interact with any web application intelligently. This means your automations continue working even when web interfaces change."
            },
            {
              id: "2",              title: "What is the implementation timeline for AgentBrowser?",              content: "Most organizations deploy their first automation within 30 minutes. Unlike RPA solutions that require 3-6 month implementations, AgentBrowser's no-code interface and pre-built agent templates enable rapid deployment. Complex enterprise automations typically launch within 2-4 weeks."
            },
            {
              id: "3",              title: "Is AgentBrowser secure for handling sensitive data?",              content: "Yes. AgentBrowser is SOC 2 Type II certified, HIPAA compliant, and supports end-to-end encryption. We offer dedicated deployment options, advanced access controls, and comprehensive audit logging. Enterprise customers can deploy on-premise or in their own AWS/Azure accounts for complete data sovereignty."
            },
            {
              id: "4",              title: "Can AgentBrowser integrate with our existing enterprise systems?",              content: "Absolutely. AgentBrowser provides REST APIs, webhooks, and native integrations with Salesforce, ServiceNow, SAP, and 200+ other enterprise applications. Our API-first architecture ensures seamless integration with your existing tech stack."
            },
            {
              id: "5",              title: "What kind of technical support do you provide?",              content: "Our Professional plan includes 24/7 priority support via chat and email. Enterprise customers receive dedicated account managers, custom SLAs, and quarterly business reviews. We also offer comprehensive documentation, video tutorials, and an active community forum."
            },
            {
              id: "6",              title: "How do you handle workflow changes when web interfaces update?",              content: "Our AI agents adapt automatically to minor interface changes. For significant changes, AgentBrowser's intelligent change detection alerts you and provides step-by-step guidance for updates. Most workflow adjustments take just minutes rather than hours with traditional RPA."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Schedule Your Demo Today"
          ctaDescription="See AgentBrowser in action and discover how intelligent automation can transform your business processes."
          ctaIcon={Calendar}
          ctaButton={{
            text: "Book a Demo",            href: "https://calendly.com/agentbrowser"
          }}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "How quickly can we see ROI from automation?",              content: "Most organizations see measurable ROI within 30-60 days of deploying their first workflow. With labor cost reductions of 40-70% per automated process and faster processing cycles, the financial impact compounds rapidly across multiple automations."
            },
            {
              id: "2",              title: "Do we need to hire specialized staff for AgentBrowser?",              content: "No specialized technical hiring needed. AgentBrowser's no-code interface means your existing operations and business analysts can build and maintain automations. We provide comprehensive training and certification programs to upskill your team."
            },
            {
              id: "3",              title: "What happens if an agent encounters an error?",              content: "AgentBrowser automatically logs all errors with full context and provides intelligent recommendations for resolution. Failed workflows can be configured to escalate to human review, retry with backoff, or trigger custom webhooks. Our advanced monitoring ensures rapid identification and resolution."
            },
            {
              id: "4",              title: "Can AgentBrowser handle multi-step complex workflows?",              content: "Yes. AgentBrowser excels at orchestrating complex, multi-step workflows across multiple applications. Our agents can handle conditional logic, data validation, error handling, and cross-system coordination seamlessly."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="AgentBrowser"
          copyrightText="© 2025 AgentBrowser Inc. All rights reserved."
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/agentbrowser",              ariaLabel: "AgentBrowser on LinkedIn"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/agentbrowser",              ariaLabel: "AgentBrowser on Twitter"
            },
            {
              icon: Github,
              href: "https://github.com/agentbrowser",              ariaLabel: "AgentBrowser on GitHub"
            }
          ]}
          logoClassName="text-primary-cta font-extrabold"
          copyrightTextClassName="text-foreground/60 text-sm"
        />
      </div>
    </ThemeProvider>
  );
}