@extends('layouts.app')

@section('title', $seoTitles['Beranda'] ?? 'Beranda')
@section('meta_description', $seoPages['Beranda'] ?? '')

@section('content')
<!-- HERO SECTION -->
<section class="relative bg-gradient-to-br from-gray-50 via-white to-gray-100 min-h-[85vh] flex items-center border-b border-gray-200 overflow-hidden">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(211,47,47,0.06),transparent_45%)]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10 w-full">
        <div class="max-w-3xl">
            <span class="inline-block bg-brand-red/10 border border-brand-red/20 text-brand-red px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider mb-6 font-display">PT Benang Merapi Perkasa</span>
            <h1 class="text-4xl sm:text-6xl font-extrabold font-display leading-tight mb-6 text-gray-900">
                Penyedia Mesin, Peralatan, & <span class="text-brand-red text-glow">Perlengkapan Industri</span> Terpercaya
            </h1>
            <p class="text-lg text-gray-600 mb-10 leading-relaxed">
                Kami menyediakan solusi peralatan industri B2B berkinerja tinggi, menjamin kelancaran operasional manufaktur, pabrik kimia, dan konstruksi di wilayah Cilegon dan seluruh Indonesia.
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="{{ route('catalog') }}" class="bg-brand-red hover:bg-brand-redHover text-white px-8 py-4 rounded font-bold font-display shadow-lg shadow-brand-red/20 transition-all duration-300 transform hover:-translate-y-0.5">
                    Jelajahi Katalog B2B
                </a>
                <a href="{{ route('contact') }}" class="bg-transparent hover:bg-gray-100 border border-gray-300 text-gray-800 px-8 py-4 rounded font-bold font-display transition-all duration-300">
                    Hubungi Kami
                </a>
            </div>
        </div>
    </div>
</section>

<!-- COMPANY OVERVIEW -->
<section class="py-24 bg-white relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
                <span class="text-brand-red font-bold uppercase text-sm tracking-widest font-display">TENTANG KAMI</span>
                <h2 class="text-3xl sm:text-4xl font-bold font-display text-gray-900 mt-2 mb-6">Mitra Pengadaan Sektor Industri Terintegrasi</h2>
                <p class="text-gray-600 leading-relaxed mb-6">{{ $companySettings['about_full'] }}</p>
                <div class="grid grid-cols-2 gap-6 mt-8">
                    <div class="border-l-2 border-brand-red pl-4">
                        <div class="text-2xl font-bold font-display text-gray-900">100%</div>
                        <div class="text-xs text-gray-500 uppercase tracking-wider mt-1">Produk Original & Bergaransi</div>
                    </div>
                    <div class="border-l-2 border-brand-red pl-4">
                        <div class="text-2xl font-bold font-display text-gray-900">B2B</div>
                        <div class="text-xs text-gray-500 uppercase tracking-wider mt-1">Sistem Penawaran Resmi</div>
                    </div>
                </div>
            </div>
            <div class="relative">
                <div class="bg-gray-50 border border-gray-200 p-8 rounded-2xl">
                    <h3 class="text-xl font-bold font-display text-brand-red mb-4 uppercase tracking-wider">Nilai Utama Kami</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <svg class="w-6 h-6 text-brand-red mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <div>
                                <h4 class="font-bold text-gray-800">Standar Kualitas Premium</h4>
                                <p class="text-sm text-gray-500">Hanya mendistribusikan brand teruji dengan standar industri internasional.</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-6 h-6 text-brand-red mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <div>
                                <h4 class="font-bold text-gray-800">Pelayanan Fleksibel & Cepat</h4>
                                <p class="text-sm text-gray-500">Proses quotation dan delivery yang responsif sesuai kebutuhan proyek.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CATEGORIES GRID -->
<section class="py-24 bg-gray-50 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="text-brand-red font-bold uppercase text-sm tracking-widest font-display">KATEGORI UTAMA</span>
            <h2 class="text-3xl sm:text-4xl font-bold font-display text-gray-900 mt-2">Solusi Peralatan Industri Berdasarkan Kategori</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($categories as $category)
                <a href="{{ route('catalog') }}?categories[]={{ $category->id }}" class="group bg-white border border-gray-200 hover:border-brand-red/30 p-8 rounded-xl transition-all duration-300 block hover:-translate-y-1 shadow-sm">
                    @if($category->image)
                        <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}" class="w-16 h-16 object-cover rounded mb-6 grayscale group-hover:grayscale-0 transition duration-300">
                    @else
                        <div class="w-16 h-16 bg-brand-red/10 text-brand-red rounded flex items-center justify-center font-bold text-xl mb-6">
                            {{ substr($category->name, 0, 2) }}
                        </div>
                    @endif
                    <h3 class="text-xl font-bold font-display text-gray-800 group-hover:text-brand-red transition duration-300">{{ $category->name }}</h3>
                    <p class="text-sm text-gray-500 mt-2 leading-relaxed line-clamp-2">{{ $category->description ?? 'Jelajahi produk di kategori ini.' }}</p>
                </a>
            @empty
                <!-- Default industrial categories if database is empty -->
                @php
                    $defaults = [
                        ['name' => 'Power Tools', 'desc' => 'Mesin bor, gerinda, sander berstandar tinggi.'],
                        ['name' => 'Pneumatic Tools', 'desc' => 'Air tools, air compressor, air filter regulator.'],
                        ['name' => 'Safety Equipment', 'desc' => 'Helm proyek, sepatu safety, sarung tangan pelindung.'],
                        ['name' => 'Hand Tools', 'desc' => 'Kunci pas, tang, palu industrial, obeng profesional.'],
                        ['name' => 'Warehouse Solution', 'desc' => 'Pallet jack, trolley, tangga industrial.'],
                        ['name' => 'Chemical Specialist', 'desc' => 'Degreaser, pelumas, pembersih karat industri.'],
                    ];
                @endphp
                @foreach($defaults as $def)
                    <a href="{{ route('catalog') }}" class="group bg-white border border-gray-200 hover:border-brand-red/30 p-8 rounded-xl transition duration-300 block shadow-sm">
                        <div class="w-16 h-16 bg-brand-red/10 text-brand-red rounded flex items-center justify-center font-bold text-xl mb-6">
                            {{ substr($def['name'], 0, 2) }}
                        </div>
                        <h3 class="text-xl font-bold font-display text-gray-800 group-hover:text-brand-red transition duration-300">{{ $def['name'] }}</h3>
                        <p class="text-sm text-gray-500 mt-2 leading-relaxed">{{ $def['desc'] }}</p>
                    </a>
                @endforeach
            @endforelse
        </div>
    </div>
</section>

<!-- BRAND MITRA -->
<section class="py-20 bg-white border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-brand-red font-bold uppercase text-sm tracking-widest font-display">BRAND MITRA</span>
            <h2 class="text-2xl font-bold font-display text-gray-900 mt-2">Didukung oleh Brand Kelas Dunia</h2>
        </div>
        <div class="flex flex-wrap items-center justify-center gap-12 opacity-80 grayscale hover:opacity-100 hover:grayscale-0 transition duration-500">
            @forelse($brands as $brand)
                @if($brand->logo)
                    <img src="{{ asset('storage/' . $brand->logo) }}" alt="{{ $brand->name }}" class="h-12 object-contain">
                @else
                    <span class="text-gray-800 font-bold tracking-wider font-display text-lg">{{ $brand->name }}</span>
                @endif
            @empty
                <span class="text-gray-400 font-bold font-display text-lg mx-4">BOSCH</span>
                <span class="text-gray-400 font-bold font-display text-lg mx-4">DEWALT</span>
                <span class="text-gray-400 font-bold font-display text-lg mx-4">KÄRCHER</span>
                <span class="text-gray-400 font-bold font-display text-lg mx-4">GRACO</span>
                <span class="text-gray-400 font-bold font-display text-lg mx-4">KING TONY</span>
                <span class="text-gray-400 font-bold font-display text-lg mx-4">KRISBOW</span>
            @endforelse
        </div>
    </div>
</section>

<!-- CLIENTS SECTION -->
<section class="py-24 bg-gray-50 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="text-brand-red font-bold uppercase text-sm tracking-widest font-display">KLIEN TERPERCAYA</span>
            <h2 class="text-3xl font-bold font-display text-gray-900 mt-2">Dipercaya oleh Perusahaan Terkemuka</h2>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center">
            @forelse($clients as $client)
                <div class="bg-white border border-gray-200 p-6 rounded-lg flex flex-col items-center justify-center group hover:border-brand-red/20 transition duration-300 shadow-sm">
                    @if($client->logo)
                        <img src="{{ asset('storage/' . $client->logo) }}" alt="{{ $client->name }}" class="h-10 object-contain grayscale group-hover:grayscale-0 transition duration-300">
                    @endif
                    <span class="text-sm font-semibold mt-3 text-gray-500 group-hover:text-gray-800 transition">{{ $client->name }}</span>
                </div>
            @empty
                <div class="bg-white border border-gray-200 p-6 rounded-lg text-center text-gray-500 shadow-sm">Krakatau Steel</div>
                <div class="bg-white border border-gray-200 p-6 rounded-lg text-center text-gray-500 shadow-sm">Lotte Chemical</div>
                <div class="bg-white border border-gray-200 p-6 rounded-lg text-center text-gray-500 shadow-sm">Mayora Group</div>
                <div class="bg-white border border-gray-200 p-6 rounded-lg text-center text-gray-500 shadow-sm">Wilmar Group</div>
            @endforelse
        </div>
    </div>
</section>
@endsection