@extends('layout')

@section('title', 'StrimNet - Internet Service Provider Terpercaya')
@section('description', 'SrimNet menyediakan layanan internet fiber optik berkualitas tinggi dengan kecepatan hingga 1 Gbps untuk rumah dan bisnis Anda.')

@section('head')
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{{ asset('images/Strimnet.png') }}">
    <link rel="shortcut icon" type="image/png" href="{{ asset('images/Strimnet.png') }}">
    <link rel="apple-touch-icon" href="{{ asset('images/Strimnet.png') }}">
    
    <!-- Force browser to reload favicon -->
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
@endsection

@section('content')<!-- Hero Section -->
    <section id="home" class="pt-16 relative min-h-screen flex items-center hero-bg" style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');">
        <!-- Animated overlay for better text readability -->
        <div class="absolute inset-0 overlay-animated"></div>
        
        <!-- Content -->
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-white">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in-up drop-shadow-lg">
                    Internet Cepat & <span class="text-yellow-400">Terpercaya</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-gray-100 max-w-3xl mx-auto animate-fade-in-up animate-delay-200 drop-shadow-md">
                    Nikmati koneksi internet fiber optik berkualitas tinggi dengan kecepatan hingga 1 Gbps untuk rumah dan bisnis Anda
                </p>
                <div class="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center animate-fade-in-up animate-delay-400">
                    <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 transform hover:scale-105 shadow-lg">
                        Lihat Paket
                    </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 transform hover:scale-105 shadow-lg">
                        Konsultasi Gratis
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <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 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Mengapa Memilih StrimNet?
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Kami memberikan layanan internet terbaik dengan teknologi terdepan dan dukungan pelanggan 24/7
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-6 animate-on-scroll transform hover:scale-105 transition-all duration-300">
                    <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="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Kecepatan Tinggi</h3>
                    <p class="text-gray-600">Koneksi fiber optik dengan kecepatan hingga 1 Gbps untuk pengalaman internet yang optimal</p>
                </div>
                <div class="text-center p-6 animate-on-scroll transform hover:scale-105 transition-all duration-300">
                    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Jaringan Stabil</h3>
                    <p class="text-gray-600">Uptime 99.9% dengan infrastruktur jaringan yang handal dan terpercaya</p>
                </div>
                <div class="text-center p-6 animate-on-scroll transform hover:scale-105 transition-all duration-300">
                    <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="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2v20M2 12h20"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Support 24/7</h3>
                    <p class="text-gray-600">Tim teknis siap membantu Anda kapan saja dengan respons cepat dan solusi terbaik</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" 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">
                    Layanan Kami
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Solusi internet lengkap untuk berbagai kebutuhan
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-blue-600 text-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Internet Broadband</h3>
                    <p class="text-gray-600">Koneksi internet untuk keluarga dengan berbagai pilihan kecepatan sesuai kebutuhan</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-green-600 text-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Internet Dedicated</h3>
                    <p class="text-gray-600">Solusi internet khusus bisnis dengan bandwidth dedicated dan SLA terjamin</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-on-scroll">                    <div class="bg-red-600 text-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Web Development</h3>
                    <p class="text-gray-600">Solusi untuk anda yang ingin membangun website yang berkualitas</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-yellow-600 text-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Manage Service</h3>
                    <p class="text-gray-600">Layanan pengelolaan jaringan IT secara menyeluruh, termasuk monitoring, troubleshooting, dan optimalisasi performa infrastruktur teknologi perusahaan Anda</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-indigo-600 text-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Network Security</h3>
                    <p class="text-gray-600">Sistem keamanan jaringan dan firewall untuk melindungi data perusahaan</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 transform hover:scale-105 animate-on-scroll">
                    <div class="bg-purple-600 text-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                        <svg class="w-6 h-6" 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-semibold mb-2">Layanan Outsourcing</h3>
                    <p class="text-gray-600">Solusi outsourcing IT profesional untuk mengelola seluruh kebutuhan teknologi perusahaan Anda</p>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-20 bg-gray-50">
        <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 StrimNet
                    </h2>
                    <p class="text-gray-600 text-lg mb-6">
                        PT. Sejahtera Tri Mulya Indonesia adalah sebuah perusahaan yang bergerak diberbagai bidang, salah satunya yaitu Internet Service Provider, FTTH dan Imprastruktur Backbone.
                    </p>
                    <p class="text-gray-600 text-lg mb-6">
                        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>
                    <div class="grid grid-cols-2 gap-6">
                        <div class="text-center animate-on-scroll">
                            <div class="text-3xl font-bold text-blue-600 mb-2">10,000+</div>
                            <div class="text-gray-600">Pelanggan Aktif</div>
                        </div>
                        <div class="text-center animate-on-scroll">
                            <div class="text-3xl font-bold text-blue-600 mb-2">99.9%</div>
                            <div class="text-gray-600">Uptime</div>
                        </div>
                        <div class="text-center animate-on-scroll">
                            <div class="text-3xl font-bold text-blue-600 mb-2">50+</div>
                            <div class="text-gray-600">Kota Terlayani</div>
                        </div>
                        <div class="text-center animate-on-scroll">
                            <div class="text-3xl font-bold text-blue-600 mb-2">24/7</div>
                            <div class="text-gray-600">Customer Support</div>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-lg p-8 animate-on-scroll">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Visi & Misi</h3>
                    <div class="space-y-6">
                        <div>
                            <h4 class="text-lg font-semibold text-blue-600 mb-2">Visi</h4>
                            <p class="text-gray-600">
                                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>
                            <h4 class="text-lg font-semibold text-blue-600 mb-2">Misi</h4>
                            <p class="text-gray-600">
                                Memberikan pelayanan kepada masyarakat serta terus melakukan perbaikan di segala aspek. Dengan Infrastruktur jaringan yang luas dan andal membuat kami siap menjalin kemitraan strategis untuk menciptakan solusi bagi pelanggan.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" 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 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Hubungi Kami
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Siap membantu Anda mendapatkan koneksi internet terbaik
                </p>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-2">
                    <form action="{{ route('contact.submit') }}" method="POST" class="bg-gray-50 rounded-lg p-8 animate-on-scroll">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-2">Nama Lengkap</label>
                                <input type="text" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                            </div>
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-2">No. Telepon</label>
                                <input type="tel" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 gap-6 mb-6">
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-2">Email</label>
                                <input type="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                            </div>
                        </div>
                        <div class="mb-6">
                            <label class="block text-gray-700 text-sm font-medium mb-2">Alamat Lengkap</label>
                            <textarea name="address" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-all duration-300 transform hover:scale-105">
                            Kirim Pesan
                        </button>
                    </form>
                </div>
                <div class="space-y-6">
                    <div class="bg-blue-50 rounded-lg p-6 animate-on-scroll transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-600 text-white w-10 h-10 rounded-lg flex items-center justify-center mr-4">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Telepon</h3>
                                <p class="text-gray-600">+62 852-1234-0075</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-purple-50 rounded-lg p-6 animate-on-scroll transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-600 text-white w-10 h-10 rounded-lg flex items-center justify-center mr-4">
                                <svg class="w-10 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Email</h3>
                                <p class="text-gray-600">info@trimulya.id</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-orange-50 rounded-lg p-6 animate-on-scroll transform hover:scale-105 transition-all duration-300">
                        <div class="flex items-center mb-4">
                            <div class="bg-orange-600 text-white w-10 h-10 rounded-lg flex items-center justify-center mr-4">
                                <svg class="w-10 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Alamat</h3>
                                <p class="text-gray-600">Kp Cibahong, Desa/Kelurahan Sukaluyu, Kec. Mangunreja,Kab. Tasikmalaya, Provinsi Jawa Barat 46462
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


    <script>
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add active class to navigation links based on scroll position
        window.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('section[id]');
            const navLinks = document.querySelectorAll('nav a[href^="#"]');
            
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (scrollY >= (sectionTop - 200)) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('text-blue-600');
                if (link.getAttribute('href') === `#${current}`) {
                    link.classList.add('text-blue-600');
                }
            });
        });
    </script>
</body>
</html>