"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Building2, Award } from "lucide-react";

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

  const footerColumns = [
    {
      title: "Solutions",
      items: [
        { label: "Industrial Automation", href: "/" },
        { label: "Robot & Cobot Systems", href: "/" },
        { label: "Packaging Machinery", href: "/" },
        { label: "Smart Gate Systems", href: "/" },
        { label: "Custom Engineering", href: "/" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { 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="about" data-section="about">
        <TestimonialAboutCard
          tag="ABOUT MILESTONES TECHNOLOGIES"
          tagIcon={Building2}
          tagAnimation="slide-up"
          title="Thailand's Leading Industrial Automation Partner"
          description="Founded with a vision to revolutionize manufacturing and automation across Southeast Asia, Milestones Technologies has become a trusted name in industrial innovation. We specialize in delivering comprehensive automation solutions that drive efficiency, reduce costs, and enhance operational safety."
          subdescription="Our team of experienced engineers and solution architects work directly with factory owners, production managers, and business leaders to understand their unique challenges and implement tailored automation systems that deliver measurable ROI and long-term competitive advantages."
          icon={Building2}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/milestones-technologies-modern-facility--1773981137018-c41797de.png?_wi=1"
          imageAlt="Milestones Technologies modern facility exterior and interior. State-of-the-art engineering lab with"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-choose-us" data-section="why-choose-us">
        <MetricCardEleven
          tag="OUR COMMITMENT TO EXCELLENCE"
          tagIcon={Award}
          tagAnimation="slide-up"
          title="Driving Industrial Innovation Since 2009"
          description="With over 15 years of experience and 500+ successful projects, we've established ourselves as the trusted partner for automation excellence across Southeast Asia. Our commitment to quality, innovation, and customer success drives everything we do."
          metrics={[
            {
              id: "experience",
              value: "15+",
              title: "Years of Expertise",
              description: "Pioneering automation solutions since 2009 across diverse industries",
            },
            {
              id: "engineers",
              value: "50+",
              title: "Expert Engineers",
              description: "Dedicated team of specialists with deep technical and industry knowledge",
            },
            {
              id: "clients",
              value: "200+",
              title: "Active Clients",
              description: "Long-term partnerships with leading manufacturers and businesses",
            },
            {
              id: "technology",
              value: "100%",
              title: "Advanced Technology",
              description: "Latest automation platforms, robotics, and control systems integration",
            },
            {
              id: "quality",
              value: "ISO",
              title: "Certified Quality",
              description: "ISO 9001 and international standards compliance for all projects",
            },
            {
              id: "support",
              value: "24/7",
              title: "Round-the-Clock Support",
              description: "Dedicated technical support team ensuring zero downtime operations",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta-about" data-section="cta-about">
        <ContactText
          text="Discover how Milestones Technologies can transform your manufacturing operations. Schedule a consultation with our automation experts today."
          background={{ variant: "animated-grid" }}
          buttons={[
            {
              text: "Schedule Consultation",
              href: "/contact",
            },
            {
              text: "Learn More",
              href: "/",
            },
          ]}
          useInvertedBackground={false}
        />
      </div>

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