include src/components/mixins

doctype html
html(lang=lang, dir=dir)
	head
		meta(charset="UTF-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		title= t.meta.title
		meta(name="description", content=t.meta.description)
		link(rel="stylesheet", href="src/main.css")

	body
		//- Hero Section
		.hero
			h1= t.hero.title
			p.subtitle= t.hero.subtitle

		//- Progressive Disclosure Section
		+section(t.sections.disclosure.title)
			.comparison-grid
				+badColumn(t.sections.disclosure.js_title, t.sections.disclosure.js_badge, t.sections.disclosure.js_warning)
					+jsCollapsible("content1", "Custom Collapsible Architecture", t.sections.disclosure.js_content1)
					+jsCollapsible("content2", "State Management Challenges", t.sections.disclosure.js_content2)
					+consList(t.sections.disclosure.js_cons_title, t.sections.disclosure.js_cons)

				+goodColumn(t.sections.disclosure.native_title, t.sections.disclosure.native_badge, t.sections.disclosure.native_note)
					details(name="architecture")
						summary= t.sections.disclosure.native_semantic_title
						div= t.sections.disclosure.native_semantic_content

					details(name="architecture")
						summary= t.sections.disclosure.native_enhancement_title
						div= t.sections.disclosure.native_enhancement_content

					details(name="architecture")
						summary= t.sections.disclosure.native_performance_title
						div= t.sections.disclosure.native_performance_content

					+prosList(t.sections.disclosure.native_pros_title, t.sections.disclosure.native_pros)

		//- Modal Section
		+section(t.sections.modals.title)
			.comparison-grid
				+badColumn(t.sections.modals.js_title, t.sections.modals.js_badge, t.sections.modals.js_warning)
					button(onclick="openJSModal()")= t.sections.modals.js_button

					#jsModal.js-modal-overlay
						.js-modal-content
							h4= t.sections.modals.js_modal_title
							p= t.sections.modals.js_modal_content
							p
								strong= t.sections.modals.js_modal_issue
							button(onclick="closeJSModal()")= t.sections.modals.js_modal_close

					+consList(t.sections.modals.js_cons_title, t.sections.modals.js_cons)

				+goodColumn(t.sections.modals.native_title, t.sections.modals.native_badge, t.sections.modals.native_note)
					button(onclick="document.getElementById('nativeDialog').showModal()")= t.sections.modals.native_button

					dialog#nativeDialog
						h4= t.sections.modals.native_dialog_title
						p= t.sections.modals.native_dialog_content
						p
							strong= t.sections.modals.native_dialog_advantage
						button(onclick="document.getElementById('nativeDialog').close()")= t.sections.modals.native_dialog_close

					+prosList(t.sections.modals.native_pros_title, t.sections.modals.native_pros)

		//- Form Validation Section
		+section(t.sections.validation.title)
			.comparison-grid
				+badColumn(t.sections.validation.js_title, t.sections.validation.js_badge, t.sections.validation.js_warning)
					form(onsubmit="return validateJSForm(event)")
						+formGroup(t.sections.validation.js_email_label)
							input#js-email(name="email", type="text")
							#email-error.js-error= t.sections.validation.js_email_error

						+formGroup(t.sections.validation.js_regex_label)
							input#js-regex(name="uuid", type="text")
							#regex-error.js-error= t.sections.validation.js_regex_error

						button(type="submit")= t.sections.validation.js_submit

					+consList(t.sections.validation.js_cons_title, t.sections.validation.js_cons)

				+goodColumn(t.sections.validation.native_title, t.sections.validation.native_badge, t.sections.validation.native_note)
					form
						+formGroup(t.sections.validation.native_email_label)
							input#native-email(name="email", type="email", placeholder=t.sections.validation.native_email_placeholder, required)

						+formGroup(t.sections.validation.native_uuid_label)
							input#native-uuid(
								name="uuid",
								type="text",
								pattern="[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}",
								placeholder=t.sections.validation.native_uuid_placeholder,
								title=t.sections.validation.native_uuid_title,
								required
							)

						+formGroup(t.sections.validation.native_api_label)
							input#native-api(name="api", type="url", placeholder=t.sections.validation.native_api_placeholder)

						button(type="submit")= t.sections.validation.native_submit

					+prosList(t.sections.validation.native_pros_title, t.sections.validation.native_pros)

		//- Progress Section
		+section(t.sections.progress.title)
			.comparison-grid
				+badColumn(t.sections.progress.js_title, t.sections.progress.js_badge, t.sections.progress.js_warning)
					.js-progress-container
						#jsProgress.js-progress-bar

					p= t.sections.progress.js_text + " "
						span#jsProgressText 0%
					button(onclick="startJSProgress()")= t.sections.progress.js_button

					+consList(t.sections.progress.js_cons_title, t.sections.progress.js_cons)

				+goodColumn(t.sections.progress.native_title, t.sections.progress.native_badge, t.sections.progress.native_note)
					p= t.sections.progress.native_compilation
					progress(max="100", value="75")= t.sections.progress.native_compilation_text

					p= t.sections.progress.native_indeterminate
					progress= t.sections.progress.native_indeterminate_text

					p= t.sections.progress.native_dynamic + " "
						span#nativeProgressText 0%
					progress#nativeProgress(max="100", value="0") 0%
					button(onclick="startNativeProgress()")= t.sections.progress.native_button

					+prosList(t.sections.progress.native_pros_title, t.sections.progress.native_pros)

		//- Temporal Input Section
		+section(t.sections.temporal.title)
			.comparison-grid
				+badColumn(t.sections.temporal.js_title, t.sections.temporal.js_badge, t.sections.temporal.js_warning)
					+formGroup(t.sections.temporal.js_label)
						input#js-date(type="text", placeholder=t.sections.temporal.js_placeholder, readonly, onclick="openDatePicker()")
						#datePicker(style="display: none; position: absolute; background: white; border: 1px solid #ccc; z-index: 1000")
							p(style="padding: 20px; color: #666")= t.sections.temporal.js_picker_content

					+consList(t.sections.temporal.js_cons_title, t.sections.temporal.js_cons)

				+goodColumn(t.sections.temporal.native_title, t.sections.temporal.native_badge, t.sections.temporal.native_note)
					+formGroup(t.sections.temporal.native_release_label)
						input#native-date(name="date", type="date", value="2024-12-15", min="2024-01-01", max="2025-12-31")

					+formGroup(t.sections.temporal.native_timestamp_label)
						input#native-datetime(name="datetime", type="datetime-local", step="1")

					+formGroup(t.sections.temporal.native_window_label)
						input#native-time(name="time", type="time", min="02:00", max="18:00", step="900")

					+prosList(t.sections.temporal.native_pros_title, t.sections.temporal.native_pros)

		//- Autocomplete Section
		+section(t.sections.autocomplete.title)
			.comparison-grid
				+badColumn(t.sections.autocomplete.js_title, t.sections.autocomplete.js_badge, t.sections.autocomplete.js_warning)
					+formGroup(t.sections.autocomplete.js_label)
						input#js-search(type="text", placeholder=t.sections.autocomplete.js_placeholder, autocomplete="off", onkeyup="filterFrameworks(this.value)")
						#js-results(
							style="display: none; position: absolute; background: var(--color-card); border: 1px solid var(--color-border); max-height: 200px; overflow-y: auto; z-index: 100"
						)

					+consList(t.sections.autocomplete.js_cons_title, t.sections.autocomplete.js_cons)

				+goodColumn(t.sections.autocomplete.native_title, t.sections.autocomplete.native_badge, t.sections.autocomplete.native_note)
					+formGroup(t.sections.autocomplete.native_framework_label)
						input#native-framework(type="text", list="frameworks", placeholder=t.sections.autocomplete.native_framework_placeholder)
						datalist#frameworks
							option(value="React") React - Component-based library
							option(value="Vue.js") Vue.js - Progressive framework
							option(value="Angular") Angular - Full platform
							option(value="Svelte") Svelte - Compile-time framework
							option(value="Solid") Solid - Fine-grained reactivity
							option(value="Alpine.js") Alpine.js - Minimal framework
							option(value="Lit") Lit - Web Components library
							option(value="Preact") Preact - Lightweight React alternative

					+formGroup(t.sections.autocomplete.native_language_label)
						input#native-language(type="text", list="languages", placeholder=t.sections.autocomplete.native_language_placeholder)
						datalist#languages
							option(value="JavaScript", label="JavaScript - Dynamic scripting")
							option(value="TypeScript", label="TypeScript - Typed JavaScript")
							option(value="Python", label="Python - General purpose")
							option(value="Rust", label="Rust - Systems programming")
							option(value="Go", label="Go - Concurrent systems")
							option(value="WebAssembly", label="WebAssembly - High-performance web")
							option(value="C", label="C - Low-level systems")
							option(value="C++", label="C++ - High-performance systems")
							option(value="C#", label="C# - .NET ecosystem")
							option(value="Java", label="Java - Cross-platform enterprise")
							option(value="Kotlin", label="Kotlin - Modern JVM language")
							option(value="Swift", label="Swift - iOS and macOS")
							option(value="Ruby", label="Ruby - Web development (Rails)")
							option(value="PHP", label="PHP - Server-side scripting")
							option(value="Perl", label="Perl - Text processing")
							option(value="Haskell", label="Haskell - Functional programming")
							option(value="Elixir", label="Elixir - Scalable applications")
							option(value="Dart", label="Dart - Web and mobile apps")
							option(value="Scala", label="Scala - Functional JVM language")
							option(value="Lua", label="Lua - Lightweight scripting")
							option(value="R", label="R - Statistical computing")
							option(value="Julia", label="Julia - High-performance computing")
							option(value="Shell", label="Shell - Command-line scripting")
							option(value="MATLAB", label="MATLAB - Engineering and science")

					+prosList(t.sections.autocomplete.native_pros_title, t.sections.autocomplete.native_pros)

		//- Summary Section
		.summary-box
			h3= t.summary.title
			p= t.summary.content

			p
				strong= t.summary.approach_title
			ul(style="text-align: left; max-width: 600px; margin: 2rem auto")
				each item in t.summary.approach_items
					li= item

			p= t.summary.closing

			.zen-quote= t.summary.quote

		script.
			// JavaScript functions from original HTML
			const frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];

			function filterFrameworks(value) {
				const results = document.getElementById('js-results');
				if (!value) {
					results.style.display = 'none';
					return;
				}
				const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));
				results.innerHTML = filtered.map(fw => `<div style="padding:8px; cursor:pointer;" onclick="selectFramework('${fw}')">${fw}</div>`).join('');
				results.style.display = filtered.length ? 'block' : 'none';
			}

			function selectFramework(fw) {
				document.getElementById('js-search').value = fw;
				document.getElementById('js-results').style.display = 'none';
			}

			function startNativeProgress() {
				const progress = document.getElementById('nativeProgress');
				const text = document.getElementById('nativeProgressText');
				let value = 0;
				const interval = setInterval(() => {
					value += Math.random() * 15;
					if (value >= 100) {
						value = 100;
						clearInterval(interval);
					}
					progress.value = value;
					text.textContent = Math.round(value) + '%';
				}, 200);
			}

			function toggleContent(id) {
				document.getElementById(id).classList.toggle("active");
			}

			function openJSModal() {
				document.getElementById('jsModal').style.display = 'flex';
			}

			function closeJSModal() {
				document.getElementById('jsModal').style.display = 'none';
			}

			function validateJSForm(event) {
				event.preventDefault();
				alert('Custom validation would run here');
				return false;
			}

			function startJSProgress() {
				const bar = document.getElementById('jsProgress');
				const text = document.getElementById('jsProgressText');
				let width = 0;
				const interval = setInterval(() => {
					width += Math.random() * 15;
					if (width >= 100) {
						width = 100;
						clearInterval(interval);
					}
					bar.style.width = width + '%';
					text.textContent = Math.round(width) + '%';
				}, 200);
			}

			function openDatePicker() {
				const picker = document.getElementById('datePicker');
				picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
			}