@php($simple = $service->simple_explanation)

<section class="simple-explanation section" id="einfach-erklaert" aria-labelledby="simple-title">
    <div class="section-shell">
        <header class="simple-heading" data-reveal>
            <div>
                <p class="eyebrow eyebrow-dark"><span></span> Einfach erklärt</p>
                <h2 id="simple-title">{{ $simple['title'] }}</h2>
            </div>
            <p>{{ $simple['intro'] }}</p>
        </header>

        <article class="simple-answer" id="kurz-gesagt" data-reveal>
            <span aria-hidden="true">01</span>
            <div>
                <p>Kurz gesagt</p>
                <h3>{{ data_get($simple, 'analogy.title') }}</h3>
                <p>{{ data_get($simple, 'analogy.text') }}</p>
            </div>
            <svg viewBox="0 0 120 120" aria-hidden="true"><circle cx="60" cy="60" r="43"/><circle cx="60" cy="60" r="23"/><path d="M60 8v16M60 96v16M8 60h16M96 60h16M23 23l12 12M85 85l12 12M97 23 85 35M35 85 23 97"/></svg>
        </article>

        @if(!empty($simple['components']))
            <div class="simple-block simple-components" id="bestandteile" data-reveal>
                <header><span>02</span><div><small>Der komplette Überblick</small><h3>Was gehört alles dazu?</h3></div></header>
                <div>
                    @foreach($simple['components'] as $component)
                        <article>
                            <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            <h4>{{ $component['title'] }}</h4>
                            <p>{{ $component['text'] }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        @endif

        @if(!empty($simple['steps']))
            <div class="simple-block simple-steps" id="ablauf" data-reveal>
                <header><span>03</span><div><small>Vom Anfang bis zur Nutzung</small><h3>Was passiert Schritt für Schritt?</h3></div></header>
                <ol>
                    @foreach($simple['steps'] as $step)
                        <li>
                            <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            <div><h4>{{ $step['title'] }}</h4><p>{{ $step['text'] }}</p></div>
                        </li>
                    @endforeach
                </ol>
            </div>
        @endif

        @if(!empty($simple['terms']))
            <div class="simple-block simple-terms" id="begriffe" data-reveal>
                <header><span>04</span><div><small>Ohne Fachchinesisch</small><h3>Technische Wörter übersetzt</h3></div></header>
                <dl>
                    @foreach($simple['terms'] as $item)
                        <div><dt>{{ $item['term'] }}</dt><dd>{{ $item['meaning'] }}</dd></div>
                    @endforeach
                </dl>
            </div>
        @endif

        <aside class="simple-takeaway" data-reveal>
            <span>Das Wichtigste</span>
            <p>{{ $simple['takeaway'] }}</p>
        </aside>
    </div>
</section>
