"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 ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { CheckCircle, Filter } from "lucide-react";
import { useState } from "react";

export default function ProjectsPage() {
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  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: "/" },
      ],
    },
  ];

  const projects = [
    {
      id: "project-1",      brand: "Automotive Manufacturer",      name: "Complete Assembly Line Automation",      price: "2.5M THB",      rating: 5,
      reviewCount: "12",      category: "industrial-automation",      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: "Complete automotive assembly line with multiple robotic arms working in sequence"},
    {
      id: "project-2",      brand: "Food Processing Plant",      name: "High-Speed Packaging System",      price: "1.8M THB",      rating: 5,
      reviewCount: "8",      category: "packaging-machinery",      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 with integrated packaging machinery"},
    {
      id: "project-3",      brand: "Electronics Warehouse",      name: "Cobot Material Handling System",      price: "1.2M THB",      rating: 5,
      reviewCount: "9",      category: "robot-cobot",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/warehouse-with-collaborative-robots-mana-1773981131081-518034f7.png?_wi=1",      imageAlt: "Warehouse with collaborative robots managing material handling"},
    {
      id: "project-4",      brand: "Luxury Residential Complex",      name: "Smart Gate Access System",      price: "800K THB",      rating: 5,
      reviewCount: "15",      category: "smart-gate",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/luxury-residential-complex-entrance-with-1773981131885-7d86d7ce.png?_wi=1",      imageAlt: "Luxury residential complex entrance with smart gate system"},
    {
      id: "project-5",      brand: "Chemical Manufacturing",      name: "Custom Robotic Production Line",      price: "3.2M THB",      rating: 5,
      reviewCount: "7",      category: "custom-engineering",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/chemical-manufacturing-facility-with-rob-1773981131785-741649af.png?_wi=1",      imageAlt: "Chemical manufacturing facility with robotic production line"},
    {
      id: "project-6",      brand: "Pharmaceutical Facility",      name: "Integrated Packaging & QC System",      price: "2.1M THB",      rating: 5,
      reviewCount: "11",      category: "packaging-machinery",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/pharmaceutical-facility-with-integrated--1773981135234-da2258a8.png?_wi=1",      imageAlt: "Pharmaceutical facility with integrated packaging and quality control"},
  ];

  const categories = [
    { id: "all", label: "All Projects" },
    { id: "industrial-automation", label: "Industrial Automation" },
    { id: "robot-cobot", label: "Robot & Cobot" },
    { id: "packaging-machinery", label: "Packaging" },
    { id: "smart-gate", label: "Smart Gates" },
    { id: "custom-engineering", label: "Custom Engineering" },
  ];

  const filteredProjects = selectedCategory === "all" 
    ? projects 
    : projects.filter(p => p.category === selectedCategory);

  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="Our Project Portfolio"
          description="Discover our completed installations and successful implementations across industrial automation, robotics, packaging systems, and smart gate solutions. Each project showcases our commitment to excellence and innovation."
          tag="PORTFOLIO & INSTALLATIONS"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Request a Quote",              href: "/contact"},
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          mediaItems={[
            {
              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 robot arm performing precise assembly"},
            {
              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: "High-speed packaging machinery in operation"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BC5DoKtnbMRErIYJgmPK5zjs5w/smart-gate-control-system-display-with-d-1773981131975-1ea8ba37.png?_wi=1",              imageAlt: "Smart gate control system display"},
          ]}
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="projects-showcase" data-section="projects-showcase" className="py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-12">
            <h2 className="text-3xl font-semibold mb-8 text-center">Filter Projects</h2>
            <div className="flex flex-wrap gap-3 justify-center">
              {categories.map((cat) => (
                <button
                  key={cat.id}
                  onClick={() => setSelectedCategory(cat.id)}
                  className={`px-6 py-2 rounded-full transition-all ${
                    selectedCategory === cat.id
                      ? "bg-primary-cta text-white"
                      : "bg-card text-foreground border border-accent"
                  }`}
                >
                  {cat.label}
                </button>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredProjects.map((project) => (
              <div key={project.id} className="bg-card rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                <img
                  src={project.imageSrc}
                  alt={project.imageAlt}
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <p className="text-sm text-accent mb-2">{project.brand}</p>
                  <h3 className="text-xl font-semibold mb-2">{project.name}</h3>
                  <div className="flex items-center justify-between mb-4">
                    <span className="text-lg font-bold text-primary-cta">{project.price}</span>
                    <div className="flex items-center gap-1">
                      <span className="text-yellow-500">★</span>
                      <span className="font-semibold">{project.rating}</span>
                    </div>
                  </div>
                  <p className="text-sm text-foreground opacity-75">{project.reviewCount} reviews</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Ready to discuss your next project? Our team is here to help bring your automation vision to life."
          background={{ variant: "animated-grid" }}
          buttons={[
            {
              text: "Start Your Project",              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>
  );
}