@extends('layout')

@section('title', 'Tentang Kami - StrimNet ISP')
@section('description', 'Pelajari lebih lanjut tentang StrimNet, penyedia layanan internet terpercaya sejak 2015. Komitmen kami untuk memberikan koneksi berkualitas tinggi di seluruh Indonesia.')

@section('content')    <!-- Hero Section -->
    <section class="pt-16 bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in-up">
                    Tentang <span class="text-yellow-400">StrimNet</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto animate-fade-in-up animate-delay-200">
                    {{-- Menghubungkan Indonesia dengan teknologi internet terdepan sejak 2015 --}}
                </p>
            </div>
        </div>
    </section>

    <!-- Company Story -->
    <section class="py-20 bg-white">        <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-12 items-center">
                <div class="animate-on-scroll">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
                        Tentang Kami
                    </h2>
                    <div class="space-y-6 text-gray-600 text-lg">
                        <p>
                            PT. Sejahtera Tri Mulya Indonesia adalah sebuah perusahaan yang bergerak diberbagai bidang, salah satunya yaitu Internet Service Provider, FTTH dan Imprastruktur Backbone.
                        </p>
                        <p>
                            PT. Sejahtera Tri Mulya Indonesia yang beralamat di Kp Cibahong, Desa/Kelurahan Sukaluyu, Kec. Mangunreja, Kab.
                            Tasikmalaya, Provinsi Jawa Barat,
                            Kode Pos: 46462 dan sejumlah cabang yang tersebar di beberapa kota di  Jawa Barat, Sebagai penyedia jaringan telekomunikasi, kami melayani Infrastruktur telekomunikasi yang terintegrasi Innercity corporate access network, mobile backhaul, backbone network.

                        </p>
                        <p>
                            Seiring berkembangnya teknologi, StrimNet terus berinovasi dengan menghadirkan 
                            solusi-solusi baru seperti cloud hosting, network security, dan layanan enterprise 
                            untuk memenuhi kebutuhan digital yang semakin kompleks.
                        </p>
                    </div>
                </div>                <div class="relative animate-on-scroll">
                    <div class="bg-blue-100 rounded-2xl p-8">
                        <img src="https://via.placeholder.com/500x400/3B82F6/FFFFFF?text=TrimNet+Building" 
                             alt="Kantor StrimNet" 
                             class="w-full h-80 object-cover rounded-lg shadow-lg">
                    </div>
                    <div class="absolute -bottom-6 -left-6 bg-yellow-400 rounded-lg p-4 shadow-lg animate-on-scroll">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-gray-900">8+</div>
                            <div class="text-sm text-gray-700">Tahun Pengalaman</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vision & Mission -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Visi & Misi Kami
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Komitmen kami untuk masa depan digital Indonesia
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Vision -->
                <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Visi</h3>
                    <p class="text-gray-600 text-lg leading-relaxed">
                        Terdepan dalam memberikan solusi terbaik di era digitalisasi masyarakat terhadap kebutuhan koneksi data dan internet. Terlebih mendukung pembangunan infrastruktur Information and Communication Technology (ICT) yang andal dan memberikan kepuasan pelanggan. Melayani Berbagai kebutuhan pembangunan di bidang lainnya.
                    </p>
                </div>
                
                <!-- Mission -->
                <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Misi</h3>
                    <p class="text-gray-600 text-lg leading-relaxed">
                        Terdepan dalam memberikan solusi terbaik di era digitalisasi masyarakat terhadap kebutuhan koneksi data dan internet. Terlebih mendukung pembangunan infrastruktur Information and Communication Technology (ICT) yang andal dan memberikan kepuasan pelanggan. Melayani Berbagai kebutuhan pembangunan di bidang lainnya.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Company Stats -->
    <section class="py-20 bg-blue-600 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    Pencapaian Kami
                </h2>
                <p class="text-blue-100 text-lg max-w-2xl mx-auto">
                    Angka-angka yang menunjukkan komitmen kami terhadap kualitas layanan
                </p>
            </div>
            
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach($stats as $stat)
                    <div class="text-center">
                        <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">{{ $stat['number'] }}</div>
                        <div class="text-blue-100 text-lg">{{ $stat['label'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Company Values -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Nilai-Nilai Perusahaan
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Prinsip-prinsip yang memandu setiap langkah kami
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-6">
                    <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Kualitas</h3>
                    <p class="text-gray-600">
                        Kami tidak pernah berkompromi dengan kualitas. Setiap layanan yang kami berikan 
                        harus memenuhi standar tertinggi untuk kepuasan pelanggan.
                    </p>
                </div>
                
                <div class="text-center p-6">
                    <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Inovasi</h3>
                    <p class="text-gray-600">
                        Kami terus berinovasi dan mengadopsi teknologi terbaru untuk memberikan 
                        solusi terdepan yang sesuai dengan kebutuhan zaman.
                    </p>
                </div>
                
                <div class="text-center p-6">
                    <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Kepercayaan</h3>
                    <p class="text-gray-600">
                        Kepercayaan adalah fondasi hubungan kami dengan pelanggan. Kami berkomitmen 
                        untuk selalu jujur, transparan, dan dapat diandalkan.
                    </p>
                </div>
                
                <div class="text-center p-6">
                    <div class="bg-yellow-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Responsif</h3>
                    <p class="text-gray-600">
                        Kami memahami pentingnya waktu. Tim support kami siap membantu Anda 24/7 
                        dengan respons yang cepat dan solusi yang efektif.
                    </p>
                </div>
                
                <div class="text-center p-6">
                    <div class="bg-red-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Peduli</h3>
                    <p class="text-gray-600">
                        Kami peduli terhadap kebutuhan pelanggan dan berkontribusi positif 
                        bagi kemajuan masyarakat dan lingkungan sekitar.
                    </p>
                </div>
                
                <div class="text-center p-6">
                    <div class="bg-indigo-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Integritas</h3>
                    <p class="text-gray-600">
                        Integritas adalah inti dari semua yang kami lakukan. Kami beroperasi dengan 
                        standar etika tertinggi dalam setiap aspek bisnis.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Tim Kepemimpinan
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Para ahli yang memimpin StrimNet menuju masa depan yang lebih terhubung
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($team as $member)
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                        <div class="aspect-w-1 aspect-h-1">
                            <img src="{{ $member['image'] }}" alt="{{ $member['name'] }}" 
                                 class="w-full h-full object-cover">
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">{{ $member['name'] }}</h3>
                            <p class="text-blue-600 font-semibold mb-3">{{ $member['position'] }}</p>
                            <p class="text-gray-600">{{ $member['description'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Awards & Certifications -->
    {{-- <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Penghargaan & Sertifikasi
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Pengakuan atas dedikasi kami dalam memberikan layanan terbaik
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-yellow-600" 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"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Best ISP 2024</h3>
                    <p class="text-sm text-gray-600">Indonesia Internet Awards</p>
                </div>
                
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">ISO 27001</h3>
                    <p class="text-sm text-gray-600">Information Security Management</p>
                </div>
                
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Top Growth</h3>
                    <p class="text-sm text-gray-600">Indonesian Telco Awards 2023</p>
                </div>
                
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Customer Choice</h3>
                    <p class="text-sm text-gray-600">Digital Life Award 2023</p>
                </div>
            </div>
        </div>
    </section> --}}

    <!-- Timeline -->
    {{-- <section class="py-20 bg-gray-900 text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">
                    Perjalanan Kami
                </h2>
                <p class="text-gray-300 text-lg">
                    Milestone penting dalam perjalanan StrimNet
                </p>
            </div>
            
            <div class="space-y-8">
                <div class="flex items-center">
                    <div class="bg-blue-600 rounded-full w-4 h-4 mr-6 flex-shrink-0"></div>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold">Pendirian StrimNet</h3>
                            <span class="text-blue-400 font-semibold">2015</span>
                        </div>
                        <p class="text-gray-300 mt-2">Didirikan di Jakarta dengan visi memberikan internet berkualitas untuk semua</p>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <div class="bg-green-600 rounded-full w-4 h-4 mr-6 flex-shrink-0"></div>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold">Ekspansi ke 5 Kota</h3>
                            <span class="text-green-400 font-semibold">2017</span>
                        </div>
                        <p class="text-gray-300 mt-2">Memperluas layanan ke Bandung, Surabaya, Medan, Semarang, dan Makassar</p>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <div class="bg-yellow-600 rounded-full w-4 h-4 mr-6 flex-shrink-0"></div>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold">Peluncuran Fiber Optik</h3>
                            <span class="text-yellow-400 font-semibold">2019</span>
                        </div>
                        <p class="text-gray-300 mt-2">Menghadirkan teknologi fiber optik dengan kecepatan hingga 1 Gbps</p>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <div class="bg-purple-600 rounded-full w-4 h-4 mr-6 flex-shrink-0"></div>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold">10,000 Pelanggan</h3>
                            <span class="text-purple-400 font-semibold">2022</span>
                        </div>
                        <p class="text-gray-300 mt-2">Mencapai milestone 10,000 pelanggan aktif di seluruh Indonesia</p>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <div class="bg-red-600 rounded-full w-4 h-4 mr-6 flex-shrink-0"></div>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold">Layanan Enterprise</h3>
                            <span class="text-red-400 font-semibold">2024</span>
                        </div>
                        <p class="text-gray-300 mt-2">Meluncurkan solusi cloud hosting dan network security untuk bisnis</p>
                    </div>
                </div>
                
                <div class="flex items-center">
                    <div class="bg-blue-400 rounded-full w-4 h-4 mr-6 flex-shrink-0"></div>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xl font-semibold">50+ Kota Terlayani</h3>
                            <span class="text-blue-300 font-semibold">2025</span>
                        </div>
                        <p class="text-gray-300 mt-2">Memperluas jangkauan ke 50+ kota di Indonesia dengan teknologi terdepan</p>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <!-- CTA Section -->
    <section class="py-20 bg-blue-600">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                Bergabunglah dengan Keluarga StrimNet
            </h2>
            <p class="text-blue-100 text-lg mb-8 max-w-2xl mx-auto">
                Rasakan pengalaman internet yang berbeda dengan teknologi terdepan dan layanan terbaik dari StrimNet.
            </p>
            <div class="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
                <a href="{{ route('packages') }}" class="inline-block bg-yellow-400 text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition">
                    Lihat Paket Internet
                </a>
                <a href="{{ route('contact') }}" class="inline-block border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
                    Hubungi Kami
                </a>
            </div>
        </div>
    </section>
@endsection