@extends('layouts.master')

@section('title', 'CSR & Sustainability | 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">{{ $header->title ?? 'CSR & Sustainability' }}</span></h1>
        <p class="text-secondary font-light tracking-wide max-w-lg mx-auto leading-relaxed">
            {{ $header->description ?? 'Our initiatives are focused on environmental sustainability and social responsibility.' }}
        </p>
    </header>

    <!-- Environmental Sustainability Report -->
    @if($report)
    <section class="pb-24">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="glass-card p-12 rounded-[2.5rem] relative overflow-hidden group mb-24">
                <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -mr-32 -mt-32 blur-3xl"></div>
                <div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <span class="text-primary font-bold text-sm tracking-widest uppercase mb-4 block">{{ $report->subtitle ?? 'Our Impact' }}</span>
                        <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">{!! $report->title !!}</h2>
                        <div class="text-secondary leading-relaxed mb-8">
                            {!! $report->description !!}
                        </div>

                        @if($stats->count() > 0)
                        <div class="grid grid-cols-2 gap-6">
                            @foreach($stats as $stat)
                            <div class="space-y-1">
                                <h4 class="text-2xl font-bold text-foreground">{{ $stat->title }}</h4>
                                <p class="text-xs text-secondary uppercase tracking-widest">{{ $stat->subtitle }}</p>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                    @if($report->image)
                    <div class="relative h-64 md:h-80 rounded-3xl overflow-hidden glass-card p-2">
                        <img src="{{ asset('storage/' . $report->image) }}" alt="{{ $report->title }}" class="w-full h-full object-cover rounded-2xl">
                    </div>
                    @endif
                </div>
            </div>
    @else
    <section class="pb-24">
        <div class="container mx-auto px-6 max-w-6xl">
    @endif

            <!-- Dynamic Initiatives -->
            <h2 class="text-3xl font-bold text-foreground text-center mb-16">Community Initiatives</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($posts as $post)
                    <div class="glass-card rounded-3xl overflow-hidden hover:border-primary/50 transition-all group">
                        <div class="h-48 overflow-hidden relative">
                            <img src="{{ Str::startsWith($post->image, 'http') ? $post->image : asset('storage/'.$post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                            <div class="absolute inset-0 bg-gradient-to-t from-background to-transparent opacity-60"></div>
                            <div class="absolute bottom-4 left-6">
                                <div class="w-10 h-10 rounded-xl bg-primary/20 backdrop-blur-md flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-black transition-all">
                                    <i class="fas {{ $post->icon ?? 'fa-leaf' }}"></i>
                                </div>
                            </div>
                        </div>
                        <div class="p-8">
                            <h3 class="text-xl font-bold text-foreground mb-4">{{ $post->title }}</h3>
                            <p class="text-secondary text-sm leading-relaxed">
                                {{ $post->description }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection