@extends('layouts.public')

@section('title', 'Sumber Data — Daisy Risk Global Supply Chain Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/info-pages.css') }}">
<style>
    .data-hero {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: white;
        padding: 4rem 0;
        position: relative;
        overflow: hidden;
    }

    .data-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -20%;
        width: 40%;
        height: 200%;
        background: radial-gradient(circle, rgba(245,158,11,0.2) 0%, transparent 70%);
        transform: rotate(15deg);
    }

    .source-card {
        background: #fff;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border-left: 4px solid #f59e0b;
        transition: all 0.3s ease;
        height: 100%;
    }

    .source-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(245,158,11,0.15);
        border-left-color: #d97706;
    }

    .api-endpoint {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.875rem;
        color: #475569;
        margin: 0.5rem 0;
        position: relative;
        overflow-x: auto;
    }

    .frequency-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        background: linear-gradient(45deg, #dcfce7, #bbf7d0);
        border: 1px solid #86efac;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #166534;
    }

    .reliability-meter {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .reliability-bar {
        flex: 1;
        height: 8px;
        background: #e2e8f0;
        border-radius: 4px;
        overflow: hidden;
    }

    .reliability-fill {
        height: 100%;
        background: linear-gradient(90deg, #f59e0b, #10b981);
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .coverage-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .coverage-item {
        background: linear-gradient(45deg, #fef3c7, #fde68a);
        padding: 1rem;
        border-radius: 12px;
        text-align: center;
        border: 1px solid #fbbf24;
    }

    .data-flow {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
        padding: 4rem 0;
        position: relative;
    }

    .flow-step {
        text-align: center;
        position: relative;
        padding: 2rem;
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border: 1px solid #e2e8f0;
    }

    .flow-step::after {
        content: '→';
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #f59e0b;
        font-weight: bold;
    }

    .flow-step:last-child::after {
        display: none;
    }

    @media (max-width: 768px) {
        .flow-step::after {
            content: '↓';
            right: auto;
            bottom: -30px;
            top: auto;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .quality-metrics {
        background: #fff;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        margin-top: 1rem;
    }

    .metric-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .metric-row:last-child {
        border-bottom: none;
    }
</style>
@endpush

@section('content')

{{-- Hero Section --}}
<section class="data-hero">
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
            <span class="text-6xl mb-4 block">📚</span>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                Sumber Data Global
            </h1>
            <p class="text-xl text-slate-300 max-w-3xl mx-auto leading-relaxed">
                Koleksi data real-time dari 50+ sumber terpercaya untuk memberikan intelligence supply chain yang komprehensif dan akurat.
            </p>
            <div class="mt-8">
                <span class="inline-flex items-center gap-2 px-6 py-3 bg-amber-600 text-white font-semibold rounded-lg">
                    <span>⚡</span>
                    Update Setiap Menit
                </span>
            </div>
        </div>
    </div>
</section>

{{-- Weather Data Sources --}}
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-slate-800 mb-4">🌤️ Data Cuaca & Iklim</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">
                Monitoring kondisi cuaca real-time dari stasiun meteorologi global untuk analisis risiko weather-related.
            </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {{-- OpenWeatherMap --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🌦️</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">OpenWeatherMap</h3>
                        <span class="frequency-badge">⏱️ 5 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Data cuaca current, forecast 5 hari, dan historical weather dari 200,000+ stasiun cuaca global.
                </p>
                <div class="api-endpoint">
                    api.openweathermap.org/data/2.5/weather
                </div>
                <div class="coverage-grid">
                    <div class="coverage-item">
                        <div class="font-bold text-lg">195</div>
                        <div class="text-sm">Negara</div>
                    </div>
                    <div class="coverage-item">
                        <div class="font-bold text-lg">40K+</div>
                        <div class="text-sm">Kota</div>
                    </div>
                </div>
                <div class="reliability-meter">
                    <span class="text-sm text-slate-600">Reliability:</span>
                    <div class="reliability-bar">
                        <div class="reliability-fill" style="width: 95%"></div>
                    </div>
                    <span class="text-sm font-medium">95%</span>
                </div>
            </div>

            {{-- AccuWeather --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🌡️</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">AccuWeather</h3>
                        <span class="frequency-badge">⏱️ 15 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Forecast akurat, severe weather alerts, dan analisis kondisi cuaca ekstrem untuk early warning system.
                </p>
                <div class="api-endpoint">
                    dataservice.accuweather.com/forecasts/v1/daily
                </div>
                <div class="coverage-grid">
                    <div class="coverage-item">
                        <div class="font-bold text-lg">3M+</div>
                        <div class="text-sm">Lokasi</div>
                    </div>
                    <div class="coverage-item">
                        <div class="font-bold text-lg">15 hari</div>
                        <div class="text-sm">Forecast</div>
                    </div>
                </div>
                <div class="reliability-meter">
                    <span class="text-sm text-slate-600">Reliability:</span>
                    <div class="reliability-bar">
                        <div class="reliability-fill" style="width: 92%"></div>
                    </div>
                    <span class="text-sm font-medium">92%</span>
                </div>
            </div>

            {{-- NOAA --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🌊</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">NOAA</h3>
                        <span class="frequency-badge">⏱️ 30 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Data meteorologi dan oseanografi official US, hurricane tracking, dan maritime weather conditions.
                </p>
                <div class="api-endpoint">
                    api.weather.gov/points/{lat},{lon}
                </div>
                <div class="coverage-grid">
                    <div class="coverage-item">
                        <div class="font-bold text-lg">Maritime</div>
                        <div class="text-sm">Focus</div>
                    </div>
                    <div class="coverage-item">
                        <div class="font-bold text-lg">Official</div>
                        <div class="text-sm">US Gov</div>
                    </div>
                </div>
                <div class="reliability-meter">
                    <span class="text-sm text-slate-600">Reliability:</span>
                    <div class="reliability-bar">
                        <div class="reliability-fill" style="width: 98%"></div>
                    </div>
                    <span class="text-sm font-medium">98%</span>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Economic & Financial Data --}}
<section class="py-16 bg-slate-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-slate-800 mb-4">💰 Data Ekonomi & Keuangan</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">
                Real-time exchange rates, economic indicators, dan financial metrics untuk analisis risiko ekonomi.
            </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {{-- ExchangeRate-API --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">💱</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">ExchangeRate-API</h3>
                        <span class="frequency-badge">⏱️ 1 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Real-time exchange rates untuk 170+ currencies dengan historical data dan volatility analysis.
                </p>
                <div class="api-endpoint">
                    v6.exchangerate-api.com/v6/latest/USD
                </div>
                <div class="quality-metrics">
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Currencies</span>
                        <span class="font-semibold">170+</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Update Rate</span>
                        <span class="font-semibold">60 seconds</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Accuracy</span>
                        <span class="font-semibold text-green-600">99.9%</span>
                    </div>
                </div>
            </div>

            {{-- World Bank --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🏛️</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">World Bank</h3>
                        <span class="frequency-badge">⏱️ 1 hari</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    GDP, inflation rates, economic indicators, dan development metrics dari 217 negara dan wilayah.
                </p>
                <div class="api-endpoint">
                    api.worldbank.org/v2/country/all/indicator
                </div>
                <div class="quality-metrics">
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Countries</span>
                        <span class="font-semibold">217</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Indicators</span>
                        <span class="font-semibold">1400+</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Historical</span>
                        <span class="font-semibold text-blue-600">50+ years</span>
                    </div>
                </div>
            </div>

            {{-- IMF --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">📊</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">IMF Data</h3>
                        <span class="frequency-badge">⏱️ 1 minggu</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    International financial statistics, balance of payments, dan global economic outlook data.
                </p>
                <div class="api-endpoint">
                    dataservices.imf.org/REST/SDMX_JSON.svc
                </div>
                <div class="quality-metrics">
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Datasets</span>
                        <span class="font-semibold">40+</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Coverage</span>
                        <span class="font-semibold">190 countries</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Authority</span>
                        <span class="font-semibold text-purple-600">Official IMF</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Port & Shipping Data --}}
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-slate-800 mb-4">⚓ Data Pelabuhan & Shipping</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">
                Monitoring status pelabuhan, vessel tracking, dan shipping routes untuk analisis supply chain logistics.
            </p>
        </div>

        <div class="grid md:grid-cols-2 gap-8">
            {{-- MarineTraffic --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🚢</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">MarineTraffic</h3>
                        <span class="frequency-badge">⏱️ 2 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Real-time vessel positions, port congestion data, dan shipping route analysis untuk 4000+ ports worldwide.
                </p>
                <div class="api-endpoint">
                    services.marinetraffic.com/api/exportvessel
                </div>
                <div class="grid grid-cols-2 gap-4 mt-4">
                    <div class="text-center p-3 bg-blue-50 rounded-lg">
                        <div class="font-bold text-lg text-blue-600">300K+</div>
                        <div class="text-sm text-blue-800">Active Vessels</div>
                    </div>
                    <div class="text-center p-3 bg-green-50 rounded-lg">
                        <div class="font-bold text-lg text-green-600">4K+</div>
                        <div class="text-sm text-green-800">Ports</div>
                    </div>
                </div>
            </div>

            {{-- Port Authorities --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🏢</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">Port Authorities</h3>
                        <span class="frequency-badge">⏱️ 15 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Official data dari 50+ major port authorities termasuk throughput, delays, dan operational status.
                </p>
                <div class="api-endpoint">
                    Various port authority APIs
                </div>
                <div class="grid grid-cols-2 gap-4 mt-4">
                    <div class="text-center p-3 bg-amber-50 rounded-lg">
                        <div class="font-bold text-lg text-amber-600">50+</div>
                        <div class="text-sm text-amber-800">Major Ports</div>
                    </div>
                    <div class="text-center p-3 bg-purple-50 rounded-lg">
                        <div class="font-bold text-lg text-purple-600">Official</div>
                        <div class="text-sm text-purple-800">Authority Data</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- News & Sentiment --}}
<section class="py-16 bg-slate-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-slate-800 mb-4">📰 Berita & Sentiment Analysis</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">
                Aggregasi berita global dan sentiment analysis untuk early detection risiko geopolitik dan market mood.
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            {{-- NewsAPI --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">📰</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">NewsAPI</h3>
                        <span class="frequency-badge">⏱️ 5 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Breaking news dari 80,000+ sources dengan real-time updates untuk supply chain relevant topics.
                </p>
                <div class="quality-metrics">
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Sources</span>
                        <span class="font-semibold">80K+</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Languages</span>
                        <span class="font-semibold">14</span>
                    </div>
                </div>
            </div>

            {{-- Reuters --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🌐</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">Reuters</h3>
                        <span class="frequency-badge">⏱️ 10 menit</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Premium financial news dan market analysis dengan focus pada global trade dan economic events.
                </p>
                <div class="quality-metrics">
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Authority</span>
                        <span class="font-semibold text-blue-600">Premium</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Focus</span>
                        <span class="font-semibold">Financial</span>
                    </div>
                </div>
            </div>

            {{-- AI Sentiment --}}
            <div class="source-card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="text-3xl">🤖</span>
                    <div>
                        <h3 class="text-xl font-bold text-slate-800">AI Sentiment</h3>
                        <span class="frequency-badge">⏱️ Real-time</span>
                    </div>
                </div>
                <p class="text-slate-600 mb-4">
                    Machine learning sentiment analysis menggunakan NLP untuk menganalisis mood pasar dan risiko geopolitik.
                </p>
                <div class="quality-metrics">
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Accuracy</span>
                        <span class="font-semibold text-green-600">87%</span>
                    </div>
                    <div class="metric-row">
                        <span class="text-sm text-slate-600">Model</span>
                        <span class="font-semibold">Custom NLP</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Data Flow Process --}}
<section class="data-flow">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-slate-800 mb-4">🔄 Data Processing Pipeline</h2>
            <p class="text-slate-600 text-lg max-w-2xl mx-auto">
                Proses otomatis yang mengubah raw data menjadi actionable intelligence dalam hitungan menit.
            </p>
        </div>

        <div class="grid md:grid-cols-4 gap-8">
            <div class="flow-step">
                <span class="text-4xl mb-3 block">📡</span>
                <h3 class="text-lg font-bold text-slate-800 mb-2">Data Collection</h3>
                <p class="text-slate-600 text-sm">
                    Automated polling dari 50+ APIs setiap 1-5 menit dengan retry logic dan error handling.
                </p>
            </div>

            <div class="flow-step">
                <span class="text-4xl mb-3 block">🔍</span>
                <h3 class="text-lg font-bold text-slate-800 mb-2">Validation & Cleaning</h3>
                <p class="text-slate-600 text-sm">
                    Data quality checks, outlier detection, dan normalization untuk memastikan akurasi data.
                </p>
            </div>

            <div class="flow-step">
                <span class="text-4xl mb-3 block">⚙️</span>
                <h3 class="text-lg font-bold text-slate-800 mb-2">Risk Calculation</h3>
                <p class="text-slate-600 text-sm">
                    Machine learning algorithms menghitung composite risk scores berdasarkan weighted factors.
                </p>
            </div>

            <div class="flow-step">
                <span class="text-4xl mb-3 block">📊</span>
                <h3 class="text-lg font-bold text-slate-800 mb-2">Dashboard Updates</h3>
                <p class="text-slate-600 text-sm">
                    Real-time updates ke dashboard dengan caching layer untuk performa optimal.
                </p>
            </div>
        </div>
    </div>
</section>

{{-- CTA Section --}}
<section class="py-16 bg-gradient-to-br from-amber-50 to-orange-50">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-slate-800 mb-4">Ingin Mengakses Data API?</h2>
        <p class="text-slate-600 text-lg mb-8 max-w-2xl mx-auto">
            Dapatkan akses ke raw data dan REST API endpoints untuk integrasi dengan sistem Anda.
        </p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('info.api-docs') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-amber-600 text-white font-semibold rounded-lg shadow-lg hover:bg-amber-700 transition-colors">
                <span>⚡</span>
                Lihat Dokumentasi API
            </a>
            <a href="{{ route('info.platform') }}" class="inline-flex items-center gap-2 px-8 py-4 border-2 border-amber-600 text-amber-600 font-semibold rounded-lg hover:bg-amber-600 hover:text-white transition-colors">
                <span>🌼</span>
                Kembali ke Platform
            </a>
        </div>
    </div>
</section>

@endsection

{{-- Include Footer --}}
@section('footer')
    @include('partials.footer')
@endsection