@extends('frontend.layouts.app')

@section('title', 'Free Resources | Hi-Tech Pathshala')

@section(
'meta_description',
'Explore high-quality study materials, quizzes, and video courses absolutely free on Hi-Tech Pathshala.'
)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/free-resources.css') }}">
@endpush

@section('content')
<main class="free-resources-page">
    <section class="fr-hero">
        <!-- Dark Wavy Background Layers & Accents -->
        <div class="fr-hero-bg">
            <div class="fr-hero-wave fr-hero-wave--1"></div>
            <div class="fr-hero-wave fr-hero-wave--2"></div>
            <div class="fr-hero-dots"></div>
            <div class="fr-hero-glow"></div>
        </div>

        <div class="fr-container">
            <div class="fr-hero-grid">

                <!-- Left Column Content -->
                <div class="fr-hero-content">
                    <!-- Top Badge -->
                    <div class="fr-hero-badge">
                        <i class="fa-solid fa-gift"></i>
                        <span>FREE RESOURCES</span>
                    </div>

                    <!-- Main Title -->
                    <h1 class="fr-hero-title">
                        Learn More.<br>
                        Practice More.<br>
                        <span class="highlight">Achieve More.</span>
                    </h1>

                    <!-- Subtitle Description -->
                    <p class="fr-hero-desc">
                        Explore high-quality study materials, quizzes and video courses absolutely free. Learn anytime, anywhere and boost your preparation with the best resources.
                    </p>

                    <!-- 3 Stats Badges -->
                    <div class="fr-stats-row">
                        <div class="fr-stat-card">
                            <div class="fr-stat-icon blue">
                                <i class="fa-solid fa-book-open"></i>
                            </div>
                            <div class="fr-stat-info">
                                <strong>10,000+</strong>
                                <span>Notes</span>
                            </div>
                        </div>

                        <div class="fr-stat-card">
                            <div class="fr-stat-icon green">
                                <i class="fa-solid fa-circle-question"></i>
                            </div>
                            <div class="fr-stat-info">
                                <strong>5,000+</strong>
                                <span>Quizzes</span>
                            </div>
                        </div>

                        <div class="fr-stat-card">
                            <div class="fr-stat-icon purple">
                                <i class="fa-solid fa-play"></i>
                            </div>
                            <div class="fr-stat-info">
                                <strong>1,500+</strong>
                                <span>Videos</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column Image (Image Provided via Upload) -->
                <div class="fr-hero-media">
                    <img src="{{ asset('assets/images/free-resources/free-resources.png') }}" alt="Free Resources Dashboard" class="fr-hero-img">
                </div>

            </div>
        </div>

        <div class="fr-hero-wave-bottom">
        <svg viewBox="0 0 1440 90" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0,35 C320,90 640,10 960,60 C1280,110 1380,20 1440,35 L1440,90 L0,90 Z" fill="#f8fafc"></path>
        </svg>
    </div>
    </section>

    <!-- CONTENT SECTIONS CONTAINER -->
    <div class="fr-container fr-content-wrapper">

        <!-- 1. NOTES SECTION -->
        <section class="fr-section">
            <div class="fr-section-header">
                <div class="fr-header-left">
                    <div class="fr-section-icon blue">
                        <i class="fa-solid fa-book-open"></i>
                    </div>
                    <div>
                        <h2>Notes</h2>
                        <p>Chapter-wise study material for better understanding.</p>
                    </div>
                </div>
                <a href="{{ url('/notes') }}" class="fr-view-all blue">View All Notes <i class="fa-solid fa-arrow-right"></i></a>
            </div>

            <div class="fr-cards-grid">
                <!-- Card 1 -->
                <div class="fr-card">
                    <div class="fr-card-img bg-light-blue">
                        <img src="{{ asset('assets/images/resources/notes-accounting.png') }}" alt="Accountancy Notes">
                    </div>
                    <div class="fr-card-body">
                        <span class="fr-tag tag-blue">CA Foundation</span>
                        <h3 class="fr-card-title">Accountancy Notes</h3>
                        <p class="fr-card-desc">Chapter-wise notes covering the complete syllabus.</p>
                        <div class="fr-card-meta">
                            <span><i class="fa-solid fa-file-lines"></i> 25 Chapters</span>
                            <span><i class="fa-solid fa-globe"></i> Bilingual</span>
                        </div>
                        <a href="{{ url('/notes/show') }}" class="fr-card-link blue">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="fr-card">
                    <div class="fr-card-img bg-light-green">
                        <img src="{{ asset('assets/images/resources/notes-business-law.png') }}" alt="Business Law Notes">
                    </div>
                    <div class="fr-card-body">
                        <span class="fr-tag tag-blue">CA Foundation</span>
                        <h3 class="fr-card-title">Business Law Notes</h3>
                        <p class="fr-card-desc">Detailed notes for all chapters with key concepts.</p>
                        <div class="fr-card-meta">
                            <span><i class="fa-solid fa-file-lines"></i> 20 Chapters</span>
                            <span><i class="fa-solid fa-globe"></i> Bilingual</span>
                        </div>
                        <a href="{{ url('/notes/show') }}" class="fr-card-link blue">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. QUIZZES SECTION -->
        <section class="fr-section">
            <div class="fr-section-header">
                <div class="fr-header-left">
                    <div class="fr-section-icon green">
                        <i class="fa-solid fa-circle-question"></i>
                    </div>
                    <div>
                        <h2>Quizzes</h2>
                        <p>Test your knowledge with chapter-wise quizzes.</p>
                    </div>
                </div>
                <a href="{{ url('/quiz') }}" class="fr-view-all green">View All Quizzes <i class="fa-solid fa-arrow-right"></i></a>
            </div>

            <div class="fr-cards-grid">
                <!-- Card 1 -->
                <div class="fr-card">
                    <div class="fr-card-img bg-light-mint">
                        <img src="{{ asset('assets/images/resources/quiz-aptitude.png') }}" alt="Quantitative Aptitude Quiz">
                    </div>
                    <div class="fr-card-body">
                        <span class="fr-tag tag-blue">CA Foundation</span>
                        <h3 class="fr-card-title">Quantitative Aptitude Quiz</h3>
                        <p class="fr-card-desc">Practice questions on Arithmetic, Algebra, Numbers & more.</p>
                        <div class="fr-card-meta">
                            <span><i class="fa-solid fa-file-circle-question"></i> 20 Questions</span>
                            <span><i class="fa-regular fa-clock"></i> 15 Min</span>
                        </div>
                        <a href="{{ url('/quiz/start') }}" class="fr-card-link green">Start Quiz <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="fr-card">
                    <div class="fr-card-img bg-light-orange">
                        <img src="{{ asset('assets/images/resources/quiz-economics.png') }}" alt="Economics Quiz">
                    </div>
                    <div class="fr-card-body">
                        <span class="fr-tag tag-blue">CA Foundation</span>
                        <h3 class="fr-card-title">Economics Quiz</h3>
                        <p class="fr-card-desc">Test your understanding of Micro & Macro Economics.</p>
                        <div class="fr-card-meta">
                            <span><i class="fa-solid fa-file-circle-question"></i> 15 Questions</span>
                            <span><i class="fa-regular fa-clock"></i> 15 Min</span>
                        </div>
                        <a href="{{ url('/quiz/start') }}" class="fr-card-link green">Start Quiz <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. VIDEO COURSES SECTION -->
        <section class="fr-section">
            <div class="fr-section-header">
                <div class="fr-header-left">
                    <div class="fr-section-icon purple">
                        <i class="fa-solid fa-circle-play"></i>
                    </div>
                    <div>
                        <h2>Video Courses</h2>
                        <p>Learn from concept-based free video lessons.</p>
                    </div>
                </div>
                <a href="{{ url('/video-courses') }}" class="fr-view-all purple">View All Videos <i class="fa-solid fa-arrow-right"></i></a>
            </div>

            <div class="fr-cards-grid">
                <!-- Card 1 -->
                <div class="fr-card">
                    <div class="fr-card-img bg-light-purple">
                        <img src="{{ asset('assets/images/resources/video-accounting.png') }}" alt="Principles of Accounting">
                    </div>
                    <div class="fr-card-body">
                        <span class="fr-tag tag-purple">CA Foundation</span>
                        <h3 class="fr-card-title">Principles of Accounting</h3>
                        <p class="fr-card-desc">Learn the fundamentals of Accounting step by step.</p>
                        <div class="fr-card-meta">
                            <span><i class="fa-solid fa-circle-play"></i> 12 Lessons</span>
                            <span><i class="fa-regular fa-clock"></i> 3.5 Hours</span>
                        </div>
                        <a href="#" class="fr-card-link purple">Watch Now <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="fr-card">
                    <div class="fr-card-img bg-light-lavender">
                        <img src="{{ asset('assets/images/resources/video-maths.png') }}" alt="Mathematics Basics">
                    </div>
                    <div class="fr-card-body">
                        <span class="fr-tag tag-red">JEE Main</span>
                        <h3 class="fr-card-title">Mathematics Basics</h3>
                        <p class="fr-card-desc">Strengthen your basics with important topics & tricks.</p>
                        <div class="fr-card-meta">
                            <span><i class="fa-solid fa-circle-play"></i> 18 Lessons</span>
                            <span><i class="fa-regular fa-clock"></i> 4.2 Hours</span>
                        </div>
                        <a href="#" class="fr-card-link purple">Watch Now <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA BANNER AT BOTTOM -->
        <section class="fr-cta-banner">
            <!-- SVG Background Graphic (Curved Lines, Nodes, & Sparkle Stars) -->
            <svg class="fr-cta-svg-bg" viewBox="0 0 1200 120" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- Left Side Curved Line & Glowing Node Dots -->
                <path d="M-20 90 Q 80 110 160 70 T 320 60" stroke="#1d4ed8" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.6" />
                <path d="M20 100 Q 140 60 260 85 T 400 40" stroke="#2563eb" stroke-width="1.5" opacity="0.4" />
                <circle cx="160" cy="70" r="3" fill="#60a5fa" opacity="0.8" />
                <circle cx="260" cy="85" r="3" fill="#3b82f6" opacity="0.8" />

                <!-- Sparkles Left (Near Trophy & Books) -->
                <!-- Gold Diamond Sparkle -->
                <path d="M175 25 L177 30 L182 32 L177 34 L175 39 L173 34 L168 32 L173 30 Z" fill="#f5b027" />
                <!-- Blue Diamond Sparkles -->
                <path d="M60 30 L61 33 L64 34 L61 35 L60 38 L59 35 L56 34 L59 33 Z" fill="#2563eb" />
                <path d="M42 80 L43 82 L45 83 L43 84 L42 86 L41 84 L39 83 L41 82 Z" fill="#f5b027" />
                <path d="M250 82 L252 85 L255 86 L252 87 L250 90 L248 87 L245 86 L248 85 Z" fill="#3b82f6" />

                <!-- Right Side Curved Chart/Trend Line & Nodes -->
                <path d="M800 100 C 880 70 940 100 1000 40 C 1040 20 1100 50 1220 10" stroke="#1d4ed8" stroke-width="1.5" opacity="0.5" />
                <circle cx="880" cy="78" r="3.5" fill="#3b82f6" />
                <circle cx="940" cy="94" r="3" fill="#60a5fa" />
                <circle cx="1000" cy="40" r="4" fill="#93c5fd" />

                <!-- Sparkles Right (Near Target Board & Chart) -->
                <path d="M920 28 L921.5 31 L924.5 32 L921.5 33 L920 36 L918.5 33 L915.5 32 L918.5 31 Z" fill="#60a5fa" opacity="0.8" />
                <path d="M1150 25 L1151 27 L1153 28 L1151 29 L1150 31 L1149 29 L1147 28 L1149 27 Z" fill="#93c5fd" opacity="0.6" />
            </svg>

            <div class="fr-cta-container">
                <!-- Left Side: Stacked Books + Gold Trophy Illustration -->
                <div class="fr-cta-side fr-cta-left">
                    <img src="{{ asset('assets/images/cta-trophy-books.png') }}" alt="Trophy on Books" class="fr-cta-img-left">
                </div>

                <!-- Center Column: Main Headline, Text, and Yellow CTA Button -->
                <div class="fr-cta-center">
                    <h2 class="fr-cta-title">Keep Learning. Keep Growing.</h2>
                    <p class="fr-cta-subtitle">Consistent learning today will build your success tomorrow.</p>
                    <!-- <a href="#" class="fr-cta-btn">
                <span>Explore All Free Resources</span>
                <i class="fa-solid fa-arrow-right"></i>
            </a> -->
                </div>

                <!-- Right Side: Blue Target Board + Analytics Bar Chart Illustration -->
                <div class="fr-cta-side fr-cta-right">
                    <img src="{{ asset('assets/images/cta-target-chart.png') }}" alt="Target Board and Chart" class="fr-cta-img-right">
                </div>
            </div>
        </section>
    </div>
</main>
@endsection