@extends('layouts.app')

@section('title', 'PT Vesta Global Naratama - Portal Ekosistem Korporat')

@section('content')
    <section style="text-align: center; padding: 40px 20px; background: #fafbfc; border-radius: 8px; margin-bottom: 40px; border: 1px solid #e2e8f0;">
        <span style="background: #e0e7ff; color: #1a73e8; font-size: 12px; font-weight: bold; padding: 6px 16px; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px;">
            Parent Company Portal
        </span>
        <h2 style="font-size: 32px; color: #0f2c59; border: none; padding: 0; margin: 20px 0 10px 0; font-weight: 700;">
            One Partner. End-to-End Solutions.
        </h2>
        <p style="text-align: center; max-width: 700px; margin: 0 auto 25px auto; font-size: 16px; color: #4a5568;">
            PT Vesta Global Naratama adalah penyedia solusi terpadu yang mengintegrasikan pilar infrastruktur fisik, rekayasa teknologi, dan ekosistem digital mutakhir untuk mendorong transformasi enterprise di Indonesia.
        </p>
    </section>

    <section style="margin-bottom: 50px;">
        <div style="text-align: center; margin-bottom: 30px;">
            <h2 style="border: none; padding: 0; font-size: 24px; color: #0f2c59; margin-bottom: 5px;">Pilih Pintu Gerbang Layanan Kami</h2>
            <p style="text-align: center; color: #718096; font-size: 14px; margin: 0;">Silakan eksplorasi dua pilar utama bisnis kami di bawah ini</p>
        </div>

        <div class="brand-portal-grid">
            <div class="brand-card active-brand" style="position: relative; overflow: hidden;">
                <div style="position: absolute; right: -20px; bottom: -20px; opacity: 0.05; color: #0f2c59;">
                    <svg width="150" height="150" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L11 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                </div>

                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="background: #0f2c59; color: #ffffff; padding: 12px; border-radius: 8px; display: flex; align-items: center;">
                        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7C4.547 9.547 4.5 10.768 4.5 12s.047 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.092-1.209.138-2.43.138-3.662z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 15a3 3 0 100-6 3 3 0 000 6z"/></svg>
                    </div>
                    <div>
                        <span class="brand-badge badge-primary" style="margin: 0;">Sub-Web / Divisi Digital</span>
                        <h3 style="margin: 5px 0 0 0; font-size: 20px;">Vesta Digital Ecosystem</h3>
                    </div>
                </div>
                <p style="font-size: 14px; color: #4a5568;">
                    Fokus pada rekayasa perangkat lunak tingkat tinggi, otomatisasi bisnis terintegrasi, dan kecerdasan buatan untuk merampingkan operasional internal enterprise.
                </p>
                <div style="margin-top: 20px; border-top: 1px dashed #cbd5e1; padding-top: 15px;">
                    <a href="#digital-section" style="color: #0f2c59; text-decoration: none; font-weight: bold; font-size: 14px; display: inline-flex; align-items: center; gap: 5px;">
                        Lihat Profil Layanan Digital &rarr;
                    </a>
                </div>
            </div>

            <div class="brand-card" style="position: relative; overflow: hidden;">
                <div style="position: absolute; right: -20px; bottom: -20px; opacity: 0.05; color: #1a73e8;">
                    <svg width="150" height="150" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                </div>

                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="background: #1a73e8; color: #ffffff; padding: 12px; border-radius: 8px; display: flex; align-items: center;">
                        <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                    </div>
                    <div>
                        <span class="brand-badge badge-secondary" style="margin: 0; background-color: #e0f2fe; color: #0369a1;">Sub-Web / Lini Non-Digital</span>
                        <h3 style="margin: 5px 0 0 0; font-size: 20px; color: #1a73e8;">Vesta Infra & General Engineering</h3>
                    </div>
                </div>
                <p style="font-size: 14px; color: #718096;">
                    Penyediaan infrastruktur fisik teknologi informasi, jaringan serat optik korporasi, manajemen pusat data (Data Center), serta layanan konsultasi manajemen bisnis offline.
                </p>
                <div style="margin-top: 20px; border-top: 1px dashed #e2e8f0; padding-top: 15px;">
                    <a href="#infra-section" style="color: #1a73e8; text-decoration: none; font-weight: bold; font-size: 14px; display: inline-flex; align-items: center; gap: 5px;">
                        Lihat Profil Layanan Infrastruktur &rarr;
                    </a>
                </div>
            </div>
        </div>
    </section>

    <div id="digital-section" style="scroll-margin-top: 20px; margin-bottom: 50px; padding: 30px; border: 1px solid #cbd5e1; background-color: #f8fafc; border-radius: 8px;">
        <div style="display: flex; align-items: center; gap: 10px;">
            <div style="width: 12px; height: 24px; background-color: #0f2c59; border-radius: 4px;"></div>
            <h2 style="border: none; padding: 0; margin: 0; font-size: 22px;">Eksplorasi Divisi: Vesta Digital</h2>
        </div>
        <p style="margin-top: 15px;">
            Merujuk pada dokumen spesifikasi teknis perusahaan, lini bisnis digital kami bergerak menggunakan arsitektur mutakhir untuk memangkas inefisiensi bisnis konvensional hingga 70%.
        </p>

        <div class="data-table-container" style="background: #ffffff;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="background-color: #0f2c59;">Solusi Digital Utama</th>
                        <th style="background-color: #0f2c59;">Implementasi Core Technology</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Custom Enterprise CRM</strong></td>
                        <td>Sistem manajemen data pelanggan, pipa penjualan (*sales pipeline*), dan analitik yang dibangun di atas fondasi **Laravel 12** & **MySQL 8.x**.</td>
                    </tr>
                    <tr>
                        <td><strong>WhatsApp AI Integration</strong></td>
                        <td>Otomatisasi respon obrolan cerdas menggunakan kecerdasan buatan terpadu (**Groq AI - LLaMA/Mixtral**) dan gateway komunikasi resmi dari **Fonnte API**.</td>
                    </tr>
                    <tr>
                        <td><strong>Integrated HRIS & Finance</strong></td>
                        <td>Sistem digitalisasi absensi terenkripsi, manajemen penggajian, dan otomatisasi pelaporan keuangan korporat.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div id="infra-section" style="scroll-margin-top: 20px; margin-bottom: 40px; padding: 30px; border: 1px solid #e2e8f0; background-color: #ffffff; border-radius: 8px;">
        <div style="display: flex; align-items: center; gap: 10px;">
            <div style="width: 12px; height: 24px; background-color: #1a73e8; border-radius: 4px;"></div>
            <h2 style="border: none; padding: 0; margin: 0; font-size: 22px; color: #1a73e8;">Eksplorasi Divisi: Vesta IT Infrastructure</h2>
        </div>
        <p style="margin-top: 15px;">
            Selain produk piranti lunak digital, PT Vesta Global Naratama diperkuat oleh tim insinyur bersertifikasi global untuk menangani aset fisik dan topologi jaringan vital perusahaan Anda.
        </p>

        <div class="data-table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="background-color: #1a73e8;">Solusi Infrastruktur & Non-Digital</th>
                        <th style="background-color: #1a73e8;">Spesifikasi Cakupan Kerja</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Corporate Network Architecture</strong></td>
                        <td>Instalasi kabel serat optik (*Fiber Optic*), interkoneksi antar kantor cabang, manajemen routing enterprise, dan optimasi bandwidth.</td>
                    </tr>
                    <tr>
                        <td><strong>Data Center & Cloud Engineering</strong></td>
                        <td>Konfigurasi server on-premises, migrasi arsitektur cloud skala besar, *load balancing*, serta penyusunan Disaster Recovery Plan (DRP).</td>
                    </tr>
                    <tr>
                        <td><strong>Cybersecurity Systems</strong></td>
                        <td>Pemasangan firewall perangkat keras berlapis, audit keamanan berkala, enkripsi end-to-end data sensitif, dan proteksi serangan DDoS.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection