@extends('layouts.app')

@section('title', 'Japanese Language Courses — N5 to N1 | Soyogi')
@section('meta_description', 'Complete Japanese language courses from N5 to N1. Beginner to expert level. JLPT focused curriculum, expert faculty, flexible timings.')

@push('styles')
<style>
.courses-header-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin: 48px 0 64px;
}
.level-pill {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
}
.level-pill:hover {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-4px);
}
.level-pill .lv { font-size: 28px; font-weight: 900; color: white; }
.level-pill .ln { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 4px; }

.all-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.big-course-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
}
.big-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.1);
}
.big-course-top {
    background: linear-gradient(135deg, var(--navy), #1e3a5f);
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
}
.big-course-top::after {
    content: attr(data-level);
    position: absolute;
    right: -10px;
    bottom: -20px;
    font-size: 100px;
    font-weight: 900;
    color: rgba(255,255,255,0.05);
    font-family: 'Noto Sans JP', sans-serif;
}
.big-course-top .level { font-size: 52px; font-weight: 900; color: white; }
.big-course-top .badge-level {
    display: inline-block;
    background: var(--red);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 100px;
    margin-top: 8px;
}
.big-course-top .jp { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.big-course-body { padding: 28px; }
.big-course-body h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.big-course-body p { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 20px; }
.course-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.skill-tag {
    background: var(--gray-100);
    color: var(--navy);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 100px;
    font-weight: 500;
}
.course-info-row {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}
.course-info-row span { display: flex; align-items: center; gap: 6px; }
.course-info-row i { color: var(--red); }

@media(max-width:900px){.all-courses-grid{grid-template-columns:1fr 1fr;} .courses-header-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:600px){.all-courses-grid{grid-template-columns:1fr;} .courses-header-grid{grid-template-columns:repeat(3,1fr);}}
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="section-badge"><i class="fas fa-book-open"></i> Courses</div>
    <span class="jp-sub">日本語コース</span>
    <h1>Japanese Language Courses</h1>
    <p>From N5 to N1 — expert-designed curriculum for every level. India's best JLPT preparation.</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">Courses</span>
    </div>
</div>

<section style="background:var(--navy);padding:0 24px;">
    <div style="max-width:1280px;margin:0 auto;">
        <div class="courses-header-grid">
            @foreach($courses as $key => $c)
            <a href="{{ route('courses.'.$key) }}" class="level-pill">
                <div class="lv">{{ $c['level'] }}</div>
                <div class="ln">{{ $c['name'] }}</div>
            </a>
            @endforeach
        </div>
    </div>
</section>

<section class="section">
    <div class="section-inner">
        <div style="text-align:center;margin-bottom:48px;" data-aos="fade-up">
            <div class="section-badge"><i class="fas fa-layer-group"></i> All Courses</div>
            <h2 class="section-title">Choose Your Level</h2>
        </div>
        <div class="all-courses-grid">
            @foreach($courses as $key => $c)
            <div class="big-course-card" data-aos="fade-up" data-aos-delay="{{ $loop->index * 60 }}">
                <div class="big-course-top" data-level="{{ $c['level'] }}">
                    <div class="level">{{ $c['level'] }}</div>
                    <div class="jp">{{ $c['jp'] }}</div>
                    <div class="badge-level">{{ $c['badge'] }}</div>
                </div>
                <div class="big-course-body">
                    <h3>{{ $c['name'] }}</h3>
                    <p>{{ $c['description'] }}</p>
                    <div class="course-skills">
                        @foreach($c['skills'] as $skill)
                        <span class="skill-tag">{{ $skill }}</span>
                        @endforeach
                    </div>
                    <div class="course-info-row">
                        <span><i class="fas fa-clock"></i> {{ $c['duration'] }}</span>
                        <span><i class="fas fa-calendar"></i> {{ $c['classes'] }}</span>
                    </div>
                    <div style="display:flex;gap:10px;">
                        <a href="{{ route('courses.'.$key) }}" class="btn-primary" style="flex:1;justify-content:center;font-size:14px;">View Details</a>
                        <a href="#" onclick="openModal();return false;" class="btn-outline" style="font-size:14px;">Enroll</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Comparison Table -->
<section class="section" style="background:var(--gray-50);">
    <div class="section-inner">
        <div style="text-align:center;margin-bottom:48px;" data-aos="fade-up">
            <div class="section-badge"><i class="fas fa-table"></i> Comparison</div>
            <h2 class="section-title">Level Comparison Table</h2>
        </div>
        <div style="background:white;border-radius:16px;overflow:hidden;border:1px solid var(--gray-200);" data-aos="fade-up">
            <table style="width:100%;border-collapse:collapse;font-size:14px;">
                <thead>
                    <tr style="background:var(--navy);">
                        <th style="padding:16px 20px;text-align:left;color:rgba(255,255,255,0.7);font-weight:600;">Level</th>
                        <th style="padding:16px 20px;text-align:left;color:rgba(255,255,255,0.7);font-weight:600;">Name</th>
                        <th style="padding:16px 20px;text-align:left;color:rgba(255,255,255,0.7);font-weight:600;">Kanji</th>
                        <th style="padding:16px 20px;text-align:left;color:rgba(255,255,255,0.7);font-weight:600;">Vocabulary</th>
                        <th style="padding:16px 20px;text-align:left;color:rgba(255,255,255,0.7);font-weight:600;">Duration</th>
                        <th style="padding:16px 20px;text-align:left;color:rgba(255,255,255,0.7);font-weight:600;">Career Use</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach([
                        ['N5','Basic','100','~800','3-4 months','Basic communication'],
                        ['N4','Elementary','300','~1500','4-5 months','Simple workplaces'],
                        ['N3','Intermediate','650','~3700','5-6 months','General workplaces'],
                        ['N2','Advanced','1000','~6000','6-8 months','Most Japanese companies'],
                        ['N1','Expert','2000+','~10000','8-12 months','All industries, premium jobs'],
                    ] as $i => $row)
                    <tr style="border-bottom:1px solid var(--gray-100);{{ $i%2==0?'background:var(--gray-50);':'' }}">
                        <td style="padding:16px 20px;font-weight:800;color:var(--red);font-size:18px;">{{ $row[0] }}</td>
                        <td style="padding:16px 20px;font-weight:600;color:var(--navy);">{{ $row[1] }}</td>
                        <td style="padding:16px 20px;color:var(--gray-600);">{{ $row[2] }}</td>
                        <td style="padding:16px 20px;color:var(--gray-600);">{{ $row[3] }}</td>
                        <td style="padding:16px 20px;color:var(--gray-600);">{{ $row[4] }}</td>
                        <td style="padding:16px 20px;color:var(--gray-600);">{{ $row[5] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>
@endsection