"use client";

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

export default function ContactPage() {
  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="contactHero" data-section="contactHero">
        <ContactText
          text="Let's create something extraordinary together. Reach out to discuss your project, and let's explore how Studio Collective can elevate your brand."
          animationType="entrance-slide"
          buttons={[
            { text: "Send a Message", href: "mailto:hello@studiocollective.com" },
            { text: "Schedule a Call", href: "#" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Contact section for inquiries"
        />
      </div>

      <div id="contactTestimonial" data-section="contactTestimonial">
        <TestimonialCardFifteen
          testimonial="From first conversation to project completion, Studio Collective made us feel valued and understood. Their responsiveness, collaborative approach, and commitment to our vision made the entire process seamless. We couldn't have asked for better partners."
          rating={5}
          author="David Morrison, Creative 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 working with us"
        />
      </div>

      <div id="contactSocialProof" data-section="contactSocialProof">
        <SocialProofOne
          title="Join Our Community of Satisfied Clients"
          description="Brands worldwide trust Studio Collective to deliver exceptional creative work that drives real business impact and builds lasting value."
          tag="Our Clients"
          tagIcon={Award}
          tagAnimation="slide-up"
          names={[
            "Luxury Brands Co.",
            "TechVision Global",
            "Hospitality Group",
            "Fashion Forward",
            "Premium Finance",
            "Retail Collective",
            "Consumer Goods Int'l",
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
          ariaLabel="Brands we work with"
        />
      </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>
  );
}