@extends('layouts.master')

@section('title', 'About Us | 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 ?? 'About Setara Group' }}</span>
        </h1>
        <p class="text-secondary font-light tracking-wide max-w-lg mx-auto">
            {{ $header->subtitle ?? 'Innovating the Art of Manufacturing Since 1983' }}
        </p>
    </header>

    <!-- Content -->
    <section class="pb-24">
        <div class="container mx-auto px-6 max-w-5xl">

            <!-- History Section -->
            @if($history)
            <div class="glass-card p-10 rounded-3xl mb-16 border border-primary/20 relative overflow-hidden">
                <div class="absolute inset-0 bg-hero-glow opacity-20 pointer-events-none"></div>
                <h2 class="text-3xl font-bold text-foreground mb-6 border-l-4 border-primary pl-4">{{ $history->title }}</h2>
                <div class="text-secondary leading-relaxed space-y-4">
                    {!! nl2br(e($history->description)) !!}
                </div>
            </div>
            @endif

            <!-- Mission & Values & Compliance -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
                @if($mission)
                <div class="glass-card p-8 rounded-2xl hover:bg-white/5 transition-all duration-300">
                    <i class="{{ $mission->icon ?? 'fas fa-bullseye' }} text-4xl text-primary mb-6"></i>
                    <h3 class="text-xl font-bold text-foreground mb-4">{{ $mission->title }}</h3>
                    <p class="text-secondary text-sm leading-relaxed">
                        {{ $mission->description }}
                    </p>
                </div>
                @endif

                @if($compliance)
                <div class="glass-card p-8 rounded-2xl hover:bg-white/5 transition-all duration-300">
                    <i class="{{ $compliance->icon ?? 'fas fa-shield-alt' }} text-4xl text-primary mb-6"></i>
                    <h3 class="text-xl font-bold text-foreground mb-4">{{ $compliance->title }}</h3>
                    <p class="text-secondary text-sm leading-relaxed">
                        {{ $compliance->description }}
                    </p>
                </div>
                @endif
            </div>

            <!-- Empowerment -->
            @if($empowerment)
            <div class="glass-card p-10 rounded-3xl flex flex-col md:flex-row items-center gap-10">
                <div class="md:w-2/3">
                    <h2 class="text-2xl font-bold text-foreground mb-4">{{ $empowerment->title }}</h2>
                    <p class="text-secondary leading-relaxed">
                        {{ $empowerment->description }}
                    </p>
                </div>
                <div class="md:w-1/3">
                    <div class="rounded-2xl overflow-hidden h-48 w-full border border-white/10 shadow-2xl">
                        <img src="{{ $empowerment->image ? asset('storage/' . $empowerment->image) : 'https://images.unsplash.com/photo-1598048148866-991f8615fe5d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' }}"
                            alt="{{ $empowerment->title }}" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
            @endif

        </div>
    </section>
@endsection