"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Code, Github, HelpCircle, MessageCircle, Mail, Gamepad2 } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Nesquik"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Communities", id: "communities" },
            { name: "Contact", id: "contact" },
          ]}
          button={{
            text: "Get In Touch",            href: "#contact"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="NESQUIK"
          description="Full Stack Developer specializing in Minecraft ecosystems, Discord automation, and community building. Crafting innovative plugins, powerful bots, stunning designs, and engaging video content for gaming communities."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "View My Projects", href: "#projects" },
            { text: "Contact Me", href: "#contact" },
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-professional-portrait-of-a-young-devel-1772487012204-55303d38.png"
          imageAlt="Nesquik Developer at workspace"
          frameStyle="browser"
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Developing the future of" },
            {
              type: "image",              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-minecraft-server-interface-showcasing--1772487013341-8bae369b.png",              alt: "Minecraft Plugin System"},
            { type: "text", content: "gaming communities" },
          ]}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Learn More",              href: "https://github.com/NesquikDeveloper"},
            { text: "Discord Server", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="projects" data-section="projects">
        <FeatureCardTwentyOne
          title="My Expertise & Services"
          description="A comprehensive range of technical solutions tailored for Minecraft servers, Discord communities, and digital presence building."
          tag="Skills"
          tagIcon={Code}
          tagAnimation="slide-up"
          accordionItems={[
            {
              id: "1",              title: "Minecraft Plugin Development",              content:
                "Custom Spigot/Paper plugins with advanced mechanics, config systems, and performance optimization. Specializing in survival server enhancements, economy systems, and gameplay features."},
            {
              id: "2",              title: "Discord Bot Development",              content:
                "Full-featured Discord bots with command handling, event systems, database integration, and community management tools. Built with discord.py and node.js."},
            {
              id: "3",              title: "Web Development",              content:
                "Modern responsive websites and landing pages using HTML, CSS, JavaScript. Server dashboards, community websites, and custom web applications."},
            {
              id: "4",              title: "Branding & Design",              content:
                "Complete visual identity design including logos, banners, server artwork, and brand guidelines. Professional design for gaming communities and creators."},
            {
              id: "5",              title: "Video Production & Editing",              content:
                "High-quality YouTube Shorts, TikTok content, and server trailers. Professional editing, motion graphics, and community-focused video content creation."},
            {
              id: "6",              title: "Community Management",              content:
                "Full community administration, server setup and configuration, staff training, and player engagement strategies for gaming communities."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-modern-discord-bot-interface-showing-i-1772487012856-52cf0499.png?_wi=1"
          imageAlt="Discord Bot Dashboard"
          mediaAnimation="slide-up"
          useInvertedBackground={true}
          mediaPosition="right"
          buttons={[{ text: "View Projects", href: "#projects" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="projectShowcase" data-section="projectShowcase">
        <ProductCardFour
          title="Featured Projects"
          description="A selection of my most impactful work across different technologies and platforms"
          tag="Portfolio"
          tagIcon={Github}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          products={[
            {
              id: "1",              name: "ServerManager Pro",              price: "Java",              variant: "Spigot Plugin | 2023-2024",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-minecraft-server-interface-showcasing--1772487013341-8bae369b.png",              imageAlt: "ServerManager Pro Plugin"},
            {
              id: "2",              name: "CommunityBot",              price: "Python",              variant: "Discord Bot | 2023-2024",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-modern-discord-bot-interface-showing-i-1772487012856-52cf0499.png?_wi=2",              imageAlt: "CommunityBot Dashboard"},
            {
              id: "3",              name: "Portfolio Website",              price: "JavaScript",              variant: "React/Next.js | 2024",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-responsive-web-design-showcase-featuri-1772487012232-50d55bd0.png",              imageAlt: "Portfolio Website"},
            {
              id: "4",              name: "Content Creator Suite",              price: "Multimedia",              variant: "Video & Design | 2023-2024",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-professional-video-production-and-edit-1772487012973-d7f19ef6.png",              imageAlt: "Video Production Setup"},
          ]}
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
        />
      </div>

      <div id="communities" data-section="communities">
        <TestimonialCardThirteen
          title="Communities I Lead"
          description="Building and managing thriving gaming communities with thousands of active members"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          showRating={false}
          testimonials={[
            {
              id: "1",              name: "Slice Network",              handle: "@slicenetwork",              testimonial:
                "A premier Minecraft server network bringing together competitive gameplay with community-driven content creation. Home to hundreds of active players.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/professional-banner-for-slice-network-ga-1772487012136-b8ce422d.png",              imageAlt: "Slice Network Community"},
            {
              id: "2",              name: "Wins MC",              handle: "@winsmc",              testimonial:
                "Championship-focused Minecraft server emphasizing player skill development and competitive integrity. Building the next generation of gaming talent.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/professional-banner-for-wins-mc-minecraf-1772487012305-0fe7596d.png",              imageAlt: "Wins MC Community"},
            {
              id: "3",              name: "Creator Collective",              handle: "@nesquik_dev",              testimonial:
                "A collaborative space where developers, designers, and content creators unite to build innovative gaming experiences and content.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-vibrant-minecraft-server-landscape-sho-1772487013677-1660e214.png",              imageAlt: "Creator Collective"},
            {
              id: "4",              name: "Developer Network",              handle: "@dev_network",              testimonial:
                "An open community for aspiring and experienced developers learning Minecraft modding, bot development, and game architecture.",              rating: 5,
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APGm7Ievn7tDBXAjahcbJvZI6j/a-github-repository-interface-showing-mu-1772487012090-ee4968a3.png",              imageAlt: "Developer Network"},
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="socialProof" data-section="socialProof">
        <SocialProofOne
          title="Client Testimonials"
          description="Trusted by server owners, creators, and community leaders worldwide"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          names={[
            "Enterprise Servers",            "Creator Studios",            "Gaming Guilds",            "Esports Teams",            "Dev Studios",            "Content Networks",            "Community Hubs"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Common questions about my services, expertise, and collaboration opportunities"
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What technologies do you specialize in?",              content:
                "I work extensively with Java (Minecraft plugins), Python (Discord bots), JavaScript/Node.js, HTML/CSS, and multimedia tools. I'm constantly learning new frameworks and technologies to provide cutting-edge solutions."},
            {
              id: "2",              title: "How long does a typical project take?",              content:
                "Timeline depends on project scope. Simple plugins: 1-2 weeks. Bot development: 2-4 weeks. Web projects: 3-6 weeks. Community setup: 1-2 weeks. Custom projects receive detailed estimation after consultation."},
            {
              id: "3",              title: "Do you offer ongoing support and maintenance?",              content:
                "Yes! I provide comprehensive support packages including bug fixes, feature updates, performance optimization, and security patches. Custom maintenance plans available for long-term projects."},
            {
              id: "4",              title: "Can you help build a gaming community from scratch?",              content:
                "Absolutely. I provide full-stack community building including server setup, bot configuration, branding, website development, and community management strategies. Let's discuss your vision."},
            {
              id: "5",              title: "What's your pricing model?",              content:
                "Flexible pricing based on project scope. I offer hourly rates ($50-150/hr), fixed-price packages, and equity arrangements for ambitious projects. Get in touch for a custom quote."},
            {
              id: "6",              title: "How do I get started with a project?",              content:
                "Simple! Contact me via Discord or email with your project details. We'll have a consultation call to discuss requirements, timeline, and pricing. Then we'll get building!"},
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to build something amazing? Let's collaborate and create the next big thing in gaming."
          animationType="entrance-slide"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Join Discord", href: "#" },
            { text: "Email Me", href: "mailto:nesquik@example.com" },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Nesquik Developer"
          copyrightText="© 2025 Nesquik Developer | Full Stack Gaming Developer"
          socialLinks={[
            {
              icon: Github,
              href: "https://github.com/NesquikDeveloper",              ariaLabel: "GitHub Profile"},
            {
              icon: MessageCircle,
              href: "#",              ariaLabel: "Discord Server"},
            {
              icon: Mail,
              href: "mailto:nesquik@example.com",              ariaLabel: "Email Contact"},
            {
              icon: Gamepad2,
              href: "#",              ariaLabel: "Gaming Portfolio"},
          ]}
        />
      </div>
    </ThemeProvider>
  );
}