@extends('website.layout')

@section('title', ($halaman->judul ?? 'Paket Internet') . ' - ' . ($perusahaan->perusahaan ?? 'ISP Provider'))
@section('description', $halaman->meta_description ?? 'Lihat semua paket internet terbaik kami dengan harga terjangkau dan kualitas terpercaya')

@section('content')
<!-- Page Content from Database -->
@if($halaman)
<section class="py-5" style="margin-top: 80px;">
    <div class="page-content">
        {!! $halaman->konten !!}
    </div>
</section>
@else
<!-- Fallback Hero Section -->
<section class="hero-section" style="padding: 120px 0 80px; min-height: 60vh;">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8" data-aos="fade-up">
                <h1 class="display-4 fw-bold mb-4">Paket Internet Terbaik</h1>
                <p class="lead mb-4">
                    Pilih paket internet yang sesuai dengan kebutuhan Anda. Semua paket dilengkapi 
                    dengan layanan berkualitas dan dukungan 24/7.
                </p>
            </div>
        </div>
    </div>
</section>
@endif


<!-- Benefits Section -->
<section class="py-5 bg-light-custom">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Keuntungan Berlangganan dengan Kami</h2>
            <p>Dapatkan berbagai benefit eksklusif dengan menjadi pelanggan kami</p>
        </div>
        
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
                <div class="text-center">
                    <div class="service-icon mx-auto mb-3" style="width: 70px; height: 70px; font-size: 1.8rem;">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h5>Instalasi Gratis</h5>
                    <p class="text-muted">Free instalasi dan konfigurasi perangkat oleh teknisi berpengalaman</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
                <div class="text-center">
                    <div class="service-icon mx-auto mb-3" style="width: 70px; height: 70px; font-size: 1.8rem;">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h5>Support 24/7</h5>
                    <p class="text-muted">Tim support siaga 24 jam untuk membantu kendala teknis Anda</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
                <div class="text-center">
                    <div class="service-icon mx-auto mb-3" style="width: 70px; height: 70px; font-size: 1.8rem;">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h5>Garansi Uptime</h5>
                    <p class="text-muted">Jaminan uptime 99.9% dengan infrastruktur network yang handal</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400">
                <div class="text-center">
                    <div class="service-icon mx-auto mb-3" style="width: 70px; height: 70px; font-size: 1.8rem;">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <h5>Harga Transparan</h5>
                    <p class="text-muted">Tidak ada biaya tersembunyi, semua sudah termasuk dalam paket</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-5">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Pertanyaan yang Sering Diajukan</h2>
            <p>Temukan jawaban atas pertanyaan umum tentang layanan kami</p>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion" data-aos="fade-up">
                    <div class="accordion-item border-0 mb-3" style="border-radius: 15px; overflow: hidden;">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                Berapa lama proses instalasi?
                            </button>
                        </h2>
                        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Proses instalasi biasanya memakan waktu 1-3 hari kerja setelah pembayaran dikonfirmasi. 
                                Tim teknisi kami akan menghubungi Anda untuk jadwal instalasi.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3" style="border-radius: 15px; overflow: hidden;">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                Apakah ada kontrak minimal?
                            </button>
                        </h2>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Kami menyediakan fleksibilitas tanpa kontrak jangka panjang. Anda dapat berlangganan bulanan 
                                dan berhenti kapan saja dengan pemberitahuan minimal 1 bulan sebelumnya.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3" style="border-radius: 15px; overflow: hidden;">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                Bagaimana cara pembayaran?
                            </button>
                        </h2>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Pembayaran dapat dilakukan melalui transfer bank, e-wallet, atau tunai. 
                                Tagihan akan dikirim setiap bulan sesuai dengan tanggal aktivasi.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3" style="border-radius: 15px; overflow: hidden;">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                Apakah ada batasan kuota?
                            </button>
                        </h2>
                        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Semua paket PPPoE kami adalah unlimited tanpa ada FUP (Fair Usage Policy). 
                                Anda dapat menggunakan internet sepuasnya sesuai dengan kecepatan paket yang dipilih.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 text-white" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-8" data-aos="fade-up">
                <h2 class="mb-4">Siap Berlangganan Internet Terbaik?</h2>
                <p class="lead mb-4">
                    Jangan tunggu lagi! Dapatkan koneksi internet super cepat dan stabil sekarang juga. 
                    Tim kami siap membantu Anda memilih paket yang tepat.
                </p>
                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    @if($perusahaan && $perusahaan->wa_owner)
                        <a href="https://wa.me/{{ $perusahaan->wa_owner }}?text=Halo, saya ingin berlangganan internet. Mohon informasi paket yang tersedia." 
                           target="_blank" class="btn btn-light btn-lg">
                            <i class="fab fa-whatsapp me-2"></i>Chat WhatsApp
                        </a>
                    @endif
                    <a href="{{ route('website.kontak') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-envelope me-2"></i>Kontak Kami
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Page Content Styling */
.page-content {
    line-height: 1.8;
    color: #333;
}

.page-content h1, .page-content h2, .page-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.page-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.page-content h2 {
    font-size: 2rem;
    font-weight: 600;
}

.page-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.page-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

.page-content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.page-content li {
    margin-bottom: 0.5rem;
}

.page-content .btn {
    margin: 0.25rem;
}

.page-content .container {
    max-width: 1200px;
}

.page-content .bg-light {
    background-color: #f8f9fa !important;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.page-content .bg-light:hover {
    transform: translateY(-5px);
}

.page-content .fas {
    color: var(--primary-color);
}

.page-content .text-success {
    color: #28a745 !important;
}

.page-content .text-primary {
    color: var(--primary-color) !important;
}

.page-content .text-info {
    color: #17a2b8 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-content h1 {
        font-size: 2rem;
    }
    
    .page-content h2 {
        font-size: 1.5rem;
    }
    
    .page-content .btn {
        margin-bottom: 0.5rem;
        width: 100%;
    }
    
    .page-content .btn.me-3 {
        margin-right: 0 !important;
        margin-bottom: 1rem;
    }
}
</style>
@endsection