@extends('layouts.app')

@section('title', $jurusan->seo_title ?: $jurusan->jurusan)

@section('meta')
    <meta name="description" content="{{ $jurusan->seo_description ?: $jurusan->deskripsi }}">
    <meta name="keywords" content="{{ $jurusan->jurusan }}, program studi, universitas">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="{{ $jurusan->seo_title ?: $jurusan->jurusan }}">
    <meta property="og:description" content="{{ $jurusan->seo_description ?: $jurusan->deskripsi }}">
    @if($jurusan->icon)
        <meta property="og:image" content="{{ asset('storage/' . $jurusan->icon) }}">
    @endif

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ url()->current() }}">
    <meta property="twitter:title" content="{{ $jurusan->seo_title ?: $jurusan->jurusan }}">
    <meta property="twitter:description" content="{{ $jurusan->seo_description ?: $jurusan->deskripsi }}">
    @if($jurusan->icon)
        <meta property="twitter:image" content="{{ asset('storage/' . $jurusan->icon) }}">
    @endif
@endsection

@section('content')
<style>
    /* ==========================================================================
       PROGRAM STUDI DETAIL STYLES
       ========================================================================== */
    .program-hero {
        background: linear-gradient(135deg, #004d28 0%, #006837 50%, #007d40 100%);
        position: relative;
        overflow: hidden;
    }

    .program-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.03)"><polygon points="0,100 100,0 200,30 300,10 400,50 500,20 600,70 700,40 800,90 900,60 1000,0 1000,100"/></svg>') repeat-x;
        background-size: 200px 100px;
        animation: wave 20s linear infinite;
    }

    @keyframes wave {
        0% { background-position-x: 0; }
        100% { background-position-x: 200px; }
    }

    .icon-container {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 24px;
        padding: 2rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .quick-info-badge {
        background: rgba(0, 109, 55, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    .quick-info-badge:hover {
        background: rgba(0, 109, 55, 0.25);
        transform: translateY(-2px);
    }

    /* Content Cards */
    .content-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    .content-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .sidebar-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    .sidebar-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    }

    .info-item {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(229, 231, 235, 0.5);
        transition: all 0.3s ease;
    }

    .info-item:hover {
        background: rgba(0, 109, 55, 0.05);
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 8px;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .contact-card {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        border: 1px solid rgba(0, 109, 55, 0.2);
    }

    .contact-item {
        padding: 0.75rem 0;
        transition: all 0.3s ease;
    }

    .contact-item:hover {
        transform: translateX(5px);
    }

    .cta-card {
        background: linear-gradient(135deg, #004d28 0%, #006837 100%);
        position: relative;
        overflow: hidden;
    }

    .cta-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: shine 3s ease-in-out infinite;
    }

    @keyframes shine {
        0%, 100% { transform: rotate(0deg); }
        50% { transform: rotate(180deg); }
    }

    .cta-button {
        background: rgba(255, 255, 255, 0.95);
        color: #006837;
        font-weight: 600;
        padding: 0.875rem 2rem;
        border-radius: 50px;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .cta-button:hover {
        background: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .related-program-card {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 12px;
        padding: 1rem;
        border: 1px solid rgba(229, 231, 235, 0.5);
        transition: all 0.3s ease;
    }

    .related-program-card:hover {
        background: rgba(0, 109, 55, 0.05);
        border-color: rgba(0, 109, 55, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .breadcrumb-item {
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }

    .breadcrumb-item:hover {
        color: #006837;
    }

    .section-title {
        color: #1e293b;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-icon {
        color: #006837;
        font-size: 1.25rem;
    }
</style>

<div class="min-h-screen bg-gray-50">
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <nav class="flex" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="inline-flex items-center text-sm font-medium text-gray-700" style="transition: color 0.2s;" onmouseover="this.style.color='#006837'" onmouseout="this.style.color='#374151'">
                            <i class="fas fa-home mr-2"></i>
                            Beranda
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <a href="{{ route('jurusan.index') }}" class="ml-1 text-sm font-medium text-gray-700 md:ml-2" style="transition: color 0.2s;" onmouseover="this.style.color='#006837'" onmouseout="this.style.color='#374151'">Program Studi</a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">{{ $jurusan->jurusan }}</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Hero Section -->
    <div class="program-hero text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <!-- Icon -->
                @if($jurusan->icon)
                    <div class="flex-shrink-0">
                        <div class="icon-container w-40 h-40">
                            <img src="{{ asset('storage/' . $jurusan->icon) }}" 
                                 alt="{{ $jurusan->jurusan }}" 
                                 class="w-full h-full object-contain">
                        </div>
                    </div>
                @endif
                
                <!-- Content -->
                <div class="flex-1 text-center lg:text-left">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">{{ $jurusan->jurusan }}</h1>
                    <p class="text-xl mb-8 leading-relaxed" style="color: #dcfce7;">{{ $jurusan->deskripsi }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-1 xl:col-span-2">
                <!-- Overview -->
                <div class="content-card p-8 mb-8">
                    <h2 class="section-title">
                        <i class="fas fa-info-circle section-icon"></i>
                        Tentang Program Studi
                    </h2>
                    
                    @if($jurusan->deskripsi_lengkap)
                        <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed">
                            {!! nl2br(e($jurusan->deskripsi_lengkap)) !!}
                        </div>
                    @else
                        <div class="text-gray-700 leading-relaxed text-lg">
                            <p class="mb-6">{{ $jurusan->deskripsi }}</p>
                    @endif
                </div>

                <!-- Additional Content Cards in Main Area -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Quick Info moved to main area on larger screens -->
                    <div class="sidebar-card p-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
                            <i class="fas fa-chart-line mr-3" style="color: #006837;"></i>
                            Informasi Program
                        </h3>
                        
                        <div class="space-y-0">
                            @if($jurusan->informasiProgram && ($jurusan->informasiProgram->jenjang || $jurusan->informasiProgram->durasi || $jurusan->informasiProgram->sks || $jurusan->informasiProgram->gelar))
                                @if($jurusan->informasiProgram->jenjang)
                                <div class="info-item flex items-center justify-between">
                                    <span class="text-gray-600 font-medium">Jenjang</span>
                                    <span class="font-semibold text-gray-900">{{ $jurusan->informasiProgram->jenjang }}</span>
                                </div>
                                @endif
                                @if($jurusan->informasiProgram->durasi)
                                <div class="info-item flex items-center justify-between">
                                    <span class="text-gray-600 font-medium">Durasi</span>
                                    <span class="font-semibold text-gray-900">{{ $jurusan->informasiProgram->durasi }}</span>
                                </div>
                                @endif
                                @if($jurusan->informasiProgram->sks)
                                <div class="info-item flex items-center justify-between">
                                    <span class="text-gray-600 font-medium">SKS</span>
                                    <span class="font-semibold text-gray-900">{{ $jurusan->informasiProgram->sks }}</span>
                                </div>
                                @endif
                                @if($jurusan->informasiProgram->akreditasi)
                                <div class="info-item flex items-center justify-between">
                                    <span class="text-gray-600 font-medium">Akreditasi</span>
                                    <span class="font-semibold text-green-600">{{ $jurusan->informasiProgram->akreditasi }}</span>
                                </div>
                                @endif
                                @if($jurusan->informasiProgram->gelar)
                                <div class="info-item flex items-center justify-between">
                                    <span class="text-gray-600 font-medium">Gelar</span>
                                    <span class="font-semibold text-gray-900">{{ $jurusan->informasiProgram->gelar }}</span>
                                </div>
                                @endif
                            @else
                                <div class="text-center py-4">
                                    <p class="text-gray-500 text-sm">Informasi program belum tersedia</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Contact Info moved to main area -->
                    <div class="sidebar-card contact-card p-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
                            <i class="fas fa-phone-alt mr-3" style="color: #006837;"></i>
                            Hubungi Kami
                        </h3>
                        
                        @if($contactInfo && count($contactInfo) > 0)
                        <div class="space-y-4">
                            @if(isset($contactInfo['email']) && !empty($contactInfo['email']))
                            <div class="contact-item flex items-start">
                                <i class="fas fa-envelope mr-3 mt-1" style="color: #006837;"></i>
                                <div>
                                    <p class="text-gray-700 font-medium">{{ $contactInfo['email'] }}</p>
                                    <p class="text-xs text-gray-500">Email Resmi</p>
                                </div>
                            </div>
                            @endif
                            @if(isset($contactInfo['phone']) && !empty($contactInfo['phone']))
                            <div class="contact-item flex items-start">
                                <i class="fas fa-phone mr-3 mt-1" style="color: #006837;"></i>
                                <div>
                                    <p class="text-gray-700 font-medium">{{ $contactInfo['phone'] }}</p>
                                    <p class="text-xs text-gray-500">Telepon Kampus</p>
                                </div>
                            </div>
                            @endif
                            @if(isset($contactInfo['whatsapp']) && !empty($contactInfo['whatsapp']))
                            <div class="contact-item flex items-start">
                                <i class="fab fa-whatsapp mr-3 mt-1" style="color: #006837;"></i>
                                <div>
                                    <p class="text-gray-700 font-medium">{{ $contactInfo['whatsapp'] }}</p>
                                    <p class="text-xs text-gray-500">WhatsApp</p>
                                </div>
                            </div>
                            @endif
                            @if(isset($contactInfo['address']) && !empty($contactInfo['address']))
                            <div class="contact-item flex items-start">
                                <i class="fas fa-map-marker-alt mr-3 mt-1" style="color: #006837;"></i>
                                <div>
                                    <p class="text-gray-700 font-medium">{{ $contactInfo['address'] }}</p>
                                    <p class="text-xs text-gray-500">Alamat Kampus</p>
                                </div>
                            </div>
                            @endif
                            @if(isset($contactInfo['operasional']) && !empty($contactInfo['operasional']))
                            <div class="contact-item flex items-start">
                                <i class="fas fa-clock mr-3 mt-1" style="color: #006837;"></i>
                                <div>
                                    <p class="text-gray-700 font-medium">{{ $contactInfo['operasional'] }}</p>
                                    <p class="text-xs text-gray-500">Jam Operasional</p>
                                </div>
                            </div>
                            @endif
                            @if(isset($contactInfo['deskripsi']) && !empty($contactInfo['deskripsi']))
                            <div class="contact-item flex items-start">


                            </div>
                            @endif
                        </div>
                        @else
                        <div class="text-center py-4">
                            <p class="text-gray-500 text-sm">Informasi kontak belum tersedia</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1 xl:col-span-1 space-y-8">
                <!-- CTA Button -->
                <div class="cta-card rounded-xl p-8 text-white text-center relative">
                    <h3 class="text-xl font-bold mb-3 relative z-10">Tertarik dengan Program Ini?</h3>
                    <p class="mb-6 relative z-10" style="color: #dcfce7;">Daftar sekarang dan wujudkan impian akademik Anda!</p>
                    @if($linkPendaftaran && $linkPendaftaran->link_pendaftaran)
                        <a href="{{ $linkPendaftaran->link_pendaftaran }}" target="_blank" class="cta-button inline-block">
                            <i class="fas fa-user-graduate mr-2"></i>
                            Daftar Sekarang
                        </a>
                    @else
                        <a href="#" class="cta-button inline-block opacity-50 cursor-not-allowed">
                            <i class="fas fa-user-graduate mr-2"></i>
                            Daftar Sekarang
                        </a>
                    @endif
                </div>

                <!-- Related Programs -->
                @if($relatedPrograms->count() > 0)
                <div class="sidebar-card p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
                        <i class="fas fa-layer-group mr-3" style="color: #006837;"></i>
                        Program Terkait
                    </h3>
                    
                    <div class="space-y-4">
                        @foreach($relatedPrograms as $program)
                        <a href="{{ route('jurusan.show', $program->slug) }}" class="related-program-card block">
                            <div class="flex items-start gap-3">
                                @if($program->icon)
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('storage/' . $program->icon) }}" 
                                         alt="{{ $program->jurusan }}" 
                                         class="w-12 h-12 object-contain rounded-lg bg-gray-50 p-2">
                                </div>
                                @endif
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-semibold text-gray-800 truncate">{{ $program->jurusan }}</h4>
                                    <p class="text-sm text-gray-600 line-clamp-2 mt-1">{{ Str::limit($program->deskripsi, 80) }}</p>
                                    @if($program->informasiProgram)
                                    <div class="flex items-center gap-2 mt-2">
                                        <span class="text-xs px-2 py-1 rounded" style="background-color: #dcfce7; color: #006837;">{{ $program->informasiProgram->jenjang }}</span>
                                        @if($program->informasiProgram->akreditasi)
                                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">{{ $program->informasiProgram->akreditasi }}</span>
                                        @endif
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Additional Info Card -->
                <div class="sidebar-card p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
                        <i class="fas fa-lightbulb mr-3" style="color: #006837;"></i>
                        Kenapa Memilih Program Ini?
                    </h3>
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style="background-color: #dcfce7;">
                                <i class="fas fa-check text-sm" style="color: #006837;"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">Kurikulum Terkini</h4>
                                <p class="text-sm text-gray-600">Mengikuti perkembangan industri dan teknologi terbaru</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style="background-color: #dcfce7;">
                                <i class="fas fa-users text-sm" style="color: #006837;"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">Dosen Berpengalaman</h4>
                                <p class="text-sm text-gray-600">Tenaga pengajar dengan latar belakang akademis dan praktis</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style="background-color: #dcfce7;">
                                <i class="fas fa-briefcase text-sm" style="color: #006837;"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">Peluang Karir</h4>
                                <p class="text-sm text-gray-600">Prospek kerja yang luas di berbagai sektor industri</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JSON-LD Structured Data for SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Course",
        "name": "{{ $jurusan->jurusan }}",
        "description": "{{ $jurusan->seo_description ?: $jurusan->deskripsi }}",
        "provider": {
            "@type": "EducationalOrganization",
            "name": "STAI AN Nahdliyah Darussalamah Musi Rawas"
        },
        @if($jurusan->icon)
        "image": "{{ asset('storage/' . $jurusan->icon) }}",
        @endif
        "educationalLevel": "Undergraduate",
        "timeRequired": "P4Y",
        "url": "{{ url()->current() }}"
    }
    </script>
</div>
@endsection