"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Briefcase } from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Work", id: "/work" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Studio Collective"
          bottomLeftText="Global Creative Practice"
          bottomRightText="hello@studiocollective.com"
        />
      </div>

      <div id="servicesOverview" data-section="servicesOverview">
        <FeatureCardTwelve
          title="Our Comprehensive Creative Services"
          description="We offer a full spectrum of strategic design and creative services designed to elevate your brand and drive measurable results across all touchpoints."
          tag="What We Offer"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          features={[
            {
              id: "branding",
              label: "Branding",
              title: "Complete Brand Identity Systems",
              items: [
                "Logo design and mark systems",
                "Brand guidelines and documentation",
                "Visual identity frameworks",
                "Color and typography systems",
              ],
              buttons: [{ text: "Learn More", href: "#" }],
            },
            {
              id: "design",
              label: "Design",
              title: "Strategic Visual Communication",
              items: [
                "Packaging design",
                "Marketing collateral",
                "Environmental design",
                "Print and digital design",
              ],
              buttons: [{ text: "Learn More", href: "#" }],
            },
            {
              id: "direction",
              label: "Direction",
              title: "Creative Direction & Strategy",
              items: [
                "Campaign strategy and development",
                "Art direction",
                "Brand positioning",
                "Creative consulting",
              ],
              buttons: [{ text: "Learn More", href: "#" }],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Our comprehensive creative services"
        />
      </div>

      <div id="servicesTestimonial" data-section="servicesTestimonial">
        <TestimonialCardFifteen
          testimonial="Studio Collective's strategic approach to our branding project was exactly what we needed. They went beyond design to understand our market position, competitive landscape, and long-term vision. The result was a comprehensive identity system that has completely transformed how our clients perceive us."
          rating={5}
          author="Sarah Williams, Marketing Director"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              alt: "Client testimonial avatar 1",
            },
            {
              src: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg",
              alt: "Client testimonial avatar 2",
            },
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              alt: "Client testimonial avatar 3",
            },
            {
              src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
              alt: "Client testimonial avatar 4",
            },
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              alt: "Client testimonial avatar 5",
            },
            {
              src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
              alt: "Client testimonial avatar 6",
            },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Client testimonial about our services"
        />
      </div>

      <div id="servicesContact" data-section="servicesContact">
        <ContactText
          text="Ready to transform your brand with our strategic creative services? Let's discuss how we can help you achieve your goals."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule a Consultation", href: "/contact" },
            { text: "Explore Our Work", href: "/work" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Call to action for services"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Studio Collective"
          copyrightText="© 2025 Studio Collective. All rights reserved."
          columns={[
            {
              title: "Navigate",
              items: [
                { label: "Home", href: "/" },
                { label: "Work", href: "/work" },
                { label: "About", href: "/about" },
                { label: "Services", href: "/services" },
              ],
            },
            {
              title: "Connect",
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Email", href: "mailto:hello@studiocollective.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
              ],
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
              ],
            },
          ]}
          ariaLabel="Site footer with navigation and information"
        />
      </div>
    </ThemeProvider>
  );
}