From 744d689a571c8079c8f9af48399f1867d7db4ef8 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 7 May 2026 11:33:21 +0200
Subject: [PATCH] feat(tiles): add 'Aktuell hier' state badge and remove
 pointer interactions for current active company tile

Former-commit-id: cca6da9ea309033366c35f85ff4f121412a8a609
---
 components/blocks/SubCompanyTiles.tsx | 43 +++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/components/blocks/SubCompanyTiles.tsx b/components/blocks/SubCompanyTiles.tsx
index 613c61c13..d3b7962ed 100644
--- a/components/blocks/SubCompanyTiles.tsx
+++ b/components/blocks/SubCompanyTiles.tsx
@@ -47,11 +47,16 @@ const itemVariants: Variants = {
   visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } },
 };
 
+import { usePathname } from 'next/navigation';
+
 export function SubCompanyTiles(props: SubCompanyTilesProps) {
   const { data } = props;
   const badge = props.badge || data?.badge;
   const title = props.title || data?.title;
   const rawCompanies = props.companies || data?.companies;
+  const pathname = usePathname();
+  const isDe = pathname?.startsWith('/de') ?? true;
+  
   const companiesData = rawCompanies?.map((c: any) => ({
     title: c.title,
     url: c.url,
@@ -77,8 +82,9 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
           viewport={{ once: true, margin: "-50px" }}
         >
           {companiesData.map((company: any, index: number) => {
-            const CardWrapper = company.url ? 'a' : 'div';
-            const wrapperProps = company.url ? { href: company.url, target: "_blank", rel: "noopener noreferrer" } : {};
+            const isCurrent = !company.url;
+            const CardWrapper = isCurrent ? 'div' : 'a';
+            const wrapperProps = !isCurrent ? { href: company.url, target: "_blank", rel: "noopener noreferrer" } : {};
             
             // Generate logo representation based on title
             const isEtib = company.title.includes('E-TIB');
@@ -93,20 +99,47 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
               >
                 <CardWrapper 
                   {...wrapperProps}
-                  className="group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl border border-white/5 transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 bg-neutral-dark cursor-pointer block w-full h-full sm:rounded-xl"
+                  className={`group relative overflow-hidden aspect-[4/3] flex flex-col justify-center items-center shadow-xl transition-all duration-500 bg-neutral-dark block w-full h-full sm:rounded-xl ${
+                    isCurrent 
+                      ? 'border-2 border-primary shadow-[0_0_30px_rgba(17,124,97,0.15)] cursor-default' 
+                      : 'border border-white/5 hover:shadow-2xl hover:-translate-y-1 hover:border-white/10 cursor-pointer'
+                  }`}
                 >
                   <div className="absolute inset-0 bg-[#0a192f] z-0">
                     <Image
                       src={company.backgroundImage}
                       alt="Background"
                       fill
-                      className="object-cover opacity-40 group-hover:opacity-30 group-hover:scale-110 transition-all duration-1000 ease-out grayscale-[50%] group-hover:grayscale-0"
+                      className={`object-cover transition-all duration-1000 ease-out ${
+                        isCurrent 
+                          ? 'opacity-30 grayscale-0 scale-105' 
+                          : 'opacity-40 grayscale-[50%] group-hover:opacity-30 group-hover:grayscale-0 group-hover:scale-110'
+                      }`}
                       sizes="(max-width: 768px) 100vw, 33vw"
                     />
                   </div>
                   
                   {/* Heavy dark gradient overlay to make logos pop */}
-                  <div className="absolute inset-0 bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/60 to-[#0a192f]/40 z-0 group-hover:from-primary/90 group-hover:to-primary/20 transition-colors duration-700 mix-blend-multiply" />
+                  <div className={`absolute inset-0 z-0 transition-colors duration-700 mix-blend-multiply ${
+                    isCurrent 
+                      ? 'bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/60 to-[#0a192f]/40' 
+                      : 'bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/60 to-[#0a192f]/40 group-hover:from-primary/90 group-hover:to-primary/20'
+                  }`} />
+                  
+                  {/* Current Site Indicator Badge */}
+                  {isCurrent && (
+                    <div className="absolute top-6 right-6 z-20">
+                      <div className="flex items-center space-x-2 bg-neutral-dark/80 backdrop-blur-md border border-primary/40 px-3 py-1.5 rounded-full shadow-lg">
+                        <span className="relative flex h-2 w-2">
+                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                          <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                        </span>
+                        <span className="text-[10px] font-bold uppercase tracking-widest text-primary/90">
+                          {isDe ? 'Aktuell hier' : 'You are here'}
+                        </span>
+                      </div>
+                    </div>
+                  )}
                   
                   <div className="relative z-10 flex flex-col items-center justify-center w-full h-full p-8 transform group-hover:scale-105 transition-transform duration-500">