import type { Metadata } from "next";
import Link from "next/link";
import { Mail, Phone, MapPin, Clock, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
  title: "Contact | PROINN Stalen Deuren",
  description:
    "Neem contact op met Proinn voor vragen over stalen deuren, offertes of advies. Bel 0165 311 490 of mail info@proinn.nl.",
};

const contactMethods = [
  {
    icon: Phone,
    title: "Bel ons",
    value: "0165 311 490",
    href: "tel:0165311490",
    description: "Ma t/m vr: 08:00 - 17:00",
  },
  {
    icon: Mail,
    title: "E-mail",
    value: "info@proinn.nl",
    href: "mailto:info@proinn.nl",
    description: "Reactie binnen 24 uur",
  },
  {
    icon: MapPin,
    title: "Bezoekadres",
    value: "Schotsbossenstraat 2",
    href: "https://maps.google.com/?q=Schotsbossenstraat+2+4705AG+Roosendaal",
    description: "4705AG Roosendaal",
  },
  {
    icon: Clock,
    title: "Openingstijden",
    value: "Ma t/m vr: 08:00 - 17:00",
    href: undefined,
    description: "Weekend op afspraak",
  },
];

const faqItems = [
  {
    question: "Hoe lang duurt de levertijd?",
    answer:
      "De gemiddelde levertijd bedraagt 4 tot 6 weken na goedkeuring van de offerte. Dit kan vari\u00ebren afhankelijk van de complexiteit van het project en de drukte in onze werkplaats.",
  },
  {
    question: "Verzorgen jullie ook de montage?",
    answer:
      "Ja, wij bieden een complete service van ontwerp tot montage. Onze eigen monteurs installeren uw deur vakkundig op locatie. U kunt er ook voor kiezen de deur zelf te (laten) plaatsen.",
  },
  {
    question: "Kan ik een showroom bezoeken?",
    answer:
      "U bent van harte welkom in onze werkplaats in Roosendaal om onze producten in het echt te bekijken. Neem vooraf contact op zodat wij u de aandacht kunnen geven die u verdient.",
  },
  {
    question: "Wat kost een stalen deur?",
    answer:
      "De prijs is afhankelijk van de afmetingen, het type deur, de glassoort en de gewenste afwerking. Gebruik onze online configurator voor een directe indicatieprijs, of vraag een offerte op maat aan.",
  },
  {
    question: "Welke kleuren zijn beschikbaar?",
    answer:
      "Onze standaard kleuren zijn Zwart (RAL 9005), Antraciet, Brons, Goud en Beige. Daarnaast kunt u kiezen uit het volledige RAL-kleurenpalet voor een kleur die precies aansluit bij uw interieur.",
  },
  {
    question: "Leveren jullie door heel Nederland?",
    answer:
      "Ja, wij leveren en monteren door heel Nederland en Belgi\u00eb. Onze monteurs komen bij u op locatie voor een perfecte installatie.",
  },
];

export default function ContactPage() {
  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]">
                Contact
              </span>
            </div>
            <h1 className="text-4xl font-light leading-tight text-white sm:text-5xl">
              Neem <span className="font-semibold">contact</span> op
            </h1>
            <p className="mt-5 max-w-xl text-base leading-relaxed text-gray-400">
              Heeft u vragen over onze stalen deuren, wilt u advies of bent u
              klaar om een offerte aan te vragen? Wij staan voor u klaar.
            </p>
          </div>
        </div>
      </section>

      {/* Contact Methods */}
      <section className="bg-white py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {contactMethods.map((method) => {
              const Icon = method.icon;
              const content = (
                <>
                  <div className="mb-4 flex size-12 items-center justify-center rounded-xl bg-[#1A2E2E] transition-colors group-hover:bg-[#C4D668]">
                    <Icon
                      className="size-5 text-[#C4D668] transition-colors group-hover:text-black"
                      strokeWidth={1.5}
                    />
                  </div>
                  <p className="text-xs font-medium uppercase tracking-wider text-gray-400 transition-colors group-hover:text-gray-400">
                    {method.title}
                  </p>
                  <p className="mt-1 text-lg font-semibold text-gray-900 transition-colors group-hover:text-white">
                    {method.value}
                  </p>
                  <p className="mt-1 text-sm text-gray-500 transition-colors group-hover:text-gray-400">
                    {method.description}
                  </p>
                </>
              );

              const className =
                "group rounded-2xl bg-[#F5F5F3] p-8 transition-colors hover:bg-[#1A2E2E]";

              if (method.href) {
                return (
                  <a
                    key={method.title}
                    href={method.href}
                    target={
                      method.href.startsWith("http") ? "_blank" : undefined
                    }
                    rel={
                      method.href.startsWith("http")
                        ? "noopener noreferrer"
                        : undefined
                    }
                    className={className}
                  >
                    {content}
                  </a>
                );
              }

              return (
                <div key={method.title} className={className}>
                  {content}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="bg-[#F5F5F3] py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl">
            <div className="mb-10 text-center">
              <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-gray-500">
                  Veelgestelde vragen
                </span>
              </div>
              <h2 className="text-3xl font-light text-gray-900 lg:text-4xl">
                Alles wat u wilt <span className="font-semibold">weten</span>
              </h2>
            </div>
            <div className="space-y-4">
              {faqItems.map((item) => (
                <details
                  key={item.question}
                  className="group rounded-xl bg-white shadow-sm"
                >
                  <summary className="flex cursor-pointer items-center justify-between px-6 py-5 text-sm font-semibold text-gray-900 [&::-webkit-details-marker]:hidden">
                    {item.question}
                    <span className="ml-4 flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs text-gray-500 transition-transform group-open:rotate-45">
                      +
                    </span>
                  </summary>
                  <div className="px-6 pb-5">
                    <p className="text-sm leading-relaxed text-gray-600">
                      {item.answer}
                    </p>
                  </div>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-[#1A2E2E] py-16">
        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
          <h2 className="mb-4 text-3xl font-bold text-white">
            Liever direct aan de slag?
          </h2>
          <p className="mx-auto mb-8 max-w-md text-sm text-gray-400">
            Ontwerp uw stalen deur stap voor stap in onze online configurator
            en ontvang direct een indicatieprijs.
          </p>
          <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>
        </div>
      </section>
    </>
  );
}