"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 { Code, TrendingUp, CheckCircle, Star, Award, Users, Github, Linkedin, Twitter } from 'lucide-react';

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

      <div id="about" data-section="about">
        <TextAbout
          tag="About Dialedweb"
          tagIcon={Code}
          title="Founded in California, Dialedweb represents the pinnacle of premium software and web development. Our team of expert developers and designers collaborates with visionary brands to create digital experiences that not only meet expectations but redefine industries."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Our Work", href: "/services" },
            { text: "Get in Touch", href: "/contact" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Journey & Achievements"
          description="Eight years of excellence, innovation, and partnership with industry leaders"
          tag="Company Milestones"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "2016",              title: "Founded",              description: "Started with a vision to elevate digital experiences",              icon: CheckCircle
            },
            {
              id: "2",              value: "15",              title: "Team Members",              description: "Expert developers, designers, and strategists",              icon: Users
            },
            {
              id: "3",              value: "25",              title: "Industries",              description: "Diverse sectors from startups to enterprise",              icon: Star
            }
          ]}
        />
      </div>

      <div id="capabilities" data-section="capabilities">
        <FeatureCardTen
          title="Our Core Values & Approach"
          description="The principles that guide our work and define our commitment to excellence"
          tag="Our Values"
          tagIcon={Award}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",              title: "Excellence First",              description: "We pursue perfection in every line of code, every design decision, and every client interaction. Quality is never negotiable.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/team-developers-doing-brainstorming-optimizing-code_482257-112972.jpg" },
              items: [
                { icon: CheckCircle, text: "Rigorous quality standards" },
                { icon: CheckCircle, text: "Continuous improvement culture" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Innovation & Growth",              description: "We stay at the forefront of technology, embracing new tools and methodologies to deliver cutting-edge solutions.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/software-digital-electronics-internet-program-web-concept_53876-134063.jpg" },
              items: [
                { icon: CheckCircle, text: "Latest technology adoption" },
                { icon: CheckCircle, text: "Creative problem solving" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Partnership Focus",              description: "We view every client relationship as a long-term partnership, dedicated to your success beyond project completion.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/diverse-programmers-discussing-about-html-code-compiling-discovers-errors-standing-front-multiple-screens-startup-office-software-developers-working-server-interface-development_482257-64363.jpg" },
              items: [
                { icon: CheckCircle, text: "Collaborative approach" },
                { icon: CheckCircle, text: "Long-term support" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Dialedweb"
          copyrightText="© 2025 Dialedweb. All rights reserved. Based in California."
          socialLinks={[
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}