@extends('layouts.site', ['title' => 'Media & interviews', 'description' => 'Podcasts, interviews, and features with Ali Sheikhani.', 'active' => 'media'])

@section('content')
    @include('partials.page-hero', ['title' => 'Media', 'heading' => $site['media_heading'], 'eyebrow' => 'PODCASTS · INTERVIEWS · FEATURES', 'intro' => 'Conversations about ambition, enterprise, community service, and the journey from Karachi to the United States.', 'index' => '02'])
    <section class="subpage-section media-page-section">
        <div class="subpage-label" data-reveal><span>02 / SELECTED APPEARANCES</span><i></i><span>WATCH · LISTEN · READ</span></div>
        <div class="media-cards">
            @foreach($media as $item)
                <article class="media-card" data-reveal>
                    <a href="{{ $item[3] }}" target="_blank" rel="noopener" class="media-card-art" aria-label="Watch or listen: {{ $item[0] }}">
                        <span class="media-card-index">0{{ $loop->iteration }}</span><span class="media-play">↗</span>
                        <span class="media-watermark">AS<span>.</span></span><span class="media-card-kind">{{ $item[2] }}</span>
                    </a>
                    <p class="micro-label">{{ $item[1] }}</p><h2>{{ $item[0] }}</h2>
                    <a class="line-link" href="{{ $item[3] }}" target="_blank" rel="noopener">Watch / listen <span>↗</span></a>
                </article>
            @endforeach
        </div>
    </section>
    <section class="subpage-cta"><div><p class="micro-label">IN THE NEWS</p><h2>Keep up with<br><span>the latest.</span></h2></div><a class="blue-button" href="{{ route('news') }}">Read news &amp; journal <span>↗</span></a></section>
@endsection