---
const projects = [
  {
    name: 'EPC : Finale Broadcast Manager & Developer',
    url: 'https://www.youtube.com/playlist?list=PLZeYZotn5_IPFvDUWdEUu9xOBwOkdZ0F0',
    desc: 'ADOFAI is web-scale',
    detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest : Finale의 방송 화면 및 ARG를 담당하였습니다.',
    tags: ['React', 'ElysiaJS'],
  },
  {
    name: 'EPC 2025 Broadcast Manager',
    url: 'https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD',
    desc: 'ADOFAI is web-scale',
    detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
    tags: ['React', 'ElysiaJS'],
  },
  {
    name: 'newsletter',
    url: 'https://github.com/imnyang/newsletter',
    desc: 'For Memos',
    detail: '그저 이메일이 오면 Discord 웹훅으로 포워딩합니다.',
    tags: ['Rust', 'IMAP']
  },
  {
    name: 'memos-rss',
    url: 'https://github.com/imnyang/memos-rss',
    desc: 'For Memos',
    detail: 'Discord 포럼 채널에 RSS 피드에 올라온 내용을 포워딩합니다.',
    tags: ['Rust', 'Discord Bot', 'RSS']
  },
  {
    name: 'today.isangjeong',
    url: 'https://instagram.com/today.isangjeong',
    desc: 'Instagram Bot',
    detail: '매일 학교의 급식 메뉴를 자동으로 업로드하는 인스타그램 봇입니다.',
    tags: ['TypeScript', 'Instagram', '@napi-rs/canvas']
  }
];
---

<section class="break-keep break-words w-full">
  <div class="space-y-8" id="projects-list">
    {projects.map((project, idx) => (
      <div class={`space-y-2 project-item ${idx >= 3 ? 'hidden' : ''}`}>
        <div class="space-y-1">
          <div class="flex justify-between items-center gap-y-2 gap-x-4">
            {project.url ? (
              <a href={project.url} target="_blank" rel="noopener noreferrer" class="text-lg text-nowrap items-center gap-x-2 flex flex-row">
                {project.name}
                <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="round" stroke-linejoin="round" class="lucide lucide-square-arrow-out-up-right"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>
              </a>
            ) : (
              <span class="text-lg">{project.name}</span>
            )}
            <span class="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
          </div>
          <div>
            <p class="text-sm text-muted-foreground">{project.detail}</p>
          </div>
        </div>
        <div class="flex gap-2 *:bg-muted *:px-2 *:py-0.5 *:rounded *:text-xs *:font-medium *:text-muted-foreground">
          {project.tags.map((tag) => (
            <span>{tag}</span>
          ))}
        </div>
      </div>
    ))}
  </div>
  {projects.length > 3 && (
    <button
      id="load-more-btn"
      class="mt-6 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80 px-4 py-2 transition-colors cursor-pointer"
    >
      더 불러오기
    </button>
  )}
</section>

<script>
  let visibleCount = 3;
  const btn = document.getElementById('load-more-btn');
  const items = document.querySelectorAll('.project-item');
  
  if (btn) {
    btn.addEventListener('click', () => {
      visibleCount += 3;
      items.forEach((item, idx) => {
        if (idx < visibleCount) {
          item.classList.remove('hidden');
        }
      });
      if (visibleCount >= items.length) {
        btn.classList.add('hidden');
      }
    });
  }
</script>