import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { SubPageLayout } from "@/components/sub-page-layout";

export const Route = createFileRoute("/misting-fittings-tubings")({
  head: () => ({
    meta: [
      { title: "Misting Fittings & Tubings — Promist" },
      {
        name: "description",
        content:
          "Stainless steel, brass and nickel plated fittings in an array of sizes for misting system installations.",
      },
    ],
  }),
  component: ProductsMistingFittingsTubings,
});

interface GalleryItem {
  image: string;
  label: string;
}

interface AccordionGroup {
  title: string;
  description: string;
  items: GalleryItem[];
}

const groups: AccordionGroup[] = [
  {
    title: '5 mm Push-In Fittings',
    description:
      'The remarkable flexibility of 0.19" (5 mm) polyamide tubing combined with small size fittings allow to easily adapt misting systems to umbrellas, tents, curved shapes. Made by nickel plated brass, they can be cleaned with acids.',
    items: [
      { image: '/wp-uploads/2017/04/5mm01.jpg', label: '5mm 10/24" nozzle holder' },
      { image: '/wp-uploads/2017/04/5mm02.jpg', label: '5mm tube coupling' },
      { image: '/wp-uploads/2017/04/5mm03.jpg', label: '10/24" to 5mm adapter' },
      { image: '/wp-uploads/2017/04/5mm04.jpg', label: '5mm end with 10/24" hole' },
      { image: '/wp-uploads/2017/04/5mm05.jpg', label: 'F1/4" to 5mm adapter' },
      { image: '/wp-uploads/2017/04/5mm06.jpg', label: 'M1/4" to 5mm adapter' },
      { image: '/wp-uploads/2017/04/5mm07.jpg', label: '5mm white tubing' },
      { image: '/wp-uploads/2017/04/5mm08.jpg', label: '5mm black tubing' },
      { image: '/wp-uploads/2017/04/5mm09.jpg', label: '5mm black clamp' },
      { image: '/wp-uploads/2017/04/5mm10.jpg', label: '5mm white clamp' },
    ],
  },
  {
    title: '3/8" Push-In Fittings',
    description:
      'These 3/8" (9.52mm) patented fittings features high quality and robustness. Made by nickel plated brass, they can be cleaned with acids. Adaptive teeth avoid deep scratches of the polyamide tube, preventing leakages.',
    items: [
      { image: '/wp-uploads/2017/04/3-8_01.jpg', label: 'Raccordo 3/8" - 10/24"' },
      { image: '/wp-uploads/2017/04/3-8_02.jpg', label: 'Raccordo 3/8" 2 fori 10/24"' },
      { image: '/wp-uploads/2017/04/3-8_03.jpg', label: 'Giunzione 3/8"' },
      { image: '/wp-uploads/2017/04/3-8_04.jpg', label: 'Terminale 3/8" - 10/24"' },
      { image: '/wp-uploads/2017/04/3-8_05.jpg', label: 'Raccordo 3/8" T' },
      { image: '/wp-uploads/2017/04/3-8_06.jpg', label: 'Raccordo 3/8" L' },
      { image: '/wp-uploads/2017/04/3-8_07.jpg', label: 'Raccordo M1/4" - 3/8"' },
      { image: '/wp-uploads/2017/04/3-8_08.jpg', label: 'Terminale dritto 3/8" - 10/24"' },
      { image: '/wp-uploads/2017/04/3-8_09.jpg', label: 'Tappo raccordo 3/8"' },
      { image: '/wp-uploads/2017/04/3-8_10.jpg', label: 'Valvola 3/8"' },
      { image: '/wp-uploads/2017/04/3-8_11.jpg', label: 'Tubo PA 3/8" bianco' },
      { image: '/wp-uploads/2017/04/3-8_12.jpg', label: 'Tubo PA 3/8" - 80 cm' },
      { image: '/wp-uploads/2017/04/3-8_13.jpg', label: 'Clip inox 3/8"' },
      { image: '/wp-uploads/2017/04/3-8_14.jpg', label: 'Tubo PA 3/8" nero' },
      { image: '/wp-uploads/2017/04/3-8_15.jpg', label: 'Tubo PA 3/8" - 80 cm' },
      { image: '/wp-uploads/2017/04/3-8_16.jpg', label: 'Clip inox 3/8"' },
      { image: '/wp-uploads/2017/04/3-8_17.jpg', label: 'Tagliatubo 3/8" & 1/2"' },
    ],
  },
  {
    title: 'Special 3/8" and 1/2" Fittings',
    description:
      'These 3/8" (9.52 mm) and 1/2" (12.5 mm) brass fittings features high quality and robustness. Our selection ensures that you\'ll find the ideal fitting for your project\'s requirements.',
    items: [
      { image: '/wp-uploads/2017/04/3-8_18.jpg', label: '3/8" cross fitting' },
      { image: '/wp-uploads/2017/04/3-8_19.jpg', label: '3/8" 6 nozzles umbrella' },
      { image: '/wp-uploads/2017/04/3-8_20.jpg', label: '3/8" 6+1 tube connector' },
      { image: '/wp-uploads/2017/04/1-2_07.jpg', label: 'M3/8" to 3/8" tube connector' },
      { image: '/wp-uploads/2017/04/1-2_02.jpg', label: '1/2" tube coupling' },
      { image: '/wp-uploads/2017/04/1-2_03.jpg', label: '1/2" 3/8" tube adapter' },
      { image: '/wp-uploads/2017/04/1-2_04.jpg', label: '1/2" Tee fitting' },
      { image: '/wp-uploads/2017/04/1-2_05.jpg', label: '1/2" 3/8" T fitting' },
      { image: '/wp-uploads/2017/04/1-2_06.jpg', label: '1/2" end plug' },
      { image: '/wp-uploads/2017/04/1-2_01.jpg', label: 'M1/2" to 1/2" tube connector' },
      { image: '/wp-uploads/2017/04/1-2_08.jpg', label: '1/2" S.Steel clamp' },
      { image: '/wp-uploads/2017/04/1-2_09.jpg', label: '1/2" black tubing roll' },
    ],
  },
  {
    title: '3/8" Noxide Fittings & Copper Tubing',
    description:
      'These 3/8" (9.52 mm) and nickel-plated brass fittings features high quality and robustness.',
    items: [
      { image: '/wp-uploads/2017/04/noxide_01.jpg', label: '3/8" 10/24" nozzle holders' },
      { image: '/wp-uploads/2017/04/noxide_01.jpg', label: '3/8" 10/24" 2x nozzle holder' },
      { image: '/wp-uploads/2017/04/noxide_02.jpg', label: '3/8" Tee fitting' },
      { image: '/wp-uploads/2017/04/noxide_03.jpg', label: '3/8" elbow fitting' },
      { image: '/wp-uploads/2017/04/noxide_04.jpg', label: 'M1/4" 3/8" tube coupling' },
      { image: '/wp-uploads/2017/04/noxide_05.jpg', label: 'M3/8" 3/8" tube coupling' },
      { image: '/wp-uploads/2017/04/noxide_06.jpg', label: 'F1/4" 3/8" tube coupling' },
      { image: '/wp-uploads/2017/04/noxide_07.jpg', label: '3/8" union end with plug' },
      { image: '/wp-uploads/2017/04/noxide_08.jpg', label: '3/8 end fittings' },
      { image: '/wp-uploads/2017/04/noxide_09.jpg', label: 'M1/2" elbow fittings' },
      { image: '/wp-uploads/2017/04/noxide_10.jpg', label: '1/2" drain valve' },
      { image: '/wp-uploads/2017/04/noxide_11.jpg', label: '3/8" drain valve with elbow' },
      { image: '/wp-uploads/2017/04/noxide_12.jpg', label: '3/8" MM union' },
      { image: '/wp-uploads/2017/04/noxide_13.jpg', label: '3/8" FF union' },
      { image: '/wp-uploads/2017/04/noxide_14.jpg', label: '3/8" front and back ferrules' },
      { image: '/wp-uploads/2017/04/noxide_15.jpg', label: '3/8" fitting spare union' },
    ],
  },
  {
    title: '10 and 12 mm S.Steel Fittings',
    description:
      'These 10 and 12 mm fittings features high quality and robustness. Made by S.Steel they ensure the best corrosion resistance, they can be cleaned with acids. The special fittings have been engineered to withstand pulsations produced by timers and their design allow faster installation. Nozzle holder direction can be adjusted and the fittings are easily removable.',
    items: [
      { image: '/wp-uploads/2017/04/ssteel_01.jpg', label: '12 mm nozzle holder' },
      { image: '/wp-uploads/2017/04/ssteel_11.jpg', label: '10 mm nozzle holder' },
      { image: '/wp-uploads/2017/04/ssteel_02.jpg', label: '10 and 12 mm Tee fitting' },
      { image: '/wp-uploads/2017/04/ssteel_03.jpg', label: '10 and 12 mm elbow fitting' },
      { image: '/wp-uploads/2017/04/ssteel_04.jpg', label: 'F1/4" and F3/8" connector' },
      { image: '/wp-uploads/2017/04/ssteel_05.jpg', label: '10 and 12 mm pipe connector' },
      { image: '/wp-uploads/2017/04/ssteel_06.jpg', label: '15x12 and 12x10 pipe' },
      { image: '/wp-uploads/2017/04/ssteel_07.jpg', label: '10 and 12 mm cross fitting' },
      { image: '/wp-uploads/2017/04/ssteel_08.jpg', label: '10 and 12 mm end plug' },
      { image: '/wp-uploads/2017/04/ssteel_09.jpg', label: 'Nozzle holder spare O-Ring' },
      { image: '/wp-uploads/2017/04/ssteel_10.jpg', label: '12 and 10 mm pipes' },
    ],
  },
];

function AccordionGroup({ group, defaultOpen = false }: { group: AccordionGroup; defaultOpen?: boolean }) {
  const [open, setOpen] = useState(defaultOpen);

  return (
    <div className="border rounded-lg overflow-hidden">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full px-6 py-4 text-left font-bold text-lg bg-white hover:bg-gray-50 transition-colors"
      >
        <span>{group.title}</span>
        <svg
          className={`w-4 h-4 transition-transform ${open ? "rotate-90" : ""}`}
          fill="none" stroke="currentColor" viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>
      {open && (
        <div className="px-6 py-4 border-t space-y-4">
          <p className="text-muted-foreground">{group.description}</p>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            {group.items.map((item, i) => (
              <div key={i} className="text-center">
                <img
                  src={item.image}
                  alt={item.label}
                  className="w-full aspect-square object-cover rounded-lg border"
                  loading="lazy"
                />
                <p className="text-sm mt-1 text-muted-foreground">{item.label}</p>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function ProductsMistingFittingsTubings() {
  return (
    <SubPageLayout
      eyebrow="Products"
      title="Misting Fittings & Tubings"
      lede="We offer a wide variety of stainless steel, brass and nickel plated fittings in an array of sizes, styles and configurations."
    >
      <div className="py-10 px-6 lg:px-10">
        <div className="grid lg:grid-cols-2 gap-10 items-start mb-8">
          <div className="prose max-w-none text-muted-foreground space-y-4">
            <p>
              Our outstanding selection ensures that you'll find the ideal fitting for
              your project's requirements. Good corrosion resistance, ease of installation,
              and extensive range of configurations and sizes.
            </p>
          </div>
          <img
            src="/wp-uploads/2017/04/fittings.jpg"
            alt="Misting Fittings & Tubings"
            className="w-full h-[300px] object-cover rounded-lg"
          />
        </div>
        <div className="space-y-4">
          {groups.map((group, i) => (
            <AccordionGroup key={group.title} group={group} defaultOpen={i === 0} />
          ))}
        </div>
      </div>
    </SubPageLayout>
  );
}
