"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Smile, Users, Grid } from "lucide-react";

export default function EmodjiSitePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="EMODJISITE"
          button={{
            text: "Explore",
            href: "#gallery"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="EMODJISITE"
          description="Learn emoji meanings, origins, and how to use them in conversations. Perfect for kids and curious learners everywhere."
          buttons={[
            {
              text: "Start Learning",
              href: "#gallery"
            },
            {
              text: "About Emojis",
              href: "#about"
            }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766500999465-vys8xuv7.jpg"
          imageAlt="Colorful emoji learning illustration"
          frameStyle="card"
          ariaLabel="Hero section - Emoji learning platform"
        />
      </div>

      <div id="gallery" data-section="gallery">
        <FeatureCardEight
          features={[
            {
              id: 1,
              title: "Smileys & People",
              description: "Discover happy faces, emotions, and people emojis with their meanings and best uses",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766501001793-kr4ql69j.jpg",
              imageAlt: "Smileys and people emoji category"
            },
            {
              id: 2,
              title: "Nature & Animals",
              description: "Explore animal emojis, plants, weather symbols, and natural elements",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766501001793-kr4ql69j.jpg",
              imageAlt: "Nature and animals emoji category"
            },
            {
              id: 3,
              title: "Food & Drink",
              description: "Learn about food and beverage emojis used in daily conversations",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766501001793-kr4ql69j.jpg",
              imageAlt: "Food and drink emoji category"
            },
            {
              id: 4,
              title: "Activities & Sports",
              description: "Understand sports, games, and activity emojis perfect for sharing fun moments",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766501001793-kr4ql69j.jpg",
              imageAlt: "Activities and sports emoji category"
            }
          ]}
          title="Emoji Gallery"
          description="Browse and learn emoji categories"
          tag="Explore"
          tagIcon={Smile}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="EMODJISITE makes emoji learning fun and easy for kids and families. We believe understanding emojis helps kids communicate better and express themselves creatively online."
          buttons={[
            {
              text: "Learn More",
              href: "#contact"
            }
          ]}
          useInvertedBackground="noInvert"
          ariaLabel="About section - EMODJISITE mission"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          metrics={[
            {
              id: "1",
              value: "500+",
              tag: "Emojis",
              tagIcon: Smile,
              title: "Learn emoji meanings and usage"
            },
            {
              id: "2",
              value: "10K+",
              tag: "Learners",
              tagIcon: Users,
              title: "Kids and families exploring emojis"
            },
            {
              id: "3",
              value: "15+",
              tag: "Categories",
              tagIcon: Grid,
              title: "Organized emoji collections"
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          title="EMODJISITE by Numbers"
          description="See the impact of emoji learning"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to explore emojis with us?"
          animationType="entrance-slide"
          inputPlaceholder="Enter your email to get updates"
          buttonText="Subscribe"
          useInvertedBackground="noInvert"
          ariaLabel="Contact section - Newsletter signup"
        />
      </div>

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