"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";

export default function AboutPage() {
  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="aboutDetail" data-section="aboutDetail">
        <TextSplitAbout
          title="Our Story"
          description={[
            "Founded over a decade ago, Studio Collective emerged from a shared vision: to create exceptional design that transforms how brands communicate with the world. Our journey began with a simple conviction that great design requires both strategic depth and meticulous craft.",
            "We've grown to become a trusted partner for the world's most discerning brands. Our team brings together decades of combined experience across branding, design, creative direction, and strategic consulting. What unites us is an unwavering commitment to excellence and a passion for solving complex creative challenges.",
            "Today, Studio Collective continues to push the boundaries of creative possibility while maintaining the personal attention and strategic rigor that our clients expect. We believe the best work emerges from deep collaboration, clear thinking, and an obsessive attention to detail.",
          ]}
          buttons={[
            { text: "Start a Project", href: "/contact" },
            { text: "View Our Work", href: "/work" },
          ]}
          buttonAnimation="slide-up"
          showBorder={false}
          useInvertedBackground={false}
          ariaLabel="About Studio Collective story and values"
        />
      </div>

      <div id="aboutTestimonial" data-section="aboutTestimonial">
        <TestimonialCardFifteen
          testimonial="Working with Studio Collective was transformative. Their deep understanding of our brand vision combined with their exceptional execution set them apart. They don't just deliver design—they deliver strategic solutions backed by creative excellence that genuinely moves the needle for your business."
          rating={5}
          author="Michael Chen, Chief Executive Officer"
          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 Studio Collective"
        />
      </div>

      <div id="aboutContact" data-section="aboutContact">
        <ContactText
          text="Ready to partner with us on your next transformative project? We'd love to hear about your vision and how we can help bring it to life."
          animationType="entrance-slide"
          buttons={[
            { text: "Get in Touch", href: "/contact" },
            { text: "Learn More", href: "/services" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Call to action for about page"
        />
      </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>
  );
}