"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Globe, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="small"
        sizing="mediumLargeSizeMediumTitles"
        background="fluid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "hero" },
              { name: "Features", id: "features" },
              { name: "Pricing", id: "pricing" },
              { name: "FAQ", id: "faq" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="CashPilot"
            button={{ text: "Get Started", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
            <HeroOverlayTestimonial
            title="Convert Currencies at Pilot Speed"
            description="CashPilot combines precision financial data with a sleek, high-tech interface, making international currency conversion feel like flying a jet."
            testimonials={[
              { name: "Alex Rivier", handle: "@alexr", testimonial: "The fastest conversion app I have ever used. Stunning design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg?_wi=1" },
              { name: "Sarah Chen", handle: "@schen", testimonial: "Finally, a converter that actually looks beautiful on my screen.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg?_wi=1" },
              { name: "Marcus Thorne", handle: "@mthorne", testimonial: "Precise data, seamless UI. A must-have for traders.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-grey-turtleneck-eyeglasses_273609-13191.jpg?_wi=1" },
              { name: "Elena Rossi", handle: "@erossi", testimonial: "I travel across 10 countries a year. This is a lifesaver.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1" },
              { name: "David Park", handle: "@dpark", testimonial: "Professional-grade tools for everyday finance.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/office-worker-using-finance-graphs_23-2150408700.jpg?_wi=1" }
            ]}
            buttons={[{ text: "Get Started", href: "#contact" }]}
            imageSrc="http://img.b2bpic.net/free-photo/young-investor-working-computer-with-real-time-stock-charts-following-trade-market-sales-trend-financial-analyst-using-forex-exchange-statistics-plan-data-analysis-index-profit-close-up_482257-42062.jpg"
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/contemplating-young-caucasian-man-holding-dairy-thinking_23-2148187202.jpg", alt: "User 1" },
              { src: "http://img.b2bpic.net/free-photo/portrait-young-smiling-handsome-man-holding-tablet-computer-looking-straight-front_342744-405.jpg", alt: "User 2" },
              { src: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg", alt: "User 3" },
              { src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-touching-her-face_1098-3321.jpg", alt: "User 4" },
              { src: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg", alt: "User 5" }
            ]}
          />
        </div>

        <div id="about" data-section="about">
            <MediaAbout
            useInvertedBackground={false}
            title="Financial Data, Engineered for You"
            description="CashPilot integrates directly with the Central Bank and global markets to bring you the most accurate real-time rates. Whether you are traveling or managing international trade, our smart interface ensures total clarity."
            imageSrc="http://img.b2bpic.net/free-photo/business-proposal-purchase-hands-holding-money_53876-127124.jpg"
          />
        </div>

        <div id="features" data-section="features">
            <FeatureHoverPattern
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { icon: Zap, title: "Real-Time Conversion", description: "Instant calculations using up-to-the-minute global market rates." },
              { icon: Globe, title: "Global Reach", description: "Support for over 150 currencies, including UZS, USD, EUR, and more." },
              { icon: TrendingUp, title: "Historical Trends", description: "Visualize currency performance over time to make smarter decisions." }
            ]}
            title="Smart Features for Global Finance"
            description="Engineered for speed, precision, and an intuitive user experience."
          />
        </div>

        <div id="metrics" data-section="metrics">
            <MetricCardSeven
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "150+", title: "Supported Currencies", items: ["Live updates", "Global API support"] },
              { id: "m2", value: "99.9%", title: "Data Accuracy", items: ["Direct banking feeds", "Real-time sync"] },
              { id: "m3", value: "<1ms", title: "Response Time", items: ["Optimized conversion engine", "Low latency global servers"] }
            ]}
            title="Precision Metrics"
            description="Tracking high-frequency financial data for optimal accuracy."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
            <TestimonialCardTwo
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            testimonials={[
              { id: "1", name: "John Doe", role: "Travel Blogger", testimonial: "Indispensable tool for my international trips.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-hacker_23-2148165939.jpg?_wi=2" },
              { id: "2", name: "Jane Smith", role: "Global CFO", testimonial: "The interface clarity is unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-attractive-businesswoman-crossing-arms_1262-4724.jpg?_wi=2" },
              { id: "3", name: "Mark Evans", role: "Trader", testimonial: "Fast, reliable, and looks great.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-grey-turtleneck-eyeglasses_273609-13191.jpg?_wi=2" },
              { id: "4", name: "Lisa Wong", role: "Student", testimonial: "Easy currency conversions on the go.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2" },
              { id: "5", name: "Paul Rudd", role: "Engineer", testimonial: "The dark mode aesthetic is fantastic.", imageSrc: "http://img.b2bpic.net/free-photo/office-worker-using-finance-graphs_23-2150408700.jpg?_wi=2" }
            ]}
            title="Loved by Global Travelers"
            description="Join thousands of users who depend on CashPilot daily."
          />
        </div>

        <div id="pricing" data-section="pricing">
            <PricingCardFive
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            plans={[
              { id: "basic", tag: "Free", price: "$0", period: "/mo", description: "Essential conversion tools.", button: { text: "Get Started" }, featuresTitle: "Includes:", features: ["150+ Currencies", "Real-time rates", "Mobile access"] },
              { id: "pro", tag: "Pro", price: "$9", period: "/mo", description: "For high-frequency users.", button: { text: "Go Pro" }, featuresTitle: "Includes:", features: ["Historical charts", "Offline caching", "Ad-free experience"] }
            ]}
            title="Choose Your Plan"
            description="Upgrade to unlock advanced features for power users."
          />
        </div>

        <div id="faq" data-section="faq">
            <FaqBase
            animationType="smooth"
            textboxLayout="default"
            useInvertedBackground={true}
            faqs={[
              { id: "q1", title: "Is it offline?", content: "Yes, CashPilot caches your last seen rates for offline use." },
              { id: "q2", title: "How accurate is the data?", content: "We connect to top global and Central Bank financial APIs." },
              { id: "q3", title: "Can I use UZS?", content: "Absolutely, UZS is fully supported alongside 150+ currencies." }
            ]}
            title="Common Questions"
            description="Here is what you need to know about CashPilot."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
            <ContactCenter
            useInvertedBackground={false}
            background={{ variant: "radial-gradient" }}
            tag="Join"
            title="Sign Up for Early Access"
            description="Be the first to experience the CashPilot mobile app."
          />
        </div>

        <div id="footer" data-section="footer">
            <FooterBaseReveal
            logoText="CashPilot"
            columns={[
              { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}