{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-details-summary",
	"title": "HTML Details & Summary",
	"description": "أنشئ أقسام قابلة للتوسيع بدون JavaScript",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "details-summary-basic",
			"title": "أول عنصر تفاعلي",
			"description": "عنصر <kbd>&lt;details&gt;</kbd> ينشئ قسماً قابلاً للطي. عنصر <kbd>&lt;summary&gt;</kbd> يوفر التسمية القابلة للنقر.<br><br>انقر على الملخص لإظهار المحتوى المخفي - بدون JavaScript!",
			"task": "أنشئ عنصر <kbd>&lt;details&gt;</kbd> مع:<br>1. عنصر <kbd>&lt;summary&gt;</kbd> يقول <code>Click to reveal</code><br>2. عنصر <kbd>&lt;p&gt;</kbd> بالنص <code>This content was hidden!</code>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<details>\n  <summary>Click to reveal</summary>\n  <p>This content was hidden!</p>\n</details>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "details",
					"message": "أضف عنصر <kbd>&lt;details&gt;</kbd>"
				},
				{
					"type": "element_exists",
					"value": "summary",
					"message": "أضف <kbd>&lt;summary&gt;</kbd> داخل details"
				},
				{
					"type": "parent_child",
					"value": { "parent": "details", "child": "summary" },
					"message": "يجب أن يكون <kbd>&lt;summary&gt;</kbd> داخل <kbd>&lt;details&gt;</kbd>"
				},
				{
					"type": "parent_child",
					"value": { "parent": "details", "child": "p" },
					"message": "أضف <kbd>&lt;p&gt;</kbd> داخل <kbd>&lt;details&gt;</kbd> للمحتوى المخفي"
				}
			]
		},
		{
			"id": "details-open-attribute",
			"title": "موسع افتراضياً",
			"description": "افتراضياً، <kbd>&lt;details&gt;</kbd> مغلق. أضف سمة <kbd>open</kbd> لإظهار المحتوى في البداية.<br><br>هذه سمة منطقية - فقط أضف <kbd>open</kbd> بدون قيمة.",
			"task": "أضف سمة <kbd>open</kbd> لعنصر <kbd>&lt;details&gt;</kbd> لإظهار المحتوى افتراضياً.",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
			"sandboxCSS": "",
			"initialCode": "<details>\n  <summary>FAQ: What is HTML5?</summary>\n  <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
			"solution": "<details open>\n  <summary>FAQ: What is HTML5?</summary>\n  <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "attribute_value",
					"value": { "selector": "details", "attr": "open", "value": true },
					"message": "أضف سمة <kbd>open</kbd> إلى <kbd>&lt;details&gt;</kbd>"
				}
			]
		},
		{
			"id": "faq-accordion",
			"title": "أكورديون FAQ",
			"description": "عناصر <kbd>&lt;details&gt;</kbd> المتعددة تنشئ FAQ بأسلوب الأكورديون. كل سؤال يمكن توسيعه بشكل مستقل.<br><br><b>نصيحة:</b> اكتب <kbd>details*3&gt;summary+p</kbd> واضغط Tab لتوسيع Emmet. <kbd>*3</kbd> ينشئ 3 عناصر، <kbd>&gt;</kbd> يضع بالداخل، <kbd>+</kbd> يضيف أشقاء.",
			"task": "أنشئ قسم FAQ مع:<br>1. عنصر <kbd>&lt;h1&gt;</kbd> يقول <code>Frequently Asked Questions</code><br>2. ثلاثة عناصر <kbd>&lt;details&gt;</kbd>، كل واحد بسؤال في <kbd>&lt;summary&gt;</kbd> وإجابة في <kbd>&lt;p&gt;</kbd>",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
			"sandboxCSS": "",
			"initialCode": "",
			"solution": "<h1>Frequently Asked Questions</h1>\n\n<details>\n  <summary>What is HTML5?</summary>\n  <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n  <summary>Do I need JavaScript?</summary>\n  <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n  <summary>Is this accessible?</summary>\n  <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "h1",
					"message": "أضف عنوان <kbd>&lt;h1&gt;</kbd> لعنوان FAQ"
				},
				{
					"type": "element_count",
					"value": { "selector": "details", "min": 3 },
					"message": "أنشئ على الأقل 3 عناصر <kbd>&lt;details&gt;</kbd> للـ FAQ"
				},
				{
					"type": "element_count",
					"value": { "selector": "summary", "min": 3 },
					"message": "كل <kbd>&lt;details&gt;</kbd> يحتاج <kbd>&lt;summary&gt;</kbd> للسؤال"
				},
				{
					"type": "element_count",
					"value": { "selector": "details p", "min": 3 },
					"message": "كل <kbd>&lt;details&gt;</kbd> يحتاج <kbd>&lt;p&gt;</kbd> للإجابة"
				}
			]
		}
	]
}