@props(['class' => 'h-5 w-5'])

<div class="relative group">
    <button type="button" class="text-primary hover:text-primary-dark transition-colors duration-200">
        <svg {{ $attributes->merge(['class' => $class]) }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
    </button>
    <div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 w-80 bg-white dark:bg-gray-800 p-3 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
        <div class="text-sm text-gray-700 dark:text-gray-300">
            <p class="mb-2 font-medium">Conversion Factor Guide</p>
            
            <p class="mb-2 font-semibold">1. Weight Units:</p>
            <ul class="list-disc pl-5 space-y-1 mb-3">
                <li>1 ton = 1000 kg (factor: 1000)</li>
                <li>1 kg = 1 kg (factor: 1)</li>
                <li>1 gram = 0.001 kg (factor: 0.001)</li>
            </ul>

            <p class="mb-2 font-semibold">2. Volume Units:</p>
            <ul class="list-disc pl-5 space-y-1 mb-3">
                <li>1 cubic meter = 1000 liters (factor: 1000)</li>
                <li>1 liter = 1000 ml (factor: 1000)</li>
                <li>1 gallon = 3.785 liters (factor: 3.785)</li>
            </ul>

            <p class="mb-2 font-semibold">3. Length Units:</p>
            <ul class="list-disc pl-5 space-y-1 mb-3">
                <li>1 meter = 100 cm (factor: 100)</li>
                <li>1 foot = 0.3048 meters (factor: 0.3048)</li>
                <li>1 inch = 0.0254 meters (factor: 0.0254)</li>
            </ul>

            <p class="mb-2 font-semibold">4. Area Units:</p>
            <ul class="list-disc pl-5 space-y-1 mb-3">
                <li>1 square meter = 10000 cm² (factor: 10000)</li>
                <li>1 square foot = 0.0929 m² (factor: 0.0929)</li>
            </ul>

            <p class="mb-2 font-semibold">5. Piece-Based Units:</p>
            <ul class="list-disc pl-5 space-y-1 mb-3">
                <li>Set conversion factor to 1</li>
                <li>Create separate units for each type</li>
                <li>Example: "Cup (pcs)", "Table (pcs)"</li>
            </ul>

            <p class="mb-2 font-semibold">6. Time Units:</p>
            <ul class="list-disc pl-5 space-y-1">
                <li>1 hour = 60 minutes (factor: 60)</li>
                <li>1 day = 24 hours (factor: 24)</li>
            </ul>
        </div>
        <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-white dark:bg-gray-800"></div>
    </div>
</div>