@props([
    'board',
    'post',
    'mediaRatioClass' => 'aspect-[16/10]',
])

@php
    $thumbnailUrl = method_exists($post, 'thumbnailUrl') ? $post->thumbnailUrl() : ($post->thumbnail_url ?? null);
    $authorName = $post->user?->name ?? ($post->guest_name ?? '익명');
    $shareUrl = method_exists($post, 'resolvePostUrl') ? $post->resolvePostUrl() : tenant_url(null, $board->slug . '/' . $post->slug);
    $shareTitle = $post->title;
    $shareImage = $thumbnailUrl ?: '';
    $socialButtons = collect([
        [
            'key' => 'facebook',
            'label' => 'Facebook',
            'href' => 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode($shareUrl),
            'icon' => '<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true"><path d="M14 8.5V7.2c0-.8.5-1.2 1.3-1.2H17V3h-2.3C12.1 3 11 4.2 11 6.4v2.1H9v3h2V21h3v-9.5h2.4l.6-3H14Z" fill="currentColor"/></svg>',
        ],
        [
            'key' => 'x',
            'label' => 'X',
            'href' => 'https://twitter.com/intent/tweet?url=' . urlencode($shareUrl) . '&text=' . urlencode($shareTitle),
            'icon' => '<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true"><path d="M18.6 3h2.8l-6.1 7.1L22.5 21h-6.6l-5.2-6.4L5.2 21H2.4l6.6-7.7L1.5 3h6.8l4.8 5.9L18.6 3Zm-1.2 16h1.6L7.5 4.7H5.8L17.4 19Z" fill="currentColor"/></svg>',
        ],
        [
            'key' => 'kakao',
            'label' => 'KakaoTalk',
            'href' => 'https://story.kakao.com/s/share?url=' . urlencode($shareUrl),
            'icon' => '<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true"><path d="M12 3.5c-4.7 0-8.5 3-8.5 6.8 0 2.4 1.6 4.5 4.1 5.7l-1 3.7 4-2.4c.5.1 1 .1 1.4.1 4.7 0 8.5-3 8.5-6.8S16.7 3.5 12 3.5Z" fill="currentColor"/></svg>',
        ],
        [
            'key' => 'naver-blog',
            'label' => 'Naver Blog',
            'href' => 'https://share.naver.com/web/shareView.nhn?url=' . urlencode($shareUrl) . '&title=' . urlencode($shareTitle),
            'icon' => '<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true"><path d="M5 4h14a1 1 0 0 1 1 1v8.5c0 1.9-.7 3.4-2 4.5-1.3 1.1-3.2 1.7-5.4 1.7H8.4L4 20.9V5a1 1 0 0 1 1-1Z" fill="currentColor"/><path d="M8 8h8v1.8H8V8Zm0 3.6h6.2v1.8H8v-1.8Z" fill="#fff"/></svg>',
        ],
        [
            'key' => 'linkedin',
            'label' => 'LinkedIn',
            'href' => 'https://www.linkedin.com/sharing/share-offsite/?url=' . urlencode($shareUrl),
            'icon' => '<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true"><path d="M6.2 8.5H3.5V21h2.7V8.5Zm-1.3-5A1.55 1.55 0 0 0 3.3 5.1c0 .9.7 1.7 1.6 1.7S6.5 6 6.5 5.1C6.5 4.2 5.8 3.5 4.9 3.5ZM10.5 8.5H7.9V21h2.6v-6.7c0-1.8.3-3.6 2.6-3.6 2.3 0 2.3 2 2.3 3.7V21H18v-7.4c0-3.6-.8-6.3-5-6.3-2 0-3.2 1.1-3.7 2.1h-.1V8.5Z" fill="currentColor"/></svg>',
        ],
        [
            'key' => 'pinterest',
            'label' => 'Pinterest',
            'href' => 'https://pinterest.com/pin/create/button/?url=' . urlencode($shareUrl) . '&media=' . urlencode($shareImage) . '&description=' . urlencode($shareTitle),
            'icon' => '<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" aria-hidden="true"><path d="M12 3.5a8.5 8.5 0 0 0-3.1 16.5c-.1-.7-.2-1.8 0-2.5l1.2-5.1s-.3-.7-.3-1.8c0-1.7 1-3 2.2-3 1 0 1.4.7 1.4 1.5 0 .9-.6 2.2-.9 3.4-.2 1 .5 1.8 1.4 1.8 1.7 0 3-1.8 3-4.4 0-2.3-1.6-3.9-4-3.9-2.7 0-4.3 2-4.3 4.1 0 .8.3 1.6.6 2.1.1.2.1.3.1.5l-.4 1.8c-.1.4-.3.5-.6.3-1.2-.6-2-2.6-2-4.1 0-3.3 2.4-6.4 7-6.4 3.7 0 6.6 2.6 6.6 6.1 0 3.7-2.3 6.7-5.6 6.7-1.1 0-2.2-.6-2.6-1.3l-.7 2.5c-.2.9-.9 2-1.3 2.7A8.5 8.5 0 1 0 12 3.5Z" fill="currentColor"/></svg>',
        ],
    ])->filter(fn (array $button): bool => filled($button['href'] ?? null));
@endphp

<section class="-mx-4 overflow-hidden border border-muted bg-card md:mx-0">
    <div class="grid lg:grid-cols-[1.1fr_minmax(0,0.9fr)]">
        <div class="relative overflow-hidden bg-surface {{ $mediaRatioClass }} lg:aspect-auto lg:min-h-[24rem]">
            @if ($thumbnailUrl)
                <img
                    src="{{ $thumbnailUrl }}"
                    alt="{{ $post->title }}"
                    class="absolute inset-0 h-full w-full object-cover"
                >
            @else
                <div class="absolute inset-0 flex items-center justify-center bg-brand-gradient px-8 py-12">
                    <div class="max-w-md text-center text-white">
                        <div class="mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-white/70">
                            {{ $board->title }}
                        </div>
                        <div class="text-2xl font-semibold leading-tight tracking-[-0.04em] sm:text-3xl">
                            {{ $post->title }}
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <div class="flex min-w-0 flex-col justify-between bg-surface px-6 py-6 c-main sm:px-10 sm:py-8 lg:px-[6%] lg:py-[7%]">
            <div>
                <div class="mb-5 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs c-muted sm:mb-8">
                    <span class="font-semibold uppercase tracking-[0.18em]">
                        {{ $board->title }}
                    </span>

                    <span class="h-1 w-1 rounded-full bg-surface2"></span>

                    <span>
                        {{ $authorName }}
                    </span>
                </div>

                <div class="max-w-lg space-y-4">
                    <h1 class="text-[1.75rem] leading-[1.08] lg:text-[2.4rem]">
                        {{ $post->title }}
                    </h1>
                </div>
            </div>

            <div class="mt-6 border-t border-muted pt-4 sm:mt-8">
                <div class="flex flex-wrap items-center gap-2">
                    @foreach ($socialButtons as $button)
                        <a
                            href="{{ $button['href'] }}"
                            target="_blank"
                            rel="noreferrer"
                            class="grid h-10 w-10 place-items-center rounded-full border border-muted bg-base text-c-main transition-colors hover:border-transparent hover:bg-hover-main hover:text-hover-base"
                            aria-label="{{ $button['label'] }}"
                            title="{{ $button['label'] }}"
                        >
                            {!! $button['icon'] !!}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>