@extends('web.layouts.web-master')

@section('title', 'Einrichtungsnetzwerk - B2in Interior')

@section('content')
    <div class="bg-background">
        <livewire:web.components.ui.header />

        <main class="variante-glass-flow">
            <livewire:web.components.sections.partner-hero section="interior_hero" />
            <livewire:web.components.sections.founder-bar />

            {{-- Local-for-Local Konzept --}}
            <livewire:web.components.sections.content-section section="interior_concept" layout="left" />

            {{-- Zwei Marken --}}
            @php
                $brands = cms_theme_section('interior_brands');
                $zielgruppen = cms_theme_section('interior_zielgruppen');
                $process = cms_theme_section('interior_process');
            @endphp

            @if (!empty($brands))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $brands['title'] ?? '' !!}</h2>
                            @if (isset($brands['subtitle']))
                                <p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
                                    {{ $brands['subtitle'] }}
                                </p>
                            @endif
                        </div>

                        <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto slide-up delay-400">
                            @foreach ($brands['brands'] ?? [] as $brand)
                                <div class="card-elevated rounded-2xl overflow-hidden">
                                    <div class="p-8 lg:p-10">
                                        @if (isset($brand['logo']))
                                            <div class="mb-6">
                                                <img src="{{ asset($brand['logo']) }}"
                                                    alt="{{ $brand['name'] }}"
                                                    class="{{ $brand['logo_width'] ?? 'w-32' }}" />
                                            </div>
                                        @endif
                                        <p class="text-xs font-semibold uppercase tracking-wider text-secondary mb-3">
                                            {{ $brand['tagline'] ?? '' }}
                                        </p>
                                        <p class="text-muted-foreground leading-relaxed">
                                            {{ $brand['description'] ?? '' }}
                                        </p>
                                        @if (isset($brand['audience']))
                                            <p class="text-sm font-medium text-foreground mt-4">
                                                {{ $brand['audience'] }}
                                            </p>
                                        @endif
                                        @if (isset($brand['link']))
                                            <div class="mt-6">
                                                <a href="{{ $brand['link'] }}"
                                                    target="_blank" rel="noopener"
                                                    class="inline-flex items-center gap-2 text-sm font-medium text-secondary hover:text-secondary/80 transition-colors">
                                                    {{ $brand['name'] }} entdecken
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                                    </svg>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            {{-- Für wen? Zielgruppen --}}
            @if (!empty($zielgruppen))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $zielgruppen['title'] ?? '' !!}</h2>
                        </div>

                        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto slide-up delay-400">
                            @foreach ($zielgruppen['groups'] ?? [] as $group)
                                <div class="text-center p-6">
                                    <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-secondary/10 text-secondary mb-5">
                                        <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                            @switch($group['icon'] ?? '')
                                                @case('home')
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                                                @break
                                                @case('building-office-2')
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
                                                @break
                                                @case('clipboard-document-check')
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
                                                @break
                                            @endswitch
                                        </svg>
                                    </div>
                                    <h3 class="text-lg font-semibold text-foreground mb-3">{{ $group['title'] ?? '' }}</h3>
                                    <p class="text-sm text-muted-foreground leading-relaxed">{{ $group['description'] ?? '' }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            {{-- So funktioniert es - Prozess --}}
            @if (!empty($process))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $process['title'] ?? '' !!}</h2>
                        </div>

                        <div class="max-w-3xl mx-auto slide-up delay-400">
                            <div class="space-y-8">
                                @foreach ($process['steps'] ?? [] as $step)
                                    <div class="flex gap-6 items-start">
                                        <div class="shrink-0 w-14 h-14 rounded-full bg-secondary text-white flex items-center justify-center text-lg font-bold">
                                            {{ $step['number'] ?? '' }}
                                        </div>
                                        <div class="pt-2">
                                            <h3 class="text-lg font-semibold text-foreground mb-2">{{ $step['title'] ?? '' }}</h3>
                                            <p class="text-muted-foreground leading-relaxed">{{ $step['description'] ?? '' }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- Trust / Marcel Scheibe --}}
            <livewire:web.components.sections.content-section section="interior_trust" layout="right" />

            {{-- CTA --}}
            <livewire:web.components.sections.c-t-a-section />
        </main>

        <livewire:web.components.ui.footer />
    </div>
@endsection

@push('styles')
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
@endpush

@push('scripts')
    {{-- Alpine.js wird zentral im Layout geladen --}}
@endpush