"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
  Trophy,
  Users,
  Target,
  Heart,
  Zap,
  Rocket,
  Award,
  Briefcase,
  Lightbulb,
  Palette,
} from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webuild"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Projects", id: "/#projects" },
            { name: "Services", id: "/#services" },
            { name: "About", id: "/about" },
          ]}
          button={{
            text: "Start Project",
            href: "#contact",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <SplitAbout
          title="Our Story & Mission"
          description="Founded with a vision to transform the digital landscape, Webuild brings together world-class designers, developers, and strategists dedicated to creating exceptional digital experiences that drive real business results."
          tag="About Webuild"
          tagIcon={Trophy}
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/strategic-planning-workshop-with-team-co-1772996200144-fb243f59.png?_wi=2"
          imageAlt="Our team collaborating on strategic projects"
          bulletPoints={[
            {
              icon: Award,
              title: "Award-Winning Work",
              description: "Recognized internationally for innovative design and development excellence across multiple industry sectors.",
            },
            {
              icon: Briefcase,
              title: "10+ Years Experience",
              description: "Over a decade of proven success helping brands scale, innovate, and dominate their digital presence.",
            },
            {
              icon: Users,
              title: "50+ Team Members",
              description: "A diverse team of talented professionals including designers, developers, strategists, and project managers.",
            },
            {
              icon: Lightbulb,
              title: "1000+ Projects",
              description: "Successfully completed over a thousand projects for startups, enterprises, and everything in between.",
            },
          ]}
        />
      </div>

      <div id="values" data-section="values">
        <FeatureHoverPattern
          title="Our Core Values"
          description="These principles guide every decision we make and every project we undertake, ensuring excellence at every step."
          tag="What Drives Us"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              icon: Palette,
              title: "Creative Excellence",
              description: "We push creative boundaries while maintaining strategic focus, ensuring every design serves a clear purpose.",
            },
            {
              icon: Target,
              title: "Client Success",
              description: "Your success is our success. We measure everything by the real business impact we deliver for our clients.",
            },
            {
              icon: Heart,
              title: "Collaborative Partnership",
              description: "We work alongside our clients as true partners, investing in understanding their vision and goals deeply.",
            },
            {
              icon: Briefcase,
              title: "Professional Excellence",
              description: "We maintain the highest standards of quality, professionalism, and integrity in all our work and relationships.",
            },
            {
              icon: Lightbulb,
              title: "Continuous Innovation",
              description: "We stay ahead of industry trends, constantly learning and evolving to bring the latest solutions to our clients.",
            },
            {
              icon: Users,
              title: "Team Growth",
              description: "We invest in our team's development, fostering a culture of learning, collaboration, and creative expression.",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Join Our Journey"
          tagIcon={Rocket}
          title="Ready to Work Together?"
          description="Whether you're looking to transform your digital presence or join our team, we'd love to hear from you. Let's create something amazing together."
          background={{
            variant: "plain",
          }}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Start Your Project",
              href: "/#contact",
            },
            {
              text: "Contact Us",
              href: "mailto:hello@webuild.com",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Webuild"
          leftLink={{
            text: "Privacy Policy",
            href: "#privacy",
          }}
          rightLink={{
            text: "Terms of Service",
            href: "#terms",
          }}
        />
      </div>
    </ThemeProvider>
  );
}