@extends('layouts.app')

@section('title', 'LaunchMint')

@section('content')
<section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-brand-900/20 to-transparent pointer-events-none"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 text-center">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white">
            Launch Your Token
        </h1>
        <p class="mt-4 text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
            Create and discover community-powered tokens. Fair launches, transparent trading, real on-chain confirmation.
        </p>
        <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('tokens.create') }}"
               class="inline-flex items-center justify-center px-8 py-3 rounded-xl bg-gradient-to-r from-brand-600 to-pink-600 text-white font-semibold hover:opacity-90 transition">
                Create Token
            </a>
            <a href="{{ route('explore') }}"
               class="inline-flex items-center justify-center px-8 py-3 rounded-xl border border-gray-700 text-gray-200 hover:bg-gray-800 transition">
                Explore Marketplace
            </a>
        </div>
        <div class="mt-12 max-w-xl mx-auto">
            <form action="{{ route('explore') }}" method="GET" class="relative">
                <input type="search" name="q" placeholder="Search tokens by name or symbol…"
                       class="w-full rounded-xl bg-gray-900 border border-gray-700 px-5 py-3.5 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500">
                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </button>
            </form>
        </div>
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-semibold text-white">Trending</h2>
        <a href="{{ route('explore') }}?sort=volume" class="text-sm text-brand-400 hover:text-brand-300">View all →</a>
    </div>
    @if($trending->isEmpty())
        <p class="text-gray-500 text-sm">No launched tokens yet.</p>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            @foreach($trending as $token)
                <a href="{{ route('tokens.show', $token->slug) }}" class="rounded-2xl border border-gray-800 bg-gray-900/50 p-4 hover:border-gray-700 transition">
                    <div class="flex items-center gap-3">
                        <img src="{{ $token->logo_url }}" class="w-10 h-10 rounded-full object-cover bg-gray-800" alt=""
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><rect fill=%22%236d28d9%22 width=%2240%22 height=%2240%22 rx=%2220%22/></svg>'">
                        <div>
                            <div class="font-medium text-white">{{ $token->name }}</div>
                            <div class="text-xs text-gray-500">{{ $token->symbol }}</div>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between text-sm">
                        <span class="text-gray-400 font-mono">${{ number_format((float)$token->current_price, 6) }}</span>
                        <span class="text-gray-500">${{ number_format((float)$token->volume_24h, 0) }} vol</span>
                    </div>
                </a>
            @endforeach
        </div>
    @endif
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
    <h2 class="text-xl font-semibold text-white mb-6">Recently launched</h2>
    <div class="rounded-2xl border border-gray-800 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-900/80 text-gray-400 text-left">
                <tr>
                    <th class="px-4 py-3 font-medium">Token</th>
                    <th class="px-4 py-3 font-medium">Price</th>
                    <th class="px-4 py-3 font-medium">Market Cap</th>
                    <th class="px-4 py-3 font-medium">Volume</th>
                    <th class="px-4 py-3 font-medium">Status</th>
                    <th class="px-4 py-3 font-medium">Age</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                @forelse($recent as $token)
                    <tr class="hover:bg-gray-900/40">
                        <td class="px-4 py-3">
                            <a href="{{ route('tokens.show', $token->slug) }}" class="flex items-center gap-2 text-white hover:text-brand-300">
                                <img src="{{ $token->logo_url }}" class="w-7 h-7 rounded-full object-cover bg-gray-800" alt=""
                                     onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 28 28%22><rect fill=%22%236d28d9%22 width=%2228%22 height=%2228%22 rx=%2214%22/></svg>'">
                                <span>{{ $token->name }}</span>
                                <span class="text-gray-500">{{ $token->symbol }}</span>
                            </a>
                        </td>
                        <td class="px-4 py-3 font-mono text-gray-300">${{ number_format((float)$token->current_price, 6) }}</td>
                        <td class="px-4 py-3 font-mono text-gray-300">${{ number_format((float)$token->market_cap, 0) }}</td>
                        <td class="px-4 py-3 font-mono text-gray-300">${{ number_format((float)$token->volume_24h, 0) }}</td>
                        <td class="px-4 py-3 capitalize @if($token->status==='launched') text-green-400 @elseif($token->status==='pending') text-yellow-400 @endif">{{ $token->status }}</td>
                        <td class="px-4 py-3 text-gray-500">{{ $token->created_at?->diffForHumans() }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                            No tokens yet. <a href="{{ route('tokens.create') }}" class="text-brand-400 hover:underline">Create one</a>.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>
@endsection