@extends('layouts.user')

@section('title', 'Profil Perusahaan - CV. Amelia Langgeng Jaya')

@section('content')

{{-- 1. Hero Section --}}
<div class="relative h-[300px] md:h-[400px] flex items-center justify-center overflow-hidden">
    <img src="{{ asset('images/proyek1.jpeg') }}" 
         class="absolute inset-0 w-full h-full object-cover" alt="Construction Background">
    <div class="absolute inset-0 bg-black/60"></div>
    
    <div class="relative z-10 text-center" data-aos="fade-up">
        <h1 class="text-white text-4xl md:text-5xl font-black uppercase tracking-tight">Profil <span class="text-orange-500">Perusahaan</span></h1>
    </div>
</div>

{{-- 2. Content Section --}}
<section class="py-16 bg-white">
    <div class="container mx-auto px-6">
        
        <div class="flex items-center gap-2 mb-4" data-aos="fade-right">
            <div class="w-10 h-[2px] bg-orange-500"></div>
            <span class="text-blue-900 font-black uppercase tracking-widest text-xs">About CV. Amelia Langgeng Jaya</span>
        </div>

        {{-- Judul Besar --}}
        <div class="max-w-4xl mb-12" data-aos="fade-up">
            <h2 class="text-3xl md:text-4xl font-black text-blue-900 mb-6 leading-tight uppercase">
                <span class="text-orange-500">Membangun Kualitas</span> <br>
                di Setiap Proyek Konstruksi
            </h2>
            <p class="text-slate-600 text-sm leading-relaxed font-medium">
                CV. Amelia Langgeng Jaya merupakan perusahaan jasa konstruksi yang bergerak dalam pelaksanaan dan pengelolaan proyek pembangunan. Perusahaan berkomitmen untuk memberikan hasil kerja yang berkualitas, tepat waktu, dan sesuai standar keselamatan.
            </p>
        </div>

        {{-- Row Sejarah Singkat --}}
        <div class="grid md:grid-cols-12 gap-6 items-stretch mb-20">
            <div class="md:col-span-5" data-aos="zoom-in">
                <img src="{{ !empty($settings['foto_profil']) ? asset('storage/' . $settings['foto_profil']) : asset('images/cor-crown.jpeg') }}" 
                     class="w-full h-full min-h-[300px] object-cover rounded-3xl shadow-2xl border-b-8 border-orange-500" 
                     alt="Foto Profil Perusahaan">
            </div>
            
            <div class="md:col-span-7 bg-[#001452] p-10 rounded-3xl flex flex-col justify-center shadow-2xl relative overflow-hidden" data-aos="fade-left">
                <h3 class="text-orange-500 text-2xl font-black uppercase mb-6 tracking-tight">Sejarah Singkat</h3>
                <div class="space-y-6 relative z-10">
                    <p class="text-blue-100 text-sm leading-relaxed">
                        {{ $settings['sejarah'] ?? 'CV. Amelia Langgeng Jaya didirikan sejak 2022 sebagai perusahaan yang bergerak di bidang jasa konstruksi.' }}
                    </p>
                </div>
                <div class="absolute -bottom-5 -right-5 text-white/5">
                    <svg class="w-40 h-40" fill="currentColor" viewBox="0 0 24 24"><path d="M13 3H6v18h4v-6h3c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 8h-3V7h3c1.1 0 2 .9 2 2s-.9 2-2 2z"/></svg>
                </div>
            </div>
        </div>

        <div class="grid lg:grid-cols-12 gap-12 items-start">
            
            {{-- Sisi Kiri: Bidang Usaha & Komitmen --}}
            <div class="lg:col-span-5 space-y-8" data-aos="fade-up">
                <div class="p-8 border-l-4 border-blue-900 bg-slate-50 rounded-r-2xl shadow-sm">
                    <h3 class="text-blue-900 text-xl font-black uppercase mb-4 tracking-tighter">Bidang Usaha</h3>
                    <p class="text-slate-600 text-sm leading-relaxed">
                        {{ $settings['bidang_usaha'] ?? 'Jasa konstruksi pelaksanaan pembangunan dan pekerjaan konstruksi standar.' }}
                    </p>
                </div>
                <div class="p-8 border-l-4 border-orange-500 bg-slate-50 rounded-r-2xl shadow-sm">
                    <h3 class="text-blue-900 text-xl font-black uppercase mb-4 tracking-tighter">Komitmen Kami</h3>
                    <p class="text-slate-600 text-sm leading-relaxed">
                        {{ $settings['komitmen'] ?? 'Memberikan hasil kerja terbaik melalui perencanaan yang matang.' }}
                    </p>
                </div>
            </div>

            {{-- Sisi Kanan: Keunggulan Kami (4 Slot) --}}
            <div class="lg:col-span-7" data-aos="fade-left">
                <h3 class="text-blue-900 text-2xl font-black uppercase mb-8 tracking-tighter">
                    Keunggulan <span class="text-orange-500">Kami</span>
                </h3>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @php
                        $defaultKeunggulan = "Profesional:Tenaga kerja kompeten.|Tepat Waktu:Sesuai jadwal.|Keselamatan:Standar K3.|Kualitas:Material terbaik.";
                        $keunggulanText = !empty($settings['keunggulan']) ? $settings['keunggulan'] : $defaultKeunggulan;
                        $features = explode('|', $keunggulanText);
                    @endphp

                    @foreach($features as $f)
                        @php 
                            $parts = explode(':', $f, 2); 
                            $judul = $parts[0] ?? '';
                            $deskripsi = $parts[1] ?? '';
                        @endphp
                        
                        @if(!empty($judul))
                        <div class="bg-[#f97316] p-6 rounded-[2rem] shadow-lg flex flex-col justify-start min-h-[160px] transition-all hover:shadow-orange-500/20 hover:-translate-y-1">
                            <h4 class="text-white font-bold text-lg mb-2 border-b border-white/30 pb-2 uppercase tracking-tight">
                                {{ $judul }}
                            </h4>
                            <p class="text-white/95 text-xs leading-relaxed font-medium">
                                {{ $deskripsi }}
                            </p>
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</section>
@endsection