@extends('layouts.app')

@section('content')
<section class="hero-section py-5 mt-5">
    <div class="container text-center py-5">
        <span class="badge rounded-pill py-2 px-3 mb-4" style="background: var(--glass-bg); border: 1px solid var(--border-glass); color: hsl(var(--primary))">
            ✨ Now shipping to 190+ countries
        </span>
        <h1 class="title-hero text-gradient">Trade Smarter. <br> Earn Everywhere.</h1>
        <p class="text-muted fs-5 mb-5 mx-auto" style="max-width: 600px;">
            The first global marketplace built for Africa. Secured by Escrow. Powered by AI.
        </p>
        <div class="d-flex gap-3 justify-content-center">
            <a href="/search" class="btn-amwal">Start Shopping <i class="fa-solid fa-arrow-right"></i></a>
            <a href="/register?role=seller" class="btn-glass">Become a Seller</a>
        </div>
    </div>
</section>

<div class="container">
    <div class="bento-container">
        <!-- Main Featured Bento -->
        <div class="bento-card col-8 row-2">
            <h2 class="h4 fw-bold mb-3">Today's Flash Deals</h2>
            <div class="row g-3">
                @foreach($flashSales as $product)
                <div class="col-md-6">
                    @include('partials.product-card-mini', ['product' => $product])
                </div>
                @endforeach
            </div>
        </div>

        <!-- Global Reach Bento -->
        <div class="bento-card col-4 row-2 d-flex flex-column justify-content-between">
            <div>
                <i class="fa-duotone fa-earth-africa fa-3x mb-4 text-primary"></i>
                <h3 class="h5 fw-bold">Africa-First Logistics</h3>
                <p class="text-muted small">Specialized shipping routes for Nigeria, Kenya, Egypt, and beyond.</p>
            </div>
            <div class="stats border-top border-white border-opacity-10 pt-3">
                <div class="d-flex justify-content-between">
                    <span class="small text-muted">Active Countries</span>
                    <span class="small fw-bold">192</span>
                </div>
            </div>
        </div>

        <!-- Categories Bento -->
        @foreach($categories->take(4) as $cat)
        <a href="/category/{{ $cat->slug }}" class="bento-card col-3 text-decoration-none">
            <i class="fa-light fa-{{ $cat->icon ?? 'tag' }} mb-2 d-block text-primary"></i>
            <span class="fw-bold text-white">{{ $cat->name }}</span>
            <p class="text-muted x-small mb-0">{{ $cat->products_count ?? '800+' }} Products</p>
        </a>
        @endforeach

        <!-- Trust Bento -->
        <div class="bento-card col-12 d-flex align-items-center justify-content-between py-4">
            <div class="d-flex align-items-center gap-4">
                <i class="fa-duotone fa-shield-check fa-3x text-secondary"></i>
                <div>
                    <h4 class="h6 fw-bold mb-1">AmWal Escrow Protection</h4>
                    <p class="text-muted small mb-0">Funds are held safely until you confirm delivery. 100% Satisfaction or your money back.</p>
                </div>
            </div>
            <a href="/escrow" class="btn-glass py-2 px-3 small">Learn More</a>
        </div>
    </div>
</div>
@endsection