feat: add pixel font for hotel name, toggle text/logo on click in site header

src/components/site-header-title.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+interface SiteHeaderTitleProps {
+  hotelName: string;
+  logo: string;
+}
+
+export function SiteHeaderTitle({ hotelName, logo }: SiteHeaderTitleProps) {
+  const [showLogo, setShowLogo] = useState(!!logo);
+
+  return (
+    <Link
+      href="/"
+      className="transition-transform duration-300 hover:scale-105 mb-8 block"
+      onClick={(e) => {
+        if (logo) {
+          e.preventDefault();
+          setShowLogo((prev) => !prev);
+        }
+      }}
+    >
+      {showLogo && logo ? (
+        <img className="drop-shadow-2xl block mx-auto" src={logo} alt={hotelName} style={{ maxHeight: 120 }} />
+      ) : (
+        <h1
+          className="text-center font-extrabold tracking-tight leading-none text-white"
+          style={{
+            fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
+            textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
+            letterSpacing: "-0.02em",
+            fontFamily: "var(--font-pixel), monospace",
+          }}
+        >
+          {hotelName} - Hotel
+        </h1>
+      )}
+    </Link>
+  );
+}

src/components/site-header.tsx

@@ -1,8 +1,8 @@
 import { getTranslations } from "next-intl/server";
-import Link from "next/link";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
+import { SiteHeaderTitle } from "@/components/site-header-title";
 
 export async function SiteHeader() {
   const t = await getTranslations("header");
@@ -44,22 +44,7 @@ export async function SiteHeader() {
 
       {/* Content */}
       <div className="relative flex flex-col items-center justify-center px-4 py-12 min-h-[18rem]">
-        <Link href="/" className="transition-transform duration-300 hover:scale-105 mb-8">
-          {logo ? (
-            <img className="drop-shadow-2xl block" src={logo} alt={hotelName ?? "Hotel"} style={{ maxHeight: 120 }} />
-          ) : (
-            <h1
-              className="text-center font-extrabold tracking-tight leading-none text-white"
-              style={{
-                fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
-                textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
-                letterSpacing: "-0.02em",
-              }}
-            >
-              {hotelName} - Hotel
-            </h1>
-          )}
-        </Link>
+        <SiteHeaderTitle hotelName={hotelName ?? "Atom"} logo={logo ?? ""} />
 
         {/* Online badge */}
         <div