---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import DevEngageModal from '../components/dev/DevEngageModal.tsx';
import { SITE_TITLE } from '../consts';

const allProjects = (await getCollection('projects')).sort(
	(a, b) => a.data.order - b.data.order,
);

const pageTitle = `Dev | ${SITE_TITLE}`;
---

<BaseLayout title={pageTitle} description="Development projects and system architecture.">
    <div class="fixed inset-0 z-0 pointer-events-none">
        <div class="absolute inset-0 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,112,0.06))] bg-[length:100%_2px,3px_100%] opacity-[0.04]"></div>
        <div class="absolute inset-0 bg-[linear-gradient(var(--theme-grid-line)_1px,transparent_1px),linear-gradient(90deg,var(--theme-grid-line)_1px,transparent_1px)] bg-[size:100px_100px] pointer-events-none opacity-10"></div>
    </div>

	<!-- Hero Section -->
	<section class="relative z-10 pb-16 lg:pb-20 overflow-hidden">
		<!-- Floating accent orb -->
		<div class="absolute top-0 right-1/4 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none"></div>

		<div class="container mx-auto px-6 lg:px-12 relative z-10">
			<!-- Main Hero Content -->
			<div>
				<div class="max-w-5xl">
					<!-- Small label -->
					<div class="flex items-center gap-3 mb-8">
						<div class="w-1.5 h-1.5 bg-brand-accent rounded-full"></div>
						<span class="text-xs font-medium uppercase tracking-[0.2em] text-[var(--theme-text-muted)]">Projects & Experiments</span>
					</div>

					<!-- Main Title -->
					<h1 class="text-6xl md:text-8xl lg:text-9xl font-bold tracking-tighter leading-[0.9] mb-8">
						<span class="block text-[var(--theme-text-primary)]">The</span>
						<span class="block bg-gradient-to-r from-brand-accent to-brand-accent/70 bg-clip-text text-transparent">Lab</span>
					</h1>

					<!-- Description -->
					<p class="text-xl md:text-2xl text-[var(--theme-text-secondary)] font-light leading-relaxed max-w-2xl">
						Scalable web solutions, high-performance applications, and creative experiments in code.
					</p>
				</div>

				<!-- Stats Row -->
				<div class="flex items-center gap-8 mt-16 pt-8 border-t border-[var(--theme-border-primary)]">
					<div class="flex items-center gap-3">
						<span class="text-3xl font-bold text-[var(--theme-text-primary)]">{allProjects.length}</span>
						<span class="text-xs uppercase tracking-widest text-[var(--theme-text-muted)]">Projects</span>
					</div>
					<div class="w-px h-8 bg-[var(--theme-border-primary)]"></div>
					<div class="flex items-center gap-3">
						<span class="text-3xl font-bold text-brand-accent">Live</span>
						<span class="text-xs uppercase tracking-widest text-[var(--theme-text-muted)]">Status</span>
					</div>
				</div>
			</div>
		</div>
	</section>

    <section class="relative z-10 py-24 container mx-auto px-6 lg:px-12">
        <div class="grid grid-cols-1 gap-24">
            {allProjects.map((project, index) => (
                <article 
                    class={`group relative border border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)] overflow-hidden flex flex-col lg:flex-row animate-on-scroll slide-up stagger-${(index % 4) + 1} min-h-[600px]`}
                    data-project-index={index}
                >
                    
                    <div class="relative z-10 w-full lg:w-1/3 p-8 lg:p-12 flex flex-col justify-between bg-[var(--theme-bg-secondary)]/95 backdrop-blur-sm border-b lg:border-b-0 lg:border-r border-[var(--theme-border-primary)]">
                        <div>
                             <div class="flex justify-between items-start mb-8">
                                <div class="font-mono text-[10px] text-brand-accent uppercase tracking-[0.2em] flex items-center gap-3">
                                    <span>PRJ.0{project.data.order}</span>
                                    <span class="w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse"></span>
                                    <span>LIVE_FEED</span>
                                </div>
                            </div>

                            <h2 class="text-3xl lg:text-5xl font-bold uppercase tracking-tight text-[var(--theme-text-primary)] mb-6 group-hover:text-brand-accent transition-colors duration-300">
                                {project.data.title}
                            </h2>
                            <p class="text-[var(--theme-text-secondary)] text-base leading-relaxed font-light mb-8">
                                {project.data.description}
                            </p>

                             <div class="font-mono text-[10px] text-[var(--theme-text-subtle)] uppercase tracking-[0.2em] mb-4">
                                /// STACK_MANIFEST
                            </div>
                            {project.data.tags && (
                                <div class="flex flex-wrap gap-2 mb-8">
                                    {project.data.tags.map((tag) => (
                                        <span class="px-3 py-1.5 text-[10px] font-mono uppercase bg-[var(--theme-bg-tertiary)] border border-[var(--theme-border-primary)] text-[var(--theme-text-muted)] group-hover:text-[var(--theme-text-secondary)] group-hover:border-[var(--theme-border-strong)] transition-colors">
                                            {tag}
                                        </span>
                                    ))}
                                </div>
                            )}
                        </div>

                        <div class="flex flex-col gap-3 mt-auto">
                            <button
                                type="button"
                                class="engage-btn w-full flex items-center justify-between px-6 py-4 bg-brand-accent/10 border border-brand-accent text-xs font-bold uppercase tracking-widest text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300 group/btn rounded-full"
                                data-project={JSON.stringify({
                                    title: project.data.title,
                                    description: project.data.description,
                                    link: project.data.link,
                                    category: project.data.category,
                                    tags: project.data.tags || [],
                                    order: project.data.order
                                })}
                            >
                                <span>Engage Fullscreen</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" class="group-hover/btn:scale-110 transition-transform">
                                    <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
                                </svg>
                            </button>
                            <a
                                href={project.data.link}
                                target="_blank"
                                rel="noopener noreferrer"
                                class="w-full flex items-center justify-between px-6 py-4 bg-[var(--theme-hover-bg)] border border-[var(--theme-border-primary)] text-xs font-bold uppercase tracking-widest text-[var(--theme-text-primary)] hover:border-brand-accent/50 hover:text-brand-accent transition-all duration-300 group/btn rounded-full"
                            >
                                <span>Open Externally</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" class="group-hover/btn:translate-x-1 transition-transform">
                                    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
                                </svg>
                            </a>
                        </div>
                    </div>

                    <div class="relative w-full lg:w-2/3 h-[400px] lg:h-auto overflow-hidden bg-[var(--theme-bg-primary)] group-hover:border-brand-accent/50 transition-colors duration-500 cursor-pointer engage-preview" data-project-index={index}>
                        <div class="w-[200%] h-[200%] origin-top-left transform scale-50 pointer-events-none">
                            <iframe 
                                src={project.data.link} 
                                class="w-full h-full border-none grayscale-[0.8] group-hover:grayscale-0 transition-all duration-700 opacity-60 group-hover:opacity-100"
                                loading="lazy"
                                title={`Live preview of ${project.data.title}`}
                            ></iframe>
                        </div>

                        <div class="absolute inset-0 pointer-events-none z-10 bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,112,0.06))] bg-[length:100%_2px,3px_100%] opacity-20"></div>
                        
                        <div class="absolute inset-0 pointer-events-none z-10 shadow-[inset_0_0_100px_rgba(0,0,0,0.8)]"></div>

                        <div class="absolute inset-0 z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="px-6 py-3 bg-brand-accent/10 border border-brand-accent backdrop-blur-md text-brand-accent font-mono text-xs font-bold uppercase tracking-widest flex items-center gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square">
                                    <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
                                </svg>
                                Click to Engage
                            </div>
                        </div>
                    </div>
                </article>
            ))}
        </div>
    </section>

    <section class="relative z-10 py-32 border-t border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)]">
        <div class="container mx-auto px-6 lg:px-12">
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                <div class="lg:col-span-7">
                    <div class="flex items-center gap-3 mb-6">
                        <span class="font-mono text-[10px] uppercase tracking-[0.3em] text-brand-accent">/// SECONDARY_SPECIALIZATION</span>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-bold uppercase text-[var(--theme-text-primary)] mb-6 tracking-tight">
                        Visual Effects & <br/> <span class="text-brand-accent">Technical Art</span>
                    </h2>
                    <p class="text-[var(--theme-text-secondary)] text-lg font-light leading-relaxed max-w-xl">
                        Beyond traditional web development, I specialize in high-end VFX production and pipeline automation.
                    </p>
                </div>
                <div class="lg:col-span-5 flex justify-end">
                    <a href="/#work" class="group relative inline-flex items-center justify-center gap-6 px-10 py-5 bg-brand-accent/5 border border-brand-accent/30 hover:bg-brand-accent hover:border-brand-accent transition-all duration-300">
                        <span class="relative z-10 font-mono text-xs font-bold uppercase tracking-[0.2em] text-brand-accent group-hover:text-brand-dark transition-colors">View VFX Portfolio</span>
                        <div class="relative z-10 w-8 h-8 flex items-center justify-center border border-brand-accent/20 group-hover:border-brand-dark/30 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter" class="text-brand-accent group-hover:text-brand-dark group-hover:translate-x-1 transition-all">
                                <path d="M5 12h14M12 5l7 7-7 7"/>
                            </svg>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <DevEngageModal client:load />
</BaseLayout>

<script>
    function initEngageButtons() {
        const engageButtons = document.querySelectorAll('.engage-btn');
        const engagePreviews = document.querySelectorAll('.engage-preview');

        engageButtons.forEach((btn) => {
            btn.addEventListener('click', (e) => {
                const target = e.currentTarget as HTMLButtonElement;
                const projectData = target.dataset.project;
                if (!projectData) return;
                
                try {
                    const project = JSON.parse(projectData);
                    window.dispatchEvent(new CustomEvent('dev:engage', {
                        detail: { project, trigger: target }
                    }));
                } catch (err) {
                    console.error('Failed to parse project data:', err);
                }
            });
        });

        engagePreviews.forEach((preview) => {
            preview.addEventListener('click', (e) => {
                const target = e.currentTarget as HTMLElement;
                const index = target.dataset.projectIndex;
                if (index === undefined) return;
                
                const correspondingBtn = document.querySelector(
                    `article[data-project-index="${index}"] .engage-btn`
                ) as HTMLButtonElement | null;
                
                if (correspondingBtn) {
                    correspondingBtn.click();
                }
            });
        });
    }

    initEngageButtons();
    document.addEventListener('astro:page-load', initEngageButtons);
</script>
