@extends('layouts.app', ['locale' => $locale, 'localeSettings' => $localeSettings, 'page' => $page])
@section('content')
@php($sections = collect($translation->sections ?? [])->keyBy('key'))
@php($url = fn (string $path): string => route($path, ['locale' => $locale]))
<main>
@foreach (['traceability.hero', 'traceability.intro', 'traceability.stages', 'traceability.cultivation', 'traceability.value-creation', 'traceability.principles', 'traceability.cta'] as $key)
    @php($section = $sections->get($key)) @php($data = $section['data'] ?? [])
    @if ($key === 'traceability.hero')
      <section class="traceability-hero relative overflow-hidden text-cream">@if($asset=$media[$data['media_asset_id'] ?? null] ?? null)<img class="absolute inset-0 h-full w-full object-cover" src="{{ $asset->url() }}" alt="{{ $asset->translation($locale)?->alt_text ?? '' }}" loading="eager">@endif<div class="absolute inset-0 bg-gradient-to-r from-olive/95 via-olive/78 to-olive/48"></div><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.05]"></div><div class="container-page relative flex h-full flex-col justify-end pb-16 md:pb-20"><p class="eyebrow text-cream/70">{{ $data['eyebrow'] ?? '' }}</p><h1 class="display-hero mt-4 max-w-3xl">{{ $data['title'] ?? '' }}</h1><p class="mt-5 max-w-2xl text-base leading-relaxed text-cream/84 md:text-lg">{{ $data['summary'] ?? '' }}</p></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="traceability.hero" :key="'traceability-'.$locale.'-hero'"/>@endcan</section>
    @elseif ($key === 'traceability.intro')
      <section class="relative overflow-hidden bg-cream py-20 md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.035]"></div><div class="container-page traceability-intro-grid relative"><div class="traceability-intro-copy"><p class="eyebrow">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4">{{ $data['title'] ?? '' }}</h2><p>{{ $data['first_paragraph'] ?? '' }}</p><p>{{ $data['second_paragraph'] ?? '' }}</p></div><figure class="traceability-intro-image">@if($asset=$media[$data['media_asset_id'] ?? null] ?? null)<img src="{{ $asset->url() }}" alt="{{ $asset->translation($locale)?->alt_text ?? '' }}" loading="lazy">@endif</figure></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="{{ $key }}" :key="'traceability-'.$locale.'-intro'"/>@endcan</section>
    @elseif ($key === 'traceability.stages')
      <section class="traceability-journey bg-card py-20 md:py-28"><div class="container-page"><div class="max-w-2xl"><p class="eyebrow">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4">{{ $data['title'] ?? '' }}</h2><p class="mt-5 max-w-xl leading-relaxed text-foreground/68">{{ $data['summary'] ?? '' }}</p></div><ol class="traceability-stage-list mt-14">@foreach($data['items'] ?? [] as $index => $item)<li class="traceability-stage"><span class="traceability-stage-number">{{ str_pad((string)($index + 1), 2, '0', STR_PAD_LEFT) }}</span><div><h3>{{ $item['title'] ?? '' }}</h3><p>{{ $item['body'] ?? '' }}</p></div></li>@endforeach</ol></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="{{ $key }}" :key="'traceability-'.$locale.'-stages'"/>@endcan</section>
    @elseif (in_array($key, ['traceability.cultivation', 'traceability.value-creation'], true))
      <section class="traceability-feature {{ $key === 'traceability.value-creation' ? 'traceability-feature--reverse bg-muted' : 'traceability-feature--farm bg-cream' }}"><figure class="traceability-feature-image">@if($asset=$media[$data['media_asset_id'] ?? null] ?? null)<img src="{{ $asset->url() }}" alt="{{ $asset->translation($locale)?->alt_text ?? '' }}" loading="lazy">@endif</figure><div class="traceability-feature-copy"><p class="eyebrow">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4">{{ $data['title'] ?? '' }}</h2><p>{{ $data['first_paragraph'] ?? '' }}</p><p>{{ $data['second_paragraph'] ?? '' }}</p>@if(!empty($data['cta_label']) && !empty($data['cta_path']))<a class="traceability-text-link" href="{{ $url($data['cta_path']) }}">{{ $data['cta_label'] }} <svg class="rtl-flip" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>@endif</div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="{{ $key }}" :key="'traceability-'.$locale.'-'.$key"/>@endcan</section>
    @elseif ($key === 'traceability.principles')
      <section class="traceability-principles relative overflow-hidden bg-olive py-20 text-cream md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.055]"></div><div class="container-page relative"><div class="max-w-2xl"><p class="eyebrow text-cream/65">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4">{{ $data['title'] ?? '' }}</h2></div><div class="traceability-principle-list mt-12">@foreach($data['items'] ?? [] as $item)<article><h3>{{ $item['title'] ?? '' }}</h3><p>{{ $item['body'] ?? '' }}</p></article>@endforeach</div><div class="traceability-reference-links mt-12"><a href="{{ $url($data['primary_cta_path'] ?? 'certificates') }}">{{ $data['primary_cta_label'] ?? '' }} <svg class="rtl-flip" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="{{ $key }}" :key="'traceability-'.$locale.'-principles'"/>@endcan</section>
    @else
      <section class="relative overflow-hidden bg-cedar py-20 text-cream md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.06]"></div><div class="container-page relative grid gap-9 md:grid-cols-[1fr_auto] md:items-center"><div><p class="eyebrow text-cream/65">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4 max-w-2xl">{{ $data['title'] ?? '' }}</h2><p class="mt-5 max-w-xl leading-relaxed text-cream/72">{{ $data['summary'] ?? '' }}</p></div><div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap"><a class="article-cta article-cta--light" href="{{ $url($data['primary_cta_path'] ?? 'products') }}">{{ $data['primary_cta_label'] ?? '' }}</a><a class="article-cta article-cta--outline" href="{{ $url($data['secondary_cta_path'] ?? 'contact') }}">{{ $data['secondary_cta_label'] ?? '' }}</a></div></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="{{ $key }}" :key="'traceability-'.$locale.'-cta'"/>@endcan</section>
    @endif
@endforeach
</main>
@endsection