"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LocationsPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Dienstleistungen", id: "services" },
    { name: "Standorte", id: "locations" },
    { name: "Über uns", id: "about" },
    { name: "Kontakt", id: "contact" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Dienstleistungen", href: "/services" },
        { label: "Standorte", href: "/locations" },
      ],
    },
    {
      items: [
        { label: "Über uns", href: "/about" },
        { label: "Kontakt", href: "/contact" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      items: [
        { label: "Telefon: 079 451 76 06", href: "tel:+41794517606" },
        { label: "E-Mail: info@24h-schlüsseldienst.ch", href: "mailto:info@24h-schlüsseldienst.ch" },
        { label: "24/7 Notfall-Hotline", href: "tel:+41794517606" },
      ],
    },
    {
      items: [
        { label: "Datenschutz", href: "#" },
        { label: "Impressum", href: "#" },
        { label: "AGBs", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="24h Schlüsseldienst"
          button={{ text: "079 451 76 06", href: "tel:+41794517606" }}
          buttonClassName="bg-primary-cta text-primary-cta-text font-bold"
        />
      </div>

      <div id="locations" data-section="locations">
        <MetricCardSeven
          title="Service-Gebiete Deutschschweiz"
          description="Wir sind in folgenden Regionen mit ~30 Minuten Ankunftszeit verfügbar"
          tag="Standorte"
          metrics={[
            { id: "1", value: "Zürich", title: "Zentrum & Umgebung", items: ["Wohngebiete abgedeckt", "Geschäfte & Büros", "Notöffnung 24h verfügbar"] },
            { id: "2", value: "Bern/Solothurn", title: "Westregion", items: ["Agglomeration Bern", "Solothurn & Olten", "Schnelle Reaktion"] },
            { id: "3", value: "Luzern/Zug", title: "Zentralschweiz", items: ["Luzern & Umland", "Zug & Umgebung", "Rund um die Uhr"] },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="regional-info" data-section="regional-info">
        <MetricCardSeven
          title="Weitere Service-Regionen"
          description="Auch Basel, Winterthur und St. Gallen sind Teil unseres Einsatzgebietes"
          tag="Reichweite"
          metrics={[
            { id: "1", value: "Basel", title: "Nordwestschweiz", items: ["Stadt Basel", "Basler Randregion", "Notöffnungen täglich"] },
            { id: "2", value: "Winterthur", title: "Ostregion Zürich", items: ["Winterthur & Umland", "Tösstal", "Express-Service"] },
            { id: "3", value: "St. Gallen", title: "Ostschweiz", items: ["St. Gallen Stadt", "Appenzell", "Zuverlässiger Partner"] },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="24h Schlüsseldienst"
        />
      </div>
    </ThemeProvider>
  );
}