"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

import { Sparkles, Zap, Info, Mail, Star, CreditCard, HelpCircle, LayoutGrid, ShoppingCart, Key, CheckCircle, AlertCircle, RefreshCw, Users, Briefcase, CheckSquare } from 'lucide-react';

const LandingPage = () => {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Dashboard", id: "hero" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="accounts.now"
          bottomLeftText="Enterprise Management"
          bottomRightText="hello@accounts.now"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Real-Time Account Management Hub"
          description="Monitor, manage, and optimize all your accounts from a unified dashboard. Live analytics, instant notifications, and intelligent automation at your fingertips."
          tag="Enterprise Platform"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Quick Buy →", href: "#pricing" },
            { text: "Explore Features", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Dashboard Overview",            logoIcon: LayoutGrid,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/a-sleek-modern-dashboard-interface-showi-1772532775339-dc86dac5.png",            imageAlt: "accounts.now dashboard interface",            searchPlaceholder: "Search accounts...",            buttons: [
              { text: "View Dashboard", href: "#" },
              { text: "Export Data", href: "#" }
            ],
            sidebarItems: [
              { icon: LayoutGrid, active: true },
              { icon: ShoppingCart, active: false },
              { icon: Key, active: false }
            ],
            stats: [
              { title: "Total Accounts", values: [36474, 38920, 41205], description: "Active accounts managed" },
              { title: "Online Status", values: [78, 82, 85], valueSuffix: "%", description: "System availability" },
              { title: "Success Rate", values: [93, 94, 95], valueSuffix: "%", description: "Operation completion" }
            ],
            chartTitle: "Monthly Performance",            chartData: [
              { value: 50 },
              { value: 70 },
              { value: 60 },
              { value: 85 },
              { value: 90 }
            ],
            listTitle: "Recent Activities",            listItems: [
              { icon: CheckCircle, title: "Account Verified", status: "Completed" },
              { icon: AlertCircle, title: "Security Update", status: "In Progress" },
              { icon: RefreshCw, title: "Data Sync", status: "Completed" }
            ]
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful Features Built for Control"
          description="Comprehensive tools designed to streamline account management, licensing, and team coordination across your entire organization."
          tag="Core Capabilities"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          carouselMode="buttons"
          features={[
            {
              title: "Global Analytics",              description: "Visualize account distribution across the world",              bentoComponent: "globe"
            },
            {
              title: "Performance Metrics",              description: "Real-time bar charts showing account performance trends",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Geographic Tracking",              description: "Interactive world map with location-based account distribution",              bentoComponent: "map"
            },
            {
              title: "Historical Analytics",              description: "Line charts displaying trends over time with detailed insights",              bentoComponent: "line-chart"
            }
          ]}
        />
      </div>

      <div id="feature-hover" data-section="feature-hover">
        <FeatureHoverPattern
          title="Interactive Management Experience"
          description="Hover-driven features that reveal powerful capabilities for advanced account and license management"
          tag="Advanced Tools"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          carouselMode="buttons"
          features={[
            {
              icon: Users,
              title: "Account Management",              description: "Centralized control over all user accounts with granular permissions and role-based access"
            },
            {
              icon: Key,
              title: "License Control",              description: "Manage licenses with instant redemption, tracking, and renewal capabilities"
            },
            {
              icon: Briefcase,
              title: "Job Scheduling",              description: "Automated task execution with real-time monitoring and detailed logging"
            },
            {
              icon: CheckSquare,
              title: "Task Management",              description: "Organize and track tasks with intuitive workflows and status updates"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Platform Overview"
          tagIcon={Info}
          tagAnimation="slide-up"
          title="Enterprise-Grade Account Management Platform"
          description="accounts.now eliminates account fragmentation—the costly challenge of managing dispersed systems and disconnected data. Our unified platform consolidates all accounts, licenses, and operations into one intelligent hub, delivering real-time visibility, streamlined workflows, and enterprise-grade security. By breaking down organizational silos, we help teams collaborate more effectively, reduce operational overhead, and scale with confidence."
          metrics={[
            { value: "36,000+", title: "Accounts Managed" },
            { value: "2.8M+", title: "Operations Automated Daily" },
            { value: "5,000+", title: "Organizations Served" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/a-professional-workspace-environment-sho-1772532778662-01dcd787.png"
          imageAlt="Team using accounts.now dashboard"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Industry Leaders"
          description="See what teams are saying about their experience managing accounts with our platform"
          tag="Client Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          speed={40}
          topMarqueeDirection="left"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "CEO, TechVenture",              testimonial: "accounts.now transformed how we manage our enterprise infrastructure. The dashboard is intuitive and the support team is exceptional.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/professional-headshot-of-a-woman-in-busi-1772532775396-c23100e9.png",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Rodriguez",              handle: "Operations Manager, CloudSync",              testimonial: "Reduced our account management overhead by 60%. The automation features alone saved us hundreds of hours annually.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/professional-headshot-of-a-man-in-busine-1772532773941-7917f02c.png",              imageAlt: "Marcus Rodriguez"
            },
            {
              id: "3",              name: "Elena Vasquez",              handle: "Director, Enterprise Solutions",              testimonial: "Best investment we've made for our infrastructure. Seamless integration and outstanding performance across all metrics.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/professional-headshot-of-a-woman-with-di-1772532773965-bde0603f.png",              imageAlt: "Elena Vasquez"
            },
            {
              id: "4",              name: "James Mitchell",              handle: "Head of IT, Global Networks",              testimonial: "The level of control and visibility we have now is incredible. Every team member loves using this platform daily.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/professional-headshot-of-a-man-in-busine-1772532775686-a981032e.png",              imageAlt: "James Mitchell"
            },
            {
              id: "5",              name: "Priya Kapoor",              handle: "CTO, DataCore",              testimonial: "Professional-grade platform at an accessible price point. Highly recommend for any organization scaling their operations.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/professional-headshot-of-a-woman-in-busi-1772532773789-0ccf9278.png",              imageAlt: "Priya Kapoor"
            },
            {
              id: "6",              name: "David Thompson",              handle: "Founder, StartupHub",              testimonial: "Finally, a solution that grows with our business. Excellent documentation and responsive customer support.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQjXdZnw4uFjcy5MkZIp0I0v2B/professional-headshot-of-a-man-in-formal-1772532774013-58572a09.png",              imageAlt: "David Thompson"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Flexible Pricing for Every Organization"
          description="Choose the plan that fits your account management needs. All plans include core features with 24/7 support."
          tag="Plans & Pricing"
          tagIcon={CreditCard}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          carouselMode="buttons"
          plans={[
            {
              id: "starter",              price: "$299/mo",              name: "Starter",              buttons: [
                { text: "Get Started", href: "/signup" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Up to 100 managed accounts",                "Basic analytics dashboard",                "Email support",                "Monthly reporting",                "Standard API access"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$799/mo",              name: "Professional",              buttons: [
                { text: "Get Started", href: "/signup" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Up to 1,000 managed accounts",                "Advanced analytics & reporting",                "Priority support 24/7",                "Real-time notifications",                "Advanced API access",                "Custom integrations"
              ]
            },
            {
              id: "enterprise",              price: "Custom",              name: "Enterprise",              buttons: [
                { text: "Contact Sales", href: "/contact" },
                { text: "Schedule Demo", href: "#" }
              ],
              features: [
                "Unlimited account management",                "Custom analytics dashboards",                "Dedicated support team",                "Real-time monitoring",                "Full API control",                "Custom development",                "SLA guarantee"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Get answers to common questions about accounts.now features, pricing, and support"
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is accounts.now?",              content: "accounts.now is an enterprise-grade account management platform designed to centralize and streamline management of multiple accounts, licenses, and operations. It provides real-time analytics, automation, and team collaboration tools for organizations of all sizes."
            },
            {
              id: "2",              title: "How does the dashboard work?",              content: "Our dashboard provides a unified view of all your accounts, licenses, and metrics. Monitor real-time status, access detailed analytics, and manage operations from one intuitive interface. The interface adapts to mobile and desktop for seamless access anywhere."
            },
            {
              id: "3",              title: "What security measures are in place?",              content: "We implement enterprise-grade security including end-to-end encryption, multi-factor authentication, role-based access control, and regular security audits. All data is encrypted at rest and in transit. We maintain SOC 2 compliance and 99.9% uptime SLA."
            },
            {
              id: "4",              title: "Can I integrate with other tools?",              content: "Yes. accounts.now offers comprehensive API access and webhooks for custom integrations. We also provide pre-built integrations with popular enterprise tools. Professional and Enterprise plans include custom integration support."
            },
            {
              id: "5",              title: "How is billing calculated?",              content: "Billing is based on your selected plan tier. Starter plans support up to 100 accounts, Professional up to 1,000, and Enterprise is unlimited. You can upgrade or downgrade your plan anytime. Annual subscriptions include 20% savings."
            },
            {
              id: "6",              title: "What support options are available?",              content: "Starter plans include email support. Professional plans include 24/7 priority phone and email support. Enterprise customers receive a dedicated account manager and phone support. All plans include access to our comprehensive documentation and community forum."
            },
            {
              id: "7",              title: "Can I export my data?",              content: "Absolutely. All plans include data export capabilities. You can export account data, reports, and analytics in CSV, JSON, or PDF formats. Enterprise plans include automated export scheduling and custom reporting dashboards."
            },
            {
              id: "8",              title: "Is there a free trial?",              content: "Yes, we offer a 14-day free trial for all plans with full feature access. No credit card required. After the trial, choose the plan that best fits your needs or continue with limited free tier features."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Ready to Transform Your Account Management?"
          description="Join hundreds of organizations using accounts.now to streamline their operations. Our team is here to help you get started."
          buttons={[
            { text: "Start Free Trial", href: "/signup" },
            { text: "Schedule Demo", href: "/demo" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="accounts.now"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Support", href: "#" },
                { label: "Community", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 accounts.now | Enterprise Account Management Platform"
        />
      </div>
    </ThemeProvider>
  );
};

export default LandingPage;