<?php
/**
 * GT BOGO Engine — Product Variant Rules (Enterprise)
 * @package GT_BOGO_Engine
 * @since   3.11.0
 */
if (!defined('ABSPATH')) exit;
if (!current_user_can('manage_options')) return;

$is_pro = function_exists('gt_bogo_has_pro') ? gt_bogo_has_pro() : false;
$message = ''; $message_type = '';

// ── Save global variant settings ──────────────────────────────────────────
if ($is_pro && isset($_POST['gtbogo_save_variants']) && check_admin_referer('gtbogo_variants', 'gtbogo_var_nonce')) {
    update_option('gtbogo_variant_rules', [
        'enabled'    => isset($_POST['var_enabled']),
        'mode'       => sanitize_text_field($_POST['var_mode'] ?? 'include'),
        'attributes' => array_map('sanitize_text_field', (array)($_POST['var_attributes'] ?? [])),
        'values'     => array_map('sanitize_text_field', (array)($_POST['var_values']     ?? [])),
        'match_mode' => sanitize_text_field($_POST['var_match_mode'] ?? 'any'),
        'apply_to'   => sanitize_text_field($_POST['var_apply_to']   ?? 'all_rules'),
    ]);
    if (function_exists('gt_bogo_log')) gt_bogo_log('Variant rules updated', 'Mode: '.sanitize_text_field($_POST['var_mode']??''), 'success');
    delete_transient('gtbogo_active_rules');
    $message = 'Variant rule settings saved.'; $message_type = 'success';
}

// ── Save per-rule variant overrides ──────────────────────────────────────
if ($is_pro && isset($_POST['gtbogo_save_rule_variant']) && check_admin_referer('gtbogo_rule_variant')) {
    $rule_id  = intval($_POST['rule_variant_id'] ?? 0);
    $overrides = get_option('gtbogo_variant_rule_overrides', []);
    $overrides[$rule_id] = [
        'enabled' => isset($_POST['rv_enabled']),
        'mode'    => sanitize_text_field($_POST['rv_mode'] ?? 'include'),
        'values'  => array_map('sanitize_text_field', (array)($_POST['rv_values'] ?? [])),
    ];
    update_option('gtbogo_variant_rule_overrides', $overrides);
    $message = 'Per-rule variant override saved.'; $message_type = 'success';
}

// ── Delete per-rule override ──────────────────────────────────────────────
if ($is_pro && isset($_GET['delete_rv']) && check_admin_referer('delete_rv_'.intval($_GET['delete_rv']))) {
    $rule_id  = intval($_GET['delete_rv']);
    $overrides = get_option('gtbogo_variant_rule_overrides', []);
    unset($overrides[$rule_id]);
    update_option('gtbogo_variant_rule_overrides', $overrides);
    $message = 'Override removed.'; $message_type = 'success';
}

$var       = get_option('gtbogo_variant_rules', ['enabled'=>false,'mode'=>'include','attributes'=>[],'values'=>[],'match_mode'=>'any','apply_to'=>'all_rules']);
$overrides = get_option('gtbogo_variant_rule_overrides', []);
$attributes = wc_get_attribute_taxonomies();

// Load PRO rules for per-rule override section
global $wpdb;
$rtbl  = $wpdb->get_var($wpdb->prepare('SHOW TABLES LIKE %s', $wpdb->prefix.'gtbogo_rules'));
$rules = $rtbl ? $wpdb->get_results("SELECT id, name, status FROM {$wpdb->prefix}gtbogo_rules ORDER BY name ASC") : [];

// Build attribute → terms map
$attr_map = [];
foreach ($attributes as $attr) {
    $taxonomy = wc_attribute_taxonomy_name($attr->attribute_name);
    $terms    = get_terms(['taxonomy' => $taxonomy, 'hide_empty' => false]);
    if (!is_wp_error($terms) && !empty($terms)) {
        $attr_map[$taxonomy] = ['label' => $attr->attribute_label, 'terms' => $terms];
    }
}

// Count active overrides
$active_overrides = count(array_filter($overrides, fn($o) => !empty($o['enabled'])));
$selected_values  = (array)($var['values'] ?? []);

require_once __DIR__ . '/../ui-system/wrapper-start.php';
?>
<div class="gt-page-header gt-animate-in">
    <div>
        <h1 class="gt-page-title">🎨 Variant Rules</h1>
        <p class="gt-page-subtitle">Target BOGO rules at specific product variants — sizes, colors, materials, and more</p>
    </div>
    <div style="display:flex;gap:8px;align-items:center">
        <?php if (!empty($var['enabled'])): ?>
        <span class="gt-badge gt-badge-active">● Variant Targeting Active</span>
        <?php else: ?>
        <span class="gt-badge gt-badge-free">○ Targeting Disabled</span>
        <?php endif; ?>
    </div>
</div>
<?php if ($message): ?><div class="gt-notice gt-notice-<?php echo esc_attr($message_type); ?> gt-animate-in">✓ <?php echo esc_html($message); ?></div><?php endif; ?>

<?php if (!$is_pro): ?>
<div class="gt-pro-gate gt-animate-in">
    <span class="gt-pro-gate-icon">🎨</span>
    <h2>PRO License Required</h2>
    <p>Variant Rules let you target BOGO promotions at specific product variations — run BOGO only on XL shirts, red colorways, or premium materials.</p>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:480px;margin:24px auto 0">
        <?php foreach(['Target specific sizes, colors, or materials','Include or exclude variant combinations','Per-rule overrides for granular control','Combine with Geo Targeting and Segments'] as $f): ?>
        <div style="display:flex;align-items:flex-start;gap:8px;text-align:left"><span style="color:#e10000;font-weight:700">—</span><span style="font-size:13px;color:var(--gt-soft)"><?php echo esc_html($f); ?></span></div>
        <?php endforeach; ?>
    </div>
    <div style="margin-top:24px;display:flex;justify-content:center;gap:12px">
        <a href="https://graphictshirts.shop/bogo/" target="_blank" rel="noopener" class="gt-btn gt-btn-primary">Purchase PRO — $19.99/yr</a>
        <a href="<?php echo esc_url(admin_url('admin.php?page=gt-bogo-engine&tab=license')); ?>" class="gt-btn gt-btn-ghost">Activate License</a>
    </div>
</div>
<?php else: ?>

<!-- METRICS -->
<div class="gt-metrics gt-animate-in" style="margin-bottom:20px">
    <div class="gt-metric" style="--gt-metric-c:#e10000">
        <span class="gt-metric-icon">🎨</span>
        <div class="gt-metric-label">Attributes Configured</div>
        <div class="gt-metric-value"><?php echo count($attr_map); ?></div>
        <div class="gt-metric-trend">Product attributes found</div>
    </div>
    <div class="gt-metric" style="--gt-metric-c:#3b82f6">
        <span class="gt-metric-icon">✅</span>
        <div class="gt-metric-label">Selected Variants</div>
        <div class="gt-metric-value"><?php echo count($selected_values); ?></div>
        <div class="gt-metric-trend">Active in global filter</div>
    </div>
    <div class="gt-metric" style="--gt-metric-c:#8b5cf6">
        <span class="gt-metric-icon">🔧</span>
        <div class="gt-metric-label">Per-Rule Overrides</div>
        <div class="gt-metric-value"><?php echo $active_overrides; ?></div>
        <div class="gt-metric-trend">Rules with custom targeting</div>
    </div>
    <div class="gt-metric" style="--gt-metric-c:#22c55e">
        <span class="gt-metric-icon">📋</span>
        <div class="gt-metric-label">Total PRO Rules</div>
        <div class="gt-metric-value"><?php echo count($rules); ?></div>
        <div class="gt-metric-trend">Available for overrides</div>
    </div>
</div>

<!-- GLOBAL VARIANT SETTINGS -->
<form method="post" action="">
<?php wp_nonce_field('gtbogo_variants', 'gtbogo_var_nonce'); ?>

<div class="gt-card gt-animate-in" style="margin-bottom:20px">
    <div class="gt-card-header"><h2 class="gt-card-title">⚙️ Global Variant Targeting</h2><span class="gt-text-soft gt-text-sm">Applies to all rules unless overridden below</span></div>
    <div class="gt-setting-row">
        <div>
            <div class="gt-setting-label" style="font-size:16px">Enable Variant-Level Targeting</div>
            <div class="gt-setting-desc">When enabled, BOGO rules only apply to product variations matching the criteria you select below. Disable to let rules apply to all variants.</div>
        </div>
        <label class="gt-toggle">
            <input type="checkbox" name="var_enabled" value="1" <?php checked(!empty($var['enabled'])); ?>>
            <span class="gt-toggle-track"><span class="gt-toggle-thumb"></span></span>
        </label>
    </div>
    <div class="gt-setting-row">
        <div>
            <div class="gt-setting-label">Apply Targeting To</div>
            <div class="gt-setting-desc">Whether this global filter applies to all rules or only rules without a per-rule override.</div>
        </div>
        <select name="var_apply_to" class="gt-select" style="width:220px">
            <option value="all_rules"      <?php selected($var['apply_to']??'all_rules','all_rules'); ?>>All Active Rules</option>
            <option value="no_override"    <?php selected($var['apply_to']??'','no_override'); ?>>Rules Without Override Only</option>
        </select>
    </div>
    <div class="gt-setting-row" style="border:none">
        <div>
            <div class="gt-setting-label">Variant Match Requirement</div>
            <div class="gt-setting-desc">When multiple attributes are selected — must the cart item match any one of them, or all of them simultaneously?</div>
        </div>
        <div style="display:flex;gap:16px">
            <?php foreach(['any'=>'Match Any','all'=>'Match All'] as $k=>$v): ?>
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--gt-soft)">
                <input type="radio" name="var_match_mode" value="<?php echo $k; ?>" <?php checked($var['match_mode']??'any',$k); ?> style="accent-color:var(--gt-red)">
                <?php echo esc_html($v); ?>
            </label>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- TARGETING MODE -->
<div class="gt-card gt-animate-in" style="margin-bottom:20px">
    <div class="gt-card-header"><h2 class="gt-card-title">🎯 Targeting Mode</h2></div>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px">
        <?php foreach([
            ['include','✅','Include Only','Rules only fire on variants you select below. Everything else is excluded.'],
            ['exclude','🚫','Exclude','Rules fire on all variants EXCEPT the ones you select below. Useful for protecting premium variants from discounts.'],
        ] as $m):
            $active = ($var['mode']??'include') === $m[0];
        ?>
        <label style="cursor:pointer">
            <input type="radio" name="var_mode" value="<?php echo $m[0]; ?>" <?php checked($var['mode']??'include',$m[0]); ?> style="display:none">
            <div style="padding:16px;border-radius:10px;border:2px solid <?php echo $active?'rgba(225,0,0,0.4)':'rgba(255,255,255,0.06)'; ?>;background:<?php echo $active?'rgba(225,0,0,0.06)':'rgba(255,255,255,0.02)'; ?>;transition:all 0.2s">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
                    <span style="font-size:22px"><?php echo $m[1]; ?></span>
                    <span style="font-size:14px;font-weight:700;color:var(--gt-white)"><?php echo esc_html($m[2]); ?></span>
                </div>
                <div style="font-size:12px;color:var(--gt-soft);line-height:1.6"><?php echo esc_html($m[3]); ?></div>
            </div>
        </label>
        <?php endforeach; ?>
    </div>
</div>

<!-- ATTRIBUTE SELECTOR -->
<div class="gt-card gt-animate-in" style="margin-bottom:20px">
    <div class="gt-card-header">
        <h2 class="gt-card-title">🏷️ Attribute & Variant Selection</h2>
        <div style="display:flex;gap:8px">
            <button type="button" class="gt-btn gt-btn-ghost gt-btn-sm" onclick="document.querySelectorAll('.gt-var-cb').forEach(c=>c.checked=true)">Select All</button>
            <button type="button" class="gt-btn gt-btn-ghost gt-btn-sm" onclick="document.querySelectorAll('.gt-var-cb').forEach(c=>c.checked=false)">Clear All</button>
        </div>
    </div>
    <?php if (!empty($attr_map)): ?>
    <input type="text" id="var-search" class="gt-input" placeholder="Search attributes and variants..." style="margin-bottom:16px"
           oninput="(function(v){document.querySelectorAll('.gt-attr-group').forEach(g=>{var match=false;g.querySelectorAll('.gt-var-label').forEach(l=>{var show=l.dataset.term.includes(v.toLowerCase());l.style.display=show?'':'none';if(show)match=true;});g.style.display=(!v||match)?'':'none';});})(this.value.toLowerCase())">
    <div style="display:flex;flex-direction:column;gap:20px">
        <?php foreach ($attr_map as $taxonomy => $data): ?>
        <div class="gt-attr-group">
            <div style="font-size:12px;font-weight:700;color:var(--gt-white);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--gt-border)">
                <?php echo esc_html($data['label']); ?>
                <span style="font-size:10px;font-weight:400;color:var(--gt-subtle);text-transform:none;letter-spacing:0;margin-left:8px"><?php echo count($data['terms']); ?> variants</span>
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap">
                <?php foreach ($data['terms'] as $term):
                    $checked = in_array($term->slug, $selected_values);
                ?>
                <label class="gt-var-label" data-term="<?php echo esc_attr(strtolower($term->name.' '.$term->slug)); ?>" style="cursor:pointer">
                    <input type="checkbox" class="gt-var-cb" name="var_values[]" value="<?php echo esc_attr($term->slug); ?>"
                           data-attr="<?php echo esc_attr($taxonomy); ?>" <?php checked($checked); ?> style="display:none">
                    <input type="hidden" name="var_attributes[]" value="<?php echo esc_attr($taxonomy); ?>" <?php echo $checked ? '' : 'disabled'; ?>>
                    <span class="gt-var-chip" onclick="
                        var cb=this.previousElementSibling.previousElementSibling;
                        var hid=this.previousElementSibling;
                        cb.checked=!cb.checked;
                        hid.disabled=!cb.checked;
                        this.style.background=cb.checked?'rgba(225,0,0,0.12)':'rgba(255,255,255,0.03)';
                        this.style.borderColor=cb.checked?'rgba(225,0,0,0.5)':'rgba(255,255,255,0.08)';
                        this.style.color=cb.checked?'var(--gt-white)':'var(--gt-soft)';"
                          style="display:inline-block;padding:6px 14px;border-radius:50px;font-size:12px;font-weight:600;border:1px solid <?php echo $checked?'rgba(225,0,0,0.5)':'rgba(255,255,255,0.08)'; ?>;background:<?php echo $checked?'rgba(225,0,0,0.12)':'rgba(255,255,255,0.03)'; ?>;color:<?php echo $checked?'var(--gt-white)':'var(--gt-soft)'; ?>;transition:all 0.15s;user-select:none">
                        <?php echo esc_html($term->name); ?>
                    </span>
                </label>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php else: ?>
    <div style="text-align:center;padding:32px;color:var(--gt-soft)">
        <div style="font-size:40px;margin-bottom:12px">🎨</div>
        <p style="font-size:14px">No product attributes found. Create variable products with attributes in WooCommerce → Products → Attributes first.</p>
        <a href="<?php echo esc_url(admin_url('edit.php?post_type=product&page=product_attributes')); ?>" class="gt-btn gt-btn-ghost gt-btn-sm" style="margin-top:12px" target="_blank">Go to WooCommerce Attributes ↗</a>
    </div>
    <?php endif; ?>
</div>

<div class="gt-card gt-animate-in" style="margin-bottom:20px">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px">
        <div class="gt-text-soft gt-text-sm">Global variant targeting applies to all active PRO rules unless a per-rule override is set below</div>
        <button type="submit" name="gtbogo_save_variants" class="gt-btn gt-btn-primary" style="padding:12px 32px">💾 Save Global Variant Settings</button>
    </div>
</div>
</form>

<!-- PER-RULE OVERRIDES -->
<?php if (!empty($rules)): ?>
<div class="gt-card gt-animate-in" style="margin-bottom:20px">
    <div class="gt-card-header">
        <h2 class="gt-card-title">🔧 Per-Rule Variant Overrides</h2>
        <span class="gt-text-soft gt-text-sm">Override global settings for individual rules</span>
    </div>
    <p style="font-size:13px;color:var(--gt-soft);line-height:1.7;margin-bottom:20px">
        Use overrides when different rules need different variant targeting. For example: your Black Friday rule targets all variants, but your VIP rule targets only premium colorways. Per-rule settings always take priority over the global filter above.
    </p>
    <div style="display:flex;flex-direction:column;gap:12px">
        <?php foreach ($rules as $rule):
            $ov = $overrides[$rule->id] ?? null;
        ?>
        <div style="padding:16px;border-radius:10px;border:1px solid <?php echo $ov?'rgba(225,0,0,0.25)':'var(--gt-border)'; ?>;background:<?php echo $ov?'rgba(225,0,0,0.04)':'rgba(255,255,255,0.02)'; ?>">
            <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
                <div>
                    <div style="font-size:14px;font-weight:700;color:var(--gt-white)"><?php echo esc_html($rule->name); ?></div>
                    <div style="font-size:11px;color:var(--gt-subtle);margin-top:2px">
                        Status: <span style="color:<?php echo $rule->status==='active'?'#86efac':'#94a3b8'; ?>"><?php echo esc_html($rule->status); ?></span>
                        <?php if ($ov): ?>
                        · Override: <span style="color:<?php echo !empty($ov['enabled'])?'#e10000':'#94a3b8'; ?>"><?php echo !empty($ov['enabled'])?esc_html($ov['mode']).' ('.count((array)($ov['values']??[])).' variants)':'disabled'; ?></span>
                        <?php else: ?>
                        · <span style="color:var(--gt-subtle)">Using global settings</span>
                        <?php endif; ?>
                    </div>
                </div>
                <div style="display:flex;gap:8px">
                    <?php if ($ov): ?>
                    <a href="<?php echo esc_url(wp_nonce_url(add_query_arg(['delete_rv'=>$rule->id,'page'=>'gt-bogo-engine','tab'=>'variant-rules'], admin_url('admin.php')), 'delete_rv_'.$rule->id)); ?>"
                       class="gt-btn gt-btn-ghost gt-btn-sm" onclick="return confirm('Remove override for this rule?')">✕ Remove Override</a>
                    <?php endif; ?>
                    <button type="button" class="gt-btn gt-btn-ghost gt-btn-sm"
                            onclick="document.getElementById('ov-<?php echo $rule->id; ?>').style.display=document.getElementById('ov-<?php echo $rule->id; ?>').style.display==='none'?'block':'none'">
                        <?php echo $ov ? '✎ Edit Override' : '+ Add Override'; ?>
                    </button>
                </div>
            </div>
            <!-- Expandable override form -->
            <div id="ov-<?php echo $rule->id; ?>" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--gt-border)">
                <form method="post" action="">
                    <?php wp_nonce_field('gtbogo_rule_variant'); ?>
                    <input type="hidden" name="rule_variant_id" value="<?php echo $rule->id; ?>">
                    <div style="display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-bottom:16px">
                        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap">
                            <input type="checkbox" name="rv_enabled" value="1" <?php checked(!empty($ov['enabled'])); ?> style="accent-color:var(--gt-red)">
                            <span style="font-size:13px;font-weight:600;color:var(--gt-white)">Enable this override</span>
                        </label>
                        <div style="display:flex;gap:12px;align-items:center">
                            <span style="font-size:12px;color:var(--gt-soft)">Mode:</span>
                            <?php foreach(['include'=>'Include Only','exclude'=>'Exclude'] as $k=>$v): ?>
                            <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--gt-soft)">
                                <input type="radio" name="rv_mode" value="<?php echo $k; ?>" <?php checked($ov['mode']??'include',$k); ?> style="accent-color:var(--gt-red)">
                                <?php echo esc_html($v); ?>
                            </label>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px">
                        <?php foreach ($attr_map as $taxonomy => $data): ?>
                        <?php foreach ($data['terms'] as $term):
                            $rv_checked = in_array($term->slug, (array)($ov['values']??[]));
                        ?>
                        <label style="cursor:pointer">
                            <input type="checkbox" name="rv_values[]" value="<?php echo esc_attr($term->slug); ?>" <?php checked($rv_checked); ?> style="display:none">
                            <span onclick="var cb=this.previousElementSibling;cb.checked=!cb.checked;this.style.background=cb.checked?'rgba(225,0,0,0.12)':'rgba(255,255,255,0.03)';this.style.borderColor=cb.checked?'rgba(225,0,0,0.4)':'rgba(255,255,255,0.06)';this.style.color=cb.checked?'var(--gt-white)':'var(--gt-soft)'"
                                  style="display:inline-block;padding:4px 10px;border-radius:50px;font-size:11px;font-weight:600;border:1px solid <?php echo $rv_checked?'rgba(225,0,0,0.4)':'rgba(255,255,255,0.06)'; ?>;background:<?php echo $rv_checked?'rgba(225,0,0,0.12)':'rgba(255,255,255,0.03)'; ?>;color:<?php echo $rv_checked?'var(--gt-white)':'var(--gt-soft)'; ?>;cursor:pointer">
                                <?php echo esc_html($data['label'].': '.$term->name); ?>
                            </span>
                        </label>
                        <?php endforeach; ?>
                        <?php endforeach; ?>
                    </div>
                    <button type="submit" name="gtbogo_save_rule_variant" class="gt-btn gt-btn-primary gt-btn-sm">💾 Save Override for <?php echo esc_html($rule->name); ?></button>
                </form>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<!-- GUIDANCE -->
<div class="gt-card gt-animate-in" style="background:linear-gradient(135deg,rgba(59,130,246,0.06),rgba(7,12,28,0));border-color:rgba(59,130,246,0.15)">
    <div class="gt-card-header"><h2 class="gt-card-title">🧠 Variant Strategy Guide</h2></div>
    <div class="gt-feature-grid gt-feature-grid--2col">
        <div>
            <div style="font-size:13px;font-weight:700;color:var(--gt-white);margin-bottom:6px">Clearance Through Size Targeting</div>
            <div style="font-size:13px;color:var(--gt-soft);line-height:1.7">Set a BOGO rule targeting only XL and XXL using Include mode. This moves slow-moving overstock in specific sizes without cannibalising your best-selling S/M/L variants. Use the Campaign Scheduler to run it on weekends only for maximum efficiency.</div>
        </div>
        <div>
            <div style="font-size:13px;font-weight:700;color:var(--gt-white);margin-bottom:6px">Premium Variant Protection</div>
            <div style="font-size:13px;color:var(--gt-soft);line-height:1.7">If you carry both standard and premium colorways, use Exclude mode to protect premium variants from all BOGO rules globally. Discounting premium variants trains customers to wait for sales rather than paying full price — damaging long-term brand value.</div>
        </div>
        <div>
            <div style="font-size:13px;font-weight:700;color:var(--gt-white);margin-bottom:6px">Per-Rule Override Strategy</div>
            <div style="font-size:13px;color:var(--gt-soft);line-height:1.7">Use per-rule overrides when you run multiple simultaneous campaigns. Black Friday rule: all variants included. VIP rule: premium colorways only. Clearance rule: overstock sizes only. This gives each campaign its own precise targeting without interfering with others.</div>
        </div>
        <div>
            <div style="font-size:13px;font-weight:700;color:var(--gt-white);margin-bottom:6px">Matching Mode for Bundle Deals</div>
            <div style="font-size:13px;color:var(--gt-soft);line-height:1.7">Set Match Mode to "Match All" and select both a color and a size to create bundle-style targeting — the BOGO only fires when the customer adds a product matching both criteria simultaneously. This encourages co-ordinated outfit purchasing and lifts units per transaction.</div>
        </div>
    </div>
</div>

<?php endif; ?>
<?php require_once __DIR__ . '/../ui-system/wrapper-end.php'; ?>
