// Try this in your browser console right now:
console.log("Hello, JavaScript!");
console.log(2 + 2);
console.log(typeof "hello");

// ── var (OLD — avoid in modern JavaScript) ─────────────────
var oldVariable = "I'm function-scoped and hoisted";

// ── let (MODERN — use for variables that change) ────────────
let userName = "Alice";
let age = 25;
let isLoggedIn = false;

// You can reassign let variables
userName = "Bob";
age = 26;

// ── const (MODERN — use for values that don't change) ───────
const PI = 3.14159;
const WEBSITE_NAME = "elearncourses.com";
const MAX_STUDENTS = 50;

// const variables cannot be reassigned
// PI = 3; // ❌ TypeError: Assignment to constant variable

// However, const objects and arrays CAN be mutated
const student = { name: "Alice", age: 25 };
student.age = 26;  // ✅ This works — we're mutating, not reassigning
student.city = "Mumbai";  // ✅ Adding new property works too
// student = {};  // ❌ This would fail — can't reassign const

console.log(student); // { name: "Alice", age: 26, city: "Mumbai" }

// ── Best Practice: Prefer const by default ─────────────────
// Use const unless you KNOW the variable will be reassigned
// Use let when you need to reassign
// Never use var in modern JavaScript

// ── PRIMITIVE TYPES (stored by value) ──────────────────────

// 1. String — text data
const firstName = "Alice";
const greeting = 'Hello, World!';
const template = `Welcome, ${firstName}!`;  // Template literal (ES6)
const multiLine = `
    Line 1
    Line 2
    Line 3
`;

console.log(firstName.length);        // 5
console.log(firstName.toUpperCase()); // "ALICE"
console.log(firstName.includes("li")); // true
console.log(firstName.slice(1, 3));   // "li"
console.log("  hello  ".trim());      // "hello"
console.log("hello world".split(" ")); // ["hello", "world"]

// 2. Number — integers and floats (JavaScript has ONE number type)
const integer = 42;
const float = 3.14;
const negative = -100;
const scientific = 2.5e6;  // 2,500,000

console.log(10 + 3);   // 13 (addition)
console.log(10 - 3);   // 7  (subtraction)
console.log(10 * 3);   // 30 (multiplication)
console.log(10 / 3);   // 3.333...
console.log(10 % 3);   // 1  (modulus — remainder)
console.log(2 ** 10);  // 1024 (exponentiation ES7)
console.log(Math.floor(3.7));   // 3
console.log(Math.ceil(3.2));    // 4
console.log(Math.round(3.5));   // 4
console.log(Math.abs(-5));      // 5
console.log(Math.max(1,5,3,2)); // 5
console.log(Math.random());     // 0 to 1 (exclusive)

// Special number values
console.log(Infinity);         // Infinity
console.log(-Infinity);        // -Infinity
console.log(NaN);              // Not a Number
console.log(isNaN("hello"));   // true
console.log(Number.isInteger(4.0)); // true

// 3. Boolean — true or false
const isActive = true;
const hasPermission = false;

// Truthy and Falsy values (important JavaScript concept!)
// FALSY values (evaluate to false in boolean context):
// false, 0, "", '', ``, null, undefined, NaN
// EVERYTHING ELSE is TRUTHY

console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(1));          // true
console.log(Boolean("hello"));    // true
console.log(Boolean([]));         // true (empty array is truthy!)
console.log(Boolean({}));         // true (empty object is truthy!)

// 4. undefined — variable declared but not assigned
let myVariable;
console.log(myVariable);           // undefined
console.log(typeof myVariable);    // "undefined"

// 5. null — intentional absence of value
let currentUser = null;
console.log(typeof null);  // "object" (JavaScript bug — kept for compatibility)

// 6. Symbol — unique identifier (ES6)
const id1 = Symbol("id");
const id2 = Symbol("id");
console.log(id1 === id2);  // false (every Symbol is unique)

// 7. BigInt — very large integers (ES2020)
const bigNumber = 9007199254740991n;
const anotherBig = BigInt("12345678901234567890");

// ── REFERENCE TYPES (stored by reference) ──────────────────

// 8. Object — collection of key-value pairs
const person = {
    firstName: "Alice",
    lastName: "Johnson",
    age: 28,
    isStudent: true,
    address: {            // Nested object
        city: "Mumbai",
        country: "India"
    },
    greet: function() {   // Method
        return `Hi, I'm ${this.firstName}`;
    }
};

console.log(person.firstName);        // "Alice" (dot notation)
console.log(person["lastName"]);      // "Johnson" (bracket notation)
console.log(person.address.city);     // "Mumbai" (nested access)
console.log(person.greet());          // "Hi, I'm Alice"

// Type checking
console.log(typeof "hello");   // "string"
console.log(typeof 42);        // "number"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (historical quirk)
console.log(typeof {});        // "object"
console.log(typeof []);        // "object" (arrays are objects)
console.log(typeof function(){}); // "function"
console.log(Array.isArray([])); // true (proper array check)

// ── Comparison Operators ────────────────────────────────────
// ALWAYS use === (strict equality) — checks value AND type
console.log(5 === 5);    // true
console.log(5 === "5");  // false (different types!)
console.log(5 == "5");   // true  (loose equality — AVOID!)
console.log(5 !== 3);    // true
console.log(5 > 3);      // true
console.log(5 >= 5);     // true
console.log(3 < 5);      // true

// ── Logical Operators ───────────────────────────────────────
console.log(true && true);   // true  (AND)
console.log(true && false);  // false
console.log(false || true);  // true  (OR)
console.log(!true);          // false (NOT)

// Short-circuit evaluation
const name = null;
const displayName = name || "Guest";  // "Guest" (name is falsy)
console.log(displayName);

const user = { name: "Alice" };
const userName2 = user && user.name;  // "Alice"
console.log(userName2);

// ── Nullish Coalescing Operator ?? (ES2020) ─────────────────
// Returns right side ONLY if left side is null or undefined
// Unlike ||, does NOT trigger for 0, "", false
const score = 0;
console.log(score || 100);  // 100 (wrong! 0 is falsy)
console.log(score ?? 100);  // 0   (correct! only null/undefined triggers)

// ── Optional Chaining ?. (ES2020) ──────────────────────────
const userProfile = null;
// Without optional chaining: TypeError!
// console.log(userProfile.name);

// With optional chaining: returns undefined safely
console.log(userProfile?.name);         // undefined
console.log(userProfile?.address?.city); // undefined

// ── Spread Operator ... (ES6) ───────────────────────────────
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2, e: 5 };
console.log(merged);  // { a: 1, b: 2, c: 3, d: 4, e: 5 }

// ── Destructuring (ES6) ─────────────────────────────────────
// Array destructuring
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first);  // 10
console.log(second); // 20
console.log(rest);   // [30, 40, 50]

// Object destructuring
const { firstName: fName, age: userAge = 18, city = "Unknown" } = person;
console.log(fName);    // "Alice" (renamed)
console.log(userAge);  // 28
console.log(city);     // "Unknown" (default value used)

// ── if / else if / else ─────────────────────────────────────
const score = 85;

if (score >= 90) {
    console.log("Grade: A — Excellent!");
} else if (score >= 80) {
    console.log("Grade: B — Good!");
} else if (score >= 70) {
    console.log("Grade: C — Satisfactory");
} else if (score >= 60) {
    console.log("Grade: D — Needs Improvement");
} else {
    console.log("Grade: F — Please retake the course");
}

// ── Ternary Operator — concise conditional ──────────────────
const isAdult = age >= 18 ? "Adult" : "Minor";
console.log(isAdult);  // "Adult"

// Nested ternary (use sparingly — readability matters)
const gradeLabel = score >= 90 ? "A" :
                   score >= 80 ? "B" :
                   score >= 70 ? "C" : "F";

// ── switch statement ────────────────────────────────────────
const dayOfWeek = "Monday";

switch (dayOfWeek) {
    case "Monday":
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
    case "Friday":
        console.log("Weekday — Time to study!");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Weekend — Rest and review!");
        break;
    default:
        console.log("Invalid day");
}

// ── for loop ────────────────────────────────────────────────
for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i}`);
}

// Countdown
for (let i = 10; i >= 1; i--) {
    process.stdout.write(`${i} `);
}
// 10 9 8 7 6 5 4 3 2 1

// ── while loop ──────────────────────────────────────────────
let count = 0;
while (count < 5) {
    console.log(`Count: ${count}`);
    count++;
}

// ── do...while (runs at least once) ────────────────────────
let attempts = 0;
do {
    console.log(`Attempt ${attempts + 1}`);
    attempts++;
} while (attempts < 3);

// ── for...of (iterate over iterables) ──────────────────────
const courses = ["Python", "JavaScript", "DevOps", "Cloud", "Data Science"];

for (const course of courses) {
    console.log(`Course: ${course}`);
}

// With index using entries()
for (const [index, course] of courses.entries()) {
    console.log(`${index + 1}. ${course}`);
}

// ── for...in (iterate over object keys) ────────────────────
const student = {
    name: "Alice",
    course: "JavaScript",
    grade: "A",
    score: 95
};

for (const key in student) {
    console.log(`${key}: ${student[key]}`);
}

// ── Loop control ────────────────────────────────────────────
for (let i = 0; i < 10; i++) {
    if (i === 3) continue;  // Skip 3
    if (i === 7) break;     // Stop at 7
    console.log(i);         // 0, 1, 2, 4, 5, 6
}

// ── Function Declaration (hoisted — available before definition) ──
function greetStudent(name, course = "JavaScript") {
    return `Welcome ${name}! You're enrolled in ${course}.`;
}

console.log(greetStudent("Alice"));                    // uses default
console.log(greetStudent("Bob", "Data Science"));

// ── Function Expression (not hoisted) ──────────────────────
const calculateDiscount = function(price, discountPercent) {
    const discount = price * (discountPercent / 100);
    return price - discount;
};

console.log(calculateDiscount(1000, 20));  // 800

// ── Arrow Functions (ES6) — concise syntax ─────────────────
// Full syntax
const multiply = (a, b) => {
    return a * b;
};

// Concise — implicit return (no curly braces)
const square = (n) => n * n;
const double = n => n * 2;  // One parameter: no parentheses needed
const getPI = () => 3.14159;  // No parameters: empty parentheses required

console.log(square(5));   // 25
console.log(double(7));   // 14

// Arrow functions in array methods (very common pattern)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter(n => n % 2 === 0);
const doubled = numbers.map(n => n * 2);
const sum = numbers.reduce((acc, n) => acc + n, 0);
const firstBig = numbers.find(n => n > 5);

console.log(evens);    // [2, 4, 6, 8, 10]
console.log(doubled);  // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
console.log(sum);      // 55
console.log(firstBig); // 6

// ── Higher-Order Functions ──────────────────────────────────
// Functions that take/return other functions

function applyOperation(numbers, operation) {
    return numbers.map(operation);
}

const tripled = applyOperation([1, 2, 3, 4], n => n * 3);
const squared = applyOperation([1, 2, 3, 4], n => n ** 2);
console.log(tripled); // [3, 6, 9, 12]
console.log(squared); // [1, 4, 9, 16]

// ── Closures — Functions remembering their outer scope ──────
function createCounter(initialValue = 0) {
    let count = initialValue;  // Private variable in closure

    return {
        increment: () => ++count,
        decrement: () => --count,
        reset: () => { count = initialValue; },
        getValue: () => count
    };
}

const counter = createCounter(10);
console.log(counter.increment());  // 11
console.log(counter.increment());  // 12
console.log(counter.decrement());  // 11
counter.reset();
console.log(counter.getValue());   // 10

// Second counter is completely independent
const counter2 = createCounter(0);
console.log(counter2.getValue());  // 0 (independent closure)

// ── IIFE — Immediately Invoked Function Expression ──────────
const result = (function() {
    const privateData = "This can't be accessed outside";
    return {
        getData: () => privateData
    };
})();

console.log(result.getData());  // "This can't be accessed outside"

// ── Rest Parameters ─────────────────────────────────────────
function sumAll(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}

console.log(sumAll(1, 2, 3));        // 6
console.log(sumAll(1, 2, 3, 4, 5)); // 15

// ── Creating Arrays ─────────────────────────────────────────
const fruits = ["apple", "banana", "mango", "orange", "grape"];
const mixed = [1, "hello", true, null, { name: "Alice" }, [1, 2]];
const empty = [];

// ── Accessing and Modifying ─────────────────────────────────
console.log(fruits[0]);       // "apple" (zero-indexed)
console.log(fruits.at(-1));   // "grape" (last element, ES2022)
fruits[1] = "blueberry";      // Modify element
console.log(fruits.length);   // 5

// ── Essential Array Methods ─────────────────────────────────

// ADD / REMOVE
fruits.push("kiwi");          // Add to end — returns new length
fruits.pop();                  // Remove from end — returns removed element
fruits.unshift("strawberry"); // Add to beginning — returns new length
fruits.shift();                // Remove from beginning — returns removed
const removed = fruits.splice(1, 2);  // Remove 2 items from index 1
fruits.splice(1, 0, "cherry", "plum"); // Insert without removing

// SEARCH
console.log(fruits.indexOf("mango"));    // index or -1
console.log(fruits.includes("apple"));   // true/false
console.log(fruits.find(f => f.length > 5));  // first match
console.log(fruits.findIndex(f => f.startsWith("a"))); // index

// TRANSFORM (these return new arrays — non-mutating)
const upperFruits = fruits.map(f => f.toUpperCase());
const longFruits = fruits.filter(f => f.length > 5);
const totalLength = fruits.reduce((total, f) => total + f.length, 0);
const sortedFruits = [...fruits].sort();  // sort() mutates — use copy!
const reversedFruits = [...fruits].reverse(); // reverse() also mutates

// ITERATE
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// CHECK
const allShort = fruits.every(f => f.length < 15);   // all must pass
const anyLong = fruits.some(f => f.length > 8);       // at least one passes

// FLATTEN and COMBINE
const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.flat();              // [1, 2, 3, 4, 5, 6]
const deepNested = [1, [2, [3, [4]]]];
const deepFlat = deepNested.flat(Infinity); // [1, 2, 3, 4]

const joined = fruits.join(" | ");       // "apple | cherry | ..."
const arr3 = [1, 2].concat([3, 4], [5]); // [1, 2, 3, 4, 5]
const sliced = fruits.slice(1, 3);       // elements 1-2 (new array)

// ADVANCED: flatMap — map then flatten one level
const sentences = ["Hello World", "JavaScript Tutorial"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words); // ["Hello", "World", "JavaScript", "Tutorial"]

// ── Chaining Array Methods (very powerful pattern) ──────────
const students = [
    { name: "Alice", score: 92, course: "JavaScript" },
    { name: "Bob", score: 65, course: "Python" },
    { name: "Charlie", score: 78, course: "JavaScript" },
    { name: "Diana", score: 88, course: "JavaScript" },
    { name: "Eve", score: 45, course: "Python" }
];

// Find JavaScript students who passed, sorted by score, get names
const topJSStudents = students
    .filter(s => s.course === "JavaScript")
    .filter(s => s.score >= 70)
    .sort((a, b) => b.score - a.score)
    .map(s => `${s.name}: ${s.score}`)
    .join(", ");

console.log(topJSStudents); // "Alice: 92, Diana: 88, Charlie: 78"

// Average score of all students
const averageScore = students.reduce((sum, s, _, arr) =>
    sum + s.score / arr.length, 0
);
console.log(`Average: ${averageScore.toFixed(1)}`); // "Average: 73.6"

// ── Object Methods ──────────────────────────────────────────
const course = {
    title: "JavaScript Tutorial",
    instructor: "Dr. Smith",
    students: 1250,
    rating: 4.8,
    topics: ["Variables", "Functions", "DOM", "Async"],
    isPublished: true
};

// Object.keys() — array of keys
console.log(Object.keys(course));
// ["title", "instructor", "students", "rating", "topics", "isPublished"]

// Object.values() — array of values
console.log(Object.values(course));

// Object.entries() — array of [key, value] pairs
for (const [key, value] of Object.entries(course)) {
    console.log(`${key}: ${value}`);
}

// Object.assign() — shallow copy / merge
const courseUpdate = { rating: 4.9, newStudents: 500 };
const updatedCourse = Object.assign({}, course, courseUpdate);

// Spread — same as Object.assign (preferred)
const updatedCourse2 = { ...course, rating: 4.9, updatedAt: new Date() };

// Object.freeze() — prevent any modifications
const config = Object.freeze({
    API_URL: "https://api.elearncourses.com",
    VERSION: "2.0.0"
});
// config.API_URL = "..."; // Silent failure in strict mode, error in strict

// Object.fromEntries() — convert entries back to object
const entries = [["name", "Alice"], ["age", 25], ["city", "Mumbai"]];
const newObj = Object.fromEntries(entries);
console.log(newObj); // { name: "Alice", age: 25, city: "Mumbai" }

// ── Property Shorthand (ES6) ────────────────────────────────
const name = "Alice";
const age = 25;
const city = "Mumbai";

// Old way
const studentOld = { name: name, age: age, city: city };

// ES6 shorthand — same as above when variable name matches key
const student2 = { name, age, city };
console.log(student2); // { name: "Alice", age: 25, city: "Mumbai" }

// ── Computed Property Names (ES6) ───────────────────────────
const fieldName = "score";
const dynamicObj = {
    name: "Alice",
    [fieldName]: 95,          // key is "score"
    [`${fieldName}Percent`]: "95%"  // key is "scorePercent"
};
console.log(dynamicObj); // { name: "Alice", score: 95, scorePercent: "95%" }

// ── ES6 Classes ─────────────────────────────────────────────

class Student {
    // Private fields (ES2022) — truly encapsulated
    #id;
    #enrollmentDate;

    constructor(name, email, course) {
        this.#id = Math.random().toString(36).substr(2, 9).toUpperCase();
        this.name = name;
        this.email = email;
        this.course = course;
        this.#enrollmentDate = new Date();
        this.progress = 0;
        this.completedTopics = [];
    }

    // Getter — access private field
    get id() { return this.#id; }
    get enrollmentDate() {
        return this.#enrollmentDate.toLocaleDateString();
    }

    // Instance methods
    enroll(topic) {
        this.completedTopics.push(topic);
        this.progress = Math.round(
            (this.completedTopics.length / 20) * 100  // Assuming 20 topics
        );
        console.log(`✅ ${this.name} completed: ${topic}`);
        return this;  // Enable method chaining
    }

    getReport() {
        return {
            id: this.#id,
            name: this.name,
            course: this.course,
            progress: `${this.progress}%`,
            completedTopics: this.completedTopics,
            enrolled: this.enrollmentDate
        };
    }

    // Static method — called on the class, not instance
    static validateEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    toString() {
        return `Student[${this.#id}]: ${this.name} — ${this.course}`;
    }
}

// ── Inheritance ─────────────────────────────────────────────
class PremiumStudent extends Student {
    #subscriptionTier;
    #expiryDate;

    constructor(name, email, course, tier = "Gold") {
        super(name, email, course);  // Must call parent constructor
        this.#subscriptionTier = tier;
        this.#expiryDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000);
        this.mentorSessions = 0;
    }

    get tier() { return this.#subscriptionTier; }

    bookMentorSession(mentorName, date) {
        this.mentorSessions++;
        console.log(
            `📅 ${this.name} booked mentor session #${this.mentorSessions}` +
            ` with ${mentorName} on ${date}`
        );
        return this;
    }

    // Override parent method
    getReport() {
        return {
            ...super.getReport(),  // Include parent report
            subscriptionTier: this.#subscriptionTier,
            mentorSessions: this.mentorSessions,
            expiryDate: this.#expiryDate.toLocaleDateString()
        };
    }
}

// ── Usage ────────────────────────────────────────────────────
const alice = new Student("Alice", "alice@example.com", "JavaScript Tutorial");
const bob = new PremiumStudent("Bob", "bob@example.com", "DevOps", "Platinum");

// Method chaining
alice.enroll("Variables & Data Types")
     .enroll("Functions")
     .enroll("DOM Manipulation");

console.log(alice.getReport());

// Static method
console.log(Student.validateEmail("test@example.com")); // true
console.log(Student.validateEmail("invalid-email"));     // false

// instanceof
console.log(alice instanceof Student);        // true
console.log(bob instanceof Student);          // true (inheritance!)
console.log(bob instanceof PremiumStudent);   // true
console.log(alice instanceof PremiumStudent); // false

<!-- index.html — Practice HTML structure -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>eLearn Courses — JavaScript DOM Tutorial</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; }
        .course-card { border: 1px solid #ddd; padding: 20px; margin: 10px; border-radius: 8px; }
        .highlight { background-color: #fff3cd; }
        .hidden { display: none; }
        #counter { font-size: 48px; font-weight: bold; text-align: center; }
    </style>
</head>
<body>
    <h1 id="main-title">JavaScript DOM Tutorial</h1>
    <p id="description">Learn to manipulate the DOM with JavaScript</p>

    <div id="course-list">
        <div class="course-card" data-course-id="1">
            <h3>Python Tutorial</h3>
            <p class="course-info">Beginner • 40 hours</p>
        </div>
        <div class="course-card" data-course-id="2">
            <h3>JavaScript Tutorial</h3>
            <p class="course-info">Beginner • 35 hours</p>
        </div>
    </div>

    <div id="counter">0</div>
    <button id="increment-btn">+</button>
    <button id="decrement-btn">-</button>
    <button id="reset-btn">Reset</button>

    <input type="text" id="search-input" placeholder="Search courses...">
    <div id="search-results"></div>

    <script src="dom-tutorial.js"></script>
</body>
</html>

// dom-tutorial.js — Complete DOM Manipulation Reference

// ── SELECTING ELEMENTS ──────────────────────────────────────

// Single element selectors
const title = document.getElementById("main-title");
const firstCard = document.querySelector(".course-card");      // First match
const searchInput = document.querySelector("#search-input");   // By ID

// Multiple element selectors
const allCards = document.querySelectorAll(".course-card");    // NodeList
const allHeadings = document.getElementsByTagName("h3");       // HTMLCollection

console.log(`Found ${allCards.length} course cards`);

// ── READING AND MODIFYING CONTENT ──────────────────────────

// textContent — plain text (safe, fast)
console.log(title.textContent);                // "JavaScript DOM Tutorial"
title.textContent = "eLearn Courses — Learn JS!";

// innerHTML — HTML content (use carefully — XSS risk!)
const courseList = document.getElementById("course-list");
courseList.innerHTML += `
    <div class="course-card" data-course-id="3">
        <h3>DevOps Tutorial</h3>
        <p class="course-info">Intermediate • 50 hours</p>
    </div>
`;

// ── MODIFYING STYLES AND CLASSES ────────────────────────────

// Direct style manipulation
title.style.color = "#2563eb";
title.style.fontSize = "2rem";
title.style.fontWeight = "bold";

// CSS classes (preferred over direct styles)
const card = document.querySelector(".course-card");
card.classList.add("highlight");
card.classList.remove("hidden");
card.classList.toggle("selected");       // Add if missing, remove if present
card.classList.replace("highlight", "active");
console.log(card.classList.contains("course-card")); // true

// ── CREATING AND INSERTING ELEMENTS ────────────────────────

function createCourseCard(id, title, level, duration) {
    const card = document.createElement("div");
    card.className = "course-card";
    card.dataset.courseId = id;

    const heading = document.createElement("h3");
    heading.textContent = title;

    const info = document.createElement("p");
    info.className = "course-info";
    info.textContent = `${level} • ${duration}`;

    const enrollBtn = document.createElement("button");
    enrollBtn.textContent = "Enroll Now";
    enrollBtn.addEventListener("click", () => {
        alert(`Enrolling in ${title}!`);
    });

    card.append(heading, info, enrollBtn);
    return card;
}

const newCard = createCourseCard(4, "Cloud Computing", "Intermediate", "45 hours");
document.getElementById("course-list").appendChild(newCard);

// Insertion methods
const list = document.getElementById("course-list");
// list.prepend(element)          — first child
// list.append(element)           — last child
// list.before(element)           — before list
// list.after(element)            — after list
// card.replaceWith(newCard)       — replace card

// ── EVENT HANDLING ──────────────────────────────────────────

// Counter application
let counterValue = 0;
const counterDisplay = document.getElementById("counter");

function updateCounter() {
    counterDisplay.textContent = counterValue;
    counterDisplay.style.color = counterValue > 0 ? "#2ecc71" :
                                  counterValue < 0 ? "#e74c3c" : "#333";
}

document.getElementById("increment-btn").addEventListener("click", () => {
    counterValue++;
    updateCounter();
});

document.getElementById("decrement-btn").addEventListener("click", () => {
    counterValue--;
    updateCounter();
});

document.getElementById("reset-btn").addEventListener("click", () => {
    counterValue = 0;
    updateCounter();
});

// Keyboard events
document.addEventListener("keydown", (event) => {
    if (event.key === "ArrowUp") { counterValue++; updateCounter(); }
    if (event.key === "ArrowDown") { counterValue--; updateCounter(); }
    if (event.key === "r") { counterValue = 0; updateCounter(); }
});

// ── EVENT DELEGATION (efficient for dynamic lists) ──────────
// Instead of adding listener to each card, add ONE to the parent
document.getElementById("course-list").addEventListener("click", (event) => {
    // Find closest card ancestor
    const card = event.target.closest(".course-card");
    if (!card) return;

    const courseId = card.dataset.courseId;
    console.log(`Card clicked! Course ID: ${courseId}`);

    // Visual feedback
    document.querySelectorAll(".course-card").forEach(c =>
        c.classList.remove("selected")
    );
    card.classList.add("selected");
});

// ── LIVE SEARCH FUNCTIONALITY ───────────────────────────────
const courses = [
    { id: 1, title: "Python Tutorial", level: "Beginner" },
    { id: 2, title: "JavaScript Tutorial", level: "Beginner" },
    { id: 3, title: "DevOps Masterclass", level: "Intermediate" },
    { id: 4, title: "Machine Learning", level: "Advanced" },
    { id: 5, title: "Cloud Computing AWS", level: "Intermediate" },
    { id: 6, title: "Data Science Complete", level: "Intermediate" }
];

const searchInput2 = document.getElementById("search-input");
const searchResults = document.getElementById("search-results");

searchInput2.addEventListener("input", debounce(function(event) {
    const query = event.target.value.trim().toLowerCase();

    if (query.length < 2) {
        searchResults.innerHTML = "";
        return;
    }

    const filtered = courses.filter(c =>
        c.title.toLowerCase().includes(query) ||
        c.level.toLowerCase().includes(query)
    );

    searchResults.innerHTML = filtered.length > 0
        ? filtered.map(c => `
            <div class="course-card">
                <strong>${highlightMatch(c.title, query)}</strong>
                <span> — ${c.level}</span>
            </div>
        `).join("")
        : "<p>No courses found</p>";
}, 300));

// Debounce utility — prevent excessive function calls
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Highlight search term in results
function highlightMatch(text, query) {
    const regex = new RegExp(`(${query})`, "gi");
    return text.replace(regex, "<mark>$1</mark>");
}

// ── The Evolution of Async JavaScript ──────────────────────

// ── 1. Callbacks (Old Way — leads to "Callback Hell") ──────
function fetchCourseCallback(courseId, onSuccess, onError) {
    setTimeout(() => {
        if (courseId > 0) {
            onSuccess({ id: courseId, title: "JavaScript Tutorial" });
        } else {
            onError(new Error("Invalid course ID"));
        }
    }, 1000);
}

fetchCourseCallback(
    1,
    course => console.log("Got course:", course.title),
    error => console.error("Error:", error.message)
);

// Callback Hell (pyramid of doom) — avoid this:
fetchUserCallback(userId, user => {
    fetchCourseCallback(user.courseId, course => {
        fetchProgressCallback(user.id, course.id, progress => {
            // Deeply nested — hard to read, debug, maintain
            console.log(progress);
        });
    });
});

// ── 2. Promises (Better Way) ────────────────────────────────

function fetchCourse(courseId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (courseId > 0) {
                resolve({
                    id: courseId,
                    title: "JavaScript Tutorial",
                    instructor: "Dr. Smith",
                    students: 1250
                });
            } else {
                reject(new Error(`Course ${courseId} not found`));
            }
        }, 1000);
    });
}

function fetchEnrollments(courseId) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                { studentId: 1, name: "Alice", progress: 75 },
                { studentId: 2, name: "Bob", progress: 45 },
                { studentId: 3, name: "Charlie", progress: 90 }
            ]);
        }, 800);
    });
}

// Promise chaining
fetchCourse(1)
    .then(course => {
        console.log("Course:", course.title);
        return fetchEnrollments(course.id);  // Return next promise
    })
    .then(enrollments => {
        console.log(`Enrollments: ${enrollments.length}`);
        return enrollments.filter(e => e.progress >= 70);
    })
    .then(topStudents => {
        console.log("Top students:", topStudents.map(s => s.name));
    })
    .catch(error => {
        console.error("Error:", error.message);  // Catches ANY error above
    })
    .finally(() => {
        console.log("Operation complete");  // Always runs
    });

// Promise.all — run multiple promises in PARALLEL, wait for ALL
Promise.all([
    fetchCourse(1),
    fetchCourse(2),
    fetchCourse(3)
]).then(([course1, course2, course3]) => {
    console.log("All courses loaded:", course1.title, course2.title, course3.title);
});

// Promise.allSettled — wait for ALL, regardless of success/failure
Promise.allSettled([
    fetchCourse(1),
    fetchCourse(-1),  // This will reject
    fetchCourse(3)
]).then(results => {
    results.forEach((result, i) => {
        if (result.status === "fulfilled") {
            console.log(`Course ${i + 1}: ${result.value.title}`);
        } else {
            console.log(`Course ${i + 1} failed: ${result.reason.message}`);
        }
    });
});

// Promise.race — resolves/rejects as soon as FIRST settles
// Promise.any — resolves as soon as FIRST fulfills

// ── 3. Async/Await (Modern — Best Way) ─────────────────────

async function loadDashboard(userId) {
    try {
        console.log("Loading dashboard...");

        // Sequential (each waits for previous)
        const user = await fetchUser(userId);
        console.log(`User: ${user.name}`);

        // Parallel with Promise.all (much faster!)
        const [course, enrollments] = await Promise.all([
            fetchCourse(user.activeCourseId),
            fetchEnrollments(user.activeCourseId)
        ]);

        console.log(`Course: ${course.title}`);
        console.log(`Students enrolled: ${enrollments.length}`);

        // Compute dashboard data
        const avgProgress = enrollments.reduce(
            (sum, e) => sum + e.progress, 0
        ) / enrollments.length;

        return {
            user,
            course,
            enrollments,
            avgProgress: avgProgress.toFixed(1)
        };

    } catch (error) {
        console.error("Dashboard load failed:", error.message);
        throw error;  // Re-throw if caller needs to handle
    } finally {
        console.log("Dashboard operation complete");
    }
}

// ── Fetch API — Real HTTP Requests ─────────────────────────
async function fetchRealData(courseId) {
    const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${courseId}`
    );

    if (!response.ok) {
        throw new Error(`HTTP Error: ${response.status}`);
    }

    const data = await response.json();
    return data;
}

async function postEnrollment(studentData) {
    const response = await fetch("https://api.elearncourses.com/enrollments", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${getAuthToken()}`
        },
        body: JSON.stringify({
            studentId: studentData.id,
            courseId: studentData.courseId,
            enrolledAt: new Date().toISOString()
        })
    });

    if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || "Enrollment failed");
    }

    return response.json();
}

// Using async function
fetchRealData(1)
    .then(data => console.log("Post:", data.title))
    .catch(err => console.error(err));

// ── Modules (ES6) — Organize code into files ────────────────

// math-utils.js — named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
export class Calculator {
    constructor() { this.history = []; }
    calculate(a, op, b) {
        let result;
        switch(op) {
            case '+': result = a + b; break;
            case '-': result = a - b; break;
            case '*': result = a * b; break;
            case '/': result = b !== 0 ? a / b : "Error: Division by zero"; break;
        }
        this.history.push(`${a} ${op} ${b} = ${result}`);
        return result;
    }
}

// Default export (one per file)
export default class MathHelper { /* ... */ }

// main.js — importing
import MathHelper, { PI, add, multiply, Calculator } from "./math-utils.js";
import * as MathUtils from "./math-utils.js";  // Import all as namespace

// ── Generators (Advanced) ────────────────────────────────────
function* idGenerator() {
    let id = 1;
    while (true) {
        yield id++;  // Pause and return value
    }
}

const generateId = idGenerator();
console.log(generateId.next().value); // 1
console.log(generateId.next().value); // 2
console.log(generateId.next().value); // 3

// ── WeakMap and WeakSet ─────────────────────────────────────
const privateData = new WeakMap();

class BankAccount {
    constructor(owner, balance) {
        privateData.set(this, { balance, transactions: [] });
        this.owner = owner;
    }

    deposit(amount) {
        const data = privateData.get(this);
        data.balance += amount;
        data.transactions.push({ type: "deposit", amount, date: new Date() });
        return this;
    }

    get balance() {
        return privateData.get(this).balance;
    }
}

// ── Proxy and Reflect ────────────────────────────────────────
const validatedStudent = new Proxy({}, {
    set(target, property, value) {
        if (property === "age" && (typeof value !== "number" || value < 0)) {
            throw new TypeError("Age must be a positive number");
        }
        if (property === "name" && typeof value !== "string") {
            throw new TypeError("Name must be a string");
        }
        target[property] = value;
        return true;
    }
});

validatedStudent.name = "Alice";  // ✅
validatedStudent.age = 25;        // ✅
// validatedStudent.age = -1;     // ❌ Throws TypeError

// ── try/catch/finally ───────────────────────────────────────
function divideNumbers(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        throw new TypeError("Arguments must be numbers");
    }
    if (b === 0) {
        throw new RangeError("Division by zero is not allowed");
    }
    return a / b;
}

try {
    console.log(divideNumbers(10, 2));   // 5
    console.log(divideNumbers(10, 0));   // Throws RangeError
} catch (error) {
    if (error instanceof TypeError) {
        console.error("Type Error:", error.message);
    } else if (error instanceof RangeError) {
        console.error("Range Error:", error.message);
    } else {
        console.error("Unknown error:", error);
    }
} finally {
    console.log("This always runs");
}

// ── Custom Error Classes ─────────────────────────────────────
class ValidationError extends Error {
    constructor(message, field) {
        super(message);
        this.name = "ValidationError";
        this.field = field;
        this.timestamp = new Date().toISOString();
    }
}

class NetworkError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = "NetworkError";
        this.statusCode = statusCode;
    }
}

// ── Global Error Handling ────────────────────────────────────
window.addEventListener("error", (event) => {
    console.error("Uncaught error:", event.error.message);
    // Send to error tracking service (Sentry, etc.)
});

window.addEventListener("unhandledrejection", (event) => {
    console.error("Unhandled promise rejection:", event.reason);
    event.preventDefault();  // Prevent default browser behavior
});

// quiz-app.js — Complete Quiz Application

const quizData = [
    {
        question: "What does DOM stand for?",
        options: [
            "Document Object Model",
            "Data Object Management",
            "Dynamic Object Method",
            "Document Oriented Mode"
        ],
        correct: 0,
        explanation: "DOM stands for Document Object Model — the browser's in-memory representation of HTML."
    },
    {
        question: "Which keyword creates a block-scoped variable in modern JavaScript?",
        options: ["var", "let", "function", "scope"],
        correct: 1,
        explanation: "let creates a block-scoped variable. const is also block-scoped."
    },
    {
        question: "What does === check in JavaScript?",
        options: [
            "Value only",
            "Type only",
            "Value and type (strict equality)",
            "Reference equality"
        ],
        correct: 2,
        explanation: "=== is strict equality — checks both value AND type without type coercion."
    }
];

class QuizApp {
    constructor(questions, containerId) {
        this.questions = questions;
        this.container = document.getElementById(containerId);
        this.currentIndex = 0;
        this.score = 0;
        this.userAnswers = [];
        this.startTime = Date.now();
    }

    start() {
        this.renderQuestion();
    }

    renderQuestion() {
        const q = this.questions[this.currentIndex];
        const progress = ((this.currentIndex / this.questions.length) * 100).toFixed(0);

        this.container.innerHTML = `
            <div class="quiz-header">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: ${progress}%"></div>
                </div>
                <p>Question ${this.currentIndex + 1} of ${this.questions.length}</p>
                <p>Score: ${this.score}/${this.currentIndex}</p>
            </div>

            <div class="question-card">
                <h2>${q.question}</h2>
                <div class="options">
                    ${q.options.map((option, i) => `
                        <button class="option-btn"
                                data-index="${i}"
                                onclick="quiz.selectAnswer(${i})">
                            <span class="option-letter">${String.fromCharCode(65 + i)}</span>
                            ${option}
                        </button>
                    `).join("")}
                </div>
            </div>
        `;
    }

    selectAnswer(selectedIndex) {
        const q = this.questions[this.currentIndex];
        const isCorrect = selectedIndex === q.correct;

        this.userAnswers.push({ questionIndex: this.currentIndex, selectedIndex, isCorrect });

        if (isCorrect) {
            this.score++;
        }

        // Show result and explanation
        const buttons = this.container.querySelectorAll(".option-btn");
        buttons.forEach((btn, i) => {
            btn.disabled = true;
            if (i === q.correct) btn.classList.add("correct");
            if (i === selectedIndex && !isCorrect) btn.classList.add("incorrect");
        });

        // Show explanation
        const explanation = document.createElement("div");
        explanation.className = `explanation ${isCorrect ? "correct" : "incorrect"}`;
        explanation.innerHTML = `
            <strong>${isCorrect ? "✅ Correct!" : "❌ Incorrect!"}</strong>
            <p>${q.explanation}</p>
            <button onclick="quiz.nextQuestion()">
                ${this.currentIndex < this.questions.length - 1 ? "Next Question →" : "See Results"}
            </button>
        `;
        this.container.querySelector(".question-card").appendChild(explanation);
    }

    nextQuestion() {
        this.currentIndex++;
        if (this.currentIndex < this.questions.length) {
            this.renderQuestion();
        } else {
            this.showResults();
        }
    }

    showResults() {
        const timeTaken = Math.round((Date.now() - this.startTime) / 1000);
        const percentage = Math.round((this.score / this.questions.length) * 100);
        const grade = percentage >= 80 ? "A" : percentage >= 60 ? "B" : "C";

        this.container.innerHTML = `
            <div class="results">
                <h2>Quiz Complete! 🎉</h2>
                <div class="score-display">
                    <div class="score-circle">${percentage}%</div>
                    <p>Grade: <strong>${grade}</strong></p>
                </div>
                <div class="stats">
                    <p>✅ Correct: ${this.score}/${this.questions.length}</p>
                    <p>⏱️ Time: ${timeTaken} seconds</p>
                </div>
                <button onclick="quiz.restart()">Try Again</button>
            </div>
        `;
    }

    restart() {
        this.currentIndex = 0;
        this.score = 0;
        this.userAnswers = [];
        this.startTime = Date.now();
        this.renderQuestion();
    }
}

const quiz = new QuizApp(quizData, "quiz-container");
quiz.start();