"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Users } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild Studio"
          navItems={[
            { name: "Work", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",            href: "/contact"
          }}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <MetricSplitMediaAbout
          tag="Our Story"
          tagIcon={Zap}
          title="Pioneering Digital Excellence Since 2018"
          description="Webild Studio was born from a shared vision to bridge the gap between stunning design and powerful functionality. What started as a small team of passionate creatives has evolved into a full-service digital agency that partners with ambitious brands to create transformative digital experiences. Our commitment to innovation, attention to detail, and client success has made us a trusted partner for companies ranging from innovative startups to established enterprises."
          metrics={[
            { value: "6+", title: "Years of Innovation" },
            { value: "50+", title: "Team Members Worldwide" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg"
          imageAlt="Webild Studio team collaboration"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team-detailed" data-section="team-detailed">
        <TeamCardFive
          title="Leadership Team"
          description="Meet the visionaries and experts driving our creative excellence and strategic innovation"
          tag="Our Leaders"
          tagIcon={Users}
          team={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Creative Director & Co-Founder",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg",              imageAlt: "Sarah Mitchell, Creative Director"
            },
            {
              id: "2",              name: "David Chen",              role: "Technical Director & Co-Founder",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",              imageAlt: "David Chen, Technical Director"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Strategy & Operations Lead",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",              imageAlt: "Emma Rodriguez, Strategy Lead"
            },
            {
              id: "4",              name: "James Turner",              role: "Head of Client Experience",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-holding-tablet_23-2149927578.jpg",              imageAlt: "James Turner, Head of Client Experience"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="values" data-section="values">
        <MetricSplitMediaAbout
          tag="Our Values"
          tagIcon={Zap}
          title="Excellence Through Collaboration"
          description="At Webild Studio, we believe that extraordinary work emerges from the intersection of creativity, technology, and human connection. Our values guide every project, every interaction, and every decision we make. We're committed to transparency, continuous learning, and delivering work that not only meets expectations but sets new standards for digital excellence."
          metrics={[
            { value: "100%", title: "Client Retention Rate" },
            { value: "24/7", title: "Support Availability" }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Values and culture at Webild Studio"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Creative footer background"
          logoText="Webild Studio"
          copyrightText="© 2025 Webild Studio. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Brand Design", href: "/services" },
                { label: "Web Development", href: "/services" },
                { label: "Mobile Apps", href: "/services" },
                { label: "Digital Marketing", href: "/services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Careers", href: "/contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "/contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}