"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Zap, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="dotGrid"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Glyde"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Products", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Trade Tokenized Equities with Glyde"
          description="Leverage our epoch model, DEX, and perpetuals for smarter, faster investments in a decentralized world"
          tag="Next-Gen DeFi Platform"
          tagIcon={Zap}
          kpis={[
            { value: "$2.4B+", label: "Total Value Locked" },
            { value: "99.9%", label: "Network Uptime" },
            { value: "50K+", label: "Active Traders" }
          ]}
          buttons={[
            { text: "Start Trading Now", href: "#contact" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712119530-4ve08tul.jpg"
          imageAlt="Glyde cryptocurrency trading dashboard"
          imagePosition="right"
          className="w-full"
          containerClassName="relative"
          titleClassName="text-5xl md:text-6xl font-extrabold tracking-tight"
          descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-2xl"
          tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-none bg-accent/10 text-accent border border-accent/30"
          buttonClassName="rounded-none px-8 py-3 font-bold tracking-tight"
          kpiValueClassName="text-3xl md:text-4xl font-extrabold text-foreground"
          kpiLabelClassName="text-sm md:text-base text-foreground/70 uppercase tracking-wider"
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Revolutionizing Decentralized Finance"
          description="Glyde combines institutional-grade infrastructure with cutting-edge blockchain technology. Our epoch model enables predictable, transparent token distribution while our integrated DEX, prediction markets, and perpetuals trading create a comprehensive ecosystem for modern investors."
          tag="Innovation at Scale"
          tagIcon={Sparkles}
          buttons={[
            { text: "Learn More", href: "#features" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712120269-p5s51ieo.jpg"
          imageAlt="Glyde innovation and technology background"
          className="relative"
          titleClassName="text-6xl md:text-7xl font-extrabold tracking-tighter text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-xl leading-relaxed"
          textBoxClassName="relative z-10 flex flex-col gap-8 items-center justify-center text-center"
          buttonClassName="rounded-none px-8 py-3 font-bold tracking-tight"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Integrated Trading Suite"
          description="Explore our complete ecosystem of decentralized finance products designed for institutional and retail traders"
          tag="Product Features"
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Decentralized Exchange (DEX)",
              description: "High-liquidity trading with minimal slippage. Trade across tokenized equities with advanced order types and competitive spreads.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712121185-fqr0iua3.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712122245-i6r99up0.jpg" }
            },
            {
              id: 2,
              title: "Prediction Markets",
              description: "Speculate on future asset prices and market outcomes. Earn yield while contributing to transparent price discovery mechanisms.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712121626-foig3jeb.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712122699-03fkacq2.jpg" }
            },
            {
              id: 3,
              title: "Perpetual Futures",
              description: "Trade perpetual contracts with up to 20x leverage. Advanced risk management tools and real-time market data for professional traders.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712121879-ikf1jrbr.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712122976-6ukswra4.jpg" }
            }
          ]}
          className="w-full"
          descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-2xl"
          featureTitleClassName="text-3xl md:text-4xl font-extrabold text-foreground"
          featureDescriptionClassName="text-base md:text-lg text-foreground/70 leading-relaxed"
          stepNumberClassName="inline-flex items-center justify-center w-12 h-12 rounded-none bg-accent text-background font-extrabold text-lg"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEight
          title="Glyde by the Numbers: Enterprise-Grade Performance at DeFi Speed"
          metrics={[
            { id: "1", value: "$2.4B+", title: "Total Value Locked" },
            { id: "2", value: "50K+", title: "Active Traders" },
            { id: "3", value: "$480M", title: "Daily Trading Volume" },
            { id: "4", value: "99.9%", title: "Network Uptime" }
          ]}
          useInvertedBackground="noInvert"
          className="w-full"
          titleClassName="text-4xl md:text-5xl font-extrabold tracking-tight max-w-3xl"
          metricsContainerClassName="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8"
          valueClassName="text-4xl md:text-5xl font-extrabold text-accent"
          metricTitleClassName="text-sm md:text-base text-foreground/70 uppercase tracking-wider font-semibold"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Trusted by Institutional Investors"
          description="Hear from leading crypto traders and institutional investors who leverage Glyde for yield optimization and risk management"
          tag="Client Success Stories"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Marcus Chen, Head of Quantitative Trading, CryptoCapital Ventures",
              date: "Date: November 2024",
              title: "The Most Sophisticated Trading Infrastructure",
              quote: "Glyde's epoch model provides unprecedented transparency and predictability. Their integrated DEX and perpetuals platform is the most sophisticated infrastructure I've encountered in the DeFi space.",
              tag: "Institutional Investor",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391976473-pyurxsk4.jpg",
              avatarAlt: "Marcus Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391976473-pyurxsk4.jpg"
            },
            {
              id: "2",
              name: "Sarah Okonkwo, CTO, Digital Assets Fund",
              date: "Date: October 2024",
              title: "Enterprise-Grade Security and Performance",
              quote: "What sets Glyde apart is their commitment to both security and performance. Our fund manages significant AUM through their platform with zero incidents. The perpetuals contracts are incredibly liquid.",
              tag: "Accredited Trader",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391976173-y73rbzo8.jpg",
              avatarAlt: "Sarah Okonkwo",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391976173-y73rbzo8.jpg"
            },
            {
              id: "3",
              name: "James Thornton, Portfolio Manager, Blockchain Capital",
              date: "Date: September 2024",
              title: "Exceptional Yield Opportunities",
              quote: "The prediction markets on Glyde generate consistent alpha. Combined with their DEX spreads and low fees, we've increased our portfolio efficiency by 40% since migration.",
              tag: "Professional Trader",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712123938-lsqkl995.jpg",
              avatarAlt: "James Thornton",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712123938-lsqkl995.jpg"
            },
            {
              id: "4",
              name: "Amara Okafor, Chief Investment Officer, DeFi Collective",
              date: "Date: August 2024",
              title: "Redefining DeFi Standards",
              quote: "Glyde isn't just another exchange—they're redefining what institutional-grade DeFi should look like. The team's technical excellence and transparency are unmatched.",
              tag: "Institutional Investor",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712124239-w7mv8exk.jpg",
              avatarAlt: "Amara Okafor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712124239-w7mv8exk.jpg"
            },
            {
              id: "5",
              name: "Robert Nakamura, Trading Director, Asia Crypto Syndicate",
              date: "Date: July 2024",
              title: "Game-Changing for Serious Traders",
              quote: "The combination of 20x leverage perpetuals, low-latency DEX, and predictive markets creates opportunities impossible to find elsewhere. Glyde is essential infrastructure.",
              tag: "Accredited Trader",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712124730-h5elpqli.jpg",
              avatarAlt: "Robert Nakamura",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712124730-h5elpqli.jpg"
            },
            {
              id: "6",
              name: "Victoria Zhang, Head of Trading, Quantum Finance Partners",
              date: "Date: June 2024",
              title: "Advanced Risk Management Tools",
              quote: "Glyde's integrated risk management and collateral optimization systems have reduced our portfolio volatility significantly. Their epoch model creates predictable yield streams.",
              tag: "Professional Trader",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712125152-3meb4vvg.jpg",
              avatarAlt: "Victoria Zhang",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712125152-3meb4vvg.jpg"
            }
          ]}
          className="w-full"
          titleClassName="text-5xl md:text-6xl font-extrabold tracking-tight"
          descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-2xl"
          cardTitleClassName="text-2xl md:text-3xl font-extrabold text-foreground line-clamp-3"
          cardQuoteClassName="text-base md:text-lg text-foreground/80 leading-relaxed line-clamp-10"
          cardNameClassName="font-extrabold text-foreground text-sm md:text-base"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Questions About Glyde?"
          sideDescription="Everything you need to know about our platform, security, and trading products"
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What is the Glyde epoch model?",
              content: "The Glyde epoch model is a systematic token distribution mechanism that provides transparency and predictability. Epochs represent defined periods where specific quantities of tokenized equities are distributed based on your holdings and trading activity. This creates fair, regulated access to assets while maintaining institutional-grade governance standards."
            },
            {
              id: "2",
              title: "How do I get started with tokenized equity trading?",
              content: "Sign up on our platform, complete KYC verification as an accredited investor, deposit funds, and begin trading immediately. Our onboarding process is designed for both institutional and experienced retail traders. We provide comprehensive API documentation and trading terminals for seamless integration."
            },
            {
              id: "3",
              title: "What trading pairs are available?",
              content: "Glyde offers trading pairs across multiple asset classes: tokenized equities (stocks, indices), cryptocurrencies, and emerging DeFi assets. Our DEX supports 500+ trading pairs with deep liquidity. Perpetuals contracts are available for major pairs with up to 20x leverage."
            },
            {
              id: "4",
              title: "How are fees structured?",
              content: "We use a tiered fee structure starting at 0.1% for spot trading and 0.05% for perpetuals. Volume-based discounts and VIP programs reduce fees for active traders. Prediction market participation has transparent fee schedules based on contract type."
            },
            {
              id: "5",
              title: "What security measures protect my assets?",
              content: "Glyde implements institutional-grade security: multi-signature wallets, cold storage for 95% of assets, regular third-party audits, insurance coverage, and advanced monitoring systems. We maintain 99.9% uptime and comply with global regulatory standards."
            },
            {
              id: "6",
              title: "Can I use Glyde's API for algorithmic trading?",
              content: "Yes, our REST and WebSocket APIs support high-frequency trading, order management, and real-time market data. Enterprise API accounts include dedicated support, higher rate limits, and custom integration assistance for institutional clients."
            }
          ]}
          className="w-full"
          sideTitleClassName="text-4xl md:text-5xl font-extrabold tracking-tight"
          sideDescriptionClassName="text-base md:text-lg text-foreground/70 leading-relaxed"
          accordionTitleClassName="text-lg md:text-xl font-bold text-foreground"
          accordionContentClassName="text-base text-foreground/70 leading-relaxed"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Trade Smarter?"
          description="Join institutional investors and professional traders using Glyde. Get early access to new features and personalized onboarding support."
          inputs={[
            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "investmentSize", type: "text", placeholder: "Target Investment Size (Optional)", required: false }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your trading experience and goals...",
            rows: 5,
            required: true
          }}
          buttonText="Get Started"
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767712120579-jluko60r.jpg"
          imageAlt="Glyde contact and partnership"
          mediaPosition="right"
          className="w-full"
          titleClassName="text-4xl md:text-5xl font-extrabold tracking-tight"
          descriptionClassName="text-base md:text-lg text-foreground/70 leading-relaxed"
          buttonClassName="rounded-none px-8 py-3 font-bold tracking-tight w-full md:w-auto"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Glyde"
          copyrightText="© 2024 Glyde. Institutional DeFi Infrastructure. All rights reserved."
          columns={[
            {
              title: "Products",
              items: [
                { label: "DEX", href: "#features" },
                { label: "Prediction Markets", href: "#features" },
                { label: "Perpetuals", href: "#features" },
                { label: "Tokenized Equities", href: "#features" }
              ]
            },
            {
              title: "Developers",
              items: [
                { label: "API Documentation", href: "https://docs.glyde.io" },
                { label: "GitHub", href: "https://github.com/glyde" },
                { label: "Smart Contracts", href: "https://github.com/glyde/contracts" },
                { label: "Bug Bounty", href: "https://security.glyde.io" }
              ]
            },
            {
              title: "Community",
              items: [
                { label: "Discord", href: "https://discord.gg/glyde" },
                { label: "Twitter", href: "https://twitter.com/glyde" },
                { label: "Blog", href: "https://blog.glyde.io" },
                { label: "Governance", href: "https://governance.glyde.io" }
              ]
            }
          ]}
          logoTextClassName="text-2xl font-extrabold tracking-tight"
          columnTitleClassName="text-sm font-extrabold uppercase tracking-wider text-foreground"
          columnItemClassName="text-sm text-foreground/70 hover:text-accent transition-colors"
          copyrightTextClassName="text-xs text-foreground/50"
        />
      </div>
    </ThemeProvider>
  );
}