"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import Link from "next/link";
import {
  Shield,
  TrendingUp,
  Home,
  BarChart3,
  Lock,
  Settings,
  ArrowUpRight,
  ArrowDownLeft,
  ArrowRightLeft,
  Zap,
  Sparkles,
  LineChart,
  GitBranch,
  Clock,
  CheckCircle,
  Eye,
  Link as LinkIcon,
  Code,
  Boxes,
  Award,
  Users,
  Linkedin,
  Twitter,
  Github,
  HelpCircle,
  Star,
} from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Solutions", id: "about" },
    { name: "Security", id: "security" },
    { name: "Team", id: "team" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Features", href: "features" },
        { label: "Security", href: "security" },
        { label: "Pricing", href: "/pricing" },
        { label: "API Docs", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About", href: "about" },
        { label: "Team", href: "team" },
        { label: "Careers", href: "#" },
        { label: "Blog", href: "#" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Security", href: "#" },
        { label: "Contact", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FinFlow"
          navItems={navItems}
          button={{ text: "Get Started", href: "/contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Real-Time Financial Intelligence for Enterprise"
          description="Monitor transactions, automate workflows, and gain actionable insights across your entire financial ecosystem with our unified platform."
          tag="Enterprise-Grade Security"
          tagIcon={Shield}
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "View Demo", href: "#" },
          ]}
          dashboard={{
            title: "Financial Dashboard Hub",            logoIcon: TrendingUp,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/a-modern-professional-financial-dashboar-1772544009590-138f5b33.png",            imageAlt: "Financial dashboard interface",            buttons: [
              { text: "View Analytics", href: "#" },
              { text: "Export Report", href: "#" },
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: BarChart3, active: false },
              { icon: Lock, active: false },
              { icon: Settings, active: false },
            ],
            stats: [
              {
                title: "Transaction Volume",                values: [245000000, 312000000, 425000000],
                valuePrefix: "$",                valueSuffix: "B",                description: "Daily processed volume"},
              {
                title: "Processing Time",                values: [1.2, 0.8, 0.5],
                valuePrefix: "",                valueSuffix: "ms",                description: "Average transaction speed"},
              {
                title: "Uptime",                values: [99.7, 99.8, 99.99],
                valuePrefix: "",                valueSuffix: "%",                description: "Platform reliability"},
            ],
            chartTitle: "Revenue Forecast",            chartData: [
              { value: 65 },
              { value: 78 },
              { value: 92 },
              { value: 81 },
              { value: 88 },
            ],
            listTitle: "Recent Transactions",            listItems: [
              {
                icon: ArrowUpRight,
                title: "$2.5M Wire Transfer",                status: "Confirmed"},
              {
                icon: ArrowDownLeft,
                title: "$1.8M ACH Payment",                status: "Processed"},
              {
                icon: ArrowRightLeft,
                title: "$500K Internal Transfer",                status: "Completed"},
            ],
          }}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Enterprise Solution"
          tagIcon={Zap}
          title="Transform Financial Operations at Scale"
          description="FinFlow empowers enterprises to streamline complex financial processes, reduce operational costs, and accelerate decision-making. Our platform integrates seamlessly with existing systems while providing military-grade security and compliance capabilities."
          metrics={[
            { value: "42%", title: "Average Cost Reduction" },
            { value: "98%", title: "Automation Rate" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/a-high-tech-financial-operations-center--1772544011822-f244fa73.png"
          imageAlt="Enterprise financial operations"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Powerful Features Built for Enterprise"
          description="Everything you need to manage, monitor, and optimize your financial operations with precision and control."
          tag="Core Capabilities"
          tagIcon={Sparkles}
          features={[
            {
              id: "1",              title: "Real-Time Analytics & Reporting",              description:
                "Access comprehensive financial dashboards with real-time data updates. Generate custom reports, forecasts, and compliance documentation instantly.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/advanced-financial-analytics-dashboard-s-1772544009832-fbbe4472.png"},
              items: [
                { icon: BarChart3, text: "Real-time dashboards" },
                { icon: LineChart, text: "Custom reporting" },
                { icon: TrendingUp, text: "Predictive analytics" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Automated Workflow Orchestration",              description:
                "Eliminate manual processes with intelligent automation. Route transactions, approvals, and reconciliations automatically based on configurable rules.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/a-workflow-automation-system-interface-s-1772544010265-0212c166.png"},
              items: [
                { icon: Zap, text: "Smart automation" },
                { icon: GitBranch, text: "Complex workflows" },
                { icon: Clock, text: "Scheduled tasks" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Enterprise Security & Compliance",              description:
                "Bank-level encryption, multi-factor authentication, and comprehensive audit trails. Full compliance with SOC 2, ISO 27001, and regulatory requirements.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/enterprise-security-interface-featuring--1772544009430-6e391b6d.png"},
              items: [
                { icon: Lock, text: "Military-grade encryption" },
                { icon: CheckCircle, text: "Compliance certified" },
                { icon: Eye, text: "Complete audit trails" },
              ],
              reverse: false,
            },
            {
              id: "4",              title: "API-First Integration Platform",              description:
                "Connect your entire financial ecosystem with our comprehensive REST and GraphQL APIs. Pre-built connectors for 500+ financial systems and applications.",              media: {
                imageSrc:
                  "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/api-integration-platform-interface-showi-1772544010321-a324964a.png"},
              items: [
                { icon: LinkIcon, text: "500+ integrations" },
                { icon: Code, text: "Developer-friendly APIs" },
                { icon: Boxes, text: "Webhook support" },
              ],
              reverse: true,
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Proven Results at Enterprise Scale"
          description="Our platform powers financial operations for some of the world's leading institutions"
          tag="Impact Metrics"
          tagIcon={Award}
          metrics={[
            {
              id: "1",              value: "500B+",              title: "Transactions Processed Annually",              items: [
                "Across 45+ countries",                "24/7 processing",                "99.99% uptime SLA"],
            },
            {
              id: "2",              value: "1,200+",              title: "Enterprise Clients Worldwide",              items: [
                "Fortune 500 companies",                "Global financial institutions",                "Leading fintech platforms"],
            },
            {
              id: "3",              value: "$12T+",              title: "Total Assets Under Management",              items: [
                "Processed annually",                "Multiple asset classes",                "Real-time settlement"],
            },
            {
              id: "4",              value: "47%",              title: "Average Speed Improvement",              items: [
                "vs. legacy systems",                "Reduced settlement time",                "Lower operational costs"],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Leadership Driving Financial Innovation"
          description="Led by veterans from top-tier financial institutions and technology companies"
          tag="Expert Team"
          tagIcon={Users}
          members={[
            {
              id: "1",              name: "Alexandra Chen",              role: "CEO & Co-founder",              description:
                "Former VP of Engineering at Goldman Sachs. Built large-scale trading systems processing $2T+ daily.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-business-portrait-of-a-conf-1772544008346-911d3003.png",              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"},
                {
                  icon: Twitter,
                  url: "https://twitter.com"},
              ],
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "CTO & Co-founder",              description:
                "Ex-Google infrastructure engineer. Led distributed systems handling 100M+ req/sec at scale.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-business-portrait-of-a-conf-1772544011772-0aabde90.png",              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"},
                {
                  icon: Github,
                  url: "https://github.com"},
              ],
            },
            {
              id: "3",              name: "Sofia Rodriguez",              role: "Chief Compliance Officer",              description:
                "20+ years in fintech compliance. Managed regulatory frameworks for major financial institutions.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-business-portrait-of-a-conf-1772544008948-21a6c990.png",              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"},
              ],
            },
            {
              id: "4",              name: "David Park",              role: "VP of Product",              description:
                "Former product lead at JPMorgan Chase. Shipped products used by 50M+ users globally.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-business-portrait-of-a-conf-1772544008445-e92021f7.png",              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"},
              ],
            },
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-headshot-of-a-female-financ-1772544008106-cc2dd73f.png",              imageAlt: "Sarah Johnson - JPMorgan Chase"},
            {
              id: "2",              name: "Michael Chen",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-headshot-of-a-male-financia-1772544008148-6a054b89.png",              imageAlt: "Michael Chen - Goldman Sachs"},
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-headshot-of-a-female-financ-1772544009360-96717b09.png",              imageAlt: "Emily Rodriguez - Bank of America"},
            {
              id: "4",              name: "James Wilson",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-headshot-of-a-male-fintech--1772544011117-4693d9e0.png",              imageAlt: "James Wilson - Stripe"},
            {
              id: "5",              name: "Lisa Zhang",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-headshot-of-a-female-invest-1772544008828-6ff14f1e.png",              imageAlt: "Lisa Zhang - Morgan Stanley"},
            {
              id: "6",              name: "Robert Murphy",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-headshot-of-a-male-financia-1772544010458-a69e3105.png",              imageAlt: "Robert Murphy - Fidelity"},
          ]}
          cardTitle="Trusted by 1,200+ financial institutions worldwide"
          cardTag="Leading fintech companies choose FinFlow"
          cardTagIcon={Sparkles}
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about FinFlow and how it can transform your financial operations."
          tag="Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How secure is FinFlow?",              content:
                "FinFlow employs military-grade AES-256 encryption, multi-factor authentication, and real-time threat detection. We maintain SOC 2 Type II, ISO 27001, and full compliance with international financial regulations including PCI-DSS Level 1."},
            {
              id: "2",              title: "What is the implementation timeline?",              content:
                "Standard implementation takes 4-8 weeks depending on system complexity. Our dedicated onboarding team manages API integration, data migration, and staff training. Enterprise clients receive white-glove support throughout the process."},
            {
              id: "3",              title: "Can FinFlow integrate with our existing systems?",              content:
                "Yes. FinFlow features 500+ pre-built integrations and REST/GraphQL APIs for custom connections. Our integration team has successfully connected to legacy systems, modern cloud platforms, and proprietary financial infrastructure."},
            {
              id: "4",              title: "What kind of support do you provide?",              content:
                "We offer 24/7/365 support with average response times under 15 minutes for critical issues. Enterprise clients receive dedicated support engineers, quarterly business reviews, and proactive system monitoring."},
            {
              id: "5",              title: "How does pricing work?",              content:
                "FinFlow uses transparent usage-based pricing with no hidden fees. You pay only for transactions processed and storage used. Volume discounts apply at scale. Contact our sales team for a custom quote based on your transaction volume."},
            {
              id: "6",              title: "What about data sovereignty and compliance?",              content:
                "FinFlow operates data centers in multiple regions with data residency guarantees. We maintain full compliance with GDPR, CCPA, and financial regulatory requirements in each jurisdiction where we operate."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-financial-support-team-envi-1772544009073-79e9c5b6.png"
          imageAlt="Financial support team"
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="Join thousands of global financial institutions and enterprises using FinFlow"
          tag="Partners"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={true}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/jpmorgan-chase-company-logo-professional-1772544008415-d853b56d.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/goldman-sachs-company-logo-investment-ba-1772544007873-3bd2eb88.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/bank-of-america-company-logo-major-banki-1772544009535-14c70775.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/morgan-stanley-company-logo-investment-b-1772544010060-08f72b30.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/fidelity-company-logo-investment-and-wea-1772544010297-8f90f3eb.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/stripe-company-logo-fintech-payment-proc-1772544008120-45eee0ea.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/square-company-logo-fintech-payment-plat-1772544007638-3ace5abd.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/paypal-company-logo-digital-payments-bra-1772544010705-79451c8e.png"]}
          names={[
            "JPMorgan Chase",            "Goldman Sachs",            "Bank of America",            "Morgan Stanley",            "Fidelity",            "Stripe",            "Square",            "PayPal"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 FinFlow | Enterprise Financial Software. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}