@extends('frontend.layouts.app')

@section('title', 'Home')

@section('content')


<!-- ==========================================================
 HERO
=========================================================== -->

<section class="ht-hero-section">
  <!-- Soft Ambient Glow Backdrops -->
  <div class="ht-hero-bg-glow" aria-hidden="true"></div>

  <div class="container">
    <div class="ht-hero-grid">
      
      <!-- ==========================================================
           LEFT CONTENT
      =========================================================== -->
      <div class="ht-hero-content">
        
        <!-- Badge -->
        <div class="ht-hero-badge">
          <i class="fas fa-star" aria-hidden="true"></i>
          <span>India's Smart Learning Platform</span>
        </div>

        <!-- Heading -->
        <h1 class="ht-hero-title">
          Master Every Exam <br>
          with <span class="ht-title-highlight">Smarter Practice.<svg class="ht-brush-accent" viewBox="0 0 210 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12C50 4 150 2 207 10" stroke="#FACC15" stroke-width="6" stroke-linecap="round"/></svg></span>
        </h1>

        <!-- Subtitle -->
        <p class="ht-hero-lead">
          Test Series, Video Courses, Notes & Quizzes — <br class="d-none d-md-block">
          everything you need to crack your dream exam.
        </p>

        <!-- CTA Buttons -->
        <div class="ht-hero-actions">
          <a href="{{ url('/test-series') }}" class="ht-btn ht-btn--primary">
            <i class="fas fa-laptop" aria-hidden="true"></i>
            Explore Test Series
            <i class="fas fa-arrow-right ms-2" aria-hidden="true"></i>
          </a>
          <a href="{{ url('/free-resources') }}" class="ht-btn ht-btn--outline">
            <i class="far fa-folder-open" aria-hidden="true"></i>
            Free Resources
          </a>
        </div>

        <!-- Exam Category Chips -->
        <div class="ht-hero-chips">
          <a href="#" class="ht-chip ht-chip--ca">
            <i class="fas fa-graduation-cap"></i> CA
          </a>
          <a href="#" class="ht-chip ht-chip--cs">
            <i class="fas fa-graduation-cap"></i> CS
          </a>
          <a href="#" class="ht-chip ht-chip--cma">
            <i class="fas fa-graduation-cap"></i> CMA
          </a>
          <a href="#" class="ht-chip ht-chip--jee">
            <i class="fas fa-graduation-cap"></i> JEE
          </a>
          <a href="#" class="ht-chip ht-chip--neet">
            <i class="fas fa-heart"></i> NEET
          </a>
          <a href="#" class="ht-chip ht-chip--ssc">
            <i class="fas fa-shield-alt"></i> SSC
          </a>
        </div>

      </div>

      <!-- ==========================================================
           RIGHT GRAPHIC (Mobile App Mockup + Stacked Books Visuals)
      =========================================================== -->
      <div class="ht-hero-visual">
  <div class="ht-visual-wrapper">
    
    <!-- 1. Golden Lens Flare / Sparkle Accent (Top Right) -->
    <div class="ht-sparkle-glow" aria-hidden="true"></div>
    <div class="ht-sparkle-star" aria-hidden="true">✦</div>

    <!-- 2. Concentric Orbit Circles (Behind Phone) -->
    <svg class="ht-bg-orbit-lines" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="250" cy="250" r="180" stroke="#2563EB" stroke-opacity="0.2" stroke-width="1.5" stroke-dasharray="4 4" />
      <circle cx="250" cy="250" r="230" stroke="#2563EB" stroke-opacity="0.15" stroke-width="1.5" />
      <circle cx="250" cy="250" r="280" stroke="#2563EB" stroke-opacity="0.08" stroke-width="1.5" />
    </svg>

    <!-- 3. Dot Matrix / Sparkle Bubbles Grid (Behind Phone Left Side) -->
    <svg class="ht-bg-dots-pattern" viewBox="0 0 200 300" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <pattern id="dot-grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="3" cy="3" r="1.5" fill="#3B82F6" fill-opacity="0.3" />
      </pattern>
      <!-- Masked radial gradient so dots fade softly towards edges -->
      <mask id="dots-fade">
        <rect width="200" height="300" fill="url(#fade-gradient)" />
      </mask>
      <radialGradient id="fade-gradient" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#fff" />
        <stop offset="100%" stop-color="#000" />
      </radialGradient>
      <rect width="200" height="300" fill="url(#dot-grid)" mask="url(#dots-fade)" />
    </svg>

    <!-- 4. Main Hero Composite Image (Phone + Books + Trophy) -->
    <img 
    src="{{ asset('assets/images/home/cta.png') }}"
      alt="Hi-Tech Pathshala App Preview and Study Resources" 
      class="ht-hero-img"
    >

  </div>
</div>

    </div>

    <!-- ==========================================================
         BOTTOM HIGHLIGHT CARDS (4 Columns)
    =========================================================== -->
    <div class="ht-hero-features">
      
      <div class="ht-feature-card">
        <div class="ht-feature-icon ht-feature-icon--blue">
          <i class="fas fa-laptop-code"></i>
        </div>
        <div class="ht-feature-text">
          <h5>Exam Focused</h5>
          <p>Curated by experts for top exam performance.</p>
        </div>
      </div>

      <div class="ht-feature-card">
        <div class="ht-feature-icon ht-feature-icon--green">
          <i class="fas fa-stopwatch"></i>
        </div>
        <div class="ht-feature-text">
          <h5>Smart Practice</h5>
          <p>Real exam experience with detailed analysis.</p>
        </div>
      </div>

      <div class="ht-feature-card">
        <div class="ht-feature-icon ht-feature-icon--amber">
          <i class="fas fa-star"></i>
        </div>
        <div class="ht-feature-text">
          <h5>Learn Anywhere</h5>
          <p>Study on web or mobile, anytime, anywhere.</p>
        </div>
      </div>

      <div class="ht-feature-card">
        <div class="ht-feature-icon ht-feature-icon--purple">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="ht-feature-text">
          <h5>Track Progress</h5>
          <p>Monitor performance and improve every day.</p>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ==========================================================
    HOW IT WORKS SECTION
========================================================== -->

<section class="journey-section">
    <!-- Decorative Background Elements -->
    <div class="journey-bg-pattern journey-bg-pattern--dots-left" aria-hidden="true"></div>
    <div class="journey-bg-pattern journey-bg-pattern--dots-right" aria-hidden="true"></div>
    <div class="journey-bg-bubble journey-bg-bubble--top-right" aria-hidden="true"></div>
    <div class="journey-bg-bubble journey-bg-bubble--bottom-left" aria-hidden="true"></div>

    <div class="container">
        <!-- =========================================
            SECTION HEADER
        ========================================== -->
        <div class="ht-section-header">
            <span class="ht-section-label">
                <i class="fas fa-route" aria-hidden="true"></i>
                How It Works
            </span>
            <h2 class="ht-section-title">
                Prepare Smarter in
                <span class="text-gradient-wrapper">
                    <span class="text-gradient-primary">Three Simple Steps</span>
                    <!-- Wavy Underline SVG Accent -->
                    <svg class="title-wavy-line" viewBox="0 0 160 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M2 8C20 2 38 10 56 4C74 -2 92 8 110 4C128 -0 146 6 158 4" stroke="#F5A623" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </span>
            </h2>
            <p class="ht-section-description">
                Whether you're preparing for CA, CS, CMA, JEE, NEET or SSC, Hi-Tech Pathshala provides everything you need to learn, practice and improve—all from a single platform.
            </p>
        </div>

        <!-- =========================================
            PROCESS / TIMELINE CARDS
        ========================================== -->
        <div class="journey-process">
            <!-- =====================================
                STEP 01 (Gold Theme)
            ====================================== -->
            <article class="journey-card journey-card--step-1">
                <div class="journey-card__number-wrap">
                    <div class="journey-card__number">01</div>
                    <div class="journey-card__dot"></div>
                </div>

                <!-- Timeline Segment to Next Step -->
                <div class="journey-process__line journey-process__line--gold" aria-hidden="true"></div>

                <div class="journey-card__body">
                    <div class="journey-card__icon">
                        <div class="ht-icon ht-icon--lg ht-icon--gold">
                            <i class="fas fa-bullseye" aria-hidden="true"></i>
                        </div>
                    </div>
                    <h3 class="journey-card__title">Choose Your Exam</h3>
                    <div class="journey-card__accent-line"></div>
                    <p class="journey-card__description">
                        Select your exam and access carefully curated Test Series, Notes, Question Banks and learning resources aligned with your latest syllabus.
                    </p>
                </div>
            </article>

            <!-- =====================================
                STEP 02 (Blue Theme)
            ====================================== -->
            <article class="journey-card journey-card--step-2">
                <div class="journey-card__number-wrap">
                    <div class="journey-card__number">02</div>
                    <div class="journey-card__dot"></div>
                </div>

                <!-- Timeline Segment to Next Step -->
                <div class="journey-process__line journey-process__line--blue" aria-hidden="true"></div>

                <div class="journey-card__body">
                    <div class="journey-card__icon">
                        <div class="ht-icon ht-icon--lg ht-icon--blue">
                            <i class="fas fa-file-signature" aria-hidden="true"></i>
                        </div>
                    </div>
                    <h3 class="journey-card__title">Practice with Confidence</h3>
                    <div class="journey-card__accent-line"></div>
                    <p class="journey-card__description">
                        Attempt chapter-wise, subject-wise and full-length mock tests designed according to the latest exam pattern and real exam experience.
                    </p>
                </div>
            </article>

            <!-- =====================================
                STEP 03 (Primary Blue Theme)
            ====================================== -->
            <article class="journey-card journey-card--step-3">
                <div class="journey-card__number-wrap">
                    <div class="journey-card__number">03</div>
                    <div class="journey-card__dot"></div>
                </div>

                <div class="journey-card__body">
                    <div class="journey-card__icon">
                        <div class="ht-icon ht-icon--lg ht-icon--blue">
                            <i class="fas fa-chart-line" aria-hidden="true"></i>
                        </div>
                    </div>
                    <h3 class="journey-card__title">Analyze & Improve</h3>
                    <div class="journey-card__accent-line"></div>
                    <p class="journey-card__description">
                        Review detailed performance reports, identify weak areas, monitor your progress and continuously improve your exam readiness.
                    </p>
                </div>
            </article>
        </div>

        <!-- =========================================
            CTA BUTTON
        ========================================== -->
        <!-- <div class="journey-section__footer">
            <a href="{{ url('/explore') }}" class="ht-btn ht-btn--secondary ht-btn--lg">
                Explore Test Series
                <i class="fas fa-arrow-right ms-2" aria-hidden="true"></i>
            </a>
        </div> -->
    </div>
</section>

<!-- ============ FEATURED TEST SERIES ============ -->
<section class="test-series-section">
    <!-- Background Decorative Elements -->
    <div class="ts-bg-pattern ts-bg-pattern--top-left" aria-hidden="true"></div>
    <div class="ts-bg-pattern ts-bg-pattern--bottom-right" aria-hidden="true"></div>
    <div class="ts-bg-bubble ts-bg-bubble--top-right" aria-hidden="true"></div>
    <div class="ts-bg-bubble ts-bg-bubble--bottom-left" aria-hidden="true"></div>

    <div class="container">
        <!-- =========================================
            SECTION HEADER
        ========================================== -->
        <div class="ht-section-header">
            <span class="ht-section-label">
                <i class="fas fa-key" aria-hidden="true"></i>
                Featured Test Series
            </span>
            <h2 class="ht-section-title">
                Practice with Our <span class="text-highlight-blue">Most Popular Test Series</span>
            </h2>
            <p class="ht-section-description">
                Expert-designed mock tests covering chapter-wise, subject-wise and full-length exams for India's leading competitive examinations.
            </p>
        </div>

        <!-- =========================================
            CATEGORY FILTERS / CHIPS
        ========================================== -->
        <div class="ts-filter-bar">
            <button class="ts-filter-chip active">All</button>
            <button class="ts-filter-chip">CA</button>
            <button class="ts-filter-chip">CS</button>
            <button class="ts-filter-chip">CMA</button>
            <button class="ts-filter-chip">JEE</button>
            <button class="ts-filter-chip">NEET</button>
            <button class="ts-filter-chip">SSC</button>
        </div>

        <!-- =========================================
            TEST SERIES CARDS GRID
        ========================================== -->
        <div class="ts-grid">
            
            <!-- CARD 01: CA -->
            <article class="ts-card">
                <div class="ts-card__thumb">
                    <img src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=600&q=80" alt="Accounting Chapter Test">
                    <span class="ts-badge ts-badge--blue">CA</span>
                    <span class="ts-badge ts-badge--gold">Foundation</span>
                </div>
                <div class="ts-card__body">
                    <h3 class="ts-card__title">Accounting Chapter Test #03</h3>
                    <div class="ts-card__stats">
                        <div class="stat-item">
                            <i class="far fa-clock"></i>
                            <span>90 Mins</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-file-alt"></i>
                            <span>100 Marks</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-users"></i>
                            <span>3.2k Attempts</span>
                        </div>
                    </div>
                    <div class="ts-card__footer">
                        <div class="ts-card__price">
                            <span class="price-current">₹249</span>
                            <span class="price-old">₹399</span>
                        </div>
                        <div class="ts-card__rating">
                            <i class="fas fa-star"></i>
                            <span>4.8</span>
                        </div>
                    </div>
                    <a href="/test-series/show" class="ts-card__btn">
                        Read More <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

            <!-- CARD 02: JEE -->
            <article class="ts-card">
                <div class="ts-card__thumb">
                    <img src="https://images.unsplash.com/photo-1636466497217-26a8cbeaf0aa?auto=format&fit=crop&w=600&q=80" alt="Physics Full Mock Test">
                    <span class="ts-badge ts-badge--purple">JEE</span>
                    <span class="ts-badge ts-badge--gold">Main</span>
                </div>
                <div class="ts-card__body">
                    <h3 class="ts-card__title">Physics Full Mock Test</h3>
                    <div class="ts-card__stats">
                        <div class="stat-item">
                            <i class="far fa-clock"></i>
                            <span>180 Mins</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-file-alt"></i>
                            <span>300 Marks</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-users"></i>
                            <span>2.1k Attempts</span>
                        </div>
                    </div>
                    <div class="ts-card__footer">
                        <div class="ts-card__price">
                            <span class="price-current">₹399</span>
                        </div>
                        <div class="ts-card__rating">
                            <i class="fas fa-star"></i>
                            <span>4.9</span>
                        </div>
                    </div>
                    <a href="/test-series/show" class="ts-card__btn">
                        Read More <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

            <!-- CARD 03: NEET -->
            <article class="ts-card">
                <div class="ts-card__thumb">
                    <img src="https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?auto=format&fit=crop&w=600&q=80" alt="Biology Grand Mock Test">
                    <span class="ts-badge ts-badge--teal">NEET</span>
                    <span class="ts-badge ts-badge--gold">UG</span>
                </div>
                <div class="ts-card__body">
                    <h3 class="ts-card__title">Biology Grand Mock Test</h3>
                    <div class="ts-card__stats">
                        <div class="stat-item">
                            <i class="far fa-clock"></i>
                            <span>180 Mins</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-file-alt"></i>
                            <span>720 Marks</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-users"></i>
                            <span>4.9k Attempts</span>
                        </div>
                    </div>
                    <div class="ts-card__footer">
                        <div class="ts-card__price">
                            <span class="price-current">₹299</span>
                        </div>
                        <div class="ts-card__rating">
                            <i class="fas fa-star"></i>
                            <span>4.7</span>
                        </div>
                    </div>
                    <a href="/test-series/show" class="ts-card__btn">
                        Read More <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

            <!-- CARD 04: SSC -->
            <article class="ts-card">
                <div class="ts-card__thumb">
                    <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=600&q=80" alt="Reasoning Practice Set 12">
                    <span class="ts-badge ts-badge--red">SSC</span>
                    <span class="ts-badge ts-badge--gold">CGL</span>
                </div>
                <div class="ts-card__body">
                    <h3 class="ts-card__title">Reasoning Practice Set 12</h3>
                    <div class="ts-card__stats">
                        <div class="stat-item">
                            <i class="far fa-clock"></i>
                            <span>60 Mins</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-file-alt"></i>
                            <span>100 Qs</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-users"></i>
                            <span>5.6k Attempts</span>
                        </div>
                    </div>
                    <div class="ts-card__footer">
                        <div class="ts-card__price">
                            <span class="price-current">₹149</span>
                        </div>
                        <div class="ts-card__rating">
                            <i class="fas fa-star"></i>
                            <span>4.8</span>
                        </div>
                    </div>
                    <a href="/test-series/show" class="ts-card__btn">
                        Read More <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

        </div>

        <!-- =========================================
            BOTTOM EXPLORE BUTTON
        ========================================== -->
        <div class="ts-section__footer">
            <a href="{{ url('/test-series') }}" class="ht-btn-explore">
                Explore All Test Series <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- ============ LEARNING RESOURCES ============ -->
<section class="resources-section">
    <!-- Background Ambient Glows & Dot Patterns -->
    <div class="res-bg-pattern res-bg-pattern--top-left" aria-hidden="true"></div>
    <div class="res-bg-pattern res-bg-pattern--bottom-right" aria-hidden="true"></div>
    <div class="res-bg-bubble res-bg-bubble--top-right" aria-hidden="true"></div>
    <div class="res-bg-bubble res-bg-bubble--bottom-left" aria-hidden="true"></div>

    <div class="container">
        <!-- =========================================
            SECTION HEADER
        ========================================== -->
        <div class="ht-section-header">
            <span class="ht-section-label">
                <i class="fas fa-graduation-cap" aria-hidden="true"></i>
                Learning Resources
            </span>
            <h2 class="ht-section-title">
    Everything You Need 
    <span class="title-highlight">
        Beyond Test Series
        
        <!-- 1. THREE SPARK LINES ABOVE (TOP-RIGHT) -->
        <!-- <svg class="title-sparks-above" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M5 11L2 5" stroke="#F5A623" stroke-width="2.5" stroke-linecap="round"/>
            <path d="M12 8V2" stroke="#F5A623" stroke-width="2.5" stroke-linecap="round"/>
            <path d="M19 11L22 5" stroke="#F5A623" stroke-width="2.5" stroke-linecap="round"/>
        </svg> -->

        <!-- 2. WAVY LINE BELOW -->
        <svg class="title-wavy-line" viewBox="0 0 180 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M2 8C25 2 50 10 75 4C100 -2 125 8 150 4C165 1 172 5 178 4" stroke="#F5A623" stroke-width="3" stroke-linecap="round"/>
        </svg>
    </span>
</h2>
            <p class="ht-section-description">
                Strengthen your preparation with premium study notes, interactive quizzes and expert video courses — all in one place.
            </p>
        </div>

        <!-- =========================================
            RESOURCE CARDS GRID
        ========================================== -->
        <div class="res-grid">

            <!-- CARD 01: PREMIUM NOTES (Blue Theme) -->
            <article class="res-card res-card--blue">
                <div class="res-card__media res-card__media--blue">
                    <span class="res-chip res-chip--blue">
                        <i class="fas fa-book-open"></i> Premium Notes
                    </span>
                    <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=600&q=80" alt="Comprehensive Study Notes" class="res-card__img">
                </div>
                <div class="res-card__body">
                    <h3 class="res-card__title">Comprehensive Study Notes</h3>
                    <p class="res-card__desc">
                        Concept-wise, chapter-wise notes prepared by subject experts for your exam success.
                    </p>
                    
                    <ul class="res-card__list res-card__list--blue">
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Exam-focused & easy to understand</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Regularly updated as per latest syllabus</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Instant download in PDF format</span>
                        </li>
                    </ul>

                    <a href="{{ url('/notes') }}" class="res-btn res-btn--blue">
                        Explore Notes <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

            <!-- CARD 02: INTERACTIVE QUIZZES (Gold Theme) -->
            <article class="res-card res-card--gold">
                <div class="res-card__media res-card__media--gold">
                    <span class="res-chip res-chip--gold">
                        <i class="fas fa-question-circle"></i> Interactive Quizzes
                    </span>
                    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=600&q=80" alt="Practice with Quizzes" class="res-card__img">
                </div>
                <div class="res-card__body">
                    <h3 class="res-card__title">Practice with Quizzes</h3>
                    <p class="res-card__desc">
                        Test your knowledge with chapter-wise and subject-wise quizzes for better revision.
                    </p>
                    
                    <ul class="res-card__list res-card__list--gold">
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Topic-wise & full-length quizzes</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Instant results with detailed analysis</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Improve accuracy and speed</span>
                        </li>
                    </ul>

                    <a href="{{ url('/quiz') }}" class="res-btn res-btn--gold">
                        Start Quiz <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

            <!-- CARD 03: VIDEO COURSES (Purple Theme) -->
            <article class="res-card res-card--purple">
                <div class="res-card__media res-card__media--purple">
                    <span class="res-chip res-chip--purple">
                        <i class="fas fa-play-circle"></i> Video Courses
                    </span>
                    <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=600&q=80" alt="Learn from Expert Video Courses" class="res-card__img">
                </div>
                <div class="res-card__body">
                    <h3 class="res-card__title">Learn from Expert Video Courses</h3>
                    <p class="res-card__desc">
                        Watch high-quality video lectures by experienced faculty and grasp every concept with clarity.
                    </p>
                    
                    <ul class="res-card__list res-card__list--purple">
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>HD quality recorded lectures</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Concepts explained step-by-step</span>
                        </li>
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <span>Learn anytime, anywhere</span>
                        </li>
                    </ul>

                    <a href="{{ url('/video-courses') }}" class="res-btn res-btn--purple">
                        Watch Courses <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </article>

        </div>
    </div>
</section>
<!-- ==========================================================
WHY HI-TECH PATHSHALA
=========================================================== -->
<section class="htp-why-section">
  <div class="htp-container">
    
    <!-- TOP GRID: Left Content & Right Learning Dashboard -->
    <div class="htp-why-grid">
      
      <!-- LEFT CONTENT SIDE -->
      <div class="htp-why-left">
        <!-- Top Badge -->
        <div class="htp-pill-badge">
          <i class="fas fa-star" aria-hidden="true"></i>
          <span>WHY HI-TECH PATHSHALA</span>
        </div>

        <!-- Section Title -->
        <h2 class="htp-why-title">
          Built Around the Way <br>
          Students <span class="text-highlight-blue">Prepare.</span>
        </h2>

        <p class="htp-why-description">
          From choosing the right exam to practicing, analyzing performance and improving every attempt, Hi-Tech Pathshala brings the essential parts of your preparation journey together in one focused learning platform.
        </p>

        <!-- Feature List -->
        <div class="htp-feature-list">
          
          <div class="htp-feature-item">
            <div class="htp-feature-icon htp-feature-icon--blue">
              <i class="fas fa-bullseye" aria-hidden="true"></i>
            </div>
            <div class="htp-feature-text">
              <h4>Exam-Focused Preparation</h4>
              <p>Practice with content structured around your exam syllabus, pattern and preparation goals.</p>
            </div>
          </div>

          <div class="htp-feature-item">
            <div class="htp-feature-icon htp-feature-icon--gold">
              <i class="fas fa-sync-alt" aria-hidden="true"></i>
            </div>
            <div class="htp-feature-text">
              <h4>Always Up to Date</h4>
              <p>Study materials and test content are regularly reviewed and updated as requirements evolve.</p>
            </div>
          </div>

          <div class="htp-feature-item">
            <div class="htp-feature-icon htp-feature-icon--green">
              <i class="fas fa-chart-line" aria-hidden="true"></i>
            </div>
            <div class="htp-feature-text">
              <h4>Learn From Your Performance</h4>
              <p>Use detailed insights to understand your strengths, identify weak areas and improve with every attempt.</p>
            </div>
          </div>

          <div class="htp-feature-item">
            <div class="htp-feature-icon htp-feature-icon--purple">
              <i class="fas fa-laptop-house" aria-hidden="true"></i>
            </div>
            <div class="htp-feature-text">
              <h4>Learn Wherever You Are</h4>
              <p>Continue your preparation across desktop, tablet and mobile whenever it suits you.</p>
            </div>
          </div>

        </div>
      </div>

      <!-- RIGHT DASHBOARD SIDE -->
      <div class="htp-why-right">
        <div class="htp-dashboard-card">
          
          <!-- Decorative Background Dot Grid -->
          <div class="htp-dashboard-dots" aria-hidden="true"></div>

          <!-- TOP DASHBOARD PANEL -->
          <div class="htp-dashboard-main">
            <!-- Header Row -->
            <div class="htp-dashboard-header">
              <div>
                <span class="htp-dashboard-subtitle">YOUR PREPARATION</span>
                <h3 class="htp-dashboard-title">Learning Dashboard</h3>
              </div>
              <span class="htp-status-tag">
                <span class="htp-status-dot"></span> On Track
              </span>
            </div>

            <!-- Overall Preparation Score -->
            <div class="htp-overall-prep">
              <div class="htp-overall-header">
                <span>Overall Preparation</span>
                <strong class="htp-overall-percent">78%</strong>
              </div>
              <div class="htp-progress-track htp-progress-track--lg">
                <div class="htp-progress-fill htp-progress-fill--blue" style="width: 78%;"></div>
              </div>
            </div>

            <!-- Stats Mini Cards Row -->
            <div class="htp-stats-row">
              <div class="htp-stat-card">
                <div class="htp-stat-icon htp-stat-icon--blue">
                  <i class="fas fa-clipboard-check" aria-hidden="true"></i>
                </div>
                <div class="htp-stat-info">
                  <small>Tests Attempted</small>
                  <strong>42</strong>
                  <span class="htp-stat-period">This Month</span>
                </div>
              </div>

              <div class="htp-stat-card">
                <div class="htp-stat-icon htp-stat-icon--green">
                  <i class="fas fa-chart-pie" aria-hidden="true"></i>
                </div>
                <div class="htp-stat-info">
                  <small>Accuracy</small>
                  <strong class="text-success">86%</strong>
                  <span class="htp-stat-period">This Month</span>
                </div>
              </div>
            </div>

            <!-- 3D Graduation Cap & Books Illustration (Aligned Right) -->
            <img 
            src="{{ asset('assets/images/home/dashboard.png') }}"
            alt="Graduation Cap and Books" 
              class="htp-dashboard-3d-img"
            />
          </div>

          <!-- BOTTOM DASHBOARD INNER GRID -->
          <div class="htp-dashboard-bottom-grid">
            
            <!-- Preparation Areas -->
            <div class="htp-prep-areas-card">
              <h5 class="htp-inner-card-title">Preparation Areas</h5>
              
              <div class="htp-prep-item">
                <div class="htp-prep-label">
                  <i class="fas fa-clipboard-list text-blue" aria-hidden="true"></i>
                  <span>Test Practice</span>
                </div>
                <div class="htp-prep-bar-wrap">
                  <div class="htp-progress-track">
                    <div class="htp-progress-fill htp-progress-fill--blue" style="width: 92%;"></div>
                  </div>
                  <span class="htp-prep-val">92%</span>
                </div>
              </div>

              <div class="htp-prep-item">
                <div class="htp-prep-label">
                  <i class="fas fa-book-open text-gold" aria-hidden="true"></i>
                  <span>Study Resources</span>
                </div>
                <div class="htp-prep-bar-wrap">
                  <div class="htp-progress-track">
                    <div class="htp-progress-fill htp-progress-fill--gold" style="width: 78%;"></div>
                  </div>
                  <span class="htp-prep-val">78%</span>
                </div>
              </div>

              <div class="htp-prep-item">
                <div class="htp-prep-label">
                  <i class="fas fa-redo-alt text-green" aria-hidden="true"></i>
                  <span>Performance Review</span>
                </div>
                <div class="htp-prep-bar-wrap">
                  <div class="htp-progress-track">
                    <div class="htp-progress-fill htp-progress-fill--green" style="width: 84%;"></div>
                  </div>
                  <span class="htp-prep-val">84%</span>
                </div>
              </div>
            </div>

            <!-- Today's Focus Card -->
            <!-- <div class="htp-focus-card">
              <span class="htp-focus-subtitle">Today's Focus</span>
              
              <div class="htp-focus-icon-wrap">
                <i class="far fa-lightbulb" aria-hidden="true"></i>
              </div>

              <p class="htp-focus-text">Improve your <strong>Taxation accuracy</strong></p>

              <button type="button" class="htp-focus-btn" aria-label="Go to Taxation Focus">
                <i class="fas fa-arrow-right" aria-hidden="true"></i>
              </button>
            </div> -->

          </div>

        </div>
      </div>

    </div>

    <!-- BOTTOM 4-COLUMN FEATURE BAR -->
    <div class="htp-bottom-features">
      
      <div class="htp-bottom-feature-item">
        <div class="htp-bottom-icon htp-bottom-icon--blue">
          <i class="fas fa-layer-group" aria-hidden="true"></i>
        </div>
        <div>
          <h4>Multi-Exam Platform</h4>
          <p>One platform for CA, CS, CMA, JEE, NEET, SSC and more.</p>
        </div>
      </div>

      <div class="htp-bottom-feature-item">
        <div class="htp-bottom-icon htp-bottom-icon--gold">
          <i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>
        </div>
        <div>
          <h4>Expert Faculty</h4>
          <p>Learn from experienced educators and industry professionals.</p>
        </div>
      </div>

      <div class="htp-bottom-feature-item">
        <div class="htp-bottom-icon htp-bottom-icon--green">
          <i class="fas fa-sync" aria-hidden="true"></i>
        </div>
        <div>
          <h4>Regularly Updated</h4>
          <p>Content is continuously updated to match the latest syllabus and exam trends.</p>
        </div>
      </div>

      <div class="htp-bottom-feature-item">
        <div class="htp-bottom-icon htp-bottom-icon--purple">
          <i class="fas fa-shield-alt" aria-hidden="true"></i>
        </div>
        <div>
          <h4>Student-First Experience</h4>
          <p>Designed to help you practice better, learn faster and stay motivated every day.</p>
        </div>
      </div>

    </div>

  </div>
</section>

<!-- ==========================================================
STUDENT SUCCESS STORIES
=========================================================== -->
<section class="ht-section testimonials-section">
  <!-- Large Background Quotation Graphic (Top-Left behind Card 1) -->
  <div class="ht-bg-quote-mark" aria-hidden="true">
    <i class="fas fa-quote-left"></i>
  </div>

  <!-- Ambient Glows -->
  <div class="ht-bg-glow top-left" aria-hidden="true"></div>
  <div class="ht-bg-glow top-right" aria-hidden="true"></div>
  <div class="ht-dots-pattern top-left" aria-hidden="true"></div>
  <div class="ht-dots-pattern bottom-right" aria-hidden="true"></div>
  
  <!-- Dashed Wavy Line (Routes cleanly around heading) -->
  <div class="ht-wavy-accent-container" aria-hidden="true">
    <svg class="ht-wavy-line" viewBox="0 0 1200 240" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M 10 140 C 200 220, 350 40, 600 20 C 850 0, 980 120, 1080 35" 
            stroke="#CBDDF5" stroke-width="2" stroke-dasharray="6 6" stroke-linecap="round"/>
    </svg>
    <div class="ht-paper-airplane">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="#3B82F6">
        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
      </svg>
    </div>
  </div>

  <div class="container">
    <!-- Section Header -->
    <div class="ht-section-header">
      <span class="ht-section-label chip-success-stories">
        <span class="label-icon-circle"><i class="fas fa-star" aria-hidden="true"></i></span>
        STUDENT SUCCESS STORIES
      </span>
      <h2 class="ht-section-title">
        Trusted by <span class="text-blue-dark">Students Across</span> <span class="text-blue-bright">India</span><span class="dot-accent-gold">.</span>
      </h2>
      <p class="ht-section-description">
        Thousands of aspirants prepare with Hi-Tech Pathshala every year.<br>
        Here's what some of them have to say about their learning experience.
      </p>
    </div>

    <!-- Testimonial Cards Slider -->
    <div class="testimonials-slider-wrapper">
      <div class="testimonials-grid">
        <!-- Card 1 -->
        <article class="testimonial-card">
          <div class="testimonial-card__header">
            <div class="quote-icon-box">
              <i class="fas fa-quote-left"></i>
            </div>
            <div class="star-rating">
              <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            </div>
          </div>
          <p class="testimonial-card__body">
            "The mock tests felt almost identical to the actual exam. The detailed analysis helped me improve my weak areas before the final paper."
          </p>
          <div class="testimonial-card__author">
            <div class="author-avatar">
              <img src="https://i.pravatar.cc/150?img=11" alt="Rahul Sharma">
              <span class="quote-badge"><i class="fas fa-quote-right"></i></span>
            </div>
            <div class="author-info">
              <h4 class="author-name">Rahul Sharma</h4>
              <span class="author-role">CA Intermediate Student</span>
              <span class="author-location"><i class="fas fa-map-marker-alt"></i> Delhi</span>
            </div>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="testimonial-card">
          <div class="testimonial-card__header">
            <div class="quote-icon-box">
              <i class="fas fa-quote-left"></i>
            </div>
            <div class="star-rating">
              <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            </div>
          </div>
          <p class="testimonial-card__body">
            "The notes and practice tests made revision much easier. Everything I needed was available in one place."
          </p>
          <div class="testimonial-card__author">
            <div class="author-avatar">
              <img src="https://i.pravatar.cc/150?img=32" alt="Priya Patel">
              <span class="quote-badge"><i class="fas fa-quote-right"></i></span>
            </div>
            <div class="author-info">
              <h4 class="author-name">Priya Patel</h4>
              <span class="author-role">JEE Aspirant</span>
              <span class="author-location"><i class="fas fa-map-marker-alt"></i> Surat</span>
            </div>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="testimonial-card">
          <div class="testimonial-card__header">
            <div class="quote-icon-box">
              <i class="fas fa-quote-left"></i>
            </div>
            <div class="star-rating">
              <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            </div>
          </div>
          <p class="testimonial-card__body">
            "Regular practice and chapter-wise tests helped me stay consistent throughout my preparation journey."
          </p>
          <div class="testimonial-card__author">
            <div class="author-avatar">
              <img src="https://i.pravatar.cc/150?img=60" alt="Aman Verma">
              <span class="quote-badge"><i class="fas fa-quote-right"></i></span>
            </div>
            <div class="author-info">
              <h4 class="author-name">Aman Verma</h4>
              <span class="author-role">SSC Aspirant</span>
              <span class="author-location"><i class="fas fa-map-marker-alt"></i> Lucknow</span>
            </div>
          </div>
        </article>
      </div>
    </div>

    <!-- Carousel Controls -->
    <div class="carousel-controls">
      <button class="control-btn prev-btn" aria-label="Previous Testimonial">
        <i class="fas fa-chevron-left"></i>
      </button>
      <div class="carousel-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
      <button class="control-btn next-btn" aria-label="Next Testimonial">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>

    <!-- Bottom Metrics Bar -->
    <div class="metrics-bar">
      <!-- Metric 1 -->
      <div class="metric-item">
        <div class="metric-icon blue-theme">
          <i class="fas fa-user-friends"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value blue-text">50K+</div>
          <div class="metric-label">
            <strong>Happy Students</strong>
            <span>Learning & Growing</span>
          </div>
        </div>
      </div>

      <!-- Metric 2 -->
      <div class="metric-item">
        <div class="metric-icon gold-theme">
          <i class="fas fa-book-open"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value gold-text">1000+</div>
          <div class="metric-label">
            <strong>Tests Conducted</strong>
            <span>Across All Exams</span>
          </div>
        </div>
      </div>

      <!-- Metric 3 -->
      <div class="metric-item">
        <div class="metric-icon green-theme">
          <i class="fas fa-chart-line"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value green-text">95%</div>
          <div class="metric-label">
            <strong>Students Recommend</strong>
            <span>Hi-Tech Pathshala</span>
          </div>
        </div>
      </div>

      <!-- Metric 4 -->
      <div class="metric-item">
        <div class="metric-icon purple-theme">
          <i class="fas fa-shield-alt"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value purple-text">4.8/5</div>
          <div class="metric-label">
            <strong>Average Rating</strong>
            <span>By Our Students</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ==========================================================
CALL TO ACTION
=========================================================== -->

<section class="ht-section cta-section">
  <div class="container">
    <!-- Main CTA Card Container -->
    <div class="cta-card">
      <!-- Background Ambient Effects -->
      <div class="cta-bg-glow cta-bg-glow--top" aria-hidden="true"></div>
      <div class="cta-bg-glow cta-bg-glow--bottom" aria-hidden="true"></div>
      <div class="cta-dots-grid" aria-hidden="true"></div>
      <div class="cta-arc-line" aria-hidden="true"></div>

      <div class="cta-card__grid">
        <!-- ==========================================================
             LEFT COLUMN: TEXT CONTENT & ACTIONS
             ========================================================== -->
        <div class="cta-content">
          <!-- Top Eyebrow Badge -->
          <div class="cta-eyebrow">
            <span class="cta-eyebrow__icon">
              <i class="fas fa-rocket" aria-hidden="true"></i>
            </span>
            <span class="cta-eyebrow__text">START YOUR PREPARATION</span>
          </div>

          <!-- Main Heading -->
          <h2 class="cta-title">
            Your Success Starts<br>
            With the Right <span class="cta-title__highlight">Practice.</span>
          </h2>

          <!-- Description -->
          <p class="cta-description">
            Choose your exam, explore expert-designed Test Series,<br class="desktop-only">
            Video Courses, Notes and Previous Year Papers<br class="desktop-only">
            to begin your preparation today.
          </p>

          <!-- Action Buttons -->
          <div class="cta-actions">
            <a href="{{ url('/test-series') }}" class="cta-btn cta-btn--primary">
              <span class="cta-btn__icon"><i class="fas fa-arrow-right"></i></span>
              Explore Test Series
            </a>
            <a href="{{ url('/free-resources') }}" class="cta-btn cta-btn--outline">
              <span class="cta-btn__icon"><i class="fas fa-arrow-right"></i></span>
              Explore Free Resources
            </a>
          </div>

          <!-- Feature Pills Bar -->
          <div class="cta-features-bar">
            <!-- Feature 1 -->
            <div class="cta-feature-item">
              <div class="cta-feature-item__icon">
                <i class="fas fa-shield-alt"></i>
              </div>
              <div class="cta-feature-item__text">
                <strong>Exam-Focused</strong>
                <span>Content</span>
              </div>
            </div>

            <!-- Feature 2 -->
            <div class="cta-feature-item">
              <div class="cta-feature-item__icon">
                <i class="fas fa-book-open"></i>
              </div>
              <div class="cta-feature-item__text">
                <strong>Trusted by</strong>
                <span>Thousands</span>
              </div>
            </div>

            <!-- Feature 3 -->
            <div class="cta-feature-item">
              <div class="cta-feature-item__icon">
                <i class="fas fa-chart-line"></i>
              </div>
              <div class="cta-feature-item__text">
                <strong>Regularly</strong>
                <span>Updated</span>
              </div>
            </div>

            <!-- Feature 4 -->
            <div class="cta-feature-item">
              <div class="cta-feature-item__icon">
                <i class="fas fa-mobile-alt"></i>
              </div>
              <div class="cta-feature-item__text">
                <strong>Learn Anytime,</strong>
                <span>Anywhere</span>
              </div>
            </div>
          </div>
        </div>

        <!-- ==========================================================
             RIGHT COLUMN: 3D ILLUSTRATIONS & COMPOSITE GRAPHIC
             ========================================================== -->
             <div class="cta-element cta-element--visual">

<img
    src="{{ asset('assets/images/home/cta.png') }}"
    alt="Hi-Tech Pathshala learning platform with exam preparation resources"
    width="700"
    height="700"
    loading="lazy"
    decoding="async"
>

</div>
      </div>
    </div>

    <!-- Bottom Tagline Bar
    <div class="cta-footer-tagline">
      <div class="tagline-divider"></div>
      <div class="tagline-badge">
        <span class="tagline-icon"><i class="fas fa-check-circle"></i></span>
        <span>Empowering Aspirants Across India</span>
      </div>
      <div class="tagline-divider"></div>
    </div> -->
  </div>
</section>

@endsection

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