"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Clock, Globe, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="noise"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Converter",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="FXConverter"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardScroll
      background={{
        variant: "gradient-bars",
      }}
      title="RealTime Currency & Precious Metals Converter"
      description="Instantly convert between USD, EUR, TRY, gold, and silver with live market charts. Switch languages and themes to match your preference."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-futuristic-high-tech-currency-conversi-1778487608614-6c2b38b7.png"
      imageAlt="A futuristic, high-tech currency conversion dashboard display with glowing blue lines, digital price"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Built for Global Professional Traders",
        },
        {
          type: "image",
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-professional-financial-analyst-workspa-1778487618082-b9716e1e.png",
          alt: "A professional financial analyst workspace with dual monitors displaying complex market charts and f",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Live Market Tracking",
          description: "Real-time updates for all currency pairs and metals.",
          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/floating-digital-icons-representing-usd--1778487626701-235e0d2b.png",
            imageAlt: "Floating digital icons representing USD, EUR, and TRY currencies with subtle light trails and blue a",
          },
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-sleek-mobile-device-displaying-a-live--1778487635556-6ba83890.png",
            imageAlt: "A sleek mobile device displaying a live currency converter application with bright, easy-to-read cha",
          },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-futuristic-high-tech-currency-conversi-1778487608614-6c2b38b7.png",
          imageAlt: "Floating digital icons representing USD, EUR, and TRY currencies with subtle light trails and blue a",
        },
        {
          title: "Bidirectional Conversion",
          description: "Seamlessly switch between any pairs without refresh.",
          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-sleek-mobile-device-displaying-a-live--1778487719572-59802312.png",
            imageAlt: "A sleek mobile device displaying a live currency converter application with bright, easy-to-read cha",
          },
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-digital-tablet-showing-historical-perf-1778487646486-1732d5d4.png",
            imageAlt: "A digital tablet showing historical performance graphs of gold and silver against major world curren",
          },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-professional-financial-analyst-workspa-1778487618082-b9716e1e.png",
          imageAlt: "Floating digital icons representing USD, EUR, and TRY currencies with subtle light trails and blue a",
        },
        {
          title: "Advanced Charting",
          description: "Visualize trends for informed trading decisions.",
          phoneOne: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-digital-tablet-showing-historical-perf-1778487730000-28154fc1.png",
            imageAlt: "A digital tablet showing historical performance graphs of gold and silver against major world curren",
          },
          phoneTwo: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/floating-digital-icons-representing-usd--1778487739008-31e1344b.png",
            imageAlt: "Floating digital icons representing USD, EUR, and TRY currencies with subtle light trails and blue a",
          },
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/professional-headshot-of-a-middle-aged-f-1778487655278-17fa6708.png",
          imageAlt: "Floating digital icons representing USD, EUR, and TRY currencies with subtle light trails and blue a",
        },
      ]}
      showStepNumbers={false}
      title="Key Trading Features"
      description="Advanced tools for international professionals."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "100ms",
          title: "Update Frequency",
          description: "Ultra-low latency data sync.",
          icon: Zap,
        },
        {
          id: "m2",
          value: "24/7",
          title: "Market Access",
          description: "Continuous tracking.",
          icon: Clock,
        },
        {
          id: "m3",
          value: "50+",
          title: "Currency Pairs",
          description: "Broad market coverage.",
          icon: Globe,
        },
      ]}
      title="Market Performance Metrics"
      description="Real-time data at your fingertips."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          tag: "Free",
          price: "$0",
          period: "/mo",
          description: "Standard market access.",
          button: {
            text: "Get Started",
            href: "#",
          },
          featuresTitle: "Includes:",
          features: [
            "Delayed Data",
            "Basic Charts",
            "Email Support",
          ],
        },
        {
          id: "pro",
          tag: "Pro",
          price: "$29",
          period: "/mo",
          description: "Real-time professional tools.",
          button: {
            text: "Upgrade",
            href: "#",
          },
          featuresTitle: "Includes:",
          features: [
            "Live Data",
            "Advanced Charts",
            "Priority Support",
          ],
        },
      ]}
      title="Professional Access Plans"
      description="Choose the tier that fits your needs."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          handle: "@sjohnson",
          testimonial: "The fastest converter I have ever used.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/professional-headshot-of-a-middle-aged-f-1778487655278-17fa6708.png",
        },
        {
          id: "2",
          name: "Michael Chen",
          handle: "@mchen",
          testimonial: "Excellent charting and real-time data.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/professional-headshot-of-a-tech-savvy-fe-1778487663242-1268411a.png",
        },
        {
          id: "3",
          name: "David Smith",
          handle: "@dsmith",
          testimonial: "Reliable data, perfect for daily trading.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/portrait-of-an-experienced-senior-invest-1778487673824-cd18d9be.png",
        },
        {
          id: "4",
          name: "Emily Rodriguez",
          handle: "@erod",
          testimonial: "Best multilingual support.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/professional-portrait-of-a-young-entrepr-1778487683321-42210e7c.png",
        },
        {
          id: "5",
          name: "Alex Taylor",
          handle: "@ataylor",
          testimonial: "Essential for my daily forex work.",
          rating: 5,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/portrait-of-a-global-trade-professional--1778487691670-e083ee3a.png",
        },
      ]}
      showRating={true}
      title="Trusted by Experts"
      description="See why top traders choose us."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Is data real-time?",
          content: "Yes, our data is sourced from global exchanges with millisecond latency.",
        },
        {
          id: "f2",
          title: "Does it support gold?",
          content: "Absolutely, track gold and silver in real-time against all currencies.",
        },
        {
          id: "f3",
          title: "Can I save my preferences?",
          content: "Yes, themes and currency settings are saved locally.",
        },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-close-up-of-digital-code-and-global-st-1778487701536-8beb0d73.png"
      imageAlt="A close-up of digital code and global stock exchange tickers flowing across a dark screen, artistic "
      mediaAnimation="slide-up"
      title="Frequently Asked Questions"
      description="Everything you need to know."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Newsletter"
      title="Stay Informed"
      description="Sign up for market insights and updates."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DYQSQo4NU4fNAZHL5fcRaaFHkd/a-clean-abstract-network-of-digital-node-1778487709478-df25f718.png"
      imageAlt="A clean, abstract network of digital nodes and lines, dark blue aesthetic, suggesting connectivity a"
      inputPlaceholder="Enter your email"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Converter",
              href: "#hero",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 FXConverter"
      bottomRightText="Market data by Global Exchanges"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
