@extends('layouts.landing')

@section('title', 'Tentang Kami - DaisyRisk Global Supply Chain Risk Intelligence')

@push('styles')
<style>
    :root {
        --pur: #F8B84E;
        --tx: #2C3E50;
        --tx2: #6B7280;
        --tx3: #9CA3AF;
        --bg: #FFFFFF;
        --bg2: #FFFEF9; /* Cream muda */
        --bg3: #FEF7E0;
        --sf: #FFFFFF;
        --bd: #E8E5D8;
        --bd2: #E8E5D8;
        --grad: linear-gradient(135deg, #F4D03F 0%, #F8B84E 100%);
    }

    body {
        background-color: var(--bg2) !important;
        color: var(--tx) !important;
        font-family: 'Space Grotesk', sans-serif;
    }

    /* Constrained centered container */
    .about-page-wrapper {
        max-width: 1024px;
        margin: 0 auto;
        padding: 80px 24px;
        text-align: center;
    }

    /* Section layout */
    .about-sec {
        margin-bottom: 72px;
    }

    .about-sec h2 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--tx);
        margin-bottom: 12px;
    }

    .about-sec p.section-sub {
        font-size: 0.95rem;
        color: var(--tx2);
        max-width: 600px;
        margin: 0 auto 40px auto;
        line-height: 1.6;
    }

    /* Grid of 4 clean cards */
    .about-grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .about-minimal-card {
        background-color: var(--sf);
        border: 1px solid var(--bd);
        border-radius: 16px;
        padding: 24px 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
        transition: all 0.25s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        text-align: left;
    }

    .about-minimal-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(248, 184, 78, 0.08);
        border-color: #CBD5E1;
    }

    .card-icon-wrapper {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }

    .card-icon-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .icon-blue { background-color: rgba(59, 130, 246, 0.08); color: #3b82f6; }
    .icon-orange { background-color: rgba(248, 184, 78, 0.08); color: #F8B84E; }
    .icon-green { background-color: rgba(127, 176, 105, 0.08); color: #7FB069; }
    .icon-indigo { background-color: rgba(99, 102, 241, 0.08); color: #6366f1; }

    .about-minimal-card h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--tx);
        margin-bottom: 8px;
    }

    .about-minimal-card p {
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--tx2);
        margin: 0;
    }

    /* Vertical processing flow styling */
    .vertical-workflow {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 520px;
        margin: 0 auto;
    }

    .workflow-item {
        background-color: var(--sf);
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
        text-align: left;
    }

    .step-dot {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid var(--bd);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .dot-blue { border-color: #3b82f6; color: #3b82f6; }
    .dot-green { border-color: #7FB069; color: #7FB069; }
    .dot-indigo { border-color: #6366f1; color: #6366f1; }
    .dot-orange { border-color: #F8B84E; color: #F8B84E; }
    .dot-red { border-color: #EF4444; color: #EF4444; }
    .dot-purple { border-color: #8B5CF6; color: #8B5CF6; }
    .dot-teal { border-color: #14B8A6; color: #14B8A6; }

    .workflow-item-content {
        flex-grow: 1;
    }

    .workflow-item-content h5 {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--tx);
        margin: 0 0 2px 0;
    }

    .workflow-item-content p {
        font-size: 0.775rem;
        color: var(--tx2);
        margin: 0;
    }

    .arrow-divider {
        color: var(--tx3);
        margin: 10px 0;
        font-size: 1.2rem;
    }

    /* Fitur Utama grid list (Simple bullet) */
    .features-grid-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        text-align: left;
    }

    .feature-minimal-item {
        background-color: var(--sf);
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 20px;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
    }

    .feature-accent-bullet {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-top: 8px;
        flex-shrink: 0;
    }

    .bullet-orange { background-color: #F8B84E; }
    .bullet-green { background-color: #7FB069; }
    .bullet-blue { background-color: #3b82f6; }
    .bullet-indigo { background-color: #6366f1; }
    .bullet-red { background-color: #ef4444; }
    .bullet-purple { background-color: #8b5cf6; }
    .bullet-teal { background-color: #14b8a6; }
    .bullet-slate { background-color: #64748b; }

    .feature-minimal-item h5 {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--tx);
        margin-bottom: 4px;
    }

    .feature-minimal-item p {
        font-size: 0.825rem;
        line-height: 1.5;
        color: var(--tx2);
        margin: 0;
    }

    /* Technology stack grid list */
    .tech-minimal-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        text-align: left;
    }

    .tech-minimal-card {
        background-color: var(--sf);
        border: 1px solid var(--bd);
        border-radius: 12px;
        padding: 16px;
    }

    .tech-badge {
        display: inline-block;
        font-size: 0.725rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        margin-bottom: 10px;
        color: #FFFFFF;
    }

    .badge-laravel { background-color: #FF2D20; }
    .badge-mysql { background-color: #00758F; }
    .badge-bootstrap { background-color: #7952B3; }
    .badge-chartjs { background-color: #FF6384; }
    .badge-leaflet { background-color: #199900; }
    .badge-openmeteo { background-color: #2D3748; }
    .badge-worldbank { background-color: #002244; }
    .badge-exchangerate { background-color: #059669; }
    .badge-gnews { background-color: #DC2626; }

    .tech-minimal-card p {
        font-size: 0.8rem;
        color: var(--tx2);
        margin: 0;
        line-height: 1.45;
    }

    /* Call to Action card */
    .about-cta {
        background-color: var(--sf);
        border: 1px solid var(--bd);
        border-radius: 16px;
        padding: 48px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
    }

    .about-cta h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--tx);
        margin-bottom: 12px;
    }

    .about-cta p {
        font-size: 0.95rem;
        color: var(--tx2);
        max-width: 580px;
        margin: 0 auto 24px auto;
        line-height: 1.6;
    }

    .cta-btn-custom {
        display: inline-flex;
        align-items: center;
        background: var(--grad);
        color: var(--tx) !important;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 12px 28px;
        border-radius: 10px;
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(248, 184, 78, 0.2);
        transition: all 0.2s ease;
        border: none;
    }

    .cta-btn-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(248, 184, 78, 0.3);
    }

    .cta-hint {
        font-size: 0.775rem;
        color: var(--tx3);
        margin-top: 10px;
        display: block;
    }

    /* Clean minimal footer */
    .about-footer {
        padding-top: 24px;
        margin-top: 80px;
        border-top: 1px solid var(--bd);
        font-size: 0.85rem;
        color: var(--tx3);
    }

    /* Responsive styling */
    @media (max-width: 1024px) {
        .about-grid-4 {
            grid-template-columns: repeat(2, 1fr);
        }
        .tech-minimal-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .about-page-wrapper {
            padding: 40px 16px;
        }
        .about-grid-4 {
            grid-template-columns: 1fr;
        }
        .features-grid-list {
            grid-template-columns: 1fr;
        }
        .tech-minimal-grid {
            grid-template-columns: 1fr;
        }
        .about-cta {
            padding: 32px 20px;
        }
    }
</style>
@endpush

@section('content')
<div class="about-page-wrapper">

    {{-- ========== 1. WHY CHOOSE DAISYRISK ========== --}}
    <section class="about-sec">
        <div class="about-header">
            <h2>Mengapa Memilih <span style="color: #F8B84E;">DaisyRisk</span>?</h2>
            <p class="section-sub">Platform intelijen risiko rantai pasok global terintegrasi untuk memperkuat ketahanan operasional organisasi Anda.</p>
        </div>

        <div class="about-grid-4">
            {{-- Card 1 --}}
            <div class="about-minimal-card">
                <div class="card-icon-wrapper icon-blue">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h2.945M11.026 18c.005.32.016.633.033.945m-2.196-2.585A10.003 10.003 0 0012 22a10 10 0 10-10-10c0 1.954.562 3.778 1.53 5.315M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
                    </svg>
                </div>
                <h4>Data Global</h4>
                <p>Mengintegrasikan berbagai sumber data internasional untuk memberikan gambaran kondisi rantai pasok global secara menyeluruh.</p>
            </div>

            {{-- Card 2 --}}
            <div class="about-minimal-card">
                <div class="card-icon-wrapper icon-orange">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                </div>
                <h4>Analisis Real-Time</h4>
                <p>Sinkronisasi data dilakukan secara berkala sehingga informasi yang ditampilkan selalu terbaru dan mendukung pengambilan keputusan.</p>
            </div>

            {{-- Card 3 --}}
            <div class="about-minimal-card">
                <div class="card-icon-wrapper icon-green">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" 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"/>
                    </svg>
                </div>
                <h4>Risk Scoring</h4>
                <p>Mengolah berbagai indikator menjadi skor risiko yang mudah dipahami dan membantu proses analisis.</p>
            </div>

            {{-- Card 4 --}}
            <div class="about-minimal-card">
                <div class="card-icon-wrapper icon-indigo">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                    </svg>
                </div>
                <h4>Integrasi Multi API</h4>
                <p>Menggunakan Open-Meteo, World Bank, Exchange Rate API, GNews, dan berbagai sumber data terpercaya lainnya.</p>
            </div>
        </div>
    </section>

    {{-- ========== 2. HOW IT WORKS ========== --}}
    <section class="about-sec">
        <div class="about-header">
            <h2>Bagaimana DaisyRisk Bekerja?</h2>
            <p class="section-sub">Alur sinkronisasi dan kompilasi data otomatis yang terstruktur dari hulu ke hilir.</p>
        </div>

        <div class="vertical-workflow">
            {{-- Step 1 --}}
            <div class="workflow-item animate__animated animate__fadeIn">
                <div class="step-dot dot-blue">1</div>
                <div class="workflow-item-content">
                    <h5>Weather Data</h5>
                    <p>Sinkronisasi data curah hujan dan iklim global dari Open-Meteo.</p>
                </div>
            </div>

            <div class="arrow-divider">↓</div>

            {{-- Step 2 --}}
            <div class="workflow-item">
                <div class="step-dot dot-green">2</div>
                <div class="workflow-item-content">
                    <h5>Economic Data</h5>
                    <p>Integrasi indikator inflasi dan pertumbuhan GDP dari World Bank.</p>
                </div>
            </div>

            <div class="arrow-divider">↓</div>

            {{-- Step 3 --}}
            <div class="workflow-item">
                <div class="step-dot dot-indigo">3</div>
                <div class="workflow-item-content">
                    <h5>Port Information</h5>
                    <p>Kompilasi status kelancaran operasional pelabuhan laut utama.</p>
                </div>
            </div>

            <div class="arrow-divider">↓</div>

            {{-- Step 4 --}}
            <div class="workflow-item">
                <div class="step-dot dot-orange">4</div>
                <div class="workflow-item-content">
                    <h5>Currency Data</h5>
                    <p>Kalkulasi nilai volatilitas deviasi kurs dari Exchange Rate API.</p>
                </div>
            </div>

            <div class="arrow-divider">↓</div>

            {{-- Step 5 --}}
            <div class="workflow-item">
                <div class="step-dot dot-red">5</div>
                <div class="workflow-item-content">
                    <h5>News Analysis</h5>
                    <p>Ekstraksi bobot berita global real-time dari GNews API.</p>
                </div>
            </div>

            <div class="arrow-divider">↓</div>

            {{-- Step 6 --}}
            <div class="workflow-item">
                <div class="step-dot dot-purple">6</div>
                <div class="workflow-item-content">
                    <h5>Risk Scoring Engine</h5>
                    <p>Pengolahan algoritma komprehensif untuk skor risiko terpadu.</p>
                </div>
            </div>

            <div class="arrow-divider">↓</div>

            {{-- Step 7 --}}
            <div class="workflow-item">
                <div class="step-dot dot-teal">7</div>
                <div class="workflow-item-content">
                    <h5>Analytics Dashboard</h5>
                    <p>Penyajian visual peta dan grafik interaktif untuk organisasi.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ========== 3. MAIN FEATURES ========== --}}
    <section class="about-sec">
        <div class="about-header">
            <h2>Fitur Utama DaisyRisk</h2>
            <p class="section-sub">Modul canggih yang saling terhubung untuk mendukung pengawasan risiko rantai pasok global.</p>
        </div>

        <div class="features-grid-list">
            {{-- Feature 1 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-blue"></div>
                <div>
                    <h5>Dashboard Monitoring</h5>
                    <p>Dashboard utama menyajikan visualisasi data ringkas mengenai statistik risiko, grafik tren, dan riwayat aktivitas.</p>
                </div>
            </div>

            {{-- Feature 2 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-green"></div>
                <div>
                    <h5>Country Analysis</h5>
                    <p>Analisis mendalam kondisi negara beserta visualisasi profil data makro ekonomi, geografi, dan logistik.</p>
                </div>
            </div>

            {{-- Feature 3 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-orange"></div>
                <div>
                    <h5>Weather Monitoring</h5>
                    <p>Pemantauan iklim dan curah hujan real-time untuk early warning ancaman cuaca ekstrim di simpul distribusi.</p>
                </div>
            </div>

            {{-- Feature 4 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-red"></div>
                <div>
                    <h5>Currency Analytics</h5>
                    <p>Visualisasi tren deviasi harian kurs mata uang global terhadap USD untuk mitigasi risiko keuangan.</p>
                </div>
            </div>

            {{-- Feature 5 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-indigo"></div>
                <div>
                    <h5>Port Monitoring</h5>
                    <p>Pemantauan database 4,300+ pelabuhan laut utama dunia lengkap dengan status logistik operasionalnya.</p>
                </div>
            </div>

            {{-- Feature 6 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-purple"></div>
                <div>
                    <h5>Risk Scoring</h5>
                    <p>Kalkulasi skor risiko terpadu yang dihitung dari parameter makro ekonomi, iklim, pelabuhan, dan sentimen berita.</p>
                </div>
            </div>

            {{-- Feature 7 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-teal"></div>
                <div>
                    <h5>News Monitoring</h5>
                    <p>Agregasi artikel berita dunia yang disaring menggunakan analisis sentimen teks berbasis kamus kata.</p>
                </div>
            </div>

            {{-- Feature 8 --}}
            <div class="feature-minimal-item">
                <div class="feature-accent-bullet bullet-slate"></div>
                <div>
                    <h5>Country Comparison</h5>
                    <p>Komparasi data multinegara secara berdampingan untuk mendukung pengambilan keputusan diversifikasi supplier.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- ========== 4. TECHNOLOGY STACK ========== --}}
    <section class="about-sec">
        <div class="about-header">
            <h2>Teknologi yang Digunakan</h2>
            <p class="section-sub">DaisyRisk ditenagai oleh framework andal dan integrasi data global real-time.</p>
        </div>

        <div class="tech-minimal-grid">
            {{-- Tech 1 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-laravel">Laravel</div>
                <p>Framework backend MVC utama untuk pengelolaan database, scheduler, dan REST API.</p>
            </div>

            {{-- Tech 2 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-mysql">MySQL</div>
                <p>Database relasional untuk menyimpan histori data iklim, berita, logistik, dan kurs harian.</p>
            </div>

            {{-- Tech 3 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-bootstrap">Bootstrap</div>
                <p>Framework CSS modern untuk penyusunan layout web responsif dengan tema DaisyRisk.</p>
            </div>

            {{-- Tech 4 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-chartjs">Chart.js</div>
                <p>Library grafik berbasis canvas untuk menyajikan tren visual dan deviasi data statistik.</p>
            </div>

            {{-- Tech 5 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-leaflet">Leaflet</div>
                <p>Pustaka peta interaktif ringan untuk plotting geospatial letak koordinat pelabuhan dunia.</p>
            </div>

            {{-- Tech 6 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-openmeteo">Open-Meteo</div>
                <p>API global untuk sinkronisasi data prakiraan dan status cuaca wilayah secara real-time.</p>
            </div>

            {{-- Tech 7 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-worldbank">World Bank API</div>
                <p>Integrasi database primer untuk indikator stabilitas makro ekonomi tahunan negara.</p>
            </div>

            {{-- Tech 8 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-exchangerate">Exchange Rate</div>
                <p>Layanan update valuta asing harian terhadap USD untuk menghitung fluktuasi nilai tukar.</p>
            </div>

            {{-- Tech 9 --}}
            <div class="tech-minimal-card">
                <div class="tech-badge badge-gnews">GNews API</div>
                <p>Layanan API penarik berita terpercaya dunia untuk pemrosesan bobot sentimen risiko.</p>
            </div>
        </div>
    </section>

    {{-- ========== 5. CALL TO ACTION ========== --}}
    <section class="about-sec">
        <div class="about-cta">
            <h3>DaisyRisk membantu organisasi mengambil keputusan berbasis data.</h3>
            <p>Platform ini mengintegrasikan berbagai sumber data global untuk menghasilkan analisis risiko rantai pasok yang cepat, akurat, dan mudah dipahami.</p>
            <a href="{{ route('login') }}" class="cta-btn-custom">
                Mulai Sekarang
            </a>
            <span class="cta-hint">*Silakan login untuk mulai menggunakan DaisyRisk.</span>
        </div>
    </section>

    {{-- ========== 6. FOOTER ========== --}}
    <footer class="about-footer">
        <div class="text-center">
            © 2025 DaisyRisk. All Rights Reserved.
        </div>
    </footer>

</div>
@endsection