import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import {
  ArrowRight,
  DoorOpen,
  Home,
  Grid2x2,
  Ruler,
  Palette,
  Shield,
} from "lucide-react";

export const metadata: Metadata = {
  title: "Producten | PROINN Stalen Deuren",
  description:
    "Bekijk ons assortiment stalen deuren: binnendeuren, buitendeuren en kantoorwanden. Alles op maat, handgemaakt in Roosendaal.",
};

const products = [
  {
    id: "binnendeuren",
    icon: DoorOpen,
    title: "Stalen binnendeuren",
    description:
      "Onze stalen binnendeuren combineren een industrieel karakter met een strakke, moderne uitstraling. Verkrijgbaar als taatsdeur, scharnierdeur of schuifdeur, in iedere gewenste afmeting en glasverdeling.",
    features: [
      "Taats-, scharnier- of schuifdeur",
      "Enkele of dubbele uitvoering",
      "Diverse glasverdelingen (2 t/m 8 vlakken)",
      "Inclusief kozijn en beglazingskit",
    ],
    image: "/images/taats.jpg",
  },
  {
    id: "buitendeuren",
    icon: Home,
    title: "Stalen buitendeuren",
    description:
      "Stalen buitendeuren van Proinn zijn ontworpen om jarenlang mee te gaan. Met thermisch onderbroken profielen en veiligheidsbeglazingen vormen zij een duurzame en stijlvolle entree voor uw woning of bedrijfspand.",
    features: [
      "Thermisch onderbroken profielen",
      "HR++ of triple beglazing",
      "Inbraakwerend (WK2 mogelijk)",
      "Poedercoating in RAL-kleur naar keuze",
    ],
    image: "/images/scharnier.jpg",
  },
  {
    id: "kantoorwanden",
    icon: Grid2x2,
    title: "Stalen kantoorwanden",
    description:
      "Creeer een open en lichte werkomgeving met onze stalen kantoorwanden. De slanke staalprofielen laten maximaal licht door en zorgen tegelijkertijd voor een visuele scheiding tussen werkplekken.",
    features: [
      "Vaste of opendraaiende panelen",
      "Akoestisch isolerend glas beschikbaar",
      "Diverse afmetingen en indelingen",
      "Passend in bestaande kantoorruimtes",
    ],
    image: "/images/paneel.jpg",
  },
];

const uspItems = [
  {
    icon: Ruler,
    title: "100% maatwerk",
    description: "Elke deur wordt op maat gemaakt voor een perfecte pasvorm.",
  },
  {
    icon: Palette,
    title: "Kleur naar keuze",
    description:
      "Standaard kleuren of het volledige RAL-palet. U kiest, wij coaten.",
  },
  {
    icon: Shield,
    title: "Duurzame kwaliteit",
    description:
      "Poedercoating en hoogwaardig staal voor jarenlang resultaat.",
  },
];

export default function ProductenPage() {
  return (
    <>
      {/* Hero */}
      <section className="bg-[#1A2E2E] pt-32 pb-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="mb-4 flex items-center gap-2">
              <div className="h-4 w-1 rounded-full bg-[#C4D668]" />
              <span className="text-xs font-medium tracking-widest uppercase text-[#C4D668]">
                Ons assortiment
              </span>
            </div>
            <h1 className="text-4xl font-light leading-tight text-white sm:text-5xl">
              Stalen deuren &amp;{" "}
              <span className="font-semibold">wanden</span>
            </h1>
            <p className="mt-5 max-w-xl text-base leading-relaxed text-gray-400">
              Van stijlvolle binnendeuren tot robuuste buitendeuren en
              functionele kantoorwanden. Alles volledig op maat, handgemaakt
              in onze werkplaats in Roosendaal.
            </p>
          </div>
        </div>
      </section>

      {/* USP Bar */}
      <section className="border-b border-gray-200 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-x sm:divide-y-0">
            {uspItems.map((item) => {
              const Icon = item.icon;
              return (
                <div
                  key={item.title}
                  className="flex items-center gap-4 px-6 py-8"
                >
                  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#F5F5F3]">
                    <Icon className="size-5 text-[#1A2E2E]" strokeWidth={1.5} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-gray-900">
                      {item.title}
                    </p>
                    <p className="text-xs text-gray-500">{item.description}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Product Sections */}
      {products.map((product, index) => {
        const Icon = product.icon;
        const isReversed = index % 2 !== 0;

        return (
          <section
            key={product.id}
            id={product.id}
            className={index % 2 === 0 ? "bg-[#F5F5F3] py-20" : "bg-white py-20"}
          >
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
              <div
                className={`grid gap-12 lg:grid-cols-2 lg:gap-16 ${
                  isReversed ? "lg:[direction:rtl] lg:[&>*]:[direction:ltr]" : ""
                }`}
              >
                {/* Image */}
                <div className="relative min-h-[350px] overflow-hidden rounded-2xl lg:min-h-[450px]">
                  <Image
                    src={product.image}
                    alt={product.title}
                    fill
                    className="object-cover"
                    sizes="(max-width: 1024px) 100vw, 50vw"
                  />
                </div>

                {/* Content */}
                <div className="flex flex-col justify-center">
                  <div className="mb-4 flex items-center gap-3">
                    <div className="flex size-10 items-center justify-center rounded-lg bg-[#1A2E2E]">
                      <Icon className="size-5 text-[#C4D668]" strokeWidth={1.5} />
                    </div>
                    <h2 className="text-3xl font-light text-gray-900 lg:text-4xl">
                      {product.title}
                    </h2>
                  </div>

                  <p className="mb-6 text-sm leading-relaxed text-gray-600">
                    {product.description}
                  </p>

                  <ul className="mb-8 space-y-2.5">
                    {product.features.map((feature) => (
                      <li
                        key={feature}
                        className="flex items-start gap-2.5 text-sm text-gray-700"
                      >
                        <span className="mt-1.5 block size-1.5 shrink-0 rounded-full bg-[#C4D668]" />
                        {feature}
                      </li>
                    ))}
                  </ul>

                  <Link
                    href="/offerte"
                    className="inline-flex w-fit items-center gap-2 rounded-md bg-[#C4D668] px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
                  >
                    Configureer uw deur
                    <ArrowRight className="size-4" />
                  </Link>
                </div>
              </div>
            </div>
          </section>
        );
      })}

      {/* Maatwerk Section */}
      <section id="maatwerk" className="bg-[#1A2E2E] py-20">
        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
          <div className="mx-auto max-w-2xl">
            <div className="mb-4 flex items-center justify-center gap-2">
              <div className="h-4 w-1 rounded-full bg-[#C4D668]" />
              <span className="text-xs font-medium tracking-widest uppercase text-[#C4D668]">
                Maatwerk
              </span>
            </div>
            <h2 className="mb-5 text-3xl font-bold text-white lg:text-4xl">
              Iets speciaals in gedachten?
            </h2>
            <p className="mb-8 text-sm leading-relaxed text-gray-400">
              Heeft u een uniek ontwerp in gedachten dat niet in onze standaard
              configurator past? Geen probleem. Neem contact met ons op en wij
              bekijken samen wat er mogelijk is. Van bijzondere glasverdelingen
              tot speciale afwerkingen: als het in staal kan, maken wij het.
            </p>
            <div className="flex flex-col items-center justify-center gap-3 sm:flex-row">
              <Link
                href="/offerte"
                className="inline-flex items-center gap-2 rounded-md bg-[#C4D668] px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
              >
                Start de configurator
                <ArrowRight className="size-4" />
              </Link>
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 rounded-md border border-white/20 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-white/10"
              >
                Neem contact op
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}