@extends('layouts.public')

@section('content')
<div class="max-w-7xl mx-auto p-6">
    <section class="mb-8">
        <h1 class="text-2xl font-bold mb-2">不動産クラファンまとめ</h1>
        <p class="text-gray-600">募集中ファンドを横断して探せます。まずは一覧へ。</p>
        <div class="mt-3 flex items-center gap-3">
            <a href="{{ route('public.funds.index') }}" class="px-4 py-2 bg-blue-600 text-white rounded">ファンド一覧へ</a>
            <a href="{{ route('home') }}" class="px-4 py-2 border rounded text-gray-700">トップに戻る</a>
        </div>
    </section>

    <h2 class="text-xl font-semibold mb-4">新着の募集中ファンド</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse ($latestRecruiting as $fund)
            <div class="p-4 bg-white rounded border">
                <div class="flex items-start justify-between">
                    <a href="{{ $fund->url ?: route('public.funds.show', $fund) }}" target="_blank" rel="noopener" class="text-base font-semibold text-blue-700 hover:underline">{{ $fund->name }}</a>
                    <x-ui.fav-toggle :fund="$fund" />
                </div>
                <div class="text-xs text-gray-500">{{ optional($fund->crowdfundingSite)->name }}</div>
                <div class="mt-2 text-sm">目標: ¥{{ number_format($fund->target_amount, 0) }}</div>
                <div class="text-sm">現在: ¥{{ number_format($fund->current_amount, 0) }} ({{ number_format($fund->progress_rate, 1) }}%)</div>
                <div class="mt-2"><x-ui.progress :value="$fund->progress_rate" color="blue"/></div>
            </div>
        @empty
            <p>該当するファンドがありません。</p>
        @endforelse
    </div>

    <div class="mt-6">
        <a href="{{ route('public.funds.index') }}" class="text-blue-700 hover:underline">ファンド一覧を見る</a>
    </div>
</div>
@endsection