// Car Features Grid with ACF fields + Icons (Responsive & Auto-Balanced)
add_action('woocommerce_after_single_product_summary', 'acf_car_features_grid', 12);

function acf_car_features_grid() {
    // Get ACF fields
    $features = array(
        'Rental Type'   => get_field('rental_type'),
        'Drive Limit'   => get_field('drive_limit'),
        'Seats'         => get_field('seats'),
        'Fuel'          => get_field('fuel'),
        'Aircon'        => get_field('aircon'),
        'Transmission'  => get_field('transmission'),
    );

    // Filter out empty fields
    $features = array_filter($features);
    if(empty($features)) return;

    echo '<section class="car-features">';
    echo '<h3 class="car-features-title">Car Features</h3>';
    echo '<div class="car-features-grid">';

    // Icon map
    $icons = array(
        'Rental Type'   => 'fa-user-tie',
        'Drive Limit'   => 'fa-road',
        'Seats'         => 'fa-chair',
        'Fuel'          => 'fa-gas-pump',
        'Aircon'        => 'fa-snowflake',
        'Transmission'  => 'fa-cogs',
    );

    foreach ($features as $label => $value) {
        echo '<div class="car-feature">';
        echo '<i class="fas '.$icons[$label].'"></i>';
        echo '<span class="car-feature-label">'.$label.':</span> ';
        echo '<span class="car-feature-value">'.$value.'</span>';
        echo '</div>';
    }

    echo '</div></section>';

    // CSS styling
    echo '<style>
    .car-features { margin:40px 0; padding:20px; border:1px solid #eee; border-radius:10px; }
    .car-features-title { font-size:20px; margin-bottom:15px; }
    .car-features-grid { 
        display:grid; 
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
        gap:15px; 
    }
    .car-feature { display:flex; align-items:center; font-size:15px; padding:10px; background:#f9f9f9; border-radius:8px; }
    .car-feature i { margin-right:8px; color:#555; font-size:18px; min-width:22px; text-align:center; }
    .car-feature-label { font-weight:600; margin-right:4px; }

    /* Responsive adjustments */
    @media(max-width: 1024px) {
        .car-features-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    }
    @media(max-width: 768px) {
        .car-features-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    }
    @media(max-width: 480px) {
        .car-features-grid { grid-template-columns: 1fr; }
    }
    </style>';

    // Load Font Awesome (only if not loaded already)
    wp_enqueue_style('font-awesome-cdn', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
