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

@section('title', 'Netzwerk & Ökosystem - B2in')
@section('meta_description', 'Das B2in-Netzwerk: Europäisches Einrichtungsnetzwerk, Fachhändler-Partnerschaften & Marken-Kooperationen – in Entwicklung.')

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

        <main class="variante-glass-flow">
            @php
                $hero = cms_theme_section('netzwerk_hero');
                $teasers = cms_theme_section('netzwerk_teasers');
                $cta = cms_theme_section('netzwerk_cta');
                $cabinet = cms_theme_section('netzwerk_cabinet_partner');
                $immobilienHint = cms_theme_section('netzwerk_immobilien_hint');
            @endphp

            {{-- Hero --}}
            @if (!empty($hero))
                <section class="section-padding flex items-center relative border-b border-border/30">
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
                        <div class="grid lg:grid-cols-2 gap-16 items-center">
                            <div class="space-y-8">
                                <div class="slide-right delay-300">
                                    <h1 class="text-hero mb-6">
                                        {!! $hero['title'] !!}
                                    </h1>
                                    <p class="text-lg text-muted-foreground max-w-md leading-relaxed">
                                        {{ $hero['subtitle'] ?? '' }}
                                    </p>
                                </div>
                            </div>

                            <div class="relative">
                                <div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
                                    <x-web-picture
                                        src="{{ theme_image_url($hero['image'] ?? '') }}"
                                        alt="{{ $hero['image_alt'] ?? 'B2in Netzwerk & Ökosystem' }}"
                                        class="w-full h-[500px] object-cover"
                                        loading="" />
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            <livewire:web.components.sections.founder-bar />

            {{-- Teaser-Kacheln --}}
            @if (!empty($teasers))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $teasers['title'] !!}</h2>
                        </div>

                        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                            @foreach ($teasers['cards'] ?? [] as $index => $card)
                                <div class="card-elevated rounded-2xl p-8 text-center slide-up delay-{{ 300 + $index * 100 }}">
                                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-secondary/10 text-secondary mb-6">
                                        @svg('heroicon-o-' . ($card['icon'] ?? 'squares-2x2'), 'w-8 h-8')
                                    </div>
                                    <h3 class="text-lg font-semibold text-foreground mb-3">{{ $card['title'] ?? '' }}</h3>
                                    <p class="text-sm text-muted-foreground leading-relaxed mb-6">{{ $card['description'] ?? '' }}</p>
                                    @if (isset($card['status']))
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-secondary/10 text-secondary">
                                            <span class="w-1.5 h-1.5 rounded-full bg-secondary animate-pulse"></span>
                                            {{ $card['status'] }}
                                        </span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif
            <livewire:web.components.sections.image-break section="netzwerk_image_break" />

            {{-- CABINET Premiumpartner --}}
            @if (! empty($cabinet))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="max-w-6xl mx-auto">
                            <div class="grid lg:grid-cols-2 gap-12 items-center">
                                <div class="space-y-6 slide-right delay-300">
                                    @if (! empty($cabinet['badge'] ?? null))
                                        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/10 text-secondary text-sm font-semibold">
                                            <span class="w-2 h-2 rounded-full bg-secondary"></span>
                                            {{ $cabinet['badge'] }}
                                        </div>
                                    @endif
                                    @if (! empty($cabinet['title'] ?? null))
                                        <h2 class="text-section-title">
                                            {!! $cabinet['title'] !!}
                                        </h2>
                                    @endif
                                    @if (! empty($cabinet['lead'] ?? null))
                                        <p class="text-lg font-medium text-foreground">{{ $cabinet['lead'] }}</p>
                                    @endif
                                    @foreach ($cabinet['paragraphs'] ?? [] as $paragraph)
                                        <p class="text-muted-foreground leading-relaxed">{{ $paragraph }}</p>
                                    @endforeach
                                </div>
                                <div class="relative slide-left delay-300">
                                    <div class="card-elevated rounded-3xl overflow-hidden p-10 flex items-center justify-center bg-white min-h-[300px]">
                                        <img
                                            src="{{ theme_image_url($cabinet['image'] ?? 'b2in/cabinet_logo.png') }}"
                                            alt="{{ $cabinet['image_alt'] ?? 'CABINET' }}"
                                            class="max-w-xs w-full object-contain"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- Immobilien-Vorteil Hinweis --}}
            @if (! empty($immobilienHint))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto text-center slide-up delay-300">
                            <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-secondary/10 text-secondary mb-6">
                                @svg('heroicon-o-building-office-2', 'w-7 h-7')
                            </div>
                            @if (! empty($immobilienHint['title'] ?? null))
                                <h2 class="text-section-title">{!! $immobilienHint['title'] !!}</h2>
                            @endif
                            @if (! empty($immobilienHint['description'] ?? null))
                                <p class="text-large text-muted-foreground mt-4 leading-relaxed">
                                    {{ $immobilienHint['description'] }}
                                </p>
                            @endif
                            @if (! empty($immobilienHint['button_text'] ?? null))
                                <div class="mt-8">
                                    <a href="{{ url($immobilienHint['button_link'] ?? '/immobilien') }}" class="btn-primary-accent px-8 py-4 text-lg">
                                        {{ $immobilienHint['button_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- CTA --}}
            @if (!empty($cta))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto text-center slide-up delay-300">
                            <h2 class="text-section-title">{!! $cta['title'] !!}</h2>
                            <p class="text-large text-muted-foreground mt-4 leading-relaxed">
                                {{ $cta['text'] ?? '' }}
                            </p>
                            @if (isset($cta['button_text']))
                                <div class="mt-8">
                                    <a href="{{ $cta['button_link'] ?? '/contact' }}"
                                        class="btn-primary-accent px-8 py-4 text-lg">
                                        {{ $cta['button_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif
        </main>

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

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