@extends('layouts.app')

@section('content')
    <div class="min-h-screen flex items-center justify-center bg-gray-50">
        <div class="max-w-md w-full bg-white rounded-lg shadow-md p-8">
            <div class="text-center">
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Welcome to Lemmy Poster</h1>
                <p class="text-gray-600 mb-8">
                    Let's get you set up! We'll help you configure your Lemmy account, add your first feed, and create a channel for posting.
                </p>
                
                <div class="space-y-4">
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 text-xs font-semibold">1</div>
                        <span>Connect your Lemmy account</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">2</div>
                        <span>Add your first feed</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">3</div>
                        <span>Configure a channel</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-600">
                        <div class="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">4</div>
                        <span>You're ready to go!</span>
                    </div>
                </div>
                
                <div class="mt-8">
                    <a href="{{ route('onboarding.platform') }}" 
                       class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 inline-block">
                        Get Started
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection