@extends('frontend.layouts.app')

@section('title', 'About Us — ' . ($settings->company_name ?? 'PT. Gemilang Inti Teknologi'))

@section('content')

{{-- Header --}}
<section class="page-header relative overflow-hidden" style="background:linear-gradient(145deg,#ffffff 0%,#fff5f5 100%);">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div class="absolute -top-32 -right-32 w-96 h-96 rounded-full" style="background:radial-gradient(circle,rgba(204,21,18,.06),transparent 65%);"></div>
        <svg class="absolute top-0 right-0 w-64 h-64 opacity-[.03]" viewBox="0 0 200 200"><defs><pattern id="ap" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.5" fill="#CC1512"/></pattern></defs><rect width="200" height="200" fill="url(#ap)"/></svg>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center" data-aos="fade-up">
        <div class="badge-primary mb-4 justify-center">Our Story</div>
        <h1 class="text-4xl md:text-5xl font-black text-neutral-900 mb-4" style="font-family:'Sora',sans-serif;">About Us</h1>
        <p class="text-neutral-500 max-w-2xl mx-auto">Learn more about our story, mission, and the team behind our success.</p>
    </div>
    <svg viewBox="0 0 1440 56" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="w-full block" style="height:56px;display:block;margin-top:3rem;margin-bottom:-1px;">
        <path d="M0,0 C360,56 1080,56 1440,0 L1440,56 L0,56 Z" fill="#ffffff"/>
    </svg>
</section>

@if($about)
{{-- About content --}}
<section class="py-16 bg-white" style="margin-top:-1px;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-16 items-center mb-16">
            <div data-aos="fade-right">
                @if($about->image_url)
                    <div class="relative">
                        <img src="{{ $about->image_url }}" alt="{{ $about->title }}" class="rounded-2xl shadow-xl w-full object-cover">
                        <div class="absolute -bottom-5 -right-5 bg-white rounded-2xl shadow-xl p-4 border border-neutral-100">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl gradient-primary flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                                </div>
                                <div>
                                    <p class="text-xs text-neutral-400">Trusted Since</p>
                                    <p class="text-sm font-bold text-neutral-800">{{ date('Y') - ($about->years_experience ?? 5) }}+</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="rounded-2xl bg-gradient-to-br from-red-50 to-white aspect-video flex items-center justify-center border border-red-100">
                        <div class="text-center p-8">
                            <div class="w-20 h-20 mx-auto rounded-2xl gradient-primary flex items-center justify-center mb-4 shadow-lg">
                                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            </div>
                            <p class="text-neutral-500 text-sm font-medium">PT. Gemilang Inti Teknologi</p>
                            <p class="text-neutral-400 text-xs mt-1">IT Solutions Provider</p>
                        </div>
                    </div>
                @endif
            </div>

            <div data-aos="fade-left">
                <div class="badge-primary mb-4">Who We Are</div>
                <h2 class="text-2xl md:text-3xl font-black text-neutral-900 mb-5 leading-tight" style="font-family:'Sora',sans-serif;">{{ $about->title }}</h2>
                <p class="text-neutral-600 leading-relaxed whitespace-pre-line mb-6">{{ $about->content }}</p>
                @if(isset($techStacksGrouped) && $techStacksGrouped->count() > 0)
                <div class="flex flex-wrap gap-2">
                    @foreach($techStacksGrouped->flatten()->take(8) as $stack)
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold border border-red-200 bg-red-50 text-red-700">
                        @if($stack->icon_svg)
                        <svg viewBox="0 0 24 24" fill="{{ $stack->color }}" style="width:12px;height:12px;flex-shrink:0;">
                            {!! $stack->icon_svg !!}
                        </svg>
                        @endif
                        {{ $stack->name }}
                    </span>
                    @endforeach
                </div>
                @endif
            </div>
        </div>

        {{-- Stats --}}
        @if($about->years_experience || $about->projects_completed || $about->happy_clients || $about->team_members)
        <div class="rounded-3xl border border-neutral-200 bg-neutral-50 p-8 md:p-10 mb-16" data-aos="fade-up">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                @if($about->years_experience)
                <div>
                    <p class="text-4xl md:text-5xl font-black mb-2" style="font-family:'Sora',sans-serif;color:#CC1512;">{{ $about->years_experience }}+</p>
                    <p class="text-neutral-500 text-sm">Years Experience</p>
                </div>
                @endif
                @if($about->projects_completed)
                <div>
                    <p class="text-4xl md:text-5xl font-black mb-2" style="font-family:'Sora',sans-serif;color:#CC1512;">{{ $about->projects_completed }}+</p>
                    <p class="text-neutral-500 text-sm">Projects Completed</p>
                </div>
                @endif
                @if($about->happy_clients)
                <div>
                    <p class="text-4xl md:text-5xl font-black mb-2" style="font-family:'Sora',sans-serif;color:#CC1512;">{{ $about->happy_clients }}+</p>
                    <p class="text-neutral-500 text-sm">Happy Clients</p>
                </div>
                @endif
                @if($about->team_members)
                <div>
                    <p class="text-4xl md:text-5xl font-black mb-2" style="font-family:'Sora',sans-serif;color:#CC1512;">{{ $about->team_members }}+</p>
                    <p class="text-neutral-500 text-sm">Team Members</p>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- Mission & Vision --}}
        @if($about->mission_title || $about->vision_title)
        <div class="grid md:grid-cols-2 gap-6 mb-16">
            @if($about->mission_title)
            <div class="rounded-2xl p-7 border border-red-200 bg-red-50" data-aos="fade-up">
                <div class="w-11 h-11 rounded-xl gradient-primary flex items-center justify-center mb-5 shadow-md">
                    <div style="width:22px;height:22px;color:white;">@include('frontend.partials.icon',['icon'=>'rocket'])</div>
                </div>
                <h3 class="text-xl font-black text-neutral-900 mb-3" style="font-family:'Sora',sans-serif;">{{ $about->mission_title }}</h3>
                <p class="text-neutral-600 text-sm leading-relaxed">{{ $about->mission_content }}</p>
            </div>
            @endif
            @if($about->vision_title)
            <div class="rounded-2xl p-7 border border-neutral-200 bg-white" data-aos="fade-up" data-aos-delay="80">
                <div class="w-11 h-11 rounded-xl gradient-primary flex items-center justify-center mb-5 shadow-md">
                    <div style="width:22px;height:22px;color:white;">@include('frontend.partials.icon',['icon'=>'globe'])</div>
                </div>
                <h3 class="text-xl font-black text-neutral-900 mb-3" style="font-family:'Sora',sans-serif;">{{ $about->vision_title }}</h3>
                <p class="text-neutral-600 text-sm leading-relaxed">{{ $about->vision_content }}</p>
            </div>
            @endif
        </div>
        @endif
    </div>
</section>
@endif

{{-- Tech Stack Grid --}}
@if(isset($techStacksGrouped) && $techStacksGrouped->count() > 0)
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12" data-aos="fade-up">
            <div class="badge-primary mb-3 justify-center">Technologies</div>
            <h2 class="text-2xl md:text-3xl font-black text-neutral-900" style="font-family:'Sora',sans-serif;">Our Tech Stack</h2>
            <p class="text-neutral-500 text-sm mt-3 max-w-xl mx-auto">Tools and platforms we use to build reliable, scalable solutions.</p>
        </div>

        @foreach($techStacksGrouped as $category => $stacks)
        <div class="mb-10" data-aos="fade-up">
            {{-- Category Label --}}
            <div class="flex items-center gap-3 mb-5">
                <span class="text-xs font-black uppercase tracking-widest text-neutral-400">{{ $category }}</span>
                <div class="flex-1 h-px bg-neutral-100"></div>
            </div>
            {{-- Logo Grid --}}
            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
                @foreach($stacks as $stack)
                <div class="group flex flex-col items-center gap-2 p-3 rounded-xl border border-neutral-100 bg-white hover:border-red-200 hover:shadow-md transition-all cursor-default"
                     title="{{ $stack->name }}">
                    <div class="w-10 h-10 flex items-center justify-center rounded-xl transition-all group-hover:scale-110"
                         style="background: {{ $stack->color }}18;">
                        @if($stack->icon_svg)
                        <svg viewBox="0 0 24 24" fill="{{ $stack->color }}" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
                            {!! $stack->icon_svg !!}
                        </svg>
                        @else
                        <div class="w-6 h-6 rounded-full" style="background:{{ $stack->color }};"></div>
                        @endif
                    </div>
                    <span class="text-[10px] font-bold text-neutral-500 text-center leading-tight group-hover:text-neutral-800 transition-colors">{{ $stack->name }}</span>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</section>
@endif

{{-- Team Preview --}}
@if($team->count() > 0)
<section style="background:#fff5f5;" class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12" data-aos="fade-up">
            <div class="badge-primary mb-3 justify-center">Our People</div>
            <h2 class="text-2xl md:text-3xl font-black text-neutral-900" style="font-family:'Sora',sans-serif;">Meet Our Team</h2>
            <p class="text-neutral-500 text-sm mt-3">The talented people behind our success.</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($team as $index => $member)
            <div class="text-center bg-white rounded-2xl p-6 border border-neutral-200 hover:border-red-200 hover:shadow-lg transition-all" data-aos="fade-up" data-aos-delay="{{ $index * 60 }}">
                @if($member->photo_url)
                    <img src="{{ $member->photo_url }}" alt="{{ $member->name }}" class="w-20 h-20 mx-auto rounded-full object-cover mb-4 ring-4 ring-red-100">
                @else
                    <div class="w-20 h-20 mx-auto rounded-full gradient-primary flex items-center justify-center mb-4 ring-4 ring-red-100 shadow-md">
                        <span class="text-white text-2xl font-black">{{ strtoupper(substr($member->name,0,1)) }}</span>
                    </div>
                @endif
                <h3 class="font-bold text-neutral-900 mb-1">{{ $member->name }}</h3>
                <p class="text-red-600 text-xs font-semibold mb-3">{{ $member->position }}</p>
                @if($member->bio)<p class="text-neutral-500 text-xs leading-relaxed mb-3">{{ Str::limit($member->bio,80) }}</p>@endif
                @if($member->has_social_links)
                <div class="flex items-center justify-center gap-2">
                    @if($member->linkedin)<a href="{{ $member->linkedin }}" target="_blank" class="w-7 h-7 rounded-lg bg-neutral-100 hover:bg-red-600 hover:text-white flex items-center justify-center text-neutral-500 transition-all"><svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452z"/></svg></a>@endif
                </div>
                @endif
            </div>
            @endforeach
        </div>
        <div class="text-center mt-10">
            <a href="{{ route('team') }}" class="btn-primary text-sm py-2.5 px-6 inline-flex">
                View Full Team →
            </a>
        </div>
    </div>
</section>
@endif

@endsection