import Image from 'next/image';

export default function TestImagePage() {
  return (
    <div className="min-h-screen p-8">
      <h1 className="text-2xl font-bold mb-4">Test Background Image</h1>

      {/* Test 1: Direct img tag */}
      <div className="mb-8">
        <h2 className="font-semibold mb-2">Test 1: Direct Image component</h2>
        <Image
          src="/assets/images/background-section-1-landingpage.png"
          alt="test"
          width={256}
          height={128}
          className="w-64 h-32 object-cover"
        />
      </div>

      {/* Test 2: CSS background-image */}
      <div className="mb-8">
        <h2 className="font-semibold mb-2">Test 2: CSS background-image</h2>
        <div
          className="w-64 h-32"
          style={{
            backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        />
      </div>

      {/* Test 3: Absolute positioning */}
      <div className="mb-8">
        <h2 className="font-semibold mb-2">Test 3: Absolute positioning (like hero section)</h2>
        <div className="relative w-64 h-32 bg-gray-200">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          />
        </div>
      </div>
    </div>
  );
}