import React from 'react';

// ==========================================
// PENGATURAN LOGO UNTUK PENGGUNA (cPanel / Local):
// ==========================================
// 1. Taruh file gambar logo Anda di folder "public" dengan nama "logo.png"
// 2. Ubah USE_IMAGE_FILE di bawah ini menjadi "true" untuk menggunakannya.
// 3. Jika USE_IMAGE_FILE bernilai "false", web akan menggunakan Kode SVG bawaan yang tajam & ringan.
const USE_IMAGE_FILE = false; 
const IMAGE_FILE_PATH = "./logo.png"; // Jalur relatif ramah cPanel (public_html)

interface LogoProps {
  className?: string;
  showText?: boolean;
  lightText?: boolean;
}

export default function Logo({ className = '', showText = true, lightText = false }: LogoProps) {
  return (
    <div className={`flex items-center gap-3 select-none ${className}`}>
      {USE_IMAGE_FILE ? (
        /* Menggunakan Gambar Fisik (.png / .svg / .jpg) */
        <img 
          src={IMAGE_FILE_PATH} 
          alt="9aleh Logo" 
          className="h-10 sm:h-12 w-auto object-contain shrink-0" 
          referrerPolicy="no-referrer"
          onError={(e) => {
            // Pengaman otomatis jika gambar fisik belum diupload
            console.warn("File gambar logo tidak ditemukan di " + IMAGE_FILE_PATH + ". Menggunakan SVG Cadangan.");
          }}
        />
      ) : (
        /* Menggunakan Kode Gambar SVG Asli Presisi Tinggi (Bawaan) */
        <svg className="h-10 sm:h-12 w-auto shrink-0" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="logoBlueGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#00c6ff" />
              <stop offset="100%" stopColor="#0072ff" />
            </linearGradient>
            <linearGradient id="logoGreenGrad" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#05f7c3" />
              <stop offset="100%" stopColor="#00b98a" />
            </linearGradient>
          </defs>

          {/* The Stylized '9' */}
          <path
            d="M 40 10 C 18 10 2 26 2 46 C 2 66 18 82 40 82 C 51 82 60 74 64 64 L 64 65 C 64 82 50 94 32 94 C 23 94 14 90 8 84 C 5 81 1 83 1 88 C 1 93 11 102 32 102 C 60 102 80 82 80 52 C 80 49 79 46 78 43 C 73 19 57 10 40 10 Z M 40 24 C 51 24 60 33 60 44 C 60 55 51 64 40 64 C 29 64 20 55 20 44 C 20 33 29 24 40 24 Z"
            fill="url(#logoBlueGrad)"
          />

          {/* The Overlapping Download Tray (Blue Cup) */}
          <path
            d="M 52 74 L 52 82 A 4 4 0 0 0 56 86 L 76 86 A 4 4 0 0 0 80 82 L 80 74"
            stroke="#0072ff"
            strokeWidth="6"
            strokeLinecap="round"
            fill="none"
          />

          {/* The Downward Download Arrow (Teal Gradient) */}
          <path
            d="M 66 79 L 78 67 H 71 V 53 H 61 V 67 H 54 L 66 79 Z"
            fill="url(#logoGreenGrad)"
          />
        </svg>
      )}

      {showText && !USE_IMAGE_FILE && (
        <div className="flex items-baseline font-sans">
          <span className={`text-2xl sm:text-3xl font-extrabold tracking-tight ${lightText ? 'text-white' : 'text-[#1e293b]'}`}>
            aleh
          </span>
          <span className="text-2xl sm:text-3xl font-black tracking-tight text-[#0062ff]">
            .app
          </span>
        </div>
      )}
    </div>
  );
}