"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Lightbulb, Zap, TrendingUp, CheckCircle } from "lucide-react";

export default function SolutionsPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/about" },
    { name: "Solutions", id: "/solutions" },
    { name: "Services", id: "/services" },
    { name: "Projects", id: "projects" },
    { 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: "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="Solutions Overview"
          description="Comprehensive automation solutions engineered for your industry. From industrial production lines to smart gate systems, we deliver customized solutions that enhance efficiency, reduce costs, and drive sustainable growth."
          tag="SOLUTIONS & SERVICES"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Get Custom Solution",              href: "/contact"},
            {
              text: "Explore Services",              href: "/services"},
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-automation-control-system-wit-1773981131808-cf06236c.png?_wi=1",              imageAlt: "Industrial automation control systems"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/advanced-collaborative-robot-with-articu-1773981131004-a16eab70.png?_wi=1",              imageAlt: "Advanced collaborative robotics"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/state-of-the-art-automatic-packaging-sys-1773981131749-3c44c882.png?_wi=1",              imageAlt: "Packaging machinery systems"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/modern-premium-automatic-sliding-gate-wi-1773981131408-069d06de.png?_wi=1",              imageAlt: "Smart gate and access control"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/custom-engineered-automation-solution-be-1773981131850-3c480c9d.png?_wi=1",              imageAlt: "Custom engineering solutions"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-engineering-team-working-on-1773981131698-7cf7cd5d.png?_wi=1",              imageAlt: "Engineering team consultation"},
          ]}
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="core-solutions" data-section="core-solutions">
        <FeatureCardTwentyFour
          tag="FIVE CORE SOLUTIONS"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Our Solution Categories"
          description="We offer five integrated solution categories, each designed to address specific industry challenges. Every solution combines proven technology, expert engineering, and comprehensive support."
          features={[
            {
              id: "industrial-automation",              title: "Industrial Automation Systems",              author: "Production Excellence",              description: "Complete automation of production lines, assembly processes, and manufacturing workflows. Integrate PLCs, variable frequency drives, sensors, and real-time monitoring systems. Increase productivity by up to 40% while reducing downtime and improving quality consistency.",              tags: ["PLC Control", "Real-time Monitoring", "Quality Assurance"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-automation-control-system-wit-1773981131808-cf06236c.png?_wi=1",              imageAlt: "Industrial automation control systems"},
            {
              id: "robotics",              title: "Robot & Cobot Automation",              author: "Precision Robotics",              description: "Deploy industrial robots and collaborative cobots for precise, repetitive, and hazardous tasks. Handle material movement, assembly, welding, and specialized manufacturing. Our solutions integrate with existing systems and scale with your production demands.",              tags: ["Industrial Robots", "Cobots", "Material Handling"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/advanced-collaborative-robot-with-articu-1773981131004-a16eab70.png?_wi=1",              imageAlt: "Advanced collaborative robotics"},
            {
              id: "packaging",              title: "Packaging Machinery Solutions",              author: "Production Optimization",              description: "High-speed packaging systems for food, pharmaceutical, cosmetics, and consumer goods. Automated filling, sealing, labeling, and quality inspection integrated into seamless production workflows. Compliance with industry regulations and food safety standards.",              tags: ["High-Speed Packaging", "Quality Control", "Compliance"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/state-of-the-art-automatic-packaging-sys-1773981131749-3c44c882.png?_wi=1",              imageAlt: "State-of-the-art packaging systems"},
            {
              id: "smart-gates",              title: "Smart Gate & Access Systems",              author: "Security Solutions",              description: "Premium automatic gate systems for residential, commercial, and industrial properties. Remote control operation, RFID/card reader integration, mobile app control, and advanced security features. Reliable, elegant solutions for modern smart living and secure facilities.",              tags: ["Access Control", "Remote Operation", "Smart Integration"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/modern-premium-automatic-sliding-gate-wi-1773981131408-069d06de.png?_wi=1",              imageAlt: "Modern premium smart gates"},
            {
              id: "custom-engineering",              title: "Custom Engineering Solutions",              author: "Tailored Innovation",              description: "Bespoke automation solutions designed specifically for your unique operational requirements. From concept development through detailed engineering, fabrication, installation, and ongoing optimization. We create solutions that solve your specific challenges.",              tags: ["Custom Design", "Full Support", "Innovation"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/custom-engineered-automation-solution-be-1773981131850-3c480c9d.png?_wi=1",              imageAlt: "Custom engineered solutions"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="solution-benefits" data-section="solution-benefits">
        <MetricCardEleven
          tag="WHY CHOOSE OUR SOLUTIONS"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          title="Proven Results & Benefits"
          description="Our solutions are engineered to deliver measurable improvements in productivity, efficiency, and profitability across diverse industries."
          metrics={[
            {
              id: "productivity",              value: "40%",              title: "Productivity Increase",              description: "Average productivity improvement within first 6 months of implementation"},
            {
              id: "cost",              value: "30%",              title: "Cost Reduction",              description: "Typical operational cost savings through automation and optimization"},
            {
              id: "quality",              value: "50%",              title: "Defect Reduction",              description: "Significant improvement in product quality and consistency"},
            {
              id: "downtime",              value: "80%",              title: "Downtime Reduction",              description: "Minimized unplanned downtime with 24/7 monitoring and support"},
            {
              id: "roi",              value: "8-12",              title: "Month ROI Timeline",              description: "Most clients achieve return on investment within 8-12 months"},
            {
              id: "scalability",              value: "100%",              title: "Fully Scalable",              description: "Solutions grow with your business needs and production demands"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="implementation" data-section="implementation">
        <ProductCardTwo
          tag="IMPLEMENTATION PROCESS"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          title="Our Project Approach"
          description="We follow a structured, transparent process to ensure successful solution implementation and long-term value creation."
          products={[
            {
              id: "assessment",              brand: "Phase 1",              name: "Initial Assessment & Planning",              price: "Consultation",              rating: 5,
              reviewCount: "100%",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-engineering-team-working-on-1773981131698-7cf7cd5d.png?_wi=1",              imageAlt: "Consultation and assessment"},
            {
              id: "design",              brand: "Phase 2",              name: "Solution Design & Engineering",              price: "Custom Design",              rating: 5,
              reviewCount: "100%",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/custom-engineered-automation-solution-be-1773981131850-3c480c9d.png?_wi=1",              imageAlt: "Design and engineering"},
            {
              id: "implementation",              brand: "Phase 3",              name: "Installation & Integration",              price: "Full Implementation",              rating: 5,
              reviewCount: "100%",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/completed-industrial-automation-installa-1773981131997-d20ced9d.png?_wi=1",              imageAlt: "Installation process"},
            {
              id: "support",              brand: "Phase 4",              name: "Training & Ongoing Support",              price: "24/7 Support",              rating: 5,
              reviewCount: "100%",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/industrial-robot-arm-performing-precise--1773981130354-3aca37a1.png?_wi=1",              imageAlt: "Training and support"},
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Ready to transform your operations? Schedule a consultation with our solutions team and discover how we can optimize your automation challenges."
          background={{ variant: "animated-grid" }}
          buttons={[
            {
              text: "Schedule Consultation",              href: "/contact"},
            {
              text: "Learn More",              href: "/about"},
          ]}
          useInvertedBackground={false}
        />
      </div>

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