import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { ArrowRight, Factory, Ruler, Shield, Users } from "lucide-react";

export const metadata: Metadata = {
  title: "Over Ons | PROINN Stalen Deuren",
  description:
    "Leer meer over Proinn. Handgemaakte stalen deuren, op maat geleverd en geinstalleerd vanuit onze werkplaats in Roosendaal.",
};

const values = [
  {
    icon: Factory,
    title: "Eigen productie",
    description:
      "Alle deuren worden volledig in onze eigen werkplaats in Roosendaal geproduceerd. Zo houden wij controle over ieder detail.",
  },
  {
    icon: Ruler,
    title: "100% maatwerk",
    description:
      "Geen deur is hetzelfde. Wij produceren uitsluitend op maat, afgestemd op uw specifieke wensen en afmetingen.",
  },
  {
    icon: Shield,
    title: "Kwaliteitsgarantie",
    description:
      "Wij werken met hoogwaardige staalprofielen en duurzame poedercoating voor een resultaat dat jarenlang meegaat.",
  },
  {
    icon: Users,
    title: "Persoonlijk advies",
    description:
      "Van het eerste contact tot de oplevering: u heeft altijd een vast aanspreekpunt dat met u meedenkt.",
  },
];

const stats = [
  { value: "500+", label: "Deuren geleverd" },
  { value: "100%", label: "Op maat gemaakt" },
  { value: "4.8/5", label: "Klantwaardering" },
  { value: "Roosendaal", label: "Eigen werkplaats" },
];

export default function OverOnsPage() {
  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]">
                Over Proinn
              </span>
            </div>
            <h1 className="text-4xl font-light leading-tight text-white sm:text-5xl">
              Vakmanschap in{" "}
              <span className="font-semibold">staal</span>
            </h1>
            <p className="mt-5 max-w-xl text-base leading-relaxed text-gray-400">
              Proinn is gespecialiseerd in het ontwerpen en produceren van
              handgemaakte stalen deuren, kozijnen en wanden. Vanuit onze
              werkplaats in Roosendaal combineren wij ambachtelijke technieken
              met moderne technologie.
            </p>
          </div>
        </div>
      </section>

      {/* Stats */}
      <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-2 divide-x divide-gray-200 lg:grid-cols-4">
            {stats.map((stat) => (
              <div key={stat.label} className="px-6 py-10 text-center">
                <p className="text-3xl font-bold text-gray-900">{stat.value}</p>
                <p className="mt-1 text-sm text-gray-500">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Story */}
      <section className="bg-[#F5F5F3] py-20">
        <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
          <div className="relative min-h-[400px] overflow-hidden rounded-2xl lg:min-h-[500px]">
            <Image
              src="/images/proinn-spuiten.png"
              alt="Proinn werkplaats - poedercoating"
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 50vw"
            />
          </div>
          <div className="flex flex-col justify-center">
            <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-gray-500">
                Ons verhaal
              </span>
            </div>
            <h2 className="mb-5 text-3xl font-light leading-tight text-gray-900 lg:text-4xl">
              Van ontwerp tot
              <br />
              <span className="font-semibold">montage op locatie</span>
            </h2>
            <p className="mb-4 text-sm leading-relaxed text-gray-600">
              Bij Proinn geloven wij dat een stalen deur meer is dan een
              functioneel element. Het is een statement dat de sfeer van uw
              ruimte bepaalt. Daarom besteden wij aan ieder project dezelfde
              aandacht en toewijding, of het nu gaat om een enkele binnendeur
              of een complete kantoorindeling.
            </p>
            <p className="mb-4 text-sm leading-relaxed text-gray-600">
              Ons team van vakmensen beheerst het volledige traject: van het
              eerste adviesgesprek en het technisch ontwerp, tot de productie
              in onze eigen werkplaats en de zorgvuldige montage bij u op
              locatie.
            </p>
            <p className="text-sm leading-relaxed text-gray-600">
              Alle deuren worden geproduceerd met hoogwaardige staalprofielen en
              afgewerkt met een duurzame poedercoating in de kleur van uw keuze.
              Het resultaat: een product dat niet alleen mooi oogt, maar ook
              jarenlang meegaat.
            </p>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-12 max-w-xl">
            <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-gray-500">
                Waar wij voor staan
              </span>
            </div>
            <h2 className="text-3xl font-light text-gray-900 lg:text-4xl">
              Kwaliteit in elk <span className="font-semibold">detail</span>
            </h2>
          </div>
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {values.map((item) => {
              const Icon = item.icon;
              return (
                <div key={item.title} className="rounded-2xl bg-[#F5F5F3] p-8">
                  <div className="mb-4 flex size-12 items-center justify-center rounded-xl bg-[#1A2E2E]">
                    <Icon className="size-6 text-[#C4D668]" strokeWidth={1.5} />
                  </div>
                  <h3 className="mb-2 text-base font-semibold text-gray-900">
                    {item.title}
                  </h3>
                  <p className="text-sm leading-relaxed text-gray-500">
                    {item.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Team Image + CTA */}
      <section className="bg-[#1A2E2E] py-20">
        <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
          <div className="flex flex-col justify-center">
            <h2 className="mb-5 text-3xl font-bold leading-tight text-white lg:text-4xl">
              Samen uw ideale
              <br />
              deur realiseren?
            </h2>
            <p className="mb-8 max-w-md text-sm leading-relaxed text-gray-300">
              Neem vrijblijvend contact met ons op of ontwerp direct uw eigen
              stalen deur via onze online configurator. Wij denken graag met
              u mee.
            </p>
            <div className="flex flex-wrap gap-3">
              <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]"
              >
                Configureer uw deur
                <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 className="relative min-h-[350px] overflow-hidden rounded-2xl lg:min-h-[420px]">
            <Image
              src="/images/image-people1.png"
              alt="Het Proinn team"
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 50vw"
            />
          </div>
        </div>
      </section>
    </>
  );
}