@extends('layouts.app')

@section('title', 'Uganda Innovation Portal - Home')

@section('content')
<div class="homepage">

    {{-- HERO --}}
    <section class="hero-wrap">
        <div class="container py-5">
            <div class="row align-items-center g-4">
                <div class="col-lg-7">
                    <span class="hero-pill">
                        <i class="fas fa-sparkles me-2"></i> Discover • Showcase • Connect
                    </span>

                    <h1 class="hero-title mt-3">
                        Uganda Innovation Portal
                    </h1>

                    <p class="hero-subtitle mt-3 mb-4">
                        Explore innovations from across Uganda, connect with innovators,
                        and discover funding opportunities — all in one place.
                    </p>

                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('innovations.explore') }}" class="btn btn-light btn-lg px-4">
                            Explore Innovations
                        </a>
                        <a href="{{ route('innovators.index') }}" class="btn btn-outline-light btn-lg px-4">
                            View Innovators
                        </a>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="hero-card">
                        <div class="d-flex align-items-center gap-3">
                            <div class="hero-icon">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <div>
                                <div class="text-white fw-semibold">Showcasing Uganda’s best ideas</div>
                            </div>
                        </div>

                        <hr class="border-light opacity-25 my-4">

                        <div class="row g-3">
                            <div class="col-4">
                                <div class="hero-metric">
                                    <div class="hero-metric-num">{{ $totalInnovations }}</div>
                                    <div class="hero-metric-label">Innovations</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="hero-metric">
                                    <div class="hero-metric-num">{{ $categories->count() }}</div>
                                    <div class="hero-metric-label">Categories</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="hero-metric">
                                    <div class="hero-metric-num">500+</div>
                                    <div class="hero-metric-label">Innovators</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- SEARCH (NO REGION) --}}
            <div class="search-card mt-5">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <form method="GET" action="{{ route('innovations.explore') }}" class="row g-3 align-items-end">

                            <div class="col-md-5">
                                <label for="search" class="form-label fw-semibold">Search Innovations</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="fas fa-magnifying-glass"></i>
                                    </span>
                                    <input type="text" class="form-control" id="search" name="search"
                                           value="{{ request('search') }}"
                                           placeholder="Title, description, location...">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label for="category" class="form-label fw-semibold">Category</label>
                                <select class="form-select" id="category" name="category">
                                    <option value="">All Categories</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ request('category') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-search me-1"></i> Search
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </div>
    </section>

    {{-- STATS (NO REGIONS) --}}
<section class="py-5 stats-section">
    <div class="container">
        <div class="row g-4 justify-content-center">

            {{-- Total Innovations --}}
            <div class="col-md-4">
                <div class="stat-card stat-card-primary">
                    <div class="stat-top">
                        <div class="stat-icon-wrap">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div class="stat-growth">
                            <i class="fas fa-arrow-up"></i> Active
                        </div>
                    </div>

                    <div class="stat-num">{{ $totalInnovations }}</div>
                    <div class="stat-label">Total Innovations</div>
                    <div class="stat-sub">Across multiple sectors</div>
                </div>
            </div>

            {{-- Categories --}}
            <div class="col-md-4">
                <div class="stat-card stat-card-success">
                    <div class="stat-top">
                        <div class="stat-icon-wrap">
                            <i class="fas fa-tags"></i>
                        </div>
                        <div class="stat-growth">
                            <i class="fas fa-layer-group"></i> Diverse
                        </div>
                    </div>

                    <div class="stat-num">{{ $categories->count() }}</div>
                    <div class="stat-label">Categories</div>
                    <div class="stat-sub">Innovation domains</div>
                </div>
            </div>

            {{-- Innovators --}}
            <div class="col-md-4">
                <div class="stat-card stat-card-warning">
                    <div class="stat-top">
                        <div class="stat-icon-wrap">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-growth">
                            <i class="fas fa-user-plus"></i> Community
                        </div>
                    </div>

                    <div class="stat-num">500+</div>
                    <div class="stat-label">Innovators</div>
                    <div class="stat-sub">Creators & entrepreneurs</div>
                </div>
            </div>

        </div>
    </div>
</section>


    {{-- FEATURED INNOVATIONS --}}
    <section class="pb-4" id="innovations">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <div>
                    <h2 class="fw-bold mb-1">Latest Innovations</h2>
                    <p class="text-muted mb-0">Discover the latest innovations from across Uganda</p>
                </div>
                <a href="{{ route('innovations.explore') }}" class="btn btn-outline-primary btn-sm">
                    View all <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>

            <div class="row g-4">
                @foreach($innovations as $innovation)
                    <div class="col-lg-4 col-md-6">
                        <div class="card card-hover h-100 border-0 shadow-sm">
                            @php
                                $image = ($innovation->images && count($innovation->images) > 0)
                                    ? asset('images/' . $innovation->images[0])
                                    : asset('images/micro.jpeg');
                            @endphp

                            <img src="{{ $image }}"
                                class="card-img-top"
                                alt="{{ $innovation->title }}"
                                style="height: 200px; object-fit: cover;">


                            <div class="card-body d-flex flex-column">
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <span class="badge bg-primary">{{ $innovation->category->name }}</span>
                                </div>

                                <h5 class="card-title mb-2">{{ $innovation->title }}</h5>
                                <p class="card-text text-muted flex-grow-1">
                                    {{ \Illuminate\Support\Str::limit($innovation->description, 120) }}
                                </p>

                                <div class="mt-auto">
                                    <div class="d-flex justify-content-between align-items-center small text-muted">
                                        <span>
                                            <i class="fas fa-user me-1"></i>{{ $innovation->contact_person }}
                                        </span>
                                        <span>{{ $innovation->created_at->diffForHumans() }}</span>
                                    </div>
                                    <div class="mt-3">
                                        <a href="{{ route('innovation.show', $innovation) }}"
                                           class="btn btn-primary btn-sm w-100">
                                            View Details
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </section>

    {{-- PATENT LINKS --}}
<section class="py-4 bg-light">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-3">
            <div>
                <h2 class="fw-bold mb-1">Patent Databases</h2>
                <p class="text-muted mb-0">Search existing patents from global databases</p>
            </div>
        </div>

        <div class="row g-4">

            <div class="col-md-6 col-lg-4">
                <a href="https://patents.google.com/" target="_blank"
                   class="card h-100 border-0 shadow-sm text-decoration-none patent-card">
                    <div class="card-body text-center">
                        <i class="fas fa-globe fa-2x text-primary mb-3"></i>
                        <h5 class="fw-bold">Google Patents</h5>
                        <p class="text-muted small mb-0">Search worldwide patents</p>
                    </div>
                </a>
            </div>

            <div class="col-md-6 col-lg-4">
                <a href="https://patentscope.wipo.int/" target="_blank"
                   class="card h-100 border-0 shadow-sm text-decoration-none patent-card">
                    <div class="card-body text-center">
                        <i class="fas fa-scale-balanced fa-2x text-success mb-3"></i>
                        <h5 class="fw-bold">WIPO PATENTSCOPE</h5>
                        <p class="text-muted small mb-0">International patent database</p>
                    </div>
                </a>
            </div>

            <div class="col-md-6 col-lg-4">
                <a href="https://worldwide.espacenet.com/" target="_blank"
                   class="card h-100 border-0 shadow-sm text-decoration-none patent-card">
                    <div class="card-body text-center">
                        <i class="fas fa-building-columns fa-2x text-warning mb-3"></i>
                        <h5 class="fw-bold">Espacenet</h5>
                        <p class="text-muted small mb-0">European patent office search</p>
                    </div>
                </a>
            </div>

            <div class="col-md-6 col-lg-4">
                <a href="https://www.lens.org/" target="_blank"
                   class="card h-100 border-0 shadow-sm text-decoration-none patent-card">
                    <div class="card-body text-center">
                        <i class="fas fa-magnifying-glass fa-2x text-info mb-3"></i>
                        <h5 class="fw-bold">The Lens</h5>
                        <p class="text-muted small mb-0">Patents & scholarly works</p>
                    </div>
                </a>
            </div>

            <div class="col-md-6 col-lg-4">
                <a href="https://www.freepatentsonline.com/" target="_blank"
                   class="card h-100 border-0 shadow-sm text-decoration-none patent-card">
                    <div class="card-body text-center">
                        <i class="fas fa-file-lines fa-2x text-danger mb-3"></i>
                        <h5 class="fw-bold">FreePatentsOnline</h5>
                        <p class="text-muted small mb-0">Free patent search engine</p>
                    </div>
                </a>
            </div>

            <div class="col-md-6 col-lg-4">
                <a href="https://www.uspto.gov/patents/search/patent-public-search" target="_blank"
                   class="card h-100 border-0 shadow-sm text-decoration-none patent-card">
                    <div class="card-body text-center">
                        <i class="fas fa-flag-usa fa-2x text-secondary mb-3"></i>
                        <h5 class="fw-bold">USPTO Search</h5>
                        <p class="text-muted small mb-0">US patent public search</p>
                    </div>
                </a>
            </div>

        </div>
    </div>
</section>


    {{-- FUNDING --}}
    <section class="py-4">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <div>
                    <h2 class="fw-bold mb-1">Funding Opportunities</h2>
                    <p class="text-muted mb-0">Find grants & calls that can support your innovation</p>
                </div>
                <a href="{{ route('funding.index') }}" class="btn btn-outline-primary btn-sm">
                    View all <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>

            <div class="row g-4">
                @forelse(($latestFunding ?? []) as $item)
                    <div class="col-md-6 col-lg-4">
                        <div class="card card-hover h-100 border-0 shadow-sm">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-primary">{{ $item->category ?? 'General' }}</span>
                                    @if($item->deadline)
                                        <span class="badge bg-warning text-dark">
                                            Deadline: {{ \Carbon\Carbon::parse($item->deadline)->format('M j, Y') }}
                                        </span>
                                    @endif
                                </div>

                                <h5 class="card-title mb-1">{{ $item->title }}</h5>
                                <p class="text-muted mb-2">{{ $item->organization }}</p>

                                <p class="card-text text-muted flex-grow-1">
                                    {{ \Illuminate\Support\Str::limit($item->summary, 120) }}
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        @if($item->amount)
                                            {{ $item->currency ?? 'UGX' }} {{ $item->amount }}
                                        @else
                                            Amount: TBA
                                        @endif
                                    </small>
                                    <a href="{{ route('funding.show', $item) }}" class="btn btn-primary btn-sm">
                                        Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info mb-0">No funding opportunities yet.</div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- NEWS --}}
    <section class="py-4 pb-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <div>
                    <h2 class="fw-bold mb-1">Global Technology & Innovation News</h2>
                    <p class="text-muted mb-0">Technology & Innovation Updates & announcements</p>
                </div>
                <a href="{{ route('news.index') }}" class="btn btn-outline-primary btn-sm">
                    View all <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>

            <div class="row g-4">
                @forelse(($latestNews ?? []) as $article)
                    <div class="col-md-6 col-lg-4">
                        <div class="card card-hover h-100 border-0 shadow-sm">
                            @if($article->featured_image)
                                <img src="{{ url($article->featured_image) }}"
                                     class="card-img-top" alt="{{ $article->title }}"
                                     style="height: 200px; object-fit: cover;">
                            @else
                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center"
                                     style="height: 200px;">
                                    <i class="fas fa-newspaper text-muted display-4"></i>
                                </div>
                            @endif

                            <div class="card-body d-flex flex-column">
                                <div class="d-flex flex-wrap gap-2 mb-2">
                                    <span class="badge bg-primary">{{ $article->category }}</span>
                                    @if($article->is_featured)
                                        <span class="badge bg-warning text-dark">Featured</span>
                                    @endif
                                </div>

                                <h5 class="card-title mb-2">{{ $article->title }}</h5>
                                <p class="card-text text-muted flex-grow-1">
                                    {{ \Illuminate\Support\Str::limit($article->summary, 120) }}
                                </p>

                                <div class="mt-auto">
                                    <div class="d-flex justify-content-between align-items-center small text-muted mb-2">
                                        <span><i class="fas fa-user me-1"></i>{{ $article->author ?? 'Admin' }}</span>
                                        <span><i class="fas fa-clock me-1"></i>{{ \Carbon\Carbon::parse($article->created_at)->diffForHumans() }}</span>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">
                                            <i class="fas fa-book-open me-1"></i>{{ $article->reading_time ?? 3 }} min read
                                        </small>
                                        <a href="{{ $article->content }}" target="_blank" class="btn btn-primary btn-sm">
                                            Read More
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info mb-0">No news articles yet.</div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- PARTNERS --}}
    <section class="py-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <div>
                    <h2 class="fw-bold mb-1">Partners</h2>
                    <p class="text-muted mb-0">Working together to support innovation in Uganda</p>
                </div>
            </div>

            <div class="card border-0 shadow-sm partner-card">
                <div class="card-body p-4">
                    <div class="row align-items-center g-4 text-center text-md-start">
                        <div class="col-md-6">
                            <div class="partner-logo-wrap">
                                <img src="{{ asset('images/UNCST-Logo.jpeg') }}" alt="UNCST Logo" class="partner-logo">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="partner-logo-wrap">
                                <img src="{{ asset('images/STI-Logo.png') }}" alt="Logo" class="partner-logo">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


</div>
@endsection