---
import BaseLayout from '@layouts/BaseLayout.astro'
import MainSection from '@components/blocks/MainSection.astro'
import { Friends } from '../config'

const friends = Friends
---

<BaseLayout title="Наши партнеры" description="Наши друзья">
    <MainSection title="Наши партнеры" subTitle="Контакты всех наших друзей и партнеров." />

    <section class="mx-auto max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 mb-10 2xl:max-w-full">
        <div class="grid gap-6 grid-cols-1 lg:grid-cols-3 sm:grid-cols-2">
            {
                friends.map(f => (
                    <div class="flex flex-col justify-between rounded-xl p-4 md:p-6 bg-white dark:bg-neutral-900/30">
                        <div>
                            <div class="flex items-center gap-x-4">
                                <img
                                    class="rounded-full size-20"
                                    src={f.avatar}
                                    alt="Image Description"
                                />

                                <div class="grow">
                                    <h3 class="font-medium text-gray-800 dark:text-neutral-200">
                                        {f.name}
                                    </h3>
                                    <p class="text-xs mt-0.5 uppercase text-gray-500 dark:text-neutral-500">
                                        {f.title}
                                    </p>
                                </div>
                            </div>
                            <p class="mt-3 text-gray-500 dark:text-neutral-500">
                                {f.description}
                            </p>
                        </div>

                        <div class="mt-3 space-x-1">
                            {
                                f.social?.blog && (
                                    <a
                                        class="shadow-md inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-300 text-gray-500 hover:text-gray-600 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:border-neutral-800 dark:hover:bg-neutral-700"
                                        href={f.social.blog}
                                        target="_blank"
                                    >
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="flex-shrink-0 size-3.5"
                                        >
                                            <circle cx="12" cy="12" r="10" />
                                            <circle cx="12" cy="12" r="4" />
                                            <line x1="21.17" x2="12" y1="8" y2="8" />
                                            <line x1="3.95" x2="8.54" y1="6.06" y2="14" />
                                            <line x1="10.88" x2="15.46" y1="21.94" y2="14" />
                                        </svg>
                                    </a>
                                )
                            }

                            {
                                f.social?.telegram && (
                                    <a
                                        class="shadow-md inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-300 text-gray-500 hover:text-gray-600 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:border-neutral-800 dark:hover:bg-neutral-700"
                                        href=`https://te.m/${f.social.telegram}`
                                        target="_blank"
                                    >
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="flex-shrink-0 size-3.5"
                                        >
                                            <path
                                                d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
                                            />
                                        </svg>
                                    </a>
                                )
                            }

                            {
                                f.social?.github && (
                                    <a
                                        class="shadow-md inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-300 text-gray-500 hover:text-gray-600 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:border-neutral-800 dark:hover:bg-neutral-700"
                                        href=`https://github.com/${f.social.github}`
                                        target="_blank"
                                    >
                                        <svg
                                            class="flex-shrink-0 size-3.5"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        >
                                            <path
                                                d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
                                            />
                                            <path d="M9 18c-4.51 2-5-2-7-2" />
                                        </svg>
                                    </a>
                                )
                            }
                        </div>
                    </div>
                ))
            }
        </div>
    </section>
</BaseLayout>
