@extends('frontend.layouts.app')

@section('title', 'CA Intermediate Full Syllabus Test Series 2024 | Hi-Tech Pathshala')

@section('meta_description', 'Prepare for CA Intermediate exams with our comprehensive 2024 full syllabus test series based on ICAI latest pattern.')

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

@section('content')
<div class="test-series-page">

    <!-- ==========================================================
         HERO SECTION
         ========================================================== -->
    <section class="hero-section">
        <!-- Floating Accent Elements -->
        <div class="hero-dots-top-right" aria-hidden="true"></div>
        <div class="hero-dots-center" aria-hidden="true"></div>

        <div class="hero-container">
            <!-- Left Info Column -->
            <div class="hero-content">
                <nav class="breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ url('/') }}">Home</a>
                    <span class="sep">&gt;</span>
                    <a href="#">Test Series</a>
                    <span class="sep">&gt;</span>
                    <a href="#">CA Intermediate</a>
                    <span class="sep">&gt;</span>
                    <span class="active">CA Intermediate Full Syllabus Test Series 2024</span>
                </nav>

                <div class="category-pill">CA INTERMEDIATE</div>

                <h1 class="hero-title">CA Intermediate Full Syllabus<br>Test Series 2024</h1>

                <p class="hero-description">
                    Comprehensive test series covering the complete CA Intermediate syllabus<br class="desktop-only">
                    as per ICAI latest pattern.
                </p>

                <!-- Stat Badges -->
                <div class="hero-stats">
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fa-solid fa-file-lines"></i></div>
                        <div class="stat-text">
                            <strong>60</strong>
                            <span>Total Tests</span>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon"><i class="fa-solid fa-circle-question"></i></div>
                        <div class="stat-text">
                            <strong>6000+</strong>
                            <span>Total Questions</span>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon"><i class="fa-solid fa-clock"></i></div>
                        <div class="stat-text">
                            <strong>180 Hrs</strong>
                            <span>Total Duration</span>
                        </div>
                    </div>

                    <div class="stat-card">
                        <div class="stat-icon"><i class="fa-solid fa-chart-line"></i></div>
                        <div class="stat-text">
                            <strong>Detailed</strong>
                            <span>Performance Analysis</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Vector Visual with Radial Glow Background -->
            <div class="hero-image-wrapper">
                <div class="hero-glow-behind" aria-hidden="true"></div>
                
                <div class="hero-vector-art">
                    <!-- Vector Illustration -->
                    <div class="clipboard-mockup">
                        <div class="clipboard-clip"></div>
                        <div class="clipboard-content">
                            <div class="clipboard-title">TEST SERIES</div>
                            <div class="clipboard-line"><div class="clipboard-check"></div></div>
                            <div class="clipboard-line"><div class="clipboard-check"></div></div>
                            <div class="clipboard-line"><div class="clipboard-check"></div></div>
                            <div class="clipboard-line"><div class="clipboard-check"></div></div>
                        </div>
                    </div>
                    <div class="pencil-mockup"></div>
                    <div class="clock-mockup">
                        <div class="clock-face">
                            <div class="clock-hand-hour"></div>
                            <div class="clock-hand-min"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Curved Bottom Wavy Border -->
        <div class="hero-wave-bottom" aria-hidden="true">
            <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M0,0 C150,90 350,-40 500,45 C650,130 900,10 1200,40 L1200,120 L0,120 Z" fill="#f7f9fc"></path>
            </svg>
        </div>
    </section>

    <!-- ==========================================================
         MAIN CONTENT & SIDEBAR SECTION
         ========================================================== -->
    <div class="main-container">
        
        <!-- LEFT CONTENT COLUMN -->
        <div class="left-column">

            <!-- About Section -->
            <div class="content-card">
                <h2 class="section-heading">About This Test Series</h2>
                <p class="about-text">
                    Our CA Intermediate Full Syllabus Test Series is designed by expert faculty to help you prepare, practice and perform your best in the exams. It includes all subjects and covers the latest ICAI pattern with detailed solutions and performance analytics.
                </p>

                <div class="features-grid">
                    <div class="feature-item">
                        <div class="feature-icon-box"><i class="fa-solid fa-book-open"></i></div>
                        <div class="feature-title">ICAI Latest Pattern</div>
                        <div class="feature-desc">100% aligned with latest exam pattern</div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon-box"><i class="fa-solid fa-user-check"></i></div>
                        <div class="feature-title">Detailed Solutions</div>
                        <div class="feature-desc">Step-by-step solutions by expert faculty</div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon-box"><i class="fa-solid fa-chart-pie"></i></div>
                        <div class="feature-title">Performance Analysis</div>
                        <div class="feature-desc">In-depth analysis with rank and percentile</div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon-box"><i class="fa-solid fa-mobile-screen-button"></i></div>
                        <div class="feature-title">Accessible Anywhere</div>
                        <div class="feature-desc">Attempt tests on web and mobile app</div>
                    </div>
                </div>
            </div>

            <!-- Subjects Covered Tags -->
            <div class="content-card">
                <h2 class="section-heading">Subjects Covered</h2>
                <div class="tags-flex">
                    <span class="subject-tag tag-purple">Advanced Accounting</span>
                    <span class="subject-tag tag-green">Corporate & Other Laws</span>
                    <span class="subject-tag tag-orange">Cost & Management Accounting</span>
                    <span class="subject-tag tag-pink">Taxation</span>
                    <span class="subject-tag tag-blue">Auditing & Assurance</span>
                    <span class="subject-tag tag-purple">Financial Management</span>
                </div>
            </div>

            <!-- Highlights Checklist Grid -->
            <div class="content-card">
                <h2 class="section-heading">Test Series Highlights</h2>
                <div class="highlights-grid">
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>60 Full Length Tests</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>All India Ranking</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>Sectional & Chapter Tests</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>Detailed Performance Analytics</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>Past Year Papers (5 Years)</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>Time Management Reports</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>Unlimited Re-Attempts</span>
                    </div>
                    <div class="highlight-line">
                        <div class="check-icon"><i class="fa-solid fa-check"></i></div>
                        <span>Available in Bilingual (English + Hinglish)</span>
                    </div>
                </div>
            </div>

            <!-- Sample Tests Grid -->
            <div class="content-card">
                <div class="sample-tests-header">
                    <h2 class="section-heading mb-0">Sample Tests</h2>
                    <a href="#" class="view-all-link">View All</a>
                </div>

                <div class="sample-cards-grid">
                    <div class="sample-card">
                        <div>
                            <div class="sample-card-icon icon-purple"><i class="fa-solid fa-file-code"></i></div>
                            <div class="sample-card-title">Advanced Accounting Full Test 01</div>
                            <div class="sample-card-meta">100 Questions | 3 Hrs</div>
                        </div>
                        <button class="btn-view-test">View Test</button>
                    </div>

                    <div class="sample-card">
                        <div>
                            <div class="sample-card-icon icon-green"><i class="fa-solid fa-file-code"></i></div>
                            <div class="sample-card-title">Corporate Laws Full Test 01</div>
                            <div class="sample-card-meta">100 Questions | 3 Hrs</div>
                        </div>
                        <button class="btn-view-test">View Test</button>
                    </div>

                    <div class="sample-card">
                        <div>
                            <div class="sample-card-icon icon-orange"><i class="fa-solid fa-file-code"></i></div>
                            <div class="sample-card-title">Taxation Full Test 01</div>
                            <div class="sample-card-meta">100 Questions | 3 Hrs</div>
                        </div>
                        <button class="btn-view-test">View Test</button>
                    </div>

                    <div class="sample-card">
                        <div>
                            <div class="sample-card-icon icon-blue"><i class="fa-solid fa-file-code"></i></div>
                            <div class="sample-card-title">Auditing Full Test 01</div>
                            <div class="sample-card-meta">100 Questions | 3 Hrs</div>
                        </div>
                        <button class="btn-view-test">View Test</button>
                    </div>
                </div>
            </div>

        </div>

        <!-- RIGHT SIDEBAR -->
        <aside class="sidebar">

            <!-- Purchase Card -->
            <div class="pricing-card">
                <div class="pricing-label">Price Details</div>
                
                <div class="price-row">
                    <span class="current-price">₹2,499</span>
                    <span class="original-price">₹3,499</span>
                    <span class="discount-badge">(29% OFF)</span>
                </div>

                <div class="savings-box">
                    <span>You Save</span>
                    <span>₹1,000</span>
                </div>

                <div class="validity-grid">
                    <div class="validity-item">
                        <i class="fa-regular fa-clock"></i>
                        <div class="validity-text">
                            <span>Validity</span>
                            <strong>12 Months</strong>
                        </div>
                    </div>
                    <div class="validity-item">
                        <i class="fa-solid fa-laptop"></i>
                        <div class="validity-text">
                            <span>Access</span>
                            <strong>Web + Mobile</strong>
                        </div>
                    </div>
                </div>

                <!-- Coupons & Discounts -->
                <div class="offers-header">
                    <span class="offers-title">Available Offers</span>
                    <span class="badge-best-offer">BEST OFFER</span>
                </div>

                <div class="coupons-list">
                    <div class="coupon-item">
                        <div class="coupon-left">
                            <input type="radio" name="coupon" id="coupon1" checked>
                            <label for="coupon1">
                                <div class="coupon-code">HTP29</div>
                                <div class="coupon-desc">Get 29% OFF on all Test Series</div>
                            </label>
                        </div>
                        <button type="button" class="btn-apply-coupon">Apply</button>
                    </div>

                    <div class="coupon-item">
                        <div class="coupon-left">
                            <input type="radio" name="coupon" id="coupon2">
                            <label for="coupon2">
                                <div class="coupon-code">HTP15</div>
                                <div class="coupon-desc">Get 15% OFF on all Test Series</div>
                            </label>
                        </div>
                        <button type="button" class="btn-apply-coupon">Apply</button>
                    </div>

                    <div class="coupon-item">
                        <div class="coupon-left">
                            <input type="radio" name="coupon" id="coupon3">
                            <label for="coupon3">
                                <div class="coupon-code">WELCOME10</div>
                                <div class="coupon-desc">Extra 10% OFF for new users</div>
                            </label>
                        </div>
                        <button type="button" class="btn-apply-coupon">Apply</button>
                    </div>
                </div>

                <button type="button" class="enter-coupon-btn">
                    <i class="fa-solid fa-ticket"></i>
                    <span>Got a Coupon Code?</span>
                </button>

                <button type="button" class="btn-buy-now">Buy Now</button>

                <div class="checkout-trust">
                    <i class="fa-solid fa-lock"></i>
                    <span>Secure Checkout</span>
                </div>

                <div class="trust-grid">
                    <div class="trust-item">
                        <i class="fa-solid fa-shield-halved"></i>
                        <span>7 Days Money Back Guarantee</span>
                    </div>
                    <div class="trust-item">
                        <i class="fa-solid fa-headset"></i>
                        <span>24/7 Live Support</span>
                    </div>
                    <div class="trust-item">
                        <i class="fa-solid fa-bolt"></i>
                        <span>Instant Access After Purchase</span>
                    </div>
                    <div class="trust-item">
                        <i class="fa-solid fa-credit-card"></i>
                        <span>Safe & Secure Payments</span>
                    </div>
                </div>
            </div>

            <!-- Support Box -->
            <div class="support-card">
                <div>
                    <div class="support-title">Have doubts?</div>
                    <div class="support-sub">Talk to our experts</div>
                </div>
                <button type="button" class="btn-chat">
                    <i class="fa-regular fa-comment-dots"></i>
                    <span>Chat Now</span>
                </button>
            </div>

        </aside>

    </div>

    <!-- ==========================================================
         RECOMMENDED SLIDER SECTION
         ========================================================== -->
    <section class="recommended-section">
        <div class="rec-header">
            <h2 class="section-heading mb-0">Recommended for You</h2>
            <div class="slider-arrows">
                <button aria-label="Previous" class="arrow-btn"><i class="fa-solid fa-chevron-left"></i></button>
                <button aria-label="Next" class="arrow-btn"><i class="fa-solid fa-chevron-right"></i></button>
            </div>
        </div>

        <div class="rec-cards-grid">
            <!-- Card 1 -->
            <div class="rec-card">
                <div class="rec-card-hero rec-hero-1">
                    <span class="rec-badge-off">20% OFF</span>
                    <div>
                        <div class="rec-hero-cat">CA Intermediate</div>
                        <div class="rec-hero-title">Practical<br>Test Series</div>
                    </div>
                </div>
                <div class="rec-card-body">
                    <div class="rec-card-category">CA Intermediate</div>
                    <div class="rec-subtitle">Practical Test Series</div>
                    <div class="rec-price-row">
                        <span class="rec-price">₹1,999</span>
                        <span class="rec-old-price">₹2,499</span>
                    </div>
                    <div class="rec-rating">
                        <i class="fa-solid fa-star"></i> 4.8 <span>(1245)</span>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="rec-card">
                <div class="rec-card-hero rec-hero-2">
                    <span class="rec-badge-off">15% OFF</span>
                    <div>
                        <div class="rec-hero-cat">CA Intermediate</div>
                        <div class="rec-hero-title">Taxation<br>Test Series</div>
                    </div>
                </div>
                <div class="rec-card-body">
                    <div class="rec-card-category">CA Intermediate</div>
                    <div class="rec-subtitle">Taxation Test Series</div>
                    <div class="rec-price-row">
                        <span class="rec-price">₹1,699</span>
                        <span class="rec-old-price">₹1,999</span>
                    </div>
                    <div class="rec-rating">
                        <i class="fa-solid fa-star"></i> 4.7 <span>(856)</span>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="rec-card">
                <div class="rec-card-hero rec-hero-3">
                    <span class="rec-badge-off">25% OFF</span>
                    <div>
                        <div class="rec-hero-cat">CA Intermediate</div>
                        <div class="rec-hero-title">Chapterwise<br>Test Series</div>
                    </div>
                </div>
                <div class="rec-card-body">
                    <div class="rec-card-category">CA Intermediate</div>
                    <div class="rec-subtitle">Chapterwise Test Series</div>
                    <div class="rec-price-row">
                        <span class="rec-price">₹1,499</span>
                        <span class="rec-old-price">₹1,999</span>
                    </div>
                    <div class="rec-rating">
                        <i class="fa-solid fa-star"></i> 4.6 <span>(732)</span>
                    </div>
                </div>
            </div>

            <!-- Card 4 -->
            <div class="rec-card">
                <div class="rec-card-hero rec-hero-4">
                    <span class="rec-badge-off">20% OFF</span>
                    <div>
                        <div class="rec-hero-cat">CA Intermediate</div>
                        <div class="rec-hero-title">Revision<br>Test Series</div>
                    </div>
                </div>
                <div class="rec-card-body">
                    <div class="rec-card-category">CA Intermediate</div>
                    <div class="rec-subtitle">Revision Test Series</div>
                    <div class="rec-price-row">
                        <span class="rec-price">₹1,299</span>
                        <span class="rec-old-price">₹1,599</span>
                    </div>
                    <div class="rec-rating">
                        <i class="fa-solid fa-star"></i> 4.8 <span>(642)</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
@endsection