"use client";
import React from "react";
import * as Icons from "lucide-react";
import Navbar from "@/components/navbar";
import projectsData from "@/data/projects.json";
import workedOnData from "@/data/workedon.json";
import projectsPageData from "@/data/projects_page.json"; // Import pre texty stránky

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

      <div className="max-w-7xl mx-auto px-8 md:px-24 pt-44">
        {/* HLAVIČKA STRÁNKY */}
        <div className="mb-20 space-y-4">
          <h1 className="text-5xl md:text-7xl font-black tracking-tighter">
            {projectsPageData.header.title}
          </h1>
          <p className="text-xl text-gray-400 max-w-2xl font-medium">
            {projectsPageData.header.description}
          </p>
        </div>

        {/* ZOZNAM HLAVNÝCH PROJEKTOV */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pb-20">
          {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 relative overflow-hidden"
            >
              <div className="flex justify-between items-start mb-4">
                <div className="flex gap-3 items-center">
                  <span className="text-[10px] font-black uppercase text-blue-500 tracking-widest">
                    {project.category}
                  </span>
                  <span className="text-[10px] font-bold text-gray-600">
                    {project.year}
                  </span>
                </div>
                <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>
              
              <div className="absolute -right-4 -bottom-4 opacity-[0.02] group-hover:opacity-[0.05] transition-opacity">
                <Icons.Layers size={120} />
              </div>
            </a>
          ))}
        </div>

        {/* SEKICA "WORKED ON" */}
        <div className="pb-24">
          <div className="flex items-center gap-4 mb-10">
            <h2 className="text-3xl font-black tracking-tighter">
              {projectsPageData.sections.worked_on_title}
            </h2>
            <div className="h-[1px] flex-1 bg-white/5"></div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {workedOnData.map((item, index) => (
              <a 
                key={index}
                href={item.url}
                target="_blank"
                rel="noopener noreferrer"
                className="p-6 bg-[#111113] rounded-2xl border border-white/5 hover:bg-[#161618] transition-all group flex items-center justify-between"
              >
                <div>
                  <h4 className="font-bold text-gray-200 group-hover:text-white transition-colors">
                    {item.title}
                  </h4>
                  <p className="text-xs text-gray-500 font-medium mt-1">
                    {item.role || projectsPageData.sections.default_role}
                  </p>
                </div>
                <Icons.ArrowUpRight size={18} className="text-gray-700 group-hover:text-white transition-all transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
              </a>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}