"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function FeaturesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "about" },
            { name: "Companies", id: "companies" },
            { name: "Journey", id: "journey" },
            { name: "Work", id: "work" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Let's Connect", href: "contact" }}
          brandName="Webild"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyThree
          title="Featured Services"
          description="Discover the core services and capabilities that power our success. Each service is designed to deliver exceptional value and drive measurable results."
          features={[
            {
              id: "1",              title: "Web Development",              tags: ["Custom Solutions", "Full-Stack"],
              imageSrc: "https://img.b2bpic.net/free-vector/program-code-laptop-screen-office-work-software-development-data-statistic_39422-766.jpg",              imageAlt: "Web development services"
            },
            {
              id: "2",              title: "Digital Strategy",              tags: ["Growth-Focused", "Data-Driven"],
              imageSrc: "https://img.b2bpic.net/free-photo/business-teamwork-success-concept_1421-16.jpg",              imageAlt: "Digital strategy and planning"
            },
            {
              id: "3",              title: "Brand Design",              tags: ["Visual Identity", "UX/UI"],
              imageSrc: "https://img.b2bpic.net/free-photo/excited-by-good-news-motivated-colleagues-celebrating-corporate-success-together_1163-5118.jpg",              imageAlt: "Brand design and identity"
            },
            {
              id: "4",              title: "Performance Marketing",              tags: ["ROI Driven", "Analytics"],
              imageSrc: "https://img.b2bpic.net/free-vector/stylish-business-leader-background_1017-20822.jpg",              imageAlt: "Performance marketing campaigns"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="WEBILD"
          leftLink={{ text: "Privacy", href: "/privacy" }}
          rightLink={{ text: "Terms", href: "/terms" }}
        />
      </div>
    </ThemeProvider>
  );
}