"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ArrowLeftRight, BarChart3, CheckCircle2, CircleDollarSign, Clock, Crown, Home, House, MessageSquareText, Network, Send, Settings, Sparkles, TrendingUp, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="large"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Velocity"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          background={{ variant: "radial-gradient" }}
          tag="Velocity for Teams"
          tagIcon={Zap}
          title="Move Faster Than Ever"
          description="Real-time collaboration, instant insights, and intelligent automation. Empower your team to ship, scale, and succeed."
          buttons={[
            { text: "Start Free Trial", href: "https://app.example.com/signup" },
            { text: "Schedule Demo", href: "#contact" }
          ]}
          dashboard={{
            title: "Velocity Dashboard",            logoIcon: Zap,
            imageSrc: "https://img.b2bpic.net/free-photo/handicapped-invalid-man-employee-sitting-immobilized-wheelchair-working-notepad-computer-same-time-analysing-financial-graphs-pc-showing-data-prosessing-project-regarding-economy_482257-30902.jpg",            imageAlt: "Velocity SaaS dashboard interface",            searchPlaceholder: "Search your workspace...",            sidebarItems: [
              { icon: Home, active: true },
              { icon: BarChart3 },
              { icon: Users },
              { icon: Settings }
            ],
            buttons: [
              { text: "Create Project", href: "#" },
              { text: "Export", href: "#" }
            ],
            stats: [
              {
                title: "Productivity Gain",                values: [145, 168, 192],
                valueSuffix: "%",                description: "Average team efficiency increase"
              },
              {
                title: "Time Saved",                values: [8.5, 12.3, 15.7],
                valuePrefix: "",                valueSuffix: "h/week",                description: "Hours saved per team member"
              },
              {
                title: "Active Users",                values: [2400, 3500, 4200],
                description: "Teams using Velocity daily"
              }
            ],
            chartTitle: "Team Velocity Trend",            chartData: [
              { value: 65 },
              { value: 78 },
              { value: 85 },
              { value: 92 },
              { value: 98 }
            ],
            listTitle: "Recent Activity",            listItems: [
              { icon: CheckCircle2, title: "Project Alpha launched", status: "Completed" },
              { icon: MessageSquareText, title: "Performance review pending", status: "In Progress" },
              { icon: CheckCircle2, title: "Team sprint finished", status: "Completed" }
            ]
          }}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose Velocity"
          description="Built for modern teams that refuse to slow down"
          tabs={[
            {
              id: "intelligent",              label: "Intelligent Automation",              description: "Our AI-powered system learns your workflow patterns and automates repetitive tasks. Eliminate context switching and focus on what matters most—building great products."
            },
            {
              id: "collaboration",              label: "Real-Time Collaboration",              description: "Synchronize across your entire team instantly. See changes in real-time, collaborate seamlessly across time zones, and keep everyone aligned without endless meetings."
            },
            {
              id: "integration",              label: "Seamless Integration",              description: "Connect with 200+ tools your team already uses. From project management to analytics, Velocity integrates where your work happens—no context switching required."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153838.jpg"
          imageAlt="Team collaborating on Velocity platform"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFive
          title="Powerful Features Built for Speed"
          description="Everything your team needs to collaborate, automate, and ship faster"
          features={[
            {
              title: "Live Collaboration",              description: "Edit together in real-time. See teammates' cursors, changes propagate instantly, conflicts resolve automatically.",              icon: Users,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153838.jpg",                  imageAlt: "Live collaboration interface"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/business-infographic-with-image_23-2148340472.jpg",                  imageAlt: "Integration capabilities"
                }
              ]
            },
            {
              title: "Intelligent Workflows",              description: "Automate your entire workflow. Trigger actions, route tasks, and scale operations without writing code.",              icon: Zap,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg",                  imageAlt: "Workflow automation"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",                  imageAlt: "Analytics dashboard"
                }
              ]
            },
            {
              title: "Real-Time Insights",              description: "Monitor team performance, track project progress, and make data-driven decisions with comprehensive analytics.",              icon: BarChart3,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",                  imageAlt: "Real-time analytics"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/infographic-blockchain-concept_23-2147848017.jpg",                  imageAlt: "Real-time monitoring dashboard"
                }
              ]
            },
            {
              title: "Smart Integration Hub",              description: "Connect 200+ apps seamlessly. Sync data across tools, automate handoffs, and keep everything in sync.",              icon: Network,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-vector/business-infographic-with-image_23-2148340472.jpg",                  imageAlt: "Integration ecosystem"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/handicapped-invalid-man-employee-sitting-immobilized-wheelchair-working-notepad-computer-same-time-analysing-financial-graphs-pc-showing-data-prosessing-project-regarding-economy_482257-30902.jpg",                  imageAlt: "Connected dashboard"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Trusted by Fast-Moving Teams"
          description="Real results from real teams using Velocity"
          metrics={[
            {
              id: "1",              icon: TrendingUp,
              title: "Productivity Gain",              value: "45%"
            },
            {
              id: "2",              icon: Clock,
              title: "Time Saved",              value: "12.5h"
            },
            {
              id: "3",              icon: Users,
              title: "Active Teams",              value: "5,000+"
            },
            {
              id: "4",              icon: Zap,
              title: "Uptime",              value: "99.99%"
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your team's needs. Scale as you grow."
          plans={[
            {
              id: "starter",              badge: "For Teams",              badgeIcon: Sparkles,
              price: "$49/mo",              subtitle: "Perfect for growing teams",              features: [
                "Up to 10 team members",                "Real-time collaboration",                "50 integrations",                "Basic analytics",                "Community support"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Zap,
              price: "$149/mo",              subtitle: "For fast-moving teams",              features: [
                "Unlimited team members",                "Advanced collaboration",                "200+ integrations",                "Advanced analytics",                "Priority support",                "Custom workflows"
              ]
            },
            {
              id: "enterprise",              badge: "For Scale",              badgeIcon: Crown,
              price: "Custom",              subtitle: "For enterprise needs",              features: [
                "Everything in Pro",                "Dedicated account manager",                "Custom integrations",                "SSO & SAML",                "24/7 phone support",                "SLA guarantee"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Teams Worldwide"
          description="See why leading teams choose Velocity to accelerate their work"
          testimonials={[
            {
              id: "1",              title: "Velocity transformed how we ship",              quote: "We've cut our deployment cycle from days to hours. The real-time collaboration features alone are worth it. Our team can't imagine going back.",              name: "Sarah Chen",              role: "VP Engineering",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Chen, VP Engineering at TechFlow Inc"
            },
            {
              id: "2",              title: "Finally, a tool that keeps up with us",              quote: "Velocity's automation has saved us countless hours. What used to take our team a full day now takes minutes. The ROI was immediate.",              name: "Marcus Johnson",              role: "Engineering Lead",              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: "Marcus Johnson, Engineering Lead at CloudScale"
            },
            {
              id: "3",              title: "Our productivity skyrocketed",              quote: "The ease of integration with our existing tools is unmatched. No more manual data entry, no more context switching. Just pure velocity.",              name: "Elena Rodriguez",              role: "Product Manager",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Elena Rodriguez, Product Manager at InnovateLabs"
            },
            {
              id: "4",              title: "The gold standard for team collaboration",              quote: "We onboarded in 30 minutes and were productive immediately. The support team is fantastic. Velocity is now core to how we operate.",              name: "David Kim",              role: "CTO",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Kim, CTO at StartupXYZ"
            },
            {
              id: "5",              title: "Worth every penny",              quote: "The intelligent automation features are game-changing. Our team spends more time on high-impact work and less on repetitive tasks.",              name: "Jessica Williams",              role: "Operations Director",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Jessica Williams, Operations Director at GrowthCo"
            },
            {
              id: "6",              title: "An essential tool for modern teams",              quote: "The real-time insights help us make better decisions faster. Velocity is the backbone of our team's success.",              name: "Alex Kumar",              role: "Director of Engineering",              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageAlt: "Alex Kumar, Director of Engineering at ProScale"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Common Questions"
          sideDescription="Everything you need to know about Velocity"
          textPosition="left"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",              title: "How does Velocity's real-time collaboration work?",              content: "Velocity uses WebSocket technology to sync changes instantly across your team. Every edit, comment, and action appears in real-time for all team members, regardless of location. Our conflict resolution engine ensures data integrity even with simultaneous edits."
            },
            {
              id: "2",              title: "Can I integrate Velocity with my existing tools?",              content: "Yes! Velocity integrates with 200+ applications including Slack, GitHub, Jira, Asana, and more. We offer both pre-built integrations and a powerful API for custom connections. Setup takes minutes, and most integrations require no code."
            },
            {
              id: "3",              title: "How much data can I store?",              content: "Storage scales with your plan. Starter teams get 100GB, Pro teams get unlimited storage, and Enterprise customers get dedicated infrastructure. All data is encrypted end-to-end and backed up continuously."
            },
            {
              id: "4",              title: "What about security and compliance?",              content: "Velocity is SOC 2 Type II certified and compliant with GDPR, HIPAA, and CCPA. We offer SSO, SAML, IP whitelisting, and custom security policies. Enterprise customers get dedicated security reviews."
            },
            {
              id: "5",              title: "Can I export my data?",              content: "Absolutely. You can export all your data anytime in standard formats (JSON, CSV, etc.). We also provide data migration services if you ever decide to switch."
            },
            {
              id: "6",              title: "What's your uptime guarantee?",              content: "We maintain 99.99% uptime with redundant infrastructure across multiple regions. Pro and Enterprise plans include an SLA guarantee. Our status page provides real-time system monitoring."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Move Faster?"
          tagIcon={Zap}
          title="Join Thousands of Teams Accelerating with Velocity"
          description="Start your free trial today. No credit card required. Unlimited access to all features for 14 days. Or schedule a personalized demo with our team."
          buttons={[
            { text: "Start Free Trial", href: "https://app.example.com/signup" },
            { text: "Schedule Demo", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Velocity"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}