@extends('layout')

@section('title', 'SoulSize — Mode für alle Größen')
@section('description', 'Dein Ratgeber für Plus-Size Mode. Authentische Beratung, ehrliche Empfehlungen und stilvolle Inspiration für große Größen.')

@section('content')

    {{-- Hero Section --}}
    <section class="hero-section" aria-label="Hero">

        <div class="hero-bg-base" aria-hidden="true"></div>
        <div class="hero-bg-glow" aria-hidden="true"></div>
        <div class="hero-bg-vignette" aria-hidden="true"></div>

        <div class="hero-inner">

            <div class="hero-text-col">

                <p class="hero-eyebrow">
                    <span class="material-symbols-outlined hero-eyebrow-icon" aria-hidden="true">checkroom</span>
                    Plus-Size Mode Ratgeber
                </p>

                <h1 class="hero-headline">
                    Mode, die<br>
                    <span class="hero-headline-accent">zu dir</span><br>
                    passt.
                </h1>

                <p class="hero-body">
                    Ehrliche Beratung, echte Empfehlungen und stilvolle Inspiration für große Größen.
                </p>

                <div class="hero-cta-row">
                    <a href="#kategorien" class="hero-btn-primary">
                        Ratgeber entdecken
                        <span class="material-symbols-outlined hero-btn-icon" aria-hidden="true">arrow_forward</span>
                    </a>
                </div>

            </div>

            <div class="hero-visual-col" aria-hidden="true">
                <div class="hero-visual-frame">
                    <div class="hero-visual-inner">
                        <div class="hero-visual-layer-1"></div>
                        <div class="hero-visual-layer-2"></div>
                        <div class="hero-visual-icon-wrap">
                            <span class="material-symbols-outlined hero-visual-icon">checkroom</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="hero-scroll-hint" aria-hidden="true">
            <span class="material-symbols-outlined hero-scroll-icon">keyboard_arrow_down</span>
        </div>

    </section>

    {{-- Category Grid --}}
    <section id="kategorien" class="max-w-7xl mx-auto px-8 mb-32">
        @php
            $categoryIcons = [
                'damen'       => 'female',
                'herren'      => 'male',
                'sport'       => 'fitness_center',
                'schuhe'      => 'ice_skating',
                'accessoires' => 'diamond',
                'tipps'       => 'lightbulb',
            ];
        @endphp
        <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
            @foreach($categories as $category)
                <a class="group relative bg-surface-container-low rounded-xl overflow-hidden transition-all duration-300 border border-transparent hover:border-primary/40 aspect-[4/3]" href="{{ url($category->slug) }}">
                    @if($category->image)
                        <img src="{{ $category->image }}" alt="{{ $category->name }}" class="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-50 transition-opacity duration-500" loading="lazy">
                    @endif
                    <div class="relative z-10 flex flex-col justify-end h-full p-8">
                        <div class="mb-3 text-primary">
                            <span class="material-symbols-outlined text-3xl">{{ $categoryIcons[$category->slug] ?? 'category' }}</span>
                        </div>
                        <h2 class="font-headline text-xl mb-1 text-on-surface">{{ $category->name }}</h2>
                        <p class="text-xs text-on-surface-variant leading-relaxed">{{ $category->description }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </section>

    {{-- Featured Articles --}}
    <section class="bg-surface-container-lowest py-32">
        <div class="max-w-7xl mx-auto px-8">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                <div>
                    <span class="text-primary font-headline text-sm tracking-[0.2em] uppercase mb-4 block">Magazin</span>
                    <h2 class="text-4xl md:text-5xl font-headline font-bold text-on-surface">Die neuesten Trends & Guides</h2>
                </div>
            </div>

            @if(isset($articles) && $articles->count())
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach($articles->take(6) as $article)
                        <article class="group bg-surface-container rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2">
                            <div class="h-64 overflow-hidden bg-gradient-to-br from-surface-container-high to-surface-container-low">
                                @if($article->image)
                                    <img src="{{ $article->image }}" alt="{{ $article->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" loading="lazy">
                                @else
                                    <div class="flex items-center justify-center h-full">
                                        <span class="material-symbols-outlined text-6xl text-outline/30">article</span>
                                    </div>
                                @endif
                            </div>
                            <div class="p-8">
                                <div class="flex items-center gap-4 mb-4">
                                    @if($article->category)
                                        <span class="text-[10px] uppercase tracking-widest bg-surface-container-high px-3 py-1 rounded-full text-primary">{{ $article->category->name }}</span>
                                    @endif
                                    <span class="text-[10px] text-on-surface-variant uppercase tracking-widest">{{ $article->published_at?->format('d. M Y') }}</span>
                                </div>
                                @php
                                    $homeCat = $article->category;
                                    $homeUrl = $homeCat
                                        ? (($homeCat->parent?->parent?->slug ? $homeCat->parent->parent->slug . '/' : '') . ($homeCat->parent?->slug ? $homeCat->parent->slug . '/' : '') . $homeCat->slug . '/' . $article->slug)
                                        : $article->slug;
                                @endphp
                                <a href="{{ url($homeUrl) }}" class="no-underline">
                                    <h3 class="font-headline text-2xl mb-4 text-on-surface group-hover:text-primary transition-colors">{{ $article->title }}</h3>
                                </a>
                                <p class="text-on-surface-variant text-sm line-clamp-2 leading-relaxed">{{ $article->excerpt }}</p>
                            </div>
                        </article>
                    @endforeach
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @php
                        $placeholders = [
                            ['tag' => 'Styling', 'title' => 'Der perfekte Mantel für Herbst/Winter', 'text' => 'Worauf du beim Kauf achten musst, um deine Figur optimal in Szene zu setzen.'],
                            ['tag' => 'Shopping', 'title' => 'Plus-Size Denim Guide 2024', 'text' => 'Von Wide Leg bis Straight Cut: Die besten Jeans-Marken, die wirklich passen.'],
                            ['tag' => 'Office', 'title' => 'Power Dressing: Souverän im Job', 'text' => 'Wie du mit der richtigen Business-Mode Kompetenz und Style ausstrahlst.'],
                        ];
                    @endphp
                    @foreach($placeholders as $ph)
                        <article class="group bg-surface-container rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2">
                            <div class="h-64 overflow-hidden bg-gradient-to-br from-surface-container-high to-surface-container-low flex items-center justify-center">
                                <span class="material-symbols-outlined text-6xl text-outline/30">article</span>
                            </div>
                            <div class="p-8">
                                <div class="flex items-center gap-4 mb-4">
                                    <span class="text-[10px] uppercase tracking-widest bg-surface-container-high px-3 py-1 rounded-full text-primary">{{ $ph['tag'] }}</span>
                                </div>
                                <h3 class="font-headline text-2xl mb-4 text-on-surface group-hover:text-primary transition-colors">{{ $ph['title'] }}</h3>
                                <p class="text-on-surface-variant text-sm line-clamp-2 leading-relaxed">{{ $ph['text'] }}</p>
                            </div>
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    {{-- Partner Section --}}
    <section class="py-24 border-y border-surface-container-low">
        <div class="max-w-7xl mx-auto px-8">
            <h2 class="text-center font-headline text-sm tracking-[0.3em] uppercase text-on-surface-variant mb-12">Unsere Partner</h2>
            <div class="flex flex-wrap justify-center items-center gap-12 md:gap-24 opacity-40 grayscale hover:grayscale-0 hover:opacity-70 transition-all duration-500">
                <span class="font-bold text-2xl tracking-tighter text-on-surface">Zalando</span>
                <span class="font-bold text-2xl tracking-tighter text-on-surface">bonprix</span>
                <span class="font-bold text-2xl tracking-tighter text-on-surface">ASOS CURVE</span>
                <span class="font-bold text-2xl tracking-tighter text-on-surface">Ulla Popken</span>
                <span class="font-bold text-2xl tracking-tighter text-on-surface">navabi</span>
            </div>
        </div>
    </section>

@endsection