"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Code2, GitBranch, Package, Zap, MessageSquare } from 'lucide-react';

export default function LandingPage() {
  const handleAIChat = () => {
    console.log("Opening AI Chat");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="noise"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="NesquikDeveloper"
          navItems={[
            { name: "Introdução", id: "intro" },
            { name: "Repositórios", id: "repositories" },
            { name: "Projetos", id: "projects" },
            { name: "Contato", id: "contact" }
          ]}
          button={{ text: "Chat com IA", onClick: handleAIChat }}
          animateOnLoad={true}
        />
      </div>

      <div id="intro" data-section="intro">
        <HeroLogo
          logoText="NesquikDeveloper"
          description="Full-stack developer passionate about creating innovative solutions with Java, JavaScript, and cutting-edge technologies. Specializing in competitive gaming infrastructure and scalable applications."
          buttons={[
            { text: "Ver Repositórios", href: "#repositories" },
            { text: "Falar com IA", onClick: handleAIChat }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIdd8DptnyGZybLKGBjU15wmw/a-sleek-developer-workspace-with-code-on-1772489178747-4e3902b7.png"
          imageAlt="Developer workspace with code and technology setup"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="repositories" data-section="repositories">
        <FeatureHoverPattern
          title="Repositórios Recentes"
          description="Explore meus projetos públicos no GitHub organizados por linguagem de programação. Filtre por tecnologia, veja estatísticas e acesse diretamente os repositórios."
          tag="GitHub"
          features={[
            {
              icon: Code2,
              title: "Filtrar por Linguagem",              description: "Classifique repositórios por Java, JavaScript, TypeScript, Python e mais. Veja todos os projetos ou apenas os que usam a tecnologia que você busca.",              button: { text: "Ver Todos", href: "#repo-list" }
            },
            {
              icon: GitBranch,
              title: "Repositórios com Badges",              description: "Cada repositório exibe badges coloridos das linguagens utilizadas. Identifique rapidamente as tecnologias em cada projeto.",              button: { text: "Explorar", href: "#repo-list" }
            },
            {
              icon: Package,
              title: "Pagination & Detalhes",              description: "Navegue por até 10+ páginas de repositórios. Clique em qualquer repositório para acessar o GitHub com um botão direto.",              button: { text: "Navegar", href: "#repo-list" }
            },
            {
              icon: Zap,
              title: "Busca em Tempo Real",              description: "Pesquise por nome de repositório, descrição ou linguagem. Resultados filtrados aparecem instantaneamente.",              button: { text: "Pesquisar", href: "#repo-list" }
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardOne
          title="Projetos em Destaque"
          description="Servidores e projetos que desenvolvi com suas respectivas informações, modos de jogo, versões suportadas e IPs para acesso."
          tag="Featured Projects"
          products={[
            {
              id: "winsmc",              name: "WinsMC Network",              price: "Online",              imageSrc: "https://media.discordapp.net/attachments/1472466930668408895/1478147998461464657/logo.png?ex=69a75819&is=69a60699&hm=48b2ecad87c68354157d5a2276396eee7495c7d9df7287f4ea05fcf7aff91b5f&=&format=webp&quality=lossless&width=674&height=674",              imageAlt: "WinsMC Network Logo"
            },
            {
              id: "winsmc-2",              name: "WinsMC PvP Arena",              price: "Free",              imageSrc: "https://media.discordapp.net/attachments/1472466930668408895/1477348156063879189/2026-02-28_13.47.19.png?ex=69a71230&is=69a5c0b0&hm=72627fc5968ec01d37607f227f4f6c33c87465a05cf0d7a53a732312d41aa351&=&format=webp&quality=lossless&width=1025&height=529",              imageAlt: "WinsMC PvP Arena"
            },
            {
              id: "winsmc-3",              name: "Development Server",              price: "Private",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIdd8DptnyGZybLKGBjU15wmw/a-minecraft-pvp-game-interface-screensho-1772489179524-0e97717f.png",              imageAlt: "Development Server"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Entre em Contato"
          ctaDescription="Conecte-se comigo via Discord, envie um email ou junte-se ao meu servidor. Estou sempre aberto a conversas e oportunidades."
          ctaButton={{ text: "Conectar no Discord", href: "https://discord.gg/AvXfbHtfTB" }}
          ctaIcon={MessageSquare}
          faqs={[
            {
              id: "1",              title: "Como posso entrar em contato?",              content: "Você pode me contactar via Discord (@nesquikdeveloper), enviar um email para nesquikdeveloper@proton.me ou acessar meu servidor Discord: https://discord.gg/AvXfbHtfTB"
            },
            {
              id: "2",              title: "Qual é seu Discord ID?",              content: "Meu Discord ID é 1142725062575788152. Você pode me enviar uma mensagem direta ou clicar no link de convite do servidor para conectar-se."
            },
            {
              id: "3",              title: "Aceita colaborações e projetos?",              content: "Sim! Estou sempre aberto a colaborações interessantes, projetos desafiadores e oportunidades que alinhem com meus interesses técnicos."
            },
            {
              id: "4",              title: "Quanto tempo leva para responder?",              content: "Geralmente respondo no Discord em até 24 horas. Para emails, a resposta pode levar alguns dias dependendo do volume."
            }
          ]}
          useInvertedBackground={true}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Nesquik"
          columns={[
            {
              items: [
                { label: "Introdução", href: "#intro" },
                { label: "Repositórios", href: "#repositories" },
                { label: "Projetos", href: "#projects" }
              ]
            },
            {
              items: [
                { label: "Contato", href: "#contact" },
                { label: "Discord", href: "https://discord.gg/AvXfbHtfTB" },
                { label: "GitHub", href: "https://github.com/NesquikDeveloper" }
              ]
            },
            {
              items: [
                { label: "Email", href: "mailto:nesquikdeveloper@proton.me" },
                { label: "Política de Privacidade", href: "#" },
                { label: "Termos de Serviço", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
