<?php
/**
 * Metabox Location for free user.
 *
 * @package FAB
 */
?>

<div class="fab-container">
    <div class="flex justify-between items-center gap-4 mb-4">
        <img 
            src="<?php echo esc_url( $plugin_url ); ?>/assets/img/logo.gif" 
            class="w-20 h-20"  
            alt="<?php echo esc_attr__( 'Upgrade to PRO', 'floating-awesome-button' ); ?>"
        >
        <p class="text-sm">
            <?php echo esc_html__( 'Take complete control of your button placement with our powerful location rules! Want to show buttons only on specific pages? Or maybe display different buttons for different categories? Right now you\'re missing out on these game-changing features. Upgrade to PRO today and unlock precise control over where your buttons appear across your entire website!', 'floating-awesome-button' ); ?>
            <a href="https://artistudio.xyz/tag/location-rules/" class="text-sky-600 hover:text-green-600" target="_blank">
                <?php echo esc_html__( 'Explore more location rules!', 'floating-awesome-button' ); ?>
            </a>
        </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <?php foreach ( $location_rules as $rule ) : ?>
            <div class="h-full bg-white shadow-sm rounded-lg overflow-hidden justify-between flex flex-col border border-purple-200 transition-all duration-300">
                <h3 class="font-medium px-4 py-2 text-sm border-b border-gray-200">
                    <i class="fas fa-map-marker-alt pr-2 text-primary-600"></i>
                    <?php echo esc_html( $rule['title'] ); ?>
                </h3>
                <div class="h-full px-4 py-2 text-sm">
                    <p><?php echo esc_html( $rule['description'] ); ?></p>
                </div>
                <div class="grid grid-cols-2">  
                    <a href="<?php echo esc_url( $rule['link'] ); ?>" class="px-4 py-2 text-center border-t border-gray-200 transition-all duration-300 text-white bg-sky-600" target="_blank">
                        <i class="fas fa-info-circle"></i>
                        <?php echo esc_html__( 'Learn More', 'floating-awesome-button' ); ?>
                    </a>
                    <a href="<?php echo esc_url( $upgrade_url ); ?>" class="px-4 py-2 text-center border-t border-gray-200 transition-all duration-300 text-white bg-primary-600 hover:bg-green-600">
                        <i class="fas fa-star"></i>
                        <?php echo esc_html__( 'Upgrade Now', 'floating-awesome-button' ); ?>
                    </a>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
