"use client";
import React from "react";
// OPRAVENÉ: Zmenené z "icons-react" na "lucide-react"
import * as Icons from "lucide-react"; 
import Navbar from "@/components/navbar"; 
import ContactMe from "@/components/contactme"; 

// Import dát
import socialsData from "@/data/socials.json";
import projectsData from "@/data/mainprojects.json";
import mainData from "@/data/main_page.json";

export default function Home() {
  return (
    <main className="min-h-screen bg-[#0d0d0d] text-white overflow-x-hidden">
      
      <Navbar />

      {/* HERO SEKICA - pridané id="home" pre detekciu v navbare */}
      <section id="home" className="max-w-7xl mx-auto px-8 md:px-24 pt-48 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        
        {/* BIO */}
        <div className="space-y-10">
          <div className="flex flex-col items-start gap-4">
            <h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-none">
              I'm {mainData.hero.name}
            </h1>
            
            <div className="px-4 py-1.5 bg-[#2a2a2c] text-gray-400 rounded-full font-bold border border-white/5 text-sm tracking-normal">
              {mainData.hero.pronouns}
            </div>

            <p className="text-xl md:text-2xl text-gray-400 max-w-lg leading-relaxed font-medium pt-2">
              {mainData.hero.description} <br />
              Specializing in <span className="text-white border-b-2 border-blue-500">{mainData.hero.specialization.tech1}</span> and <span className="text-white border-b-2 border-purple-500">{mainData.hero.specialization.tech2}</span>.
            </p>
          </div>

          {/* SOCIALS */}
          <div className="flex flex-wrap gap-4">
            {socialsData.map((social, index) => {
              // Dynamické priradenie ikony
              const LucideIcon = (Icons as any)[social.icon];
              return (
                <a 
                  key={index}
                  href={social.url} 
                  target="_blank"
                  rel="noopener noreferrer"
                  className={social.primary ? "btn-pill-primary" : "btn-pill-secondary"}
                >
                  {LucideIcon && <LucideIcon size={22} />} {social.name}
                </a>
              );
            })}
          </div>

          {/* Badges */}
          <div className="flex gap-2 pt-4 opacity-50">
            {mainData.experience_tags.map(tag => (
              <span key={tag} className="px-3 py-1 bg-[#1a1a1c] border border-white/10 rounded-lg text-xs font-mono">{tag}</span>
            ))}
          </div>
        </div>

        {/* POLAROIDY */}
        <div className="relative h-[500px] hidden lg:block">
          <div className="absolute top-0 right-20 rotate-[-6deg] polaroid-container w-72 transition-transform hover:rotate-0 hover:z-30 cursor-pointer">
            <div className="aspect-square bg-gray-800 w-full mb-4 overflow-hidden shadow-inner">
               <img src="/images/me1.jpg" alt="me" className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500" />
            </div>
          </div>
          <div className="absolute top-32 right-0 rotate-[8deg] polaroid-container w-72 transition-transform hover:rotate-0 hover:z-30 cursor-pointer">
            <div className="aspect-square bg-gray-700 w-full mb-4 overflow-hidden shadow-inner">
               <img src="/images/me2.jpg" alt="me" className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500" />
            </div>
          </div>
        </div>
      </section>

      {/* PROJEKTY */}
      <section id="projects" className="max-w-7xl mx-auto px-8 md:px-24 py-32">
        <h2 className="text-4xl font-black mb-12 tracking-tighter">
          {mainData.sections.projects_title}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {projectsData.map((project, index) => (
            <a 
              key={index}
              href={project.url} 
              target="_blank" 
              rel="noopener noreferrer"
              className="p-8 bg-[#161618] rounded-[32px] border border-white/5 hover:border-white/20 transition-all group block shadow-xl"
            >
              <div className="flex justify-between items-start mb-4">
                <span className="text-[10px] font-black uppercase text-blue-500 tracking-widest">
                  {project.tag}
                </span>
                <Icons.ExternalLink size={20} className="text-gray-600 group-hover:text-white transition-colors" />
              </div>
              <h3 className="text-3xl font-black mb-2 group-hover:text-white transition-colors">
                {project.title}
              </h3>
              <p className="text-gray-400 font-medium leading-relaxed">
                {project.description}
              </p>
            </a>
          ))}
        </div>
      </section>

      {/* CONTACT ME SEKICA */}
      <ContactMe />

    </main>
  );
}