// ==========================================
// 📂 app/OptimizationDemo.tsx
// Next.js 내장 컴포넌트 실전 예제
// ==========================================

import Image from 'next/image';
import Link from 'next/link';

export default function OptimizationDemo() {
  return (
    <div className="p-8 max-w-3xl mx-auto space-y-12">
      
      {/* 1. <Link> 컴포넌트 사용 (SPA 부드러운 이동) */}
      <section>
        <h2 className="text-2xl font-bold mb-4">🚀 놀라운 속도의 페이지 이동</h2>
        <nav className="flex gap-4">
          {/* 외부 링크가 아닌 내부 라우팅은 무조건 Link 사용 */}
          <Link 
            href="/about" 
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
          >
            소개 페이지로 즉시 이동
          </Link>
          <Link 
            href="/blog" 
            className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition"
          >
            블로그 둘러보기
          </Link>
        </nav>
        <p className="mt-2 text-sm text-gray-500">
          * 링크가 화면에 보이는 순간 백그라운드에서 다음 페이지 데이터를 미리 불러옵니다(Prefetching).
        </p>
      </section>

      {/* 2. <Image> 컴포넌트 사용 (WebP 변환, Lazy loading) */}
      <section>
        <h2 className="text-2xl font-bold mb-4">🖼️ 극도로 최적화된 이미지 렌더링</h2>
        
        <div className="border border-gray-200 rounded-xl overflow-hidden shadow-lg inline-block">
          {/* 일반 img 태그 대신 Image 태그 사용 */}
          <Image 
            src="/heavy-landscape.jpg" // public 폴더에 저장된 이미지
            alt="멋진 풍경 이미지"
            width={800}               // Layout Shift(화면 덜컹거림)를 막기 위해 width 명시 필수
            height={450}              // Layout Shift(화면 덜컹거림)를 막기 위해 height 명시 필수
            priority={true}           // 첫 화면에 바로 보여야 하는 가장 중요한 이미지일 경우 우선순위 배정
            placeholder="blur"        // 로딩 중일 때 흐릿한 잔상(블러) 효과를 표시하여 UX 극대화
            blurDataURL="data:image/png;base64,..." // (실제 사용시 자동 생성됨)
            className="object-cover"
          />
        </div>
        
        <ul className="mt-4 text-sm text-gray-600 list-disc pl-5 space-y-1">
          <li>원본이 5MB짜리 무거운 사진이라도 브라우저에 맞게 <b>WebP/AVIF로 자동 압축</b>됩니다.</li>
          <li>화면 스크롤을 내려서 <b>이미지가 시야에 들어올 때만 다운로드</b>합니다. (Lazy loading 기본 적용)</li>
        </ul>
      </section>

    </div>
  );
}