"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Activity, CheckCircle, DollarSign, Globe, PieChart, Shield, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="large"
        background="fluid"
        cardStyle="glass-depth"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "FAQ",
          id: "faq",
        },
      ]}
      brandName="Splitflow"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient",
      }}
      title="Split Bills with Effortless Precision"
      description="The smartest way for students, roommates, and travelers to track debts and settle payments instantly. Join thousands who manage their finances smarter."
      kpis={[
        {
          value: "2M+",
          label: "Transactions Settled",
        },
        {
          value: "150k",
          label: "Active Users",
        },
        {
          value: "4.9",
          label: "User Rating",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Get Started",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/mobile-phone-screen-product-showcase_53876-98293.jpg?_wi=1"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/businessman-revising-meetings-schedule-tablet_1163-3799.jpg",
          alt: "Businessman revising meetings schedule",
        },
        {
          src: "http://img.b2bpic.net/free-photo/black-remote-worker-doing-math-calculations-using-financial-graphs-papers_482257-121340.jpg",
          alt: "Black remote worker doing math",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-man-black-suit-glasses-looking-screen-his-smartphone-clenching-fist-happy-positive-standing-blue-wall_141793-50856.jpg",
          alt: "Business man happy with smartphone",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-woman-talking-phone-staying-late-night-office_1303-27084.jpg",
          alt: "Business woman talking on phone",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-young-woman-holding-mobile-phone_93675-134266.jpg",
          alt: "Young woman tech enthusiast",
        },
      ]}
      avatarText="Trusted by 150k+ users"
      marqueeItems={[
        {
          type: "text",
          text: "Instant Settlements",
        },
        {
          type: "text",
          text: "Zero Arguments",
        },
        {
          type: "text",
          text: "Secure Payments",
        },
        {
          type: "text",
          text: "Global Coverage",
        },
        {
          type: "text",
          text: "Smart Budgeting",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Finance Simplified"
      description="Stop chasing money. Split recurring monthly bills, travel expenses, or quick coffee runs automatically. We integrate with your favorite local payment gateways for seamless settlement."
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-women-holding-smartphones_23-2149303399.jpg?_wi=1"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Automated Debt Tracking",
          description: "Never wonder who owes what.",
          bentoComponent: "3d-task-list",
          items: [
            {
              icon: CheckCircle,
              label: "Rent Split",
              time: "Monthly",
            },
            {
              icon: Zap,
              label: "Coffee Run",
              time: "Daily",
            },
            {
              icon: Shield,
              label: "Groceries",
              time: "Weekly",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/young-female-having-concentrated-expression-looking-screen-open-laptop-holding-paper-cup-coffee-her-hands-while-calculating-domestic-expenses_273609-1673.jpg",
          imageAlt: "Young female having concentrated expression looking at screen of open laptop, holding paper and cup of coffee in her hands while calculating domestic expenses",
        },
        {
          title: "Global Gateway Integration",
          description: "Pay using local systems effortlessly.",
          bentoComponent: "reveal-icon",
          icon: Globe,
          imageSrc: "http://img.b2bpic.net/free-photo/mobile-phone-screen-product-showcase_53876-98293.jpg?_wi=2",
          imageAlt: "Young female having concentrated expression looking at screen of open laptop, holding paper and cup of coffee in her hands while calculating domestic expenses",
        },
        {
          title: "Smart Analytics",
          description: "Detailed view of your spending patterns.",
          bentoComponent: "3d-stack-cards",
          items: [
            {
              icon: TrendingUp,
              title: "Savings",
              subtitle: "Track monthly",
              detail: "View data",
            },
            {
              icon: PieChart,
              title: "Spending",
              subtitle: "Breakdown",
              detail: "Analysis",
            },
            {
              icon: Activity,
              title: "Activity",
              subtitle: "Recent",
              detail: "Flow",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-holding-smartphones_23-2149303399.jpg?_wi=2",
          imageAlt: "Young female having concentrated expression looking at screen of open laptop, holding paper and cup of coffee in her hands while calculating domestic expenses",
        },
      ]}
      title="Powerful Financial Tools"
      description="Everything you need to stay on top of your shared expenses."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "free",
          badge: "Entry",
          price: "$0",
          subtitle: "Perfect for casual use.",
          features: [
            "Basic bill splitting",
            "Email support",
            "Shared groups",
          ],
        },
        {
          id: "premium",
          badge: "Pro",
          price: "$9.99/mo",
          subtitle: "Unlock advanced tools.",
          features: [
            "Unlimited groups",
            "Advanced analytics",
            "Instant local payouts",
          ],
        },
      ]}
      title="Transparent Pricing"
      description="Choose the right plan for your lifestyle."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="This app completely changed how my roommates and I handle rent. Zero arguments now!"
      rating={5}
      author="Marcus Thorne"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-young-woman-holding-mobile-phone_93675-134266.jpg",
          alt: "User 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/mid-shot-man-standing-up-smiling-living-room_23-2148441066.jpg",
          alt: "User 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-young-woman-student-using-laptop-computer_171337-15005.jpg",
          alt: "User 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/handsome-stylish-hipster-man-walking-city-street-with-leather-bag-using-phone-navigation-application-travel-wearing-sweatshirt-sunglasses-urban-style-trend_285396-4653.jpg",
          alt: "User 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-enjoys-leisure-time-spends-weekend-with-friends-strolls-city-listens-music-happy-about-successfully-passed-exam-smiles-broadly-poses-blurred_273609-54082.jpg",
          alt: "User 5",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Users,
          title: "Users",
          value: "500k+",
        },
        {
          id: "m2",
          icon: DollarSign,
          title: "Settled",
          value: "$50M+",
        },
        {
          id: "m3",
          icon: Globe,
          title: "Countries",
          value: "30+",
        },
      ]}
      title="Proven Results"
      description="Our platform is trusted worldwide."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "How is money split?",
          content: "Our engine calculates equal splits or custom weightings.",
        },
        {
          id: "f2",
          title: "Is payment secure?",
          content: "Yes, we use bank-grade encryption for every transaction.",
        },
        {
          id: "f3",
          title: "Can I use it internationally?",
          content: "Absolutely, we support local payment systems globally.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480171.jpg"
      mediaAnimation="slide-up"
      title="Common Questions"
      description="Everything you need to know about Splitflow."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Ready to Start?"
      title="Join Splitflow today."
      description="Start simplifying your financial life. Download the app today."
      buttons={[
        {
          text: "Join Now",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Splitflow"
      copyrightText="© 2025 Splitflow Inc."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
