"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { ArrowRight } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Work", id: "/work" },
    { name: "About", id: "/about" },
    { name: "Services", id: "/services" },
    { name: "Contact", id: "/contact" },
    { name: "Projects", id: "/work" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Work", href: "/work" },
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
      ],
    },
    {
      items: [
        { label: "Contact", href: "/contact" },
        { label: "Creative Direction", href: "/services" },
        { label: "Projects", href: "/work" },
      ],
    },
    {
      items: [
        { label: "Email", href: "mailto:hello@visionfirst.studio" },
        { label: "Instagram", href: "https://instagram.com/visionfirst" },
        { label: "LinkedIn", href: "https://linkedin.com/company/visionfirst" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="VISION FIRST"
          bottomLeftText="Concept before image"
          bottomRightText="hello@visionfirst.studio"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyThree
          features={[
            {
              id: "1",
              title: "Creative Direction",
              tags: ["Strategy", "Concept Development"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/music-video-visual-concept-or-album-cove-1772510963993-fbcb646c.jpg?_wi=5",
              imageAlt: "Creative direction visual concept",
            },
            {
              id: "2",
              title: "Art Direction",
              tags: ["Visual Storytelling", "Aesthetic Development"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/advertising-campaign-visual-concept-bold-1772510961006-578598a3.png?_wi=5",
              imageAlt: "Art direction for advertising campaign",
            },
            {
              id: "3",
              title: "Music Visual Identity",
              tags: ["Album Artwork", "Music Video Direction"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/ai-cinematic-production-storyboard-or-ke-1772510960910-0b25ce0f.png?_wi=5",
              imageAlt: "Music visual identity and album art",
            },
            {
              id: "4",
              title: "AI Cinematic Video Production",
              tags: ["Advanced Production", "Visual Effects"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/music-video-visual-concept-or-album-cove-1772510963993-fbcb646c.jpg?_wi=6",
              imageAlt: "AI-driven cinematic video production",
            },
            {
              id: "5",
              title: "Concept Development",
              tags: ["Pre-Production", "Ideation"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/advertising-campaign-visual-concept-bold-1772510961006-578598a3.png?_wi=6",
              imageAlt: "Visual concept development process",
            },
            {
              id: "6",
              title: "Advertising & Cultural Projects",
              tags: ["Brand Strategy", "Cultural Positioning"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3EMGqlmy084kV3KwAVtpJqrq/ai-cinematic-production-storyboard-or-ke-1772510960910-0b25ce0f.png?_wi=6",
              imageAlt: "Advertising creative direction for campaigns",
            },
          ]}
          animationType="entrance-slide"
          title="Services"
          description="We provide strategic creative direction across disciplines, positioning your vision through visual narrative and refined execution."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="EXPERTISE"
          tagAnimation="entrance-slide"
          ariaLabel="Vision First services and expertise"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Collaborate"
          tagIcon={ArrowRight}
          tagAnimation="entrance-slide"
          title="For Creative Collaborations and Cultural Projects"
          description="We develop visual concepts and creative direction for projects rooted in strategy and narrative intelligence. If your vision requires refined execution and strategic thinking, let's connect."
          buttons={[
            { text: "Contact Studio", href: "mailto:hello@visionfirst.studio" },
            { text: "Explore More", href: "/work" },
          ]}
          buttonAnimation="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Vision First contact call to action"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="VISION FIRST"
          ariaLabel="Vision First footer navigation"
        />
      </div>
    </ThemeProvider>
  );
}