<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Trusted Sources</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">Market News</h2>
            </div>
            <div class="rounded-lg border border-blue-100 bg-white px-4 py-2 text-sm font-semibold text-slate-600 dark:border-blue-900/50 dark:bg-slate-900 dark:text-slate-300">
                External links open in a new tab
            </div>
        </div>
    </x-slot>

    <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <div class="max-w-3xl">
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">News Hub</p>
            <h3 class="mt-2 text-2xl font-bold text-slate-950 dark:text-white">Visit reliable forex and financial news websites.</h3>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                ViZuTrade does not scrape articles or copy news content. This page only gives you quick links to trusted market news sources so you can research events directly from the original websites.
            </p>
        </div>
    </section>

    <section class="mt-6 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
        @foreach ($sources as $source)
            <article class="group flex min-h-64 flex-col justify-between rounded-lg border border-blue-100 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-blue-950/10 dark:border-blue-900/50 dark:bg-slate-900 dark:hover:shadow-black/30">
                <div>
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 text-lg font-black text-blue-700 transition group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-950 dark:text-blue-200">
                        {{ str($source['name'])->substr(0, 1) }}
                    </div>
                    <h3 class="mt-5 text-xl font-bold text-slate-950 dark:text-white">{{ $source['name'] }}</h3>
                    <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $source['description'] }}</p>
                </div>

                <div class="mt-6">
                    <a
                        href="{{ $source['url'] }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
                    >
                        Visit Website
                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 0 1 0-1.06l7.19-7.19H7.75a.75.75 0 0 1 0-1.5h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V7.59l-7.22 7.19a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
            </article>
        @endforeach
    </section>
</x-app-layout>
