// ============================================================
// Projects Portfolio Section
// ============================================================
const Projects = () => {
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('visible'); }),
      { threshold: 0.08 }
    );
    document.querySelectorAll('#projects .reveal').forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const projects = [
    {
      id: 1,
      title: 'Project Alpha',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.',
      tags: ['React', 'Node.js', 'PostgreSQL'],
      imgLabel: 'Project Image 1920×1080',
      imgGradient: 'from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800',
      github: '#',
      demo: '#',
      featured: true,
    },
    {
      id: 2,
      title: 'Project Beta',
      description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.',
      tags: ['Next.js', 'TypeScript', 'Tailwind'],
      imgLabel: 'Project Image 1920×1080',
      imgGradient: 'from-zinc-200 to-zinc-300 dark:from-zinc-700 dark:to-zinc-800',
      github: '#',
      demo: '#',
      featured: false,
    },
    {
      id: 3,
      title: 'Project Gamma',
      description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat.',
      tags: ['Python', 'FastAPI', 'Docker'],
      imgLabel: 'Project Image 1920×1080',
      imgGradient: 'from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800',
      github: '#',
      demo: '#',
      featured: false,
    },
    {
      id: 4,
      title: 'Project Delta',
      description: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum sed.',
      tags: ['React', 'GraphQL', 'MongoDB'],
      imgLabel: 'Project Image 1920×1080',
      imgGradient: 'from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-800',
      github: '#',
      demo: '#',
      featured: false,
    },
    {
      id: 5,
      title: 'Project Epsilon',
      description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.',
      tags: ['Vue.js', 'Express', 'MySQL'],
      imgLabel: 'Project Image 1920×1080',
      imgGradient: 'from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800',
      github: '#',
      demo: '#',
      featured: false,
    },
    {
      id: 6,
      title: 'Project Zeta',
      description: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores ratione.',
      tags: ['React Native', 'Firebase'],
      imgLabel: 'Project Image 1920×1080',
      imgGradient: 'from-warmGray-200 to-warmGray-300 dark:from-gray-700 dark:to-gray-800',
      github: '#',
      demo: '#',
      featured: false,
    },
  ];

  // Icon SVGs
  const GitHubIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
    </svg>
  );

  const ExternalLinkIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  );

  return (
    <section id="projects" className="py-24 md:py-32 px-6" aria-label="Projects Portfolio">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-16">
          <p className="reveal section-tag mb-2">What I've built</p>
          <h2 className="reveal section-title text-gray-900 dark:text-white">
            Projects Portfolio
          </h2>
          <div className="reveal section-divider mx-auto" />
          <p className="reveal text-gray-500 dark:text-gray-400 max-w-lg mx-auto">
            A selection of projects I've designed and developed. Each one taught me something new.
          </p>
        </div>

        {/* Projects grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map((project, idx) => (
            <article
              key={project.id}
              className="reveal project-card group"
              style={{ transitionDelay: `${idx * 0.08}s` }}
              aria-label={project.title}
            >
              {/* Image area */}
              <div className={`relative w-full aspect-video bg-gradient-to-br ${project.imgGradient} overflow-hidden`}>
                {/* Placeholder label */}
                <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" className="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  <span className="text-xs font-mono text-gray-400 dark:text-gray-500">{project.imgLabel}</span>
                </div>

                {/* Hover overlay with action buttons */}
                <div className="img-overlay">
                  <a
                    href={project.github}
                    id={`project-${project.id}-github`}
                    onClick={(e) => e.preventDefault()}
                    className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-white/20 backdrop-blur-sm text-white text-sm font-medium hover:bg-white/30 transition-colors"
                    aria-label={`GitHub repository for ${project.title}`}
                  >
                    <GitHubIcon /> Code
                  </a>
                  <a
                    href={project.demo}
                    id={`project-${project.id}-demo`}
                    onClick={(e) => e.preventDefault()}
                    className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-white/20 backdrop-blur-sm text-white text-sm font-medium hover:bg-white/30 transition-colors"
                    aria-label={`Live demo for ${project.title}`}
                  >
                    <ExternalLinkIcon /> Demo
                  </a>
                </div>
              </div>

              {/* Card body */}
              <div className="p-5">
                <h3 className="text-base font-bold text-gray-900 dark:text-white mb-2 group-hover:text-bordeaux transition-colors">
                  {project.title}
                </h3>
                <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-4 line-clamp-3">
                  {project.description}
                </p>

                {/* Tags */}
                <div className="flex flex-wrap gap-2 mb-4">
                  {project.tags.map((tag) => (
                    <span
                      key={tag}
                      className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-bordeaux/8 text-bordeaux dark:bg-bordeaux/15"
                    >
                      {tag}
                    </span>
                  ))}
                </div>

                {/* Footer links */}
                <div className="flex items-center gap-4 pt-3 border-t border-gray-100 dark:border-gray-700/60">
                  <a
                    href={project.github}
                    id={`project-${project.id}-github-footer`}
                    onClick={(e) => e.preventDefault()}
                    className="flex items-center gap-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-bordeaux dark:hover:text-bordeaux transition-colors"
                    aria-label={`GitHub repository for ${project.title}`}
                  >
                    <GitHubIcon /> Repository
                  </a>
                  <a
                    href={project.demo}
                    id={`project-${project.id}-demo-footer`}
                    onClick={(e) => e.preventDefault()}
                    className="flex items-center gap-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-bordeaux dark:hover:text-bordeaux transition-colors"
                    aria-label={`Live demo for ${project.title}`}
                  >
                    <ExternalLinkIcon /> Live Demo
                  </a>
                </div>
              </div>
            </article>
          ))}
        </div>

        {/* CTA */}
        <div className="reveal text-center mt-12">
          <a
            href="https://github.com/Robdeklimmer"
            id="all-projects-github"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-outline text-sm inline-flex"
          >
            View all on GitHub
            <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
};