@extends('layouts.app')

@section('title', $course['name'].' ('.$course['level'].') | Soyogi')
@section('meta_description', 'Learn '.$course['name'].' at Soyogi. '.$course['description'])

@section('content')
<div class="page-header">
    <div style="font-family:'Noto Sans JP',sans-serif;font-size:48px;font-weight:900;color:rgba(255,255,255,0.1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;">{{ $course['jp'] }}</div>
    <div class="section-badge"><i class="fas fa-book-open"></i> {{ $course['badge'] }}</div>
    <h1>{{ $course['level'] }} — {{ $course['name'] }}</h1>
    <p>{{ $course['description'] }}</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <a href="{{ route('courses.index') }}">Courses</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">{{ $course['level'] }}</span>
    </div>
</div>

<section class="section">
    <div class="section-inner">
        <div style="display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;">
            <div>
                <div style="background:white;border-radius:20px;padding:36px;border:1px solid var(--gray-200);margin-bottom:24px;" data-aos="fade-up">
                    <h2 style="font-size:24px;font-weight:800;color:var(--navy);margin-bottom:20px;">
                        <i class="fas fa-list-check" style="color:var(--red);margin-right:10px;"></i>What You Will Learn
                    </h2>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        @foreach($course['skills'] as $skill)
                        <div style="display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--gray-50);border-radius:10px;">
                            <i class="fas fa-check-circle" style="color:var(--red);flex-shrink:0;"></i>
                            <span style="font-size:14px;font-weight:500;color:var(--navy);">{{ $skill }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div style="background:white;border-radius:20px;padding:36px;border:1px solid var(--gray-200);margin-bottom:24px;" data-aos="fade-up">
                    <h2 style="font-size:24px;font-weight:800;color:var(--navy);margin-bottom:20px;">
                        <i class="fas fa-road" style="color:var(--red);margin-right:10px;"></i>Course Structure
                    </h2>
                    @foreach(['Foundation','Grammar & Vocabulary','Reading & Writing','Listening & Speaking','Mock Tests & Revision','Exam Preparation'] as $i => $phase)
                    <div style="display:flex;gap:16px;margin-bottom:20px;align-items:flex-start;">
                        <div style="width:36px;height:36px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0;">{{ $i+1 }}</div>
                        <div>
                            <div style="font-weight:700;color:var(--navy);font-size:15px;margin-bottom:4px;">Phase {{ $i+1 }}: {{ $phase }}</div>
                            <div style="font-size:13px;color:var(--gray-600);">Comprehensive training with practice exercises, assignments, and regular assessments.</div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div style="background:white;border-radius:20px;padding:36px;border:1px solid var(--gray-200);" data-aos="fade-up">
                    <h2 style="font-size:24px;font-weight:800;color:var(--navy);margin-bottom:20px;">
                        <i class="fas fa-star" style="color:var(--red);margin-right:10px;"></i>Why Learn {{ $course['level'] }} at Soyogi?
                    </h2>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                        @foreach(['Expert Faculty','Small Batches','JLPT Materials from Japan','Regular Mock Tests','Doubt Clearing Sessions','Post-Course Job Support'] as $benefit)
                        <div style="display:flex;align-items:center;gap:10px;">
                            <i class="fas fa-check" style="color:var(--gold);width:20px;"></i>
                            <span style="font-size:14px;color:var(--navy);">{{ $benefit }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div style="position:sticky;top:90px;">
                <div style="background:var(--navy);border-radius:20px;padding:32px;margin-bottom:20px;" data-aos="fade-left">
                    <div style="text-align:center;margin-bottom:24px;">
                        <div style="font-size:64px;font-weight:900;color:white;line-height:1;">{{ $course['level'] }}</div>
                        <div style="font-family:'Noto Sans JP',sans-serif;color:rgba(255,255,255,0.4);font-size:14px;">{{ $course['jp'] }}</div>
                        <div style="display:inline-block;background:var(--red);color:white;font-size:12px;font-weight:700;padding:5px 16px;border-radius:100px;margin-top:8px;">{{ $course['badge'] }}</div>
                    </div>
                    <div style="border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;">
                        @foreach([['fas fa-clock','Duration',$course['duration']],['fas fa-calendar','Classes',$course['classes']],['fas fa-users','Batch Size','Max 12 Students'],['fas fa-language','Medium','Japanese + English']] as $info)
                        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.06);">
                            <span style="color:rgba(255,255,255,0.5);font-size:13px;display:flex;align-items:center;gap:8px;"><i class="{{ $info[0] }}" style="width:16px;"></i>{{ $info[1] }}</span>
                            <span style="color:white;font-size:13px;font-weight:600;">{{ $info[2] }}</span>
                        </div>
                        @endforeach
                    </div>
                    <a href="#" onclick="openModal();return false;" class="btn-primary" style="width:100%;justify-content:center;margin-top:24px;">Enroll Now <i class="fas fa-arrow-right"></i></a>
                    <a href="https://wa.me/919999999999" target="_blank" style="display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;color:rgba(255,255,255,0.6);font-size:14px;text-decoration:none;">
                        <i class="fab fa-whatsapp" style="color:#25D366;"></i> Ask on WhatsApp
                    </a>
                </div>

                <div style="background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.2);border-radius:16px;padding:24px;">
                    <div style="font-size:13px;font-weight:700;color:var(--red);margin-bottom:12px;"><i class="fas fa-fire" style="margin-right:6px;"></i>Next Batch Starting Soon</div>
                    <div style="font-size:13px;color:var(--gray-600);margin-bottom:16px;">Limited seats available. Book your spot today!</div>
                    <a href="#" onclick="openModal();return false;" class="btn-primary" style="width:100%;justify-content:center;font-size:14px;">Book Free Demo Class</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Other Courses -->
<section class="section" style="background:var(--gray-50);">
    <div class="section-inner">
        <div style="text-align:center;margin-bottom:40px;">
            <h2 class="section-title">Explore Other Courses</h2>
        </div>
        <div style="display:flex;gap:12px;flex-wrap:wrap;justify-content:center;">
            @foreach(['n5'=>'N5','n4'=>'N4','n3'=>'N3','n2'=>'N2','n1'=>'N1','conversation'=>'Kaiwa','online'=>'Online'] as $key => $label)
            <a href="{{ route('courses.'.$key) }}" style="display:inline-flex;align-items:center;padding:10px 20px;border-radius:10px;border:2px solid {{ strtolower($course['level']) == $key || ($course['level']=='会話' && $key=='conversation') || ($course['level']=='Online' && $key=='online') ? 'var(--red)':'var(--gray-200)'}};background:{{ strtolower($course['level']) == $key || ($course['level']=='会話' && $key=='conversation') || ($course['level']=='Online' && $key=='online') ? 'var(--red)':'white'}};color:{{ strtolower($course['level']) == $key || ($course['level']=='会話' && $key=='conversation') || ($course['level']=='Online' && $key=='online') ? 'white':'var(--navy)'}};font-weight:700;text-decoration:none;transition:all 0.2s;">
                {{ $label }}
            </a>
            @endforeach
        </div>
    </div>
</section>
@endsection