---
import { Image } from 'astro:assets';

interface Props {
	sectionTitle: string;
	sectionSubtitle: string;
	description: string;
	skills: Array<{
		id: string;
		domain: string;
		tools: string;
		proficiency: string;
	}>;
}

const { sectionTitle, sectionSubtitle, description, skills } = Astro.props;

// Image map for skill data attributes
const imageMap: Record<string, string> = {
	"01": "compositing",
	"02": "3d",
	"03": "ai",
	"04": "dev"
};
---

<section id="skills" class="bg-brand-dark py-32 lg:py-48 overflow-hidden relative cursor-default">
    <div class="container mx-auto px-6 lg:px-12 relative z-10">

        <!-- Header Section -->
        <div class="mb-24 lg:mb-32 grid grid-cols-1 lg:grid-cols-12 gap-12">
            <div class="lg:col-span-8">
                <h2 class="text-6xl md:text-8xl lg:text-9xl font-bold uppercase tracking-tighter leading-[0.85] text-white">
                    <span class="block relative overflow-hidden">
                        <span class="animate-on-scroll slide-up block">{sectionTitle}</span>
                    </span>
                    <span class="block relative overflow-hidden">
                        <span class="animate-on-scroll slide-up stagger-1 block text-stroke text-transparent">{sectionSubtitle}</span>
                    </span>
                </h2>
            </div>
            <div class="lg:col-span-4 flex items-end">
                <p class="text-slate-400 text-lg leading-relaxed animate-on-scroll slide-up stagger-2 border-l-2 border-brand-accent pl-6">
                    {description}
                </p>
            </div>
        </div>

        <!-- Skills Data Grid -->
        <div class="w-full border-t border-white/10" id="skills-table">

            <!-- Table Header -->
            <div class="grid grid-cols-12 gap-4 py-6 border-b border-white/10 text-[10px] font-mono uppercase tracking-widest text-slate-500 select-none">
                <div class="col-span-2 md:col-span-1">/// ID</div>
                <div class="col-span-10 md:col-span-4">Domain</div>
                <div class="col-span-12 md:col-span-5 hidden md:block">Stack</div>
                <div class="col-span-6 md:col-span-2 hidden md:block text-right">Proficiency</div>
            </div>

            {skills.map((skill, index) => {
                const proficiencyClass = skill.proficiency === "Expert" || skill.proficiency === "Specialist" 
                    ? "border-brand-accent/50 text-brand-accent bg-brand-accent/5"
                    : "border-white/20 text-slate-300";
                
                return (
                    <div class={`skill-row group relative grid grid-cols-12 gap-4 py-10 border-b border-white/10 items-center transition-colors duration-300 hover:border-brand-accent/30 ${index < skills.length - 1 ? '' : ''}`} data-image={imageMap[skill.id] || "default"}>
                        <div class="col-span-2 md:col-span-1 text-brand-accent font-mono text-sm relative overflow-hidden">
                            <span class="block group-hover:-translate-y-full transition-transform duration-500">{skill.id}</span>
                            <span class="absolute top-0 left-0 translate-y-full group-hover:translate-y-0 transition-transform duration-500">{skill.id}</span>
                        </div>
                        <div class="col-span-10 md:col-span-4 relative overflow-hidden">
                            <h3 class="text-3xl md:text-5xl font-bold text-white uppercase tracking-tighter group-hover:text-brand-accent transition-colors duration-300">{skill.domain}</h3>
                            {index === 0 && (
                                <div class="absolute inset-0 bg-brand-accent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left mix-blend-difference pointer-events-none opacity-0 group-hover:opacity-100"></div>
                            )}
                        </div>
                        <div class="col-span-12 md:col-span-5 text-slate-400 font-mono text-xs md:text-sm tracking-wide group-hover:text-white transition-colors duration-300">
                            {skill.tools}
                        </div>
                        <div class="col-span-6 md:col-span-2 text-right hidden md:block">
                            <span class={`inline-block px-3 py-1 border text-[10px] font-bold uppercase tracking-widest ${proficiencyClass}`}>{skill.proficiency}</span>
                        </div>
                    </div>
                );
            })}

        </div>
    </div>

</section>