"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import TextAbout from "@/components/sections/about/TextAbout";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap, Award, Users, Lightbulb } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "About", id: "about" },
    { name: "Solutions", id: "solutions" },
    { name: "Services", id: "services" },
    { name: "Projects", id: "projects" },
    { name: "Blog", id: "blog" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Solutions",      items: [
        { label: "Industrial Automation", href: "/solutions" },
        { label: "Robot & Cobot Systems", href: "/solutions" },
        { label: "Packaging Machinery", href: "/solutions" },
        { label: "Smart Gate Systems", href: "/solutions" },
        { label: "Custom Engineering", href: "/solutions" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Services", href: "/services" },
        { label: "Projects & Portfolio", href: "/" },
        { label: "Blog & Articles", href: "/" },
        { label: "Careers", href: "/" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Resources",      items: [
        { label: "Case Studies", href: "/" },
        { label: "Technical Documentation", href: "/" },
        { label: "Support Portal", href: "/" },
        { label: "FAQ", href: "/" },
        { label: "Contact Support", href: "/contact" },
      ],
    },
    {
      title: "Contact",      items: [
        { label: "Phone: +66 2 123 4567", href: "tel:+6621234567" },
        { label: "Email: info@milestones.co.th", href: "mailto:info@milestones.co.th" },
        { label: "LINE: @milestones-tech", href: "https://line.me" },
        { label: "Bangkok, Thailand", href: "/" },
        { label: "Mon-Fri 8:00-18:00 (GMT+7)", href: "/" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="large"
      background="grid"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Milestones Technologies"
          navItems={navItems}
          button={{
            text: "Request Quote",            href: "/contact"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="About Milestones Technologies"
          description="Leading provider of industrial automation and engineering solutions in Southeast Asia. For over 15 years, we've been transforming factories and businesses through innovative automation technology, expert engineering, and unwavering commitment to customer success."
          tag="OUR STORY"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Learn More",              href: "#vision"},
            {
              text: "Contact Us",              href: "/contact"},
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-engineering-team-working-on-1773981131698-7cf7cd5d.png?_wi=1",              imageAlt: "Professional engineering team working on automation projects"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/completed-industrial-automation-installa-1773981131997-d20ced9d.png",              imageAlt: "Completed industrial automation installations"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-robot-arm-performing-precise--1773981130354-3aca37a1.png?_wi=1",              imageAlt: "Industrial automation in action"},
          ]}
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="vision" data-section="vision">
        <TextAbout
          tag="OUR VISION & MISSION"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          title="Transforming Industries Through Innovation & Expertise. Our mission is to empower businesses with cutting-edge automation technology that drives efficiency, profitability, and sustainable growth. We believe in building long-term partnerships based on trust, technical excellence, and genuine commitment to our clients' success."
          buttons={[
            {
              text: "Explore Solutions",              href: "/solutions"},
            {
              text: "View Projects",              href: "#"},
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="achievements" data-section="achievements">
        <MetricCardEleven
          tag="OUR ACHIEVEMENTS"
          tagIcon={Award}
          tagAnimation="slide-up"
          title="Building Success Across Thailand and Southeast Asia"
          description="Over 15 years of proven excellence in industrial automation, with a track record of delivering transformative solutions to leading companies."
          metrics={[
            {
              id: "experience",              value: "15+",              title: "Years in Business",              description: "Established in 2009, serving the automation industry since inception"},
            {
              id: "projects",              value: "500+",              title: "Projects Delivered",              description: "Successful installations across manufacturing, logistics, and smart properties"},
            {
              id: "team",              value: "80+",              title: "Expert Team Members",              description: "Engineers, technicians, and support specialists dedicated to excellence"},
            {
              id: "clients",              value: "200+",              title: "Satisfied Clients",              description: "Long-term partnerships with industry leaders across multiple sectors"},
            {
              id: "uptime",              value: "99.8%",              title: "System Uptime",              description: "Industry-leading reliability in deployed automation systems"},
            {
              id: "countries",              value: "5",              title: "Countries Served",              description: "Expanding presence throughout Southeast Asia and beyond"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Our Clients Say"
          description="Real stories from industry leaders who've transformed their operations with Milestones Technologies solutions."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="CLIENT TESTIMONIALS"
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "testimonial-1",              title: "Game-Changing Partner",              quote: "Milestones Technologies completely transformed our manufacturing operations. Their expertise, professionalism, and genuine commitment to our success made all the difference. Within months, we saw dramatic improvements in efficiency and product quality.",              name: "Somchai Thaichai",              role: "Operations Director, Thai Automotive Group",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png"},
            {
              id: "testimonial-2",              title: "Trusted Innovation",              quote: "We've partnered with Milestones for multiple projects. Their innovative solutions combined with reliable support has consistently exceeded our expectations. They truly understand our business and deliver results.",              name: "Niran Suksomtree",              role: "Plant Manager, Bangkok Food Processing",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png"},
            {
              id: "testimonial-3",              title: "Exceptional Service",              quote: "From initial consultation through implementation and beyond, Milestones Technologies demonstrated exceptional technical knowledge and customer care. Their team is responsive, knowledgeable, and truly invested in our success.",              name: "Wanida Kachuay",              role: "Supply Chain Director, Southeast Electronics",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-female-pro-1773981130978-eb2d4e1c.png"},
          ]}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Ready to partner with Thailand's leading automation experts? Contact us today to discuss how we can transform your operations."
          background={{ variant: "animated-grid" }}
          buttons={[
            {
              text: "Get in Touch",              href: "/contact"},
            {
              text: "Call +66 2 123 4567",              href: "tel:+6621234567"},
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Milestones Technologies"
          copyrightText="© 2025 Milestones Technologies. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}