webklar-alt/src/components/Header.tsx

"use client";

import { Link } from "react-router-dom";
import { useState } from "react";
import {
  Navbar,
  NavBody,
  NavItems,
  MobileNav,
  NavbarLogo,
  NavbarButton,
  MobileNavHeader,
  MobileNavToggle,
  MobileNavMenu,
} from "@/components/ui/resizable-navbar";
import Logo from "@/components/Logo";
import { ThemeToggle } from "@/components/ThemeToggle";

const Header = () => {
  const navItems = [
    { name: "Über uns", link: "/ueber-uns" },
    { name: "Leistungen", link: "#services" },
    { name: "Ablauf", link: "#process" },
  ];

  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <div className="relative w-full">
      <Navbar>
        {/* Desktop Navigation */}
        <NavBody>
          <NavbarLogo href="#">
            <Logo width={30} height={30} />
            <span className="font-display text-lg font-medium tracking-tight">
              Webklar
            </span>
          </NavbarLogo>
          <NavItems items={navItems} />
          <div className="navbar-actions flex items-center gap-4">
            <ThemeToggle />
            <Link
              to="/kontakt"
              data-analytics-cta="Kontakt"
              data-analytics-location="header_desktop"
            >
              <NavbarButton
                as="span"
                variant="dark"
              >
                Kontakt
              </NavbarButton>
            </Link>
          </div>
        </NavBody>

        {/* Mobile Navigation */}
        <MobileNav>
          <MobileNavHeader>
            <NavbarLogo href="#">
              <Logo width={30} height={30} />
              <span className="font-display text-lg font-medium tracking-tight">
                Webklar
              </span>
            </NavbarLogo>
            <div className="flex items-center gap-2">
              <ThemeToggle />
              <MobileNavToggle
                isOpen={isMobileMenuOpen}
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              />
            </div>
          </MobileNavHeader>

          <MobileNavMenu
            isOpen={isMobileMenuOpen}
            onClose={() => setIsMobileMenuOpen(false)}
          >
            {navItems.map((item, idx) =>
              item.link.startsWith("/") ? (
                <Link
                  key={`mobile-link-${idx}`}
                  to={item.link}
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="relative text-neutral-600 dark:text-neutral-300"
                >
                  <span className="block font-medium uppercase tracking-wider">
                    {item.name}
                  </span>
                </Link>
              ) : (
                <a
                  key={`mobile-link-${idx}`}
                  href={item.link}
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="relative text-neutral-600 dark:text-neutral-300"
                >
                  <span className="block font-medium uppercase tracking-wider">
                    {item.name}
                  </span>
                </a>
              )
            )}
            <div className="flex w-full flex-col gap-4">
              <Link
                to="/kontakt"
                data-analytics-cta="Kontakt"
                data-analytics-location="header_mobile"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                <NavbarButton
                  as="span"
                  variant="dark"
                  className="block w-full text-center"
                >
                  Kontakt
                </NavbarButton>
              </Link>
            </div>
          </MobileNavMenu>
        </MobileNav>
      </Navbar>
    </div>
  );
};

export default Header;