"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PEPE"
          navItems={[
            { name: "About", id: "about" },
            { name: "Tokenomics", id: "metrics" },
            { name: "Features", id: "features" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Buy Now",
            href: "https://uniswap.exchange"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="PEPE Token - The Future of Meme Coins"
          description="Join the revolution. The most legendary meme coin on the blockchain. Buy PEPE today and become part of history."
          tag="Web3 Meme Coin"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786846662-3qjivfmm.jpg",
              imageAlt: "PEPE token visualization"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786847416-41jhbevd.jpg",
              imageAlt: "Meme coin blockchain"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786847986-aata62be.jpg",
              imageAlt: "Cryptocurrency trading"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786848694-s4oeyg4b.jpg",
              imageAlt: "Pepe meme culture"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786849258-yllohh8w.jpg",
              imageAlt: "Web3 digital token"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786849932-mtp539kw.jpg",
              imageAlt: "Pepe internet legend"
            }
          ]}
          buttons={[
            {
              text: "Buy PEPE",
              href: "https://uniswap.exchange"
            },
            {
              text: "View Chart",
              href: "#tokenomics"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About PEPE Coin"
          description="PEPE is a community-driven meme coin built on blockchain technology. We believe in the power of decentralized finance combined with internet culture. Our mission is to create a token that celebrates the legendary Pepe meme while providing real utility to our holders."
          tag="Our Mission"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786850585-eekh18nu.jpg"
          imageAlt="PEPE blockchain technology"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Join Community",
              href: "https://discord.gg/pepe"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEight
          title="PEPE Tokenomics - Transparent and Community-Focused Supply"
          metrics={[
            {
              id: "1",
              value: "420T",
              title: "Total Supply"
            },
            {
              id: "2",
              value: "89K",
              title: "Holders"
            },
            {
              id: "3",
              value: "$2.4M",
              title: "Market Cap"
            },
            {
              id: "4",
              value: "99%",
              title: "Community Owned"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Why Choose PEPE"
          description="Explore the key features that make PEPE the best meme coin for Web3 investors"
          tag="Features"
          features={[
            {
              id: 1,
              title: "Community Driven",
              description: "Built by the community, for the community. Every decision is made together with our holders.",
              phoneOne: {
                imageSrc: "/placeholders/placeholder1.webp"
              },
              phoneTwo: {
                imageSrc: "/placeholders/placeholder1.webp"
              }
            },
            {
              id: 2,
              title: "Secure & Transparent",
              description: "All smart contracts audited and verified. Complete transparency in all tokenomics and transactions.",
              phoneOne: {
                imageSrc: "/placeholders/placeholder1.webp"
              },
              phoneTwo: {
                imageSrc: "/placeholders/placeholder1.webp"
              }
            },
            {
              id: 3,
              title: "Low Transaction Fees",
              description: "Enjoy minimal fees on swaps and transfers. More value stays in your wallet.",
              phoneOne: {
                imageSrc: "/placeholders/placeholder1.webp"
              },
              phoneTwo: {
                imageSrc: "/placeholders/placeholder1.webp"
              }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about buying, holding, and trading PEPE"
          tag="FAQ"
          faqs={[
            {
              id: "1",
              title: "How do I buy PEPE tokens?",
              content: "You can buy PEPE on major decentralized exchanges like Uniswap, PancakeSwap, or Raydium. Connect your wallet, search for PEPE contract address, and swap ETH, BNB, or SOL for PEPE tokens."
            },
            {
              id: "2",
              title: "Is PEPE a safe investment?",
              content: "PEPE is a meme coin and carries speculative risk like all cryptocurrencies. Our smart contracts are audited and verified. Always do your own research before investing any amount you can't afford to lose."
            },
            {
              id: "3",
              title: "What is the total supply?",
              content: "PEPE has a total supply of 420 trillion tokens. The supply is fixed and no more tokens will be minted, ensuring scarcity and potential value appreciation."
            },
            {
              id: "4",
              title: "Can I stake my PEPE tokens?",
              content: "Yes, holders can stake their PEPE tokens in our liquidity pools to earn rewards. Check our dashboard for current APY and staking options."
            },
            {
              id: "5",
              title: "Where can I find the contract address?",
              content: "The official contract address is verified on CoinGecko and CoinMarketCap. Always verify the address before trading to avoid scams and fake tokens."
            },
            {
              id: "6",
              title: "What exchange has the most PEPE liquidity?",
              content: "Uniswap currently has the deepest liquidity pools for PEPE. We're constantly working to list on more exchanges to improve accessibility."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join Our Community"
          description="Stay updated with the latest news, updates, and announcements from the PEPE team. Subscribe to our newsletter and join thousands of PEPE holders."
          inputs={[
            {
              name: "email",
              type: "email",
              placeholder: "your@email.com",
              required: true
            },
            {
              name: "discord",
              type: "text",
              placeholder: "Discord username (optional)",
              required: false
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "How can we help? Questions or feedback?",
            rows: 4,
            required: false
          }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766786851217-36wgh178.jpg"
          imageAlt="PEPE community"
          mediaPosition="right"
          useInvertedBackground="noInvert"
          buttonText="Subscribe Now"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="PEPE"
        />
      </div>
    </ThemeProvider>
  );
}