"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import SocialProofThree from '@/components/sections/socialProof/SocialProofThree';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { TrendingUp, Zap, Users, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="noise-gradient"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Glyde DEX"
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766162773520-d3l7c32r.jpg"
          logoAlt="Glyde DEX Logo"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Metrics", id: "metrics" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Launch App",
            href: "#contact"
          }}
          buttonClassName="px-4 py-2"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Trade Without Limits on Glyde DEX"
          description="Experience the future of decentralized exchange. Lightning-fast swaps, deep liquidity, and unmatched security for your crypto trading."
          tag="Decentralized Trading"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247228572-iq37eg1k.jpg"
          imageAlt="Glyde DEX Trading Interface"
          frameStyle="browser"
          buttons={[
            { text: "Launch Trading", href: "#contact" },
            { text: "Learn More", href: "#features" }
          ]}
          containerClassName="w-full"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFifteen
          title="Powerful Trading Features"
          description="Everything you need to trade like a professional on Glyde DEX"
          tag="Why Glyde"
          features={[
            {
              id: "1",
              title: "Deep Liquidity",
              description: "Access massive liquidity pools for seamless trading at competitive rates",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247229557-fx671mfn.jpg",
              imageAlt: "Liquidity Pools"
            },
            {
              id: "2",
              title: "Lightning Speed",
              description: "Execute trades in milliseconds with optimized smart contracts",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247230392-wl1uzx0m.jpg",
              imageAlt: "Fast Transactions"
            },
            {
              id: "3",
              title: "Bank-Grade Security",
              description: "Your assets protected by audited smart contracts and insurance",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247231205-6mzzdpci.jpg",
              imageAlt: "Security Features"
            },
            {
              id: "4",
              title: "Advanced Analytics",
              description: "Real-time charts, price feeds, and trading analytics",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247232164-0irngdeu.jpg",
              imageAlt: "Trading Analytics"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Glyde DEX Growth"
          description="Real-time metrics showing the strength and adoption of our platform"
          tag="Performance"
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Trading Volume",
              value: "$2.4B+"
            },
            {
              id: "2",
              icon: Zap,
              title: "Transactions",
              value: "150M+"
            },
            {
              id: "3",
              icon: Users,
              title: "Active Users",
              value: "450K+"
            },
            {
              id: "4",
              icon: Shield,
              title: "Locked Value",
              value: "$890M+"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          containerStyle="default"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="Trusted by Traders Worldwide"
          description="Hear from crypto traders who have revolutionized their trading on Glyde DEX"
          tag="User Stories"
          testimonials={[
            {
              id: "1",
              nameTitle: "Alex Chen, Crypto Trader",
              quote: "The liquidity on Glyde DEX is incredible. I can execute million-dollar trades without slippage. It has completely transformed my trading strategy.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
              imageAlt: "Alex Chen"
            },
            {
              id: "2",
              nameTitle: "Sarah Mitchell, Fund Manager",
              quote: "The security infrastructure and 24/7 support make Glyde our go-to platform. Best execution prices in the industry.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "3",
              nameTitle: "Marcus Johnson, Day Trader",
              quote: "Lightning-fast swaps and zero hidden fees. Glyde DEX is the only platform I use now for all my trading.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247234241-8u8dhpvv.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "4",
              nameTitle: "Elena Rodriguez, Portfolio Manager",
              quote: "The advanced analytics tools help me make better trading decisions. Glyde DEX is a game-changer for professional traders.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247235146-fhq12b3i.jpg",
              imageAlt: "Elena Rodriguez"
            },
            {
              id: "5",
              nameTitle: "David Park, DeFi Enthusiast",
              quote: "Finally, a DEX that combines speed, security, and user experience. Highly recommend Glyde to everyone.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247235939-vcdxsmhe.jpg",
              imageAlt: "David Park"
            },
            {
              id: "6",
              nameTitle: "Lisa Thompson, Institutional Investor",
              quote: "Glyde DEX's institutional-grade infrastructure and compliance make it the perfect platform for serious traders.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Lisa Thompson"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofThree
          title="Integrated with Leading Blockchain Networks"
          description="Glyde DEX seamlessly connects with major blockchain ecosystems"
          tag="Partners"
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247221167-7a58jivu.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247222101-n2ds158h.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247222958-bpqpj9re.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247223804-3ni47u6a.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247224639-xvu6kh4y.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247225474-g5d6slvn.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247226306-ukr65eab.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247227172-b5cty7hi.jpg"
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          topMarqueeDirection="left"
          speed={40}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about trading on Glyde DEX"
          tag="Help & Support"
          faqs={[
            {
              id: "1",
              title: "How do I start trading on Glyde DEX?",
              content: "Connect your Web3 wallet, deposit crypto assets, and start trading instantly. No KYC required for basic trading. Our onboarding takes less than 2 minutes."
            },
            {
              id: "2",
              title: "What fees does Glyde DEX charge?",
              content: "We charge a competitive 0.25% fee on all trades. Market makers receive a 50% rebate. No hidden fees, no withdrawal fees, no deposit fees."
            },
            {
              id: "3",
              title: "Is my money safe on Glyde DEX?",
              content: "Your funds remain in your wallet at all times. Smart contracts are audited by top security firms. We maintain $100M insurance fund for added protection."
            },
            {
              id: "4",
              title: "Which blockchain networks does Glyde support?",
              content: "Glyde DEX is available on Ethereum, Polygon, Arbitrum, Optimism, and Solana. More networks coming soon. Seamless cross-chain swaps available."
            },
            {
              id: "5",
              title: "Can I use Glyde DEX if I'm new to crypto?",
              content: "Yes. We offer educational resources, simple interface, and 24/7 support. Start with small trades to learn the platform. Our support team is always ready to help."
            },
            {
              id: "6",
              title: "How fast are swaps on Glyde?",
              content: "Most swaps complete within 1-3 blocks. Our optimized routing engine finds the best paths instantly. Average swap time is under 30 seconds."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766247233127-5pjw9snh.jpg"
          imageAlt="Glyde DEX Trading Interface"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start trading on the fastest DEX? Join thousands of traders already using Glyde DEX for unmatched performance and security."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Launch Trading Now",
              href: "https://app.glyedex.com"
            },
            {
              text: "Contact Support",
              href: "mailto:support@glydedex.com"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766162773520-d3l7c32r.jpg"
          logoAlt="Glyde DEX"
          logoText="Glyde DEX"
        />
      </div>
    </ThemeProvider>
  );
}