@extends('layouts.app')

@section('title', 'Social Corner')

@section('content')
    <div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">

        <div class="mx-auto max-w-2xl text-center">
            <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl">Social Corner</h1>
            <p class="mt-5 text-lg text-slate-400">
                Where the prompts get posted first and the results get shared. Follow along,
                or drop your own renders in the community.
            </p>
        </div>

        @php
            // Placeholder destinations — point these at real handles when the site goes live.
            $channels = [
                ['name' => 'YouTube', 'handle' => '@promptvault', 'blurb' => 'Full walkthroughs of each viral format.', 'icon' => '▶', 'tone' => 'from-red-500/20 to-red-600/5'],
                ['name' => 'Instagram', 'handle' => '@promptvault', 'blurb' => 'Daily renders and behind-the-scenes.', 'icon' => '◉', 'tone' => 'from-fuchsia-500/20 to-purple-600/5'],
                ['name' => 'X / Twitter', 'handle' => '@promptvault', 'blurb' => 'Prompt tweaks and quick experiments.', 'icon' => '✕', 'tone' => 'from-slate-400/20 to-slate-600/5'],
                ['name' => 'Telegram', 'handle' => 'Prompt Vault Community', 'blurb' => 'The members-only chat and drop feed.', 'icon' => '✈', 'tone' => 'from-sky-500/20 to-sky-600/5'],
            ];
        @endphp

        <div class="mt-14 grid gap-5 sm:grid-cols-2">
            @foreach ($channels as $channel)
                <div class="surface overflow-hidden">
                    <div class="bg-gradient-to-br {{ $channel['tone'] }} px-6 py-8">
                        <span class="grid h-12 w-12 place-items-center rounded-xl bg-ink-900/70 text-xl">{{ $channel['icon'] }}</span>
                        <h2 class="mt-4 text-xl font-bold text-white">{{ $channel['name'] }}</h2>
                        <p class="mt-1 text-sm font-medium text-slate-400">{{ $channel['handle'] }}</p>
                        <p class="mt-3 text-sm text-slate-400">{{ $channel['blurb'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="surface mt-14 px-6 py-12 text-center">
            <h2 class="text-2xl font-extrabold tracking-tight">Made something with a prompt?</h2>
            <p class="mx-auto mt-3 max-w-xl text-slate-400">
                Tag the community when you post — the best renders get featured on the
                homepage and the prompt behind them gets a breakdown.
            </p>
            <div class="mt-7 flex flex-wrap justify-center gap-3">
                <a href="{{ route('prompts.index') }}" class="btn btn-primary">Grab a prompt</a>
                <a href="{{ route('join') }}" class="btn btn-ghost">Join the community</a>
            </div>
        </div>
    </div>
@endsection