@extends('layouts.master')

@section('title', 'Projects | Setara Group')

@section('content')
    <!-- Page Header -->
    <header class="pt-32 pb-16 text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-hero-glow pointer-events-none"></div>
        <h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight"><span class="text-gradient">Our Projects</span>
        </h1>
        <p class="text-secondary font-light tracking-wide max-w-lg mx-auto">World-Class Manufacturing Units</p>
    </header>

    <section class="pb-24">
        <div class="container mx-auto px-6 max-w-7xl">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($projects as $project)
                    <div class="glass-card p-8 rounded-3xl hover:border-primary/30 transition-all duration-300 group flex flex-col">
                        <div class="flex-grow">
                            <div class="flex items-center justify-between mb-6">
                                <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center text-primary">
                                    <i class="fas {{ $project->icon ?? 'fa-industry' }} text-xl"></i>
                                </div>
                                <span class="px-3 py-1 bg-white/5 text-xs font-medium text-secondary rounded-full border border-white/10 uppercase tracking-wider">{{ $project->type ?? 'Project' }}</span>
                            </div>

                            <div class="h-48 mb-6 rounded-2xl overflow-hidden shadow-xl border border-white/5 relative">
                                <img src="{{ asset('storage/'.$project->image) }}" alt="{{ $project->name }}" class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-background/40 to-transparent"></div>
                            </div>

                            <h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">{{ $project->name }}</h3>
                            <p class="text-secondary text-sm leading-relaxed mb-6 flex-grow">
                                {{ $project->description }}
                            </p>
                            
                            <div class="space-y-3 border-t border-white/5 pt-6">
                                <div class="flex items-start">
                                    <i class="fas fa-layer-group text-primary mt-1 mr-3 w-5"></i>
                                    <div>
                                        <h4 class="text-xs text-secondary uppercase font-bold tracking-wider">Capacity</h4>
                                        <p class="text-foreground text-sm">{{ $project->capacity }}</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <i class="fas fa-map-marker-alt text-primary mt-1 mr-3 w-5"></i>
                                    <div>
                                        <h4 class="text-xs text-secondary uppercase font-bold tracking-wider">Location</h4>
                                        <p class="text-foreground text-sm">{{ $project->location }}</p>
                                    </div>
                                </div>
                                @if($project->workforce)
                                    <div class="flex items-start">
                                        <i class="fas fa-users text-primary mt-1 mr-3 w-5"></i>
                                        <div>
                                            <h4 class="text-xs text-secondary uppercase font-bold tracking-wider">Workforce</h4>
                                            <p class="text-foreground text-sm">{{ $project->workforce }}</p>
                                        </div>
                                    </div>
                                @endif
                                @if($project->certification)
                                    <div class="flex items-start">
                                        <i class="fas fa-certificate text-primary mt-1 mr-3 w-5"></i>
                                        <div>
                                            <h4 class="text-xs text-secondary uppercase font-bold tracking-wider">Certification</h4>
                                            <span class="text-green-400 font-bold border border-green-500/30 inline-block px-2 py-0.5 rounded text-xs bg-green-500/10 uppercase">{{ $project->certification }}</span>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection