---
import Layout from '../../layouts/Layout.astro';
import Navbar from '../../components/Navbar.astro';
import Footer from '../../components/Footer.astro';
import { FaArrowLeft, FaCheck, FaPhoneAlt, FaEnvelope, FaDesktop } from 'react-icons/fa';

export function getStaticPaths() {
  const templates = [
    // --- GRUPPE 1: INDUSTRIE-BRUTALISMUS ---
    {
      id: "01",
      name: "Der Handwerker-Klassiker",
      style: "Einfach & Bodenständig",
      group: "Brutalismus",
      layoutType: "Typ B", // Split-Screen & Monolith
      colorScheme: "Warm & Earthy (Sand & Terrakotta)",
      bgClass: "bg-[#F4F1EA] text-[#2C1A11] tactile-noise",
      cardClass: "bg-[#FAF8F5] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none",
      accentText: "text-[#D95D39]",
      accentBg: "bg-[#D95D39] hover:bg-[#b54a2a] text-white border-2 border-black shadow-[4px_4px_0_0_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none rounded-none",
      theme: "light",
      businessType: "Schreinerei & Innenausbau"
    },
    {
      id: "07",
      name: "KFZ-Werkstatt Schnellservice",
      style: "Dynamisch & Direkt",
      group: "Brutalismus",
      layoutType: "Typ B", // Split-Screen
      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
      bgClass: "bg-[#E5E7EB] text-zinc-950",
      cardClass: "bg-white border-3 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] rounded-none",
      accentText: "text-[#FF5500]",
      accentBg: "bg-[#FF5500] text-white border-2 border-black font-bold hover:-translate-x-1 hover:-translate-y-1 active:translate-x-0 active:translate-y-0 shadow-[4px_4px_0_0_rgba(0,0,0,1)] transition-transform rounded-none",
      theme: "light",
      businessType: "Kfz-Meisterbetrieb"
    },
    {
      id: "13",
      name: "Elektro-Technik Meister",
      style: "Präzise & Leistungsstark",
      group: "Brutalismus",
      layoutType: "Typ B", // Split-Screen
      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
      bgClass: "bg-zinc-900 text-zinc-100",
      cardClass: "bg-zinc-800 border-2 border-purple-500 shadow-[6px_6px_0px_0px_rgba(139,92,246,0.3)] rounded-none relative overflow-hidden",
      accentText: "text-purple-400 font-mono",
      accentBg: "bg-purple-600 hover:bg-purple-700 text-white border border-purple-400 rounded-none shadow-[3px_3px_0_0_rgba(255,255,255,0.2)]",
      theme: "dark",
      businessType: "Elektrotechnik & Smart Home"
    },
    {
      id: "14",
      name: "Fitness- & Kraftstudio",
      style: "Stark & Motivierend",
      group: "Brutalismus",
      layoutType: "Typ A", // Asymmetrisches Bento
      colorScheme: "Deep Dark (Schwarz & Neon-Orange)",
      bgClass: "bg-[#0A0A0A] text-white",
      cardClass: "bg-zinc-950 border-2 border-[#FF5700] rounded-none shadow-[8px_8px_0_0_rgba(255,87,0,0.15)]",
      accentText: "text-[#FF5700]",
      accentBg: "bg-[#FF5700] hover:bg-[#e04c00] text-black font-black uppercase rounded-none border border-black shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]",
      theme: "dark",
      businessType: "Premium Gym & Fitness"
    },
    {
      id: "17",
      name: "Metallbau & Schlosserei",
      style: "Hart & Präzise",
      group: "Brutalismus",
      layoutType: "Typ B", // Split-Screen
      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
      bgClass: "bg-[#1A1D20] text-zinc-200 border-dashed border-slate-700",
      cardClass: "bg-zinc-900 border border-zinc-700 hover:border-emerald-500/50 shadow-md rounded-none",
      accentText: "text-emerald-400",
      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-none border border-emerald-500",
      theme: "dark",
      businessType: "Schlosserei & Konstruktion"
    },

    // --- GRUPPE 2: GLASSMORPHISMUS ---
    {
      id: "02",
      name: "Dachdecker Meister",
      style: "Elegant & Professionell",
      group: "Glassmorphismus",
      layoutType: "Typ A", // Bento
      colorScheme: "Deep Dark (Anthrazit & Gold)",
      bgClass: "bg-[#0F1115] text-white",
      cardClass: "bg-white/[0.03] backdrop-blur-xl border border-white/10 hover:border-amber-500/30 transition-all duration-300 rounded-2xl shadow-xl",
      accentText: "text-amber-400",
      accentBg: "bg-gradient-to-r from-amber-500 to-yellow-600 hover:from-amber-600 hover:to-yellow-700 text-zinc-950 font-bold rounded-lg shadow-lg shadow-amber-500/10",
      theme: "dark",
      businessType: "Dachdeckerei & Spenglerei"
    },
    {
      id: "04",
      name: "Die Kanzlei",
      style: "Seriös & Clean",
      group: "Glassmorphismus",
      layoutType: "Typ A", // Bento
      colorScheme: "Deep Dark (Anthrazit & Smaragd-Grün)",
      bgClass: "bg-[#0B0F19] text-white",
      cardClass: "bg-slate-900/50 backdrop-blur-md border border-emerald-500/20 hover:border-emerald-500/40 rounded-xl transition-all",
      accentText: "text-emerald-400 font-serif",
      accentBg: "bg-emerald-800 hover:bg-emerald-950 text-white border border-emerald-500/30 rounded px-6 py-2.5",
      theme: "dark",
      businessType: "Rechtsanwälte & Notare"
    },
    {
      id: "09",
      name: "Steuerberater Premium",
      style: "Exklusiv & Diskret",
      group: "Glassmorphismus",
      layoutType: "Typ A", // Bento
      colorScheme: "Deep Dark (Anthrazit & Gold)",
      bgClass: "bg-slate-950 text-slate-100",
      cardClass: "bg-white/[0.02] backdrop-blur-lg border border-white/[0.08] hover:border-amber-400/20 rounded-2xl",
      accentText: "text-amber-400",
      accentBg: "bg-amber-500 hover:bg-amber-600 text-zinc-950 rounded px-5 py-2.5 font-semibold",
      theme: "dark",
      businessType: "Steuerberatungskanzlei"
    },
    {
      id: "10",
      name: "Garten- & Landschaftsbau",
      style: "Frisch & Modern",
      group: "Glassmorphismus",
      layoutType: "Typ C", // Magazin-Raster
      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
      bgClass: "bg-[#F8FAF9] text-slate-800",
      cardClass: "bg-white/70 backdrop-blur-md border border-emerald-100 hover:border-emerald-300 shadow-sm rounded-2xl",
      accentText: "text-emerald-800",
      accentBg: "bg-emerald-700 hover:bg-emerald-800 text-white rounded-full px-6 py-2.5",
      theme: "light",
      businessType: "Garten- & Landschaftsbau"
    },
    {
      id: "16",
      name: "Physiotherapie Praxis",
      style: "Achtsam & Gesund",
      group: "Glassmorphismus",
      layoutType: "Typ C", // Magazin-Raster
      colorScheme: "Clean Light (Weiß & Salbei-Grün)",
      bgClass: "bg-slate-50 text-slate-800",
      cardClass: "bg-white/60 backdrop-blur-xl border border-emerald-500/10 hover:border-emerald-500/20 rounded-3xl shadow-sm",
      accentText: "text-emerald-700",
      accentBg: "bg-emerald-600 hover:bg-emerald-700 text-white rounded-full",
      theme: "light",
      businessType: "Physiotherapie & Osteopathie"
    },
    {
      id: "20",
      name: "Malerbetrieb Farbenfroh",
      style: "Kreativ & Präzise",
      group: "Glassmorphismus",
      layoutType: "Typ C", // Magazin-Raster
      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
      bgClass: "bg-[#1E1E2E] text-zinc-100",
      cardClass: "bg-slate-900/60 backdrop-blur-md border border-white/10 hover:border-orange-500/30 rounded-2xl",
      accentText: "text-orange-400",
      accentBg: "bg-orange-500 hover:bg-orange-600 text-white rounded-xl",
      theme: "dark",
      businessType: "Maler- & Lackiererbetrieb"
    },

    // --- GRUPPE 3: SAAS-MINIMALISMUS ---
    {
      id: "03",
      name: "Solar & Photovoltaik",
      style: "Tech & Zukunft",
      group: "SaaS-Minimalismus",
      layoutType: "Typ D", // Zentralisiertes Fokus-Layout
      colorScheme: "Tech-Vibrant (Grau & Neon-Orange)",
      bgClass: "bg-[#F9FAFB] text-zinc-900",
      cardClass: "bg-white border border-zinc-200 hover:border-orange-500/30 rounded-xl shadow-sm",
      accentText: "text-orange-600",
      accentBg: "bg-orange-600 hover:bg-orange-700 text-white rounded-lg px-6 py-2.5",
      theme: "light",
      businessType: "Solartechnik & Energiesysteme"
    },
    {
      id: "06",
      name: "Sanitär & Heizung",
      style: "Klar & Zuverlässig",
      group: "SaaS-Minimalismus",
      layoutType: "Typ A", // Bento
      colorScheme: "Clean Light (Weiß & Navy-Blau)",
      bgClass: "bg-white text-slate-800",
      cardClass: "bg-white border border-slate-200 hover:border-blue-500/30 shadow-sm rounded-xl",
      accentText: "text-blue-800",
      accentBg: "bg-blue-800 hover:bg-blue-900 text-white rounded px-6 py-2.5",
      theme: "light",
      businessType: "Heizung, Sanitär & Klima"
    },
    {
      id: "08",
      name: "Schreinerei Holzart",
      style: "Handwerk & Präzision",
      group: "SaaS-Minimalismus",
      layoutType: "Typ B", // Split-Screen
      colorScheme: "Warm & Earthy (Sand-Töne & dunkles Holz)",
      bgClass: "bg-[#FAF9F5] text-[#3D3A36]",
      cardClass: "bg-white border border-[#EBE6DC] hover:border-[#8B5A2B]/40 rounded-lg shadow-sm",
      accentText: "text-[#8B5A2B]",
      accentBg: "bg-[#8B5A2B] hover:bg-[#6f4823] text-white rounded px-6 py-2.5",
      theme: "light",
      businessType: "Möbel- & Bauschreinerei"
    },
    {
      id: "11",
      name: "Modern Dentists Zahnarzt",
      style: "Clean & Vertrauensvoll",
      group: "SaaS-Minimalismus",
      layoutType: "Typ D", // Zentralisiertes Fokus-Layout
      colorScheme: "Clean Light (Weiß & Navy-Blau)",
      bgClass: "bg-white text-slate-900",
      cardClass: "bg-slate-50 border border-slate-200 hover:border-blue-700/30 shadow-sm rounded-xl",
      accentText: "text-blue-700",
      accentBg: "bg-blue-700 hover:bg-blue-800 text-white rounded-lg",
      theme: "light",
      businessType: "Zahnarztpraxis"
    },
    {
      id: "15",
      name: "Architekturbüro Struktur",
      style: "Minimalismus & Ästhetik",
      group: "SaaS-Minimalismus",
      layoutType: "Typ C", // Magazin-Raster
      colorScheme: "Clean Light (Weiß & Navy-Blau)",
      bgClass: "bg-white text-zinc-900 border-blue-100", // Blueprint Grid
      cardClass: "bg-white border border-zinc-200 hover:border-zinc-900 shadow-sm rounded-none",
      accentText: "text-zinc-900",
      accentBg: "bg-zinc-950 hover:bg-zinc-800 text-white rounded-none px-6 py-2.5",
      theme: "light",
      businessType: "Architektur & Generalplanung"
    },
    {
      id: "19",
      name: "Software-Entwicklung Byte",
      style: "Sauber & Strukturiert",
      group: "SaaS-Minimalismus",
      layoutType: "Typ A", // Bento
      colorScheme: "Tech-Vibrant (Grau & Electric-Purple)",
      bgClass: "bg-[#1C1B22] text-zinc-100",
      cardClass: "bg-[#25242A] border border-zinc-800 hover:border-purple-500/30 rounded-xl",
      accentText: "text-purple-400",
      accentBg: "bg-purple-600 hover:bg-purple-700 text-white rounded-lg",
      theme: "dark",
      businessType: "Software & Webanwendungen"
    },

    // --- GRUPPE 4: NEOMORPHISMUS ---
    {
      id: "05",
      name: "Bio-Hofladen",
      style: "Rustikal & Natur",
      group: "Neomorphismus",
      layoutType: "Typ C", // Magazin-Raster
      colorScheme: "Warm & Earthy (Terrakotta & Creme)",
      bgClass: "bg-[#FDFBF7] text-[#4A3B32]",
      cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_9px_9px_16px_rgba(163,177,198,0.2),_-9px_-9px_16px_rgba(255,255,255,0.7)] rounded-3xl",
      accentText: "text-[#C2410C]",
      accentBg: "bg-[#C2410C] hover:bg-[#a13307] text-white rounded-full px-6 py-2.5",
      theme: "light",
      businessType: "Bio-Bauernhof & Hofladen"
    },
    {
      id: "12",
      name: "Bäckerei Traditionsbäcker",
      style: "Gemütlich & Lecker",
      group: "Neomorphismus",
      layoutType: "Typ B", // Split-Screen
      colorScheme: "Warm & Earthy (Terrakotta & Creme)",
      bgClass: "bg-[#FDFBF7] text-[#5C3E21]",
      cardClass: "bg-[#FDFBF7] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.6),_6px_6px_12px_rgba(163,177,198,0.15),_-6px_-6px_12px_rgba(255,255,255,0.75)] rounded-2xl",
      accentText: "text-[#B45309]",
      accentBg: "bg-[#B45309] hover:bg-[#92400E] text-white rounded-xl shadow-md",
      theme: "light",
      businessType: "Feinbäckerei & Konditorei"
    },
    {
      id: "18",
      name: "Restaurant & Gaststube",
      style: "Rustikal & Einladend",
      group: "Neomorphismus",
      layoutType: "Typ A", // Bento
      colorScheme: "Warm & Earthy (Sand-Töne & Dunkelbraun)",
      bgClass: "bg-[#FAF6F0] text-[#543D2B]",
      cardClass: "bg-[#FAF6F0] border border-transparent shadow-[inset_0_0_0_1px_rgba(255,255,255,0.5),_8px_8px_16px_rgba(0,0,0,0.03),_-8px_-8px_16px_rgba(255,255,255,0.8)] hover:shadow-inner rounded-3xl transition-all duration-300",
      accentText: "text-[#A75D5D]",
      accentBg: "bg-[#A75D5D] hover:bg-[#8B4C4C] text-white rounded-2xl",
      theme: "light",
      businessType: "Wirtshaus & Feinkost"
    }
  ];

  return templates.map((tpl) => ({
    params: { id: tpl.id },
    props: { tpl }
  }));
}

const { tpl } = Astro.props;
---

<Layout title={`${tpl.name} | Live-Vorschau`}>
  {/* Header Frame control */}
  <div class="fixed top-0 left-0 w-full bg-[#0b0f19]/90 backdrop-blur border-b border-white/10 py-3 z-50 text-white flex justify-between items-center px-4 sm:px-8">
    <div class="flex items-center gap-3">
      <a href="/templates" class="flex items-center gap-1 text-xs uppercase tracking-wider text-zinc-400 hover:text-brand-arcticBlue transition-colors font-bold">
        <FaArrowLeft class="w-3 h-3" /> Zurück
      </a>
      <span class="text-zinc-600">|</span>
      <div class="text-xs sm:text-sm font-semibold">
        Design-Vorschau: <span class="text-brand-arcticBlue">{tpl.name}</span>
      </div>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-white/10 rounded">Gruppe: {tpl.group}</span>
      <span class="text-[10px] uppercase font-mono px-2 py-0.5 bg-brand-arcticBlue/20 text-brand-arcticBlue rounded">{tpl.layoutType}</span>
    </div>
  </div>

  {/* Outer Page Shell */}
  <div class={`min-h-screen pt-20 pb-12 ${tpl.bgClass} ${tpl.name === "Architekturbüro Struktur" ? "tactile-grid-bg" : ""}`}>
    
    {/* Aurora Background glows for Glassmorphism group */}
    {tpl.group === "Glassmorphismus" && (
      <div class="absolute inset-0 pointer-events-none overflow-hidden z-0">
        <div class="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-emerald-500/5 dark:bg-amber-500/5 blur-[120px] rounded-full"></div>
        <div class="absolute top-1/2 right-1/4 w-[400px] h-[400px] bg-sky-500/5 dark:bg-blue-600/5 blur-[100px] rounded-full animate-pulse"></div>
      </div>
    )}

    {/* Blueprint line grid overlay if Architekturbüro */}
    {tpl.name === "Architekturbüro Struktur" && (
      <div class="absolute inset-0 pointer-events-none border-t border-l border-blue-500/10 z-0"></div>
    )}

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      
      {/* 1. Header component */}
      <header class={`py-6 px-8 mb-8 flex justify-between items-center rounded-2xl ${tpl.cardClass}`}>
        <div class="font-extrabold text-xl uppercase tracking-tighter">
          {tpl.businessType.split(' ')[0]} <span class={tpl.accentText}>MUSTERMANN</span>
        </div>
        <nav class="hidden md:flex gap-8 text-xs uppercase tracking-wider font-bold opacity-80">
          <span class="cursor-pointer hover:opacity-100 transition-opacity">Leistungen</span>
          <span class="cursor-pointer hover:opacity-100 transition-opacity">Über uns</span>
          <span class="cursor-pointer hover:opacity-100 transition-opacity">Referenzen</span>
        </nav>
        <button class={`px-4 py-1.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
          Kontakt
        </button>
      </header>

      {/* 2. Main content area rendering based on Layout-Type */}
      {tpl.layoutType === "Typ B" ? (
        // Split-Screen & Monolith Layout (Sticky-Anchor-Cards)
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
          {/* Sticky left monolithen */}
          <div class={`lg:col-span-2 lg:sticky lg:top-32 p-8 rounded-2xl ${tpl.cardClass}`}>
            <span class={`text-[10px] font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>Regionaler Partner</span>
            <h1 class="text-3xl sm:text-5xl font-black tracking-tight mt-2 mb-6 uppercase leading-tight">
              Echtes Handwerk.<br/>Ohne Kompromisse.
            </h1>
            <p class="opacity-80 text-xs sm:text-sm leading-relaxed mb-8">
              Wir setzen Ihre Projekte mit Leidenschaft und Fachverstand um. Seit über 25 Jahren stehen wir für absolute Zuverlässigkeit und präzise Meisterleistung in unserer Region.
            </p>
            <button class={`w-full py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
              Jetzt Termin anfragen
            </button>
          </div>
          
          {/* Scrollable right content */}
          <div class="lg:col-span-3 space-y-8">
            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
              <h3 class="text-xl font-bold mb-4">Schritt 01: Beratung vor Ort</h3>
              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
                Wir besprechen Ihr Vorhaben direkt vor Ort. Sie erhalten eine ehrliche Einschätzung sowie verständliche Optionen, die zu Ihren Wünschen passen.
              </p>
            </div>
            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
              <h3 class="text-xl font-bold mb-4">Schritt 02: Transparente Planung</h3>
              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
                Unsere Angebote enthalten alle Kosten übersichtlich aufgeschlüsselt. Keine überraschenden Nachträge oder versteckten Extrakosten.
              </p>
            </div>
            <div class={`p-8 rounded-2xl ${tpl.cardClass}`}>
              <h3 class="text-xl font-bold mb-4">Schritt 03: Saubere Ausführung</h3>
              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
                Wir arbeiten zügig, ordentlich und termingerecht. Nach Projektabschluss übergeben wir Ihren Arbeitsbereich besenrein.
              </p>
            </div>
            
            {/* Rhythmusbrecher (Text-Slam) */}
            <div class="p-12 bg-zinc-950 text-white rounded-2xl text-center border border-zinc-800">
              <h4 class="text-3xl font-extrabold mb-2 text-white">EIN WORT. EIN WERT.</h4>
              <p class="text-xs text-zinc-400 max-w-sm mx-auto">100% verlässliche Handwerksqualität direkt aus Meisterhand.</p>
            </div>
          </div>
        </div>
      ) : tpl.layoutType === "Typ A" ? (
        // Asymmetrisches Bento Grid
        <div class="space-y-8">
          <div class="max-w-xl">
            <h1 class="text-3xl sm:text-5xl font-black uppercase tracking-tight mb-4">
              Ihr Meisterbetrieb für <span class={tpl.accentText}>{tpl.businessType.split(' ')[0]}</span>
            </h1>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between min-h-[220px]`}>
              <div>
                <h3 class="text-2xl font-bold mb-2">Unsere Arbeitsweise</h3>
                <p class="opacity-75 text-xs leading-relaxed max-w-md">
                  Wir verbinden traditionelle Fertigkeiten mit moderner Technik, um langlebige und ästhetisch anspruchsvolle Lösungen für Ihren Betrieb zu garantieren.
                </p>
              </div>
              <div class="mt-4">
                <button class={`px-5 py-2.5 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
                  Konzept besprechen
                </button>
              </div>
            </div>
            
            <div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
              <div class="text-3xl font-black opacity-80">DEUTSCHER MEISTER</div>
              <p class="text-xs opacity-75 mt-2">Garantiert geprüftes Fachwissen und höchste Qualifikation.</p>
            </div>
            
            <div class={`p-8 rounded-2xl ${tpl.cardClass} flex flex-col justify-between`}>
              <div class="text-3xl font-black opacity-80">> 95%</div>
              <p class="text-xs opacity-75 mt-2">Zuverlässigkeitsquote bei Terminen und Fertigstellungen.</p>
            </div>
            
            <div class={`md:col-span-2 p-8 rounded-2xl ${tpl.cardClass}`}>
              <h3 class="text-xl font-bold mb-4">Individuelle Sonderanfertigungen</h3>
              <p class="opacity-75 text-xs sm:text-sm leading-relaxed">
                Planung nach Maß: Wir fertigen für Sie genau das an, was Sie benötigen. Jedes Stück ist ein Unikat, handwerklich präzise nach Ihren Vorstellungen gearbeitet.
              </p>
            </div>
          </div>
        </div>
      ) : tpl.layoutType === "Typ C" ? (
        // Magazin-Raster (Asymmetrischer Whitespace & Überlappung)
        <div class="space-y-16">
          <div class="grid grid-cols-1 lg:grid-cols-5 gap-12 items-center">
            <div class="lg:col-span-3">
              <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tighter leading-tight mb-8">
                Räume neu <span class={tpl.accentText}>denken.</span>
              </h1>
              <p class="opacity-80 text-sm sm:text-base leading-relaxed mb-8 max-w-lg">
                Wir konzipieren anspruchsvolle, nachhaltige Projekte, die Ästhetik und Nutzbarkeit perfekt vereinen. Ein Zusammenspiel aus Form, Material und Funktion.
              </p>
              <button class={`px-6 py-3 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
                Portfolio ansehen
              </button>
            </div>
            <div class="lg:col-span-2 -mt-6">
              <div class={`p-8 rounded-2xl ${tpl.cardClass} -translate-y-4 hover:translate-y-0 transition-transform duration-300`}>
                <h4 class="font-extrabold text-lg mb-2 uppercase">[ 01 ] Entwurf</h4>
                <p class="opacity-75 text-xs">Individuelle Konzepte & 3D-Visualisierung.</p>
              </div>
              <div class={`p-8 rounded-2xl ${tpl.cardClass} translate-x-4 hover:translate-x-0 transition-transform duration-300`}>
                <h4 class="font-extrabold text-lg mb-2 uppercase">[ 02 ] Konstruktion</h4>
                <p class="opacity-75 text-xs">Exakte Planung und statische Berechnungen.</p>
              </div>
            </div>
          </div>
          
          {/* Whitespace-Pause (Atem-Pause / pure Leerraum-Monolith) */}
          <div class="py-24 text-center border-t border-b border-current/10">
            <span class="text-xs uppercase tracking-widest opacity-40">Ausgezeichnetes Handwerk</span>
            <div class="text-4xl font-black mt-2 uppercase tracking-widest opacity-80">PRÄZISION & MEISTERSCHAFT</div>
          </div>
        </div>
      ) : (
        // Typ D: Zentralisiertes Fokus-Layout (Kalkulator-Dummy oder radialer Fokus)
        <div class="flex flex-col items-center justify-center py-12">
          <div class="text-center max-w-xl mb-12">
            <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
            <h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt anfragen.</h1>
            <p class="opacity-75 text-xs sm:text-sm">Tragen Sie Ihre Nachricht ein. Wir melden uns unverbindlich innerhalb von 24 Stunden.</p>
          </div>
          
          {/* The centralized Contact Form Block (Monolith) */}
          <div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
            {tpl.group === "Glassmorphismus" && (
              <div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
            )}
            
            <h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Kontaktformular</h3>
            <form class="space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
              <div>
                <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
                <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
              </div>
              <div>
                <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
                <input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
              </div>
              <div>
                <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihre Nachricht</label>
                <textarea rows="4" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
              </div>
              <button type="submit" class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
                Anfrage senden
              </button>
            </form>
          </div>
        </div>
      )}

      {/* 3. Features Section (Grounded Handwerker-Werte) */}
      <section class="border-t border-current/10 py-16 mt-16">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
          <div class="space-y-2">
            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 01 ] Festpreis-Garantie</div>
            <p class="opacity-70 text-xs leading-relaxed">Wir halten uns an vereinbarte Angebote. Keine überraschenden Mehrkosten oder Nachkalkulationen.</p>
          </div>
          <div class="space-y-2">
            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 02 ] Meisterqualität</div>
            <p class="opacity-70 text-xs leading-relaxed">Alle Arbeiten werden nach offiziellen Richtlinien und handwerklichen Normen sorgfältig ausgeführt.</p>
          </div>
          <div class="space-y-2">
            <div class={`font-mono font-bold text-lg ${tpl.accentText}`}>[ 03 ] Betreuung vor Ort</div>
            <p class="opacity-70 text-xs leading-relaxed">Ein Ansprechpartner für Ihr gesamtes Vorhaben. Direkt ansprechbar und verlässlich.</p>
          </div>
        </div>
      </section>

      {/* 4. Mock Contact Form */}
      <section class="border-t border-current/10 py-16">
        <div class="max-w-xl mx-auto text-center mb-8">
          <h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
          <p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p>
        </div>
        <form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
          <div>
            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
            <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
          </div>
          <div>
            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
            <input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
          </div>
          <div>
            <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Vorhaben / Nachricht</label>
            <textarea rows="3" required class="w-full bg-[#1b1b26]/0 bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
          </div>
          <button type="submit" class={`w-full py-2.5 rounded text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
            Anfrage Senden
          </button>
        </form>
      </section>

    </div>

  </div>

  <Footer />
</Layout>