<?php
/**
 * Affiliate Program Page Template
 *
 * @package    TTSWP
 * @subpackage Mementor_TTS/admin/partials/pages
 * @author     Mementor AS
 */

if (!defined('ABSPATH')) {
    exit;
}
?>
<?php
$tts_page_title = __('Affiliate Program', 'text-to-speech-tts');
$tts_topbar_actions = '';
include MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/layout-open.php';
?>
<?php include(MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/navigation.php'); ?>

            <!-- Hero -->
            <div class="tts-card tts-affiliate-hero">
                <div class="tts-affiliate-hero-inner">
                    <h3><?php echo wp_kses_post(__('Turn text into income with our TTS-plugin!', 'text-to-speech-tts')); ?></h3>
                    <p><?php esc_html_e('Promote this plugin that turns text into natural, lifelike speech — enhancing accessibility, engagement, and inclusivity with support for multiple languages.', 'text-to-speech-tts'); ?></p>
                </div>
            </div>

            <!-- Benefits -->
            <div class="tts-card">
                <div class="tts-card-header tts-card-header-inline">
                    <h3 class="tts-card-title"><?php esc_html_e('Affiliate Benefits', 'text-to-speech-tts'); ?></h3>
                    <p class="tts-card-desc"><?php esc_html_e('Earn commissions by promoting our plugin', 'text-to-speech-tts'); ?></p>
                </div>

                <div class="tts-grid-3 tts-affiliate-benefits">
                    <div class="tts-metric tts-affiliate-benefit">
                        <div class="tts-affiliate-icon"><span class="dashicons dashicons-calendar-alt"></span></div>
                        <div class="tts-metric-value">30 <?php esc_html_e('days', 'text-to-speech-tts'); ?></div>
                        <div class="tts-metric-label"><?php esc_html_e('Tracking length', 'text-to-speech-tts'); ?></div>
                        <div class="tts-affiliate-hint"><?php esc_html_e('Earn commissions as the last referrer within 30 days.', 'text-to-speech-tts'); ?></div>
                    </div>

                    <div class="tts-metric tts-affiliate-benefit">
                        <div class="tts-affiliate-icon"><span class="dashicons dashicons-money-alt"></span></div>
                        <div class="tts-metric-value">25%</div>
                        <div class="tts-metric-label"><?php esc_html_e('Commission', 'text-to-speech-tts'); ?></div>
                        <div class="tts-affiliate-hint"><?php esc_html_e('Get 25% on every sale plus all subscription renewal payments.', 'text-to-speech-tts'); ?></div>
                    </div>

                    <div class="tts-metric tts-affiliate-benefit">
                        <div class="tts-affiliate-icon"><span class="dashicons dashicons-chart-line"></span></div>
                        <div class="tts-metric-value">$30</div>
                        <div class="tts-metric-label"><?php esc_html_e('Payout threshold', 'text-to-speech-tts'); ?></div>
                        <div class="tts-affiliate-hint"><?php esc_html_e('Cash out with a minimum of just $30 USD.', 'text-to-speech-tts'); ?></div>
                    </div>
                </div>
            </div>

            <!-- CTA -->
            <div class="tts-card tts-affiliate-cta">
                <p><?php esc_html_e('Join our affiliate program today and start monetizing your traffic effortlessly!', 'text-to-speech-tts'); ?></p>
                <span class="tts-btn tts-btn-lg" style="opacity: 0.7; cursor: default;">
                    <?php esc_html_e('Coming soon', 'text-to-speech-tts'); ?>
                </span>
            </div>

            <style>
            /* Hero */
            .tts-affiliate-hero {
                background: linear-gradient(135deg, var(--tts-purple, #7c3aed) 0%, #5b21b6 100%);
                border-color: transparent;
            }

            .tts-affiliate-hero-inner {
                text-align: center;
                padding: 32px 20px;
            }

            .tts-affiliate-hero-inner h3 {
                font-size: 24px;
                font-weight: 600;
                color: #fff;
                margin: 0 0 12px;
            }

            .tts-affiliate-hero-inner p {
                max-width: 600px;
                margin: 0 auto;
                font-size: 14px;
                line-height: 1.6;
                color: rgba(255, 255, 255, 0.9);
            }

            /* Benefits grid */
            .tts-affiliate-benefit {
                text-align: center;
                padding: 24px 16px;
            }

            .tts-affiliate-icon {
                margin-bottom: 8px;
            }

            .tts-affiliate-icon .dashicons {
                font-size: 28px;
                width: 28px;
                height: 28px;
                color: var(--tts-purple, #7c3aed);
            }

            .tts-affiliate-benefit .tts-metric-value {
                font-size: 28px;
            }

            .tts-affiliate-hint {
                font-size: 12px;
                color: var(--tts-text-secondary, #757575);
                margin-top: 6px;
                line-height: 1.4;
            }

            /* CTA */
            .tts-affiliate-cta {
                text-align: center;
                padding: 32px 20px;
            }

            .tts-affiliate-cta p {
                font-size: 15px;
                color: var(--tts-text-primary);
                margin: 0 0 16px;
            }

            .tts-btn-lg {
                padding: 10px 28px;
                font-size: 14px;
            }
            </style>

<?php include MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/layout-close.php'; ?>
