@extends('front.front_layouts')

@section('content')
    <!-- Breadcrumb Hero -->
    <section class="hero-section">
        <!-- Background Elements -->
        <div class="hero-bg-grid grid-background">
            <div class="hero-orb-primary"></div>
            <div class="hero-orb-secondary"></div>
        </div>

        <div class="hero-content">
            <h1 class="hero-heading animate-on-scroll">
                {{ $frontSetting->features_text ?? 'Features' }}
            </h1>

            <div class="hero-divider animate-on-scroll">
                <span class="hero-divider-thin"></span>
                <span class="hero-divider-thick"></span>
                <span class="hero-divider-thin"></span>
            </div>

            <nav class="breadcrumb-pill animate-on-scroll" aria-label="Breadcrumb">
                <svg class="w-4 h-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="m2.25 12 8.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" />
                </svg>
                <a href="{{ route('front.index') }}"
                    class="link-muted">{{ $frontSetting->home_text ?? 'Home' }}</a>
                <svg class="breadcrumb-separator" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
                <span class="text-foreground font-semibold">{{ $frontSetting->features_text ?? 'Features' }}</span>
            </nav>
        </div>
    </section>

    @if (isset($allFeatures) && count($allFeatures) > 0)
        {{-- Dynamic Features from Controller --}}
        @foreach ($allFeatures as $allFeature)
            <section class="content-section">
                <div class="max-w-7xl mx-auto">
                    <!-- Section Header -->
                    <div class="section-header animate-on-scroll">
                        <div class="section-accent">
                            <span class="section-accent-dot"></span>
                            <span class="section-accent-line-right"></span>
                            <span class="section-accent-text">{{ $allFeature->title }}</span>
                            <span class="section-accent-line-left"></span>
                            <span class="section-accent-dot"></span>
                        </div>
                        <h2 class="section-title text-anime">
                            {{ $allFeature->title }}
                        </h2>
                        <p class="section-subtitle">
                            {{ $allFeature->description }}
                        </p>
                    </div>

                    <!-- Features Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
                        @foreach ($allFeature->features as $index => $innerFeature)
                            <div class="benefit-card animate-on-scroll" style="--delay: {{ ($index % 3) * 0.1 }}s">
                                <div class="benefit-card-inner">
                                    <div class="benefit-card-body">
                                        <h3 class="text-xl font-bold text-foreground mb-3">{{ $innerFeature['title'] }}</h3>
                                        <p class="text-[15px] text-muted-foreground leading-relaxed">
                                            {{ $innerFeature['description'] }}
                                        </p>
                                    </div>
                                    @if (!empty($innerFeature['image_url']))
                                        <div class="benefit-card-img">
                                            <img src="{{ $innerFeature['image_url'] }}" alt="{{ $innerFeature['title'] }}"
                                                class="w-full h-auto rounded-lg" />
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endforeach
    @endif

    @include('front.sections.call_to_action')
@endsection