"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { BookOpen, Zap } from "lucide-react";

export default function BlogPage() {
  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: "/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: "/projects" },
        { label: "Blog & Articles", href: "/blog" },
        { 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="Blog & Articles"
          description="Stay updated with industry insights, automation trends, engineering best practices, and case studies from Milestones Technologies. Learn how automation can transform your business."
          tag="INSIGHTS & RESOURCES"
          tagIcon={BookOpen}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Subscribe to Updates",              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 project"},
            {
              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 system with PLC controllers"},
            {
              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 robot with articulated arms"},
          ]}
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="blog-articles" data-section="blog-articles">
        <BlogCardThree
          tag="LATEST ARTICLES"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Featured Articles & Insights"
          description="Explore our latest articles covering industrial automation, robotics, manufacturing trends, and engineering solutions to help optimize your operations."
          blogs={[
            {
              id: "article-1",              category: "Automation Trends",              title: "The Future of Industrial Automation in Southeast Asia",              excerpt: "Discover how AI, IoT, and machine learning are revolutionizing manufacturing across Thailand and the region. Learn about emerging trends and technologies shaping the industry.",              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 technology",              authorName: "Dr. Suda Nakprasert",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png",              date: "January 15, 2025"},
            {
              id: "article-2",              category: "Case Study",              title: "How Automotive Manufacturer Increased Efficiency by 35% with Our Systems",              excerpt: "Learn how a leading automotive manufacturer achieved significant productivity gains and reduced defects through our comprehensive automation solutions.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/complete-automotive-assembly-line-with-m-1773981131944-e95865db.png?_wi=1",              imageAlt: "Automotive assembly line",              authorName: "Niran Suksomtree",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png",              date: "January 10, 2025"},
            {
              id: "article-3",              category: "Technology Guide",              title: "Collaborative Robots (Cobots) vs Traditional Industrial Robots",              excerpt: "Compare the benefits and applications of collaborative robots with traditional industrial robots. Understand which solution works best for your facility.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/advanced-collaborative-robot-with-articu-1773981131004-a16eab70.png?_wi=1",              imageAlt: "Collaborative robot technology",              authorName: "Wanida Kachuay",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-female-pro-1773981130978-eb2d4e1c.png",              date: "January 5, 2025"},
            {
              id: "article-4",              category: "Industry Insights",              title: "Smart Gates & Access Control Systems for Modern Facilities",              excerpt: "Explore the latest developments in smart gate technology, including RFID integration, remote control capabilities, and advanced security features.",              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 system",              authorName: "Pattarapol Moonkhan",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-busin-1773981131172-a7325777.png",              date: "December 28, 2024"},
            {
              id: "article-5",              category: "Best Practices",              title: "ROI Calculation: Measuring the Value of Automation Investments",              excerpt: "Learn how to calculate and measure return on investment (ROI) for your automation projects. Understand key metrics and success indicators.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/high-speed-packaging-machinery-in-operat-1773981132057-91de9d07.png?_wi=1",              imageAlt: "Packaging machinery efficiency",              authorName: "Dr. Suda Nakprasert",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-execu-1773981130512-3b9ae1e1.png",              date: "December 20, 2024"},
            {
              id: "article-6",              category: "Industry News",              title: "Latest Innovations in Food Processing & Packaging Automation",              excerpt: "Stay informed about the newest technologies and innovations in food processing automation, quality control, and high-speed packaging systems.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/food-processing-facility-with-integrated-1773981131923-cf0c3dab.png?_wi=1",              imageAlt: "Food processing facility",              authorName: "Niran Suksomtree",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/professional-headshot-of-thai-male-facto-1773981130089-2c759151.png",              date: "December 15, 2024"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Have questions about our automation solutions? Subscribe to our newsletter for industry insights or contact our team for personalized recommendations."
          background={{ variant: "animated-grid" }}
          buttons={[
            {
              text: "Subscribe Now",              href: "/contact"},
            {
              text: "Contact Us",              href: "/contact"},
          ]}
          useInvertedBackground={false}
        />
      </div>

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