@extends('layouts.public')

@section('title', 'Projects — CashBaba Feedback Hub')

@push('styles')
<style>
    .projects-hero {
        background: linear-gradient(135deg, #0d3d26 0%, #00a651 100%);
        padding: 3.5rem 1.5rem 2.5rem;
        text-align: center;
    }
    .projects-hero-inner { max-width: 640px; margin: 0 auto; position: relative; }
    .projects-hero .badge-pill { background: rgba(255,255,255,.15); color: #fff; margin-bottom: 1.1rem; }
    .projects-hero h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: #fff; margin-bottom: .65rem; }
    .projects-hero p { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.65; }

    .projects-section { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
        gap: 1.5rem;
    }

    .proj-card {
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 18px;
        overflow: hidden;
        transition: transform .2s, box-shadow .2s, border-color .2s;
        display: flex; flex-direction: column;
    }
    .proj-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0,0,0,.09);
        border-color: #00a651;
    }
    .proj-card-banner {
        height: 6px;
        background: linear-gradient(90deg, #00a651, #34d399);
    }
    .proj-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

    .proj-icon-wrap {
        width: 52px; height: 52px;
        border-radius: 13px;
        background: #e6f7ef;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.25rem; color: #00a651;
        margin-bottom: 1rem;
    }
    .proj-name { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: .35rem; }
    .proj-tagline { font-size: .82rem; font-weight: 600; color: #00a651; margin-bottom: .6rem; }
    .proj-desc { font-size: .85rem; color: #475569; line-height: 1.6; flex: 1; margin-bottom: 1rem; }

    .proj-audience {
        display: flex; flex-wrap: wrap; gap: .4rem;
        margin-bottom: 1.25rem;
    }
    .aud-tag {
        padding: .2rem .6rem;
        background: #f1f5f9;
        border-radius: 20px;
        font-size: .7rem; font-weight: 600; color: #475569;
    }

    .btn-give-feedback {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        background: #00a651; color: #fff;
        border-radius: 10px;
        padding: .7rem 1.2rem;
        font-size: .85rem; font-weight: 700;
        transition: background .15s;
        text-decoration: none;
    }
    .btn-give-feedback:hover { background: #007a3d; color: #fff; }
</style>
@endpush

@section('content')

<section class="projects-hero">
    <div class="projects-hero-inner">
        <div class="badge-pill"><i class="fas fa-layer-group"></i> Active Projects</div>
        <h1>6 Strategic Projects</h1>
        <p>CashBaba is building the future — your feedback directly shapes these six initiatives. Select a project below to contribute.</p>
    </div>
</section>

<div class="projects-section">
    <div class="projects-grid">
        @foreach($projects as $project)
        <div class="proj-card">
            <div class="proj-card-banner"></div>
            <div class="proj-card-body">
                <div class="proj-icon-wrap">
                    <i class="{{ $project->icon ?? 'fas fa-folder' }}"></i>
                </div>
                <div class="proj-name">{{ $project->name }}</div>
                <div class="proj-tagline">{{ $project->tagline }}</div>
                <div class="proj-desc">{{ $project->description }}</div>

                @if($project->target_audience && count($project->target_audience))
                <div class="proj-audience">
                    @foreach($project->target_audience as $aud)
                    <span class="aud-tag">{{ $aud }}</span>
                    @endforeach
                </div>
                @endif

                {{-- @auth --}}
                <a href="{{ route('survey.start', $project->slug) }}" class="btn-give-feedback">
                    <i class="fas fa-comment-dots"></i> Give Feedback
                </a>
                {{-- @else
                <a href="{{ route('login') }}" class="btn-give-feedback">
                    <i class="fas fa-sign-in-alt"></i> Sign In to Contribute
                </a>
                @endauth --}}
            </div>
        </div>
        @endforeach
    </div>
</div>

@endsection