@extends('layouts.app')

@section('title', __('app.contact.title'))
@section('meta_description', __('app.contact.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.contact')],
        ],
        'title' => __('app.contact.h1'),
        'lead' => __('app.contact.lead'),
    ])

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        <div class="grid gap-6 md:grid-cols-3">
            @foreach ($channels as $channel)
                <article class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <div class="flex h-11 w-11 items-center justify-center rounded-full bg-brand/10 text-brand">
                        @include('partials.channel-icon', ['type' => $channel->type, 'class' => 'h-5 w-5'])
                    </div>
                    <h2 class="mt-4 text-base font-bold text-brand-deep">{{ $channel->label() }}</h2>
                    <p class="mt-2 text-sm text-ink-soft" dir="ltr"><a href="{{ $channel->url() }}" @if ($channel->isExternal()) rel="noopener" target="_blank" @endif class="transition hover:text-brand">{{ $channel->value }}</a></p>
                </article>
            @endforeach
        </div>

        <div class="mt-10 rounded-2xl bg-white p-8 shadow-sm ring-1 ring-black/5">
            <h2 class="text-xl font-bold text-brand-deep">{{ __('app.contact.demo_card.title') }}</h2>
            <p class="mt-2 text-sm text-ink-soft">{{ __('app.contact.demo_card.text') }}</p>
            <a href="{{ lroute('demo') }}" class="mt-5 inline-block rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white transition hover:bg-brand-deep">
                {{ __('app.nav.book_demo') }}
            </a>
        </div>
    </section>
@endsection