@extends('layouts.app')

@section('title', 'Home')

@section('content')
<nav class="navbar navbar-expand-lg home-navbar">
    <div class="container">
        <a class="navbar-brand text-white fw-bold" href="{{ url('/') }}">
            <span class="brand-badge me-2">FAST</span> Print Portal
        </a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ms-auto align-items-lg-center gap-2">
                <li class="nav-item"><a class="nav-link text-white" href="#services">Services</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#contact">Contact</a></li>
                @auth
                    <li class="nav-item">
                        <a class="btn btn-light btn-sm fw-bold" href="{{ auth()->user()->isAdmin() ? route('admin.dashboard') : route('user.dashboard') }}">Dashboard</a>
                    </li>
                @else
                    <li class="nav-item"><a class="btn btn-outline-light btn-sm" href="{{ route('login') }}">Login</a></li>
                    <li class="nav-item"><a class="btn btn-warning btn-sm fw-bold" href="{{ route('register') }}">Register Free</a></li>
                @endauth
            </ul>
        </div>
    </div>
</nav>

<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7 text-white">
                <h1 class="display-4 fw-bold">India's #1 Multi-Service Print Portal</h1>
                <p class="lead">Voter, Aadhaar, RC, DL, PAN, eShram, Ayushman aur 50+ premium services — sab ek hi platform pe. Retailer banke ghar baithe earning shuru kare.</p>
                <div class="d-flex gap-2 flex-wrap mt-4">
                    <a href="{{ route('register') }}" class="btn btn-warning btn-lg fw-bold"><i class="fas fa-rocket"></i> Free Account Banaye</a>
                    <a href="#services" class="btn btn-outline-light btn-lg">Services Dekhe</a>
                </div>
                <div class="hero-stats mt-5">
                    <div><h3>50+</h3><small>Services</small></div>
                    <div><h3>10K+</h3><small>Active Retailers</small></div>
                    <div><h3>24/7</h3><small>Support</small></div>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block text-center">
                <div class="hero-illustration">
                    <i class="fas fa-print"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="services" class="services-section py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Premium Services</h2>
            <p class="text-muted">Aapke business ke liye sab kuch ek jagah</p>
        </div>

        @forelse($services as $category => $items)
            <h4 class="category-title"><i class="fas fa-folder-open text-warning"></i> {{ $category }}</h4>
            <div class="row g-3 mb-4">
                @foreach($items as $service)
                    <div class="col-md-3 col-sm-6">
                        <div class="service-tile">
                            @if($service->badge)
                                <span class="service-badge bg-{{ $service->badge_color }}">{{ $service->badge }}</span>
                            @endif
                            <div class="service-icon"><i class="fas {{ $service->icon ?? 'fa-cog' }}"></i></div>
                            <div class="service-name">{{ $service->name }}</div>
                            <small class="text-muted">Charge ₹{{ number_format($service->default_charge, 0) }}</small>
                        </div>
                    </div>
                @endforeach
            </div>
        @empty
            <div class="alert alert-info text-center">Services jaldi aa rahi hai.</div>
        @endforelse
    </div>
</section>

<section id="about" class="about-section py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2 class="fw-bold">Why Choose Print Portal?</h2>
                <ul class="list-unstyled mt-3">
                    <li class="mb-2"><i class="fas fa-check-circle text-success"></i> Instant processing — 1 to 5 minutes me result</li>
                    <li class="mb-2"><i class="fas fa-check-circle text-success"></i> 3-tier system: Master Distributor, Distributor, Retailer</li>
                    <li class="mb-2"><i class="fas fa-check-circle text-success"></i> Per service custom commission & charges</li>
                    <li class="mb-2"><i class="fas fa-check-circle text-success"></i> Secure wallet system with full transaction history</li>
                    <li class="mb-2"><i class="fas fa-check-circle text-success"></i> 24x7 chat & call support</li>
                </ul>
            </div>
            <div class="col-md-6 text-center">
                <div class="about-icon"><i class="fas fa-trophy"></i></div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="contact-section py-5">
    <div class="container text-center">
        <h2 class="fw-bold">Ready to Start?</h2>
        <p class="text-muted">Aaj hi join kare — free signup, koi hidden charge nahi</p>
        <a href="{{ route('register') }}" class="btn btn-success btn-lg fw-bold mt-3"><i class="fas fa-user-plus"></i> Register Now</a>
    </div>
</section>

<footer class="site-footer">
    <div class="container py-4">
        <div class="row">
            <div class="col-md-6">
                <h5 class="text-white">Print Portal</h5>
                <p class="text-white-50 small">India's trusted multi-service print portal</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p class="text-white-50 small mb-0">© {{ date('Y') }} Print Portal. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>
@endsection