"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';
import { Target, TrendingUp, Users, Award, Heart, Zap, Palette, Code, Shield, Twitter, Linkedin, Github, Instagram } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild"
          navItems={[
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Work", id: "/testimonials" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "/contact"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Story"
          tagIcon={Target}
          title="Founded in 2013, Webild began as a passion project to bridge the gap between stunning design and powerful technology. Today, we're a team of 50+ creative professionals who believe that every business deserves a digital presence that truly represents their vision and drives meaningful results."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Meet Our Team", href: "/contact" },
            { text: "Our Services", href: "/services" }
          ]}
        />
      </div>

      <div id="values" data-section="values">
        <FeatureCardTen
          title="Our Core Values"
          description="The principles that guide everything we do and shape how we work with our clients."
          tag="What Drives Us"
          tagIcon={Heart}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "1",
              title: "Excellence in Craft",
              description: "We believe in doing things right the first time. Every line of code, every design element, and every strategy is crafted with precision and attention to detail.",
              media: { imageSrc: "https://img.b2bpic.net/free-vector/flat-ui-design-concept-with-different-screens-web-buttons-elements-mobile-application_1284-45197.jpg" },
              items: [
                { icon: Palette, text: "Pixel-perfect designs" },
                { icon: Code, text: "Clean, maintainable code" },
                { icon: Shield, text: "Security-first approach" }
              ],
              reverse: false
            },
            {
              id: "2",
              title: "Client Partnership",
              description: "We don't just work for our clients—we work with them. Building long-term relationships based on trust, transparency, and shared success is at the heart of everything we do.",
              media: { imageSrc: "https://img.b2bpic.net/free-photo/group-business-executives-interacting-with-each-other_1170-760.jpg" },
              items: [
                { icon: Users, text: "Collaborative approach" },
                { icon: Heart, text: "Genuine care for success" },
                { icon: Target, text: "Aligned goals and vision" }
              ],
              reverse: true
            },
            {
              id: "3",
              title: "Innovation & Growth",
              description: "The digital landscape evolves rapidly, and so do we. We continuously learn, adapt, and push boundaries to deliver cutting-edge solutions that keep our clients ahead of the curve.",
              media: { imageSrc: "https://img.b2bpic.net/free-photo/young-creative-people-with-laptop-sketches-discussing-new-project-together-group-guys-gals-working-modern-cozy-office_574295-5904.jpg" },
              items: [
                { icon: Zap, text: "Latest technologies" },
                { icon: TrendingUp, text: "Data-driven decisions" },
                { icon: Award, text: "Industry best practices" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="team-metrics" data-section="team-metrics">
        <MetricCardOne
          title="Our Amazing Team"
          description="Passionate professionals from diverse backgrounds united by a shared commitment to excellence."
          tag="Team Stats"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "50+",
              title: "Team Members",
              description: "Designers, developers, strategists, and project managers",
              icon: Users
            },
            {
              id: "2",
              value: "12+",
              title: "Years Experience",
              description: "Average experience across our senior team members",
              icon: Award
            },
            {
              id: "3",
              value: "15+",
              title: "Countries",
              description: "Global talent working together seamlessly",
              icon: Target
            },
            {
              id: "4",
              value: "98%",
              title: "Retention Rate",
              description: "Our team loves what they do and stays for the long haul",
              icon: Heart
            }
          ]}
        />
      </div>

      <FooterCard
        logoText="Webild"
        copyrightText="© 2025 Webild. All rights reserved. | Interactive Web Agency"
        socialLinks={[
          { icon: Twitter, href: "https://twitter.com/webild", ariaLabel: "Twitter" },
          { icon: Linkedin, href: "https://linkedin.com/company/webild", ariaLabel: "LinkedIn" },
          { icon: Github, href: "https://github.com/webild", ariaLabel: "GitHub" },
          { icon: Instagram, href: "https://instagram.com/webild", ariaLabel: "Instagram" }
        ]}
      />
    </ThemeProvider>
  );
}