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

export const Route = createFileRoute("/nozzles")({
  head: () => ({
    meta: [
      { title: "Misting Nozzles — Promist" },
      {
        name: "description",
        content:
          "High-quality misting nozzles in ni-plated brass and stainless steel. Cleanable nozzle design with 10/24 and 1/8 threads.",
      },
    ],
  }),
  component: ProductsNozzles,
});

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

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

const series: SeriesGroup[] = [
  {
    title: "Economy Series",
    description:
      'The Economy nozzle range includes sizes from .006" to .020" orifice with anti-drip adapter. Available in ni-plated brass or stainless steel. Flow rates range from 0.73 gph to 3.26 gph. Ideal for budget-conscious installations where reliable performance is still required.',
    items: [
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Economy Nozzle .006" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Economy Nozzle .008" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Economy Nozzle .010" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Economy Nozzle .013" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Economy Nozzle .016" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Economy Nozzle .020" Orifice' },
    ],
  },
  {
    title: "TCN Series — Cleanable Filter Nozzles",
    description:
      'The TCN mist nozzles include sizes from .006" to .020" with anti-drip adapter and cleanable filter. Available in ni-plated brass or stainless steel with flow rates from 0.73 gph to 3.26 gph. The cleanable filter design allows for easy maintenance and extended nozzle life.',
    items: [
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'TCN Nozzle .006" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'TCN Nozzle .008" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'TCN Nozzle .010" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'TCN Nozzle .013" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'TCN Nozzle .016" Orifice' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'TCN Nozzle .020" Orifice' },
    ],
  },
  {
    title: "Nozzle Adapter Range",
    description:
      "The Nozzle Adapter range includes extensions, clusters, swivel fittings, and multi-thread adapters. Available in brass and stainless steel with various thread configurations including 10/24\" and 1/8\" to suit different installation requirements.",
    items: [
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: '10/24" to 1/8" Adapter' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Nozzle Extension' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Nozzle Cluster' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Swivel Fitting' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Multi-Thread Adapter' },
      { image: "/wp-uploads/2017/04/nozzle-banner1.jpg", label: 'Anti-Drip Adapter' },
    ],
  },
];

function AccordionGroup({ group, defaultOpen = false }: { group: SeriesGroup; 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 ProductsNozzles() {
  return (
    <SubPageLayout
      eyebrow="Products"
      title="Misting Nozzles"
      lede='We offer the latest cleanable nozzle design with 10/24" and 1/8" threads. Buy direct from the manufacturer.'
    >
      <Section>
        <div className="grid lg:grid-cols-2 gap-10 items-start">
          <div className="prose max-w-none text-muted-foreground space-y-4">
            <p>
              Mist nozzles are available in ni-plated brass and stainless steel. We
              also offer a variety of other nozzle designs as special order items
              with different orifice sizes.
            </p>
            <p>
              The Economy nozzle range includes sizes from .006" to .020" orifice
              with anti-drip adapter. They are available in ni-plated brass or
              stainless steel. Flow rates for this range vary from 0.73 gph to 3.26
              gph.
            </p>
            <p>
              The TCN mist nozzles include sizes from .006" to .020" with anti-drip
              adapter and cleanable filter. They are available in ni-plated brass or
              stainless steel with orifice sizes from .006" to .020" and flow rates
              from 0.73 gph to 3.26 gph.
            </p>
            <p>
              The Nozzle Adapter range includes extensions, clusters, swivel
              fittings, and multi-thread adapters.
            </p>
          </div>
          <img
            src="/wp-uploads/2017/04/nozzle-banner1.jpg"
            alt="Misting Nozzles"
            className="w-full h-[300px] object-cover rounded-lg"
          />
        </div>
      </Section>
      <Section className="bg-muted/50">
        <h2 className="font-display text-3xl font-black mb-6">Nozzle Series</h2>
        <div className="space-y-4">
          {series.map((group, i) => (
            <AccordionGroup key={group.title} group={group} defaultOpen={i === 0} />
          ))}
        </div>
      </Section>
      <Section>
        <h2 className="font-display text-3xl font-black mb-6">
          Nozzle Specifications
        </h2>
        <div className="prose max-w-none text-muted-foreground space-y-4">
          <table className="w-full border-collapse">
            <thead>
              <tr className="border-b text-left">
                <th className="py-2 font-bold">Type</th>
                <th className="py-2 font-bold">Material</th>
                <th className="py-2 font-bold">Orifice</th>
                <th className="py-2 font-bold">Flow Rate</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b">
                <td className="py-2">Economy</td>
                <td className="py-2">Ni-plated Brass / SS</td>
                <td className="py-2">.006" – .020"</td>
                <td className="py-2">0.73 – 3.26 gph</td>
              </tr>
              <tr className="border-b">
                <td className="py-2">TCN</td>
                <td className="py-2">Ni-plated Brass / SS</td>
                <td className="py-2">.006" – .020"</td>
                <td className="py-2">0.73 – 3.26 gph</td>
              </tr>
              <tr className="border-b">
                <td className="py-2">Adapter</td>
                <td className="py-2">Brass / SS</td>
                <td className="py-2">Various</td>
                <td className="py-2">—</td>
              </tr>
            </tbody>
          </table>
          <p className="text-sm mt-4">
            All nozzles include anti-drip adapter. Cleanable filter included with
            TCN series.
          </p>
        </div>
      </Section>
    </SubPageLayout>
  );
}
