<?php
if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * VMO Modern Email Templates
 * 
 * High-quality, responsive, dark-mode friendly email templates.
 * Designed for maximum compatibility across clients (Gmail, Outlook, Apple Mail).
 * 
 * @package VMO_AI_Builder_Manager
 * @version 2.5.0
 */

if (!defined('ABSPATH')) {
    exit;
}

class VMO_Glassy_Email_Templates {
    
    private $logo_url;
    private $dashboard_url;
    private $bg_color = '#0f172a'; // Slate 900
    private $card_color = '#1e293b'; // Slate 800
    private $text_color = '#e2e8f0'; // Slate 200
    private $accent_cyan = '#06b6d4';
    private $accent_violet = '#8b5cf6';
    
    public function __construct() {
        $this->logo_url = plugins_url('assets/vmo-icon.svg', dirname(__FILE__));
        $this->dashboard_url = admin_url('admin.php?page=vmo-ai-builder');
    }
    
    /**
     * Get email wrapper start
     */
    private function get_header($title, $subtitle = '') {
        return "
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>{$title}</title>
    <style>
        /* Reset */
        body { margin: 0; padding: 0; min-width: 100%; width: 100% !important; height: 100% !important; }
        body, table, td, div, p, a { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; }
        img { border: 0; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
        
        /* Client Specific Fixes */
        #outlook a { padding: 0; }
        .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; }
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
        
        /* Buttons */
        .vmo-btn:hover { background-color: #0891b2 !important; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4) !important; }
        
        /* Responsive */
        @media only screen and (max-width: 480px) {
            .mobile-padding { padding-left: 20px !important; padding-right: 20px !important; }
            .mobile-stack { display: block !important; width: 100% !important; margin-bottom: 20px !important; }
            .mobile-center { text-align: center !important; }
            .header-text { font-size: 24px !important; }
        }

        /* Dark Mode Support */
        @media (prefers-color-scheme: dark) {
            .body-bg { background-color: {$this->bg_color} !important; }
            .card-bg { background-color: {$this->card_color} !important; }
            .text-main { color: {$this->text_color} !important; }
        }
    </style>
</head>
<body style='margin: 0; padding: 0; background-color: {$this->bg_color}; font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;'>

<!-- PREHEADER -->
<div style='display: none; font-size: 1px; color: {$this->bg_color}; line-height: 1px; font-family: sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;'>
    {$subtitle}
</div>

<!-- MAIN WRAPPER -->
<table border='0' cellpadding='0' cellspacing='0' width='100%' style='background-color: {$this->bg_color};'>
    <tr>
        <td align='center' style='padding: 40px 10px;'>
            
            <!-- CONTAINER -->
            <table border='0' cellpadding='0' cellspacing='0' width='100%' style='max-width: 600px;'>
                
                <!-- HEADER LOGO -->
                <tr>
                    <td align='center' style='padding-bottom: 30px;'>
                        <a href='{$this->dashboard_url}' target='_blank'>
                            <img src='{$this->logo_url}' alt='VMO' width='64' height='64' style='display: block; width: 64px; height: 64px; border-radius: 12px; box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);' />
                        </a>
                    </td>
                </tr>

                <!-- MAIN CARD -->
                <tr>
                    <td align='center' style='padding: 0;'>
                        <table border='0' cellpadding='0' cellspacing='0' width='100%' style='background-color: {$this->card_color}; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);'>
                            
                            <!-- GRADIENT BAR -->
                            <tr>
                                <td height='4' style='background: linear-gradient(90deg, {$this->accent_cyan}, {$this->accent_violet}); font-size: 0; line-height: 0;'>&nbsp;</td>
                            </tr>
                            
                            <!-- CARD CONTENT -->
                            <tr>
                                <td class='mobile-padding' style='padding: 40px;'>
                                    
                                    <!-- TITLE -->
                                    <h1 class='header-text' style='margin: 0 0 10px 0; color: #ffffff; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: -0.5px;'>
                                        {$title}
                                    </h1>
                                    
                                    <!-- SUBTITLE -->
                                    " . ($subtitle ? "<p style='margin: 0 0 30px 0; color: #94a3b8; font-size: 16px; text-align: center;'>{$subtitle}</p>" : "") . "
        ";
    }
    
    /**
     * Get email footer
     */
    private function get_footer() {
        $support_email = get_option('vmo_support_email', get_option('admin_email'));
        return "
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                
                <!-- FOOTER -->
                <tr>
                    <td align='center' style='padding: 30px 0;'>
                        <p style='margin: 0 0 10px 0; color: #64748b; font-size: 14px; font-weight: 600;'>
                            VMO Business Suite
                        </p>
                        <p style='margin: 0; color: #475569; font-size: 12px;'>
                            Powered by Virtual Media Office AI<br>
                            <a href='{$this->dashboard_url}' style='color: {$this->accent_cyan}; text-decoration: none;'>Dashboard</a>
                            &nbsp;&bull;&nbsp;
                            <a href='mailto:{$support_email}' style='color: {$this->accent_cyan}; text-decoration: none;'>Support</a>
                        </p>
                    </td>
                </tr>
            </table>
            
        </td>
    </tr>
</table>
</body>
</html>
        ";
    }
    
    // --- HELPER COMPONENTS ---

    private function button($text, $url, $secondary = false) {
        $bg = $secondary ? 'rgba(255,255,255,0.05)' : "linear-gradient(135deg, {$this->accent_cyan}, {$this->accent_violet})";
        $color = $secondary ? '#ffffff' : '#ffffff';
        $border = $secondary ? '1px solid rgba(255,255,255,0.1)' : 'none';
        
        return "
        <table border='0' cellpadding='0' cellspacing='0' style='margin: 30px auto;'>
            <tr>
                <td align='center' bgcolor='{$this->accent_cyan}' style='border-radius: 8px; background: {$bg}; border: {$border}; box-shadow: 0 4px 6px rgba(0,0,0,0.2);'>
                    <a href='{$url}' class='vmo-btn' target='_blank' style='font-size: 16px; font-weight: 600; color: {$color}; text-decoration: none; padding: 14px 32px; border-radius: 8px; display: inline-block; border: 0;'>
                        {$text}
                    </a>
                </td>
            </tr>
        </table>";
    }

    private function info_box($title, $content, $color = 'cyan') {
        $hex = ($color === 'red') ? '#ef4444' : (($color === 'orange') ? '#f59e0b' : $this->accent_cyan);
        $bg = ($color === 'red') ? 'rgba(239,68,68,0.1)' : (($color === 'orange') ? 'rgba(245,158,11,0.1)' : 'rgba(6,182,212,0.1)');
        
        return "
        <div style='background-color: {$bg}; border-left: 4px solid {$hex}; border-radius: 6px; padding: 20px; margin: 25px 0;'>
            <h3 style='margin: 0 0 10px 0; color: {$hex}; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;'>{$title}</h3>
            <div style='color: {$this->text_color}; font-size: 15px; line-height: 1.6;'>{$content}</div>
        </div>";
    }

    private function metric_grid($metrics) {
        $html = "<table border='0' cellpadding='0' cellspacing='0' width='100%' style='margin: 30px 0;'><tr>";
        foreach ($metrics as $m) {
            $html .= "
            <td align='center' valign='top' width='33%' style='padding: 10px;'>
                <div style='background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 20px 10px;'>
                    <div style='font-size: 24px; font-weight: 700; color: #ffffff; margin-bottom: 5px;'>{$m['value']}</div>
                    <div style='font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px;'>{$m['label']}</div>
                </div>
            </td>";
        }
        $html .= "</tr></table>";
        return $html;
    }

    // --- TEMPLATES ---

    public function get_welcome_template($data) {
        $content = "
            <p style='color: {$this->text_color}; font-size: 16px; line-height: 1.6; text-align: center; margin-bottom: 30px;'>
                Welcome to the future of business. <strong style='color: #ffffff;'>VMO AI Builder</strong> puts the power of an entire digital agency in your pocket.
            </p>

            {$this->info_box('🎁 Your Starter Package', "
                <p style='margin: 0;'>You have received <strong>" . number_format($data['token_balance']) . " Free Tokens</strong> to start building immediately.</p>
                <p style='margin: 10px 0 0; font-size: 13px; opacity: 0.8;'>Valid until: {$data['expires_date']}</p>
            ")}
            
            <h3 style='color: #ffffff; margin-top: 30px;'>What you can do:</h3>
            <ul style='color: {$this->text_color}; font-size: 15px; line-height: 1.8; padding-left: 20px;'>
                <li><strong style='color: {$this->accent_cyan};'>Build Websites:</strong> Create landing pages in seconds (~283 tokens/page).</li>
                <li><strong style='color: {$this->accent_cyan};'>Consulting:</strong> Get AI business strategy advice (~333 tokens/min).</li>
                <li><strong style='color: {$this->accent_cyan};'>Marketing:</strong> Send email campaigns (~333 tokens/email).</li>
            </ul>

            {$this->button('Launch Dashboard', $this->dashboard_url)}
        ";
        return $this->get_header('Welcome aboard! 🚀', 'Your AI business journey starts now') . $content . $this->get_footer();
    }
    
    public function get_low_tokens_template($data) {
        $percentage = $data['percentage'];
        $is_crit = $percentage <= 10;
        $color = $is_crit ? 'red' : 'orange';
        $title = $is_crit ? 'Critical Token Alert' : 'Low Token Warning';
        
        $content = "
            {$this->info_box($title, "You have used <strong>{$percentage}%</strong> of your monthly token allowance.", $color)}
            
            <p style='text-align: center; color: #94a3b8; font-size: 14px; margin-bottom: 5px;'>Current Balance</p>
            <div style='text-align: center; font-size: 42px; font-weight: 800; color: #ffffff; letter-spacing: -1px; margin-bottom: 30px;'>
                " . number_format($data['token_balance']) . "
            </div>
            
            <div style='background-color: rgba(255,255,255,0.1); border-radius: 10px; height: 10px; overflow: hidden; margin-bottom: 40px;'>
                <div style='width: {$percentage}%; height: 100%; background-color: " . ($is_crit ? '#ef4444' : '#f59e0b') . ";'></div>
            </div>

            " . ($data['subscription_status'] === 'free' ? "
                <p style='color: {$this->text_color}; text-align: center;'>Choose a plan to unlock your full potential and start building today.</p>
                {$this->button('⚡ Choose a Plan', $data['upgrade_url'])}
            " : "
                <p style='color: {$this->text_color}; text-align: center;'>You can purchase a heavy-duty <strong>Power Pack</strong> or upgrade your tier.</p>
                {$this->button('Add More Tokens', $data['upgrade_url'])}
            ");
            
        return $this->get_header('⚠️ Running Low on Fuel', 'Action Required: Token Balance Low') . $content . $this->get_footer();
    }

    public function get_website_published_template($data) {
        $content = "
            <div style='text-align: center; margin: 20px 0 40px;'>
                <p style='font-size: 60px; margin: 0;'>🚀</p>
                <p style='font-size: 18px; color: #ffffff; margin-top: 10px;'>Your website <strong>{$data['website_name']}</strong> is LIVE!</p>
            </div>

            {$this->info_box('🌐 Live URL', "<a href='{$data['live_url']}' style='color: {$this->accent_cyan}; font-size: 18px; text-decoration: none; font-weight: bold;'>{$data['live_url']}</a>")}

            {$this->metric_grid([
                ['value' => $data['page_count'], 'label' => 'Pages'],
                ['value' => 'SEO', 'label' => 'Optimized'],
                ['value' => '100%', 'label' => 'Responsive']
            ])}

            <p style='color: {$this->text_color}; text-align: center; margin-top: 20px;'>Share your link with the world. Your business is officially online.</p>

            {$this->button('View Website', $data['live_url'])}
        ";
        return $this->get_header('It\'s Live! 🎉', 'Your website has been successfully published') . $content . $this->get_footer();
    }

    public function get_email_sent_notification($data) {
        $content = "
            {$this->info_box('Campaign Success', "Your email campaign <strong>{$data['subject']}</strong> has been successfully delivered to {$data['emails_sent']} recipients.")}

            {$this->metric_grid([
                ['value' => $data['emails_sent'], 'label' => 'Sent'],
                ['value' => number_format($data['tokens_used']), 'label' => 'Cost'],
                ['value' => number_format($data['remaining_balance']), 'label' => 'Balance']
            ])}

            {$this->button('View Campaign Analytics', $this->dashboard_url)}
        ";
        return $this->get_header('Campaign Sent 📧', 'Delivery Report') . $content . $this->get_footer();
    }

    public function get_expiration_warning_template($data) {
        $days = $data['days_remaining'];
        $content = "
            {$this->info_box('Time Sensitive', "Your <strong>" . number_format($data['token_balance']) . " tokens</strong> will expire in <strong>{$days} days</strong>.", 'orange')}

            <h3 style='color: #ffffff;'>Don't lose your progress!</h3>
            <p style='color: {$this->text_color};'>Use your remaining tokens to:</p>
            <ul style='color: {$this->text_color}; padding-left: 20px; line-height: 1.8;'>
                <li>Generate " . floor($data['token_balance'] / 283) . " more web pages</li>
                <li>Or have a " . floor($data['token_balance'] / 333) . "-minute AI consultation</li>
            </ul>

            {$this->button('Use Tokens Now', $this->dashboard_url)}
        ";
        return $this->get_header("⏰ {$days} Days Left", 'Your tokens are expiring soon') . $content . $this->get_footer();
    }

    public function get_support_ticket_template($data) {
        $content = "
            <p style='color: {$this->text_color};'>We have received your support request. Our AI engineers are reviewing it.</p>
            
            <table border='0' cellpadding='15' cellspacing='0' width='100%' style='background-color: rgba(255,255,255,0.03); border-radius: 8px; margin: 20px 0;'>
                <tr>
                    <td style='color: #94a3b8; width: 100px;'>Ticket ID</td>
                    <td style='color: #ffffff; font-weight: bold;'>#{$data['ticket_id']}</td>
                </tr>
                <tr>
                    <td style='color: #94a3b8;'>Subject</td>
                    <td style='color: #ffffff;'>{$data['subject']}</td>
                </tr>
                <tr>
                    <td style='color: #94a3b8;'>Priority</td>
                    <td style='color: #ffffff; text-transform: uppercase;'>{$data['priority']}</td>
                </tr>
            </table>

            <p style='color: {$this->text_color}; font-size: 14px;'>You can reply directly to this email to add more information.</p>
        ";
        return $this->get_header('Ticket Received 🎫', 'We seem to be looking into this') . $content . $this->get_footer();
    }

    public function get_consultation_complete_template($data) {
        $content = "
            <p style='color: {$this->text_color}; text-align: center;'>Your strategic session for <strong>{$data['business_name']}</strong> is complete.</p>

            {$this->metric_grid([
                ['value' => $data['duration_minutes'] . 'm', 'label' => 'Duration'],
                ['value' => $data['recommendations'], 'label' => 'Insights'],
                ['value' => 'Done', 'label' => 'Status']
            ])}

            {$this->info_box('Next Steps', "We have prepared a strategic roadmap based on this session. Access your documents below.")}

            {$this->button('Download Roadmap', $this->dashboard_url)}
        ";
        return $this->get_header('Strategy Session Summary 🎯', 'Strategy session summary') . $content . $this->get_footer();
    }

    public function get_phone_activation_template($data) {
        $content = "
            <div style='text-align: center; margin: 30px 0;'>
                <p style='color: #94a3b8; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;'>Your Dedicated VMO Line</p>
                <a href='tel:{$data['phone_number']}' style='font-size: 32px; font-weight: 800; color: {$this->accent_cyan}; text-decoration: none; display: block; margin: 10px 0;'>
                    {$data['phone_number']}
                </a>
                <p style='color: {$this->text_color}; font-size: 14px; opacity: 0.8;'>Available 24/7 for AI Business Consulting</p>
            </div>

            {$this->info_box('How to use', "Call this number anytime to speak with your AI Board of Directors. Discuss strategy, marketing, or technical issues. (Cost: ~333 tokens/min)")}

            {$this->button('Call Now', "tel:{$data['phone_number']}")}
        ";
        return $this->get_header('Line Activated 📞', 'Your AI consultant is ready') . $content . $this->get_footer();
    }

    public function get_order_confirmation_template($data) {
        $content = "
            <div style='text-align: center;'>
                <h2 style='color: #ffffff; margin: 0;'>Payment Successful</h2>
                <p style='color: #10b981; font-size: 24px; font-weight: bold; margin: 10px 0 30px;'>\${$data['amount']}</p>
            </div>

            {$this->info_box('Plan Upgraded', "You are now subscribed to the <strong>{$data['plan_name']}</strong> plan.", 'cyan')}

            <table border='0' cellpadding='0' cellspacing='0' width='100%' style='margin-bottom: 30px;'>
                <tr>
                    <td style='padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #94a3b8;'>Order ID</td>
                    <td style='padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ffffff; text-align: right;'>{$data['order_id']}</td>
                </tr>
                <tr>
                    <td style='padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #94a3b8;'>Date</td>
                    <td style='padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ffffff; text-align: right;'>{$data['order_date']}</td>
                </tr>
                <tr>
                    <td style='padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #94a3b8;'>Tokens Added</td>
                    <td style='padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #10b981; text-align: right;'>+ " . number_format($data['tokens_received']) . "</td>
                </tr>
            </table>

            {$this->button('View Receipt', $this->dashboard_url, true)}
        ";
        return $this->get_header('Order Confirmed ✅', 'Thanks for your purchase') . $content . $this->get_footer();
    }

    /**
     * Abandoned Cart Recovery Email Template
     * Escalating urgency based on reminder_number (1=gentle, 2=offer, 3=last chance)
     */
    public function get_abandoned_cart_template($data) {
        $reminder = intval($data['reminder_number'] ?? 1);
        $product_name = esc_html($data['product_name'] ?? 'your item');
        $price = esc_html($data['price'] ?? '');
        $checkout_url = esc_url($data['checkout_url'] ?? $this->dashboard_url);
        $discount_code = $data['discount_code'] ?? '';

        $headlines = [
            1 => ['title' => 'Forgot Something?', 'sub' => 'Your item is waiting for you'],
            2 => ['title' => 'Special Offer Inside', 'sub' => 'We saved something for you'],
            3 => ['title' => 'Last Chance', 'sub' => 'Your reserved item is about to go'],
        ];
        $h = $headlines[$reminder] ?? $headlines[1];

        $discount_section = '';
        if (!empty($discount_code) && $reminder >= 2) {
            $pct = ($reminder === 2) ? '10%' : '15%';
            $discount_section = "
                <div style='background: rgba(245,158,11,0.1); border: 2px dashed #f59e0b; border-radius: 12px; padding: 20px; text-align: center; margin: 20px 0;'>
                    <p style='color: #fbbf24; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 8px;'>Exclusive Discount</p>
                    <div style='font-size: 32px; font-weight: 800; color: #f59e0b;'>{$pct} OFF</div>
                    <p style='color: #94a3b8; font-size: 13px; margin: 8px 0 4px;'>Use code:</p>
                    <div style='background: {$this->bg_dark}; border: 1px solid #f59e0b; border-radius: 8px; padding: 8px 16px; display: inline-block; font-family: monospace; font-size: 18px; font-weight: 700; color: #fbbf24; letter-spacing: 3px;'>" . esc_html($discount_code) . "</div>
                </div>
            ";
        }

        $content = "
            <div style='text-align: center; margin: 20px 0 30px;'>
                <p style='color: #94a3b8; font-size: 15px; line-height: 1.6;'>
                    We noticed you were looking at <strong style='color: #ffffff;'>{$product_name}</strong> but didn't complete your purchase.
                </p>
            </div>

            <div style='background: {$this->bg_dark}; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; margin: 20px 0;'>
                <table border='0' cellpadding='0' cellspacing='0' width='100%'>
                    <tr>
                        <td style='color: #ffffff; font-size: 16px; font-weight: 600;'>{$product_name}</td>
                        <td style='color: {$this->accent_cyan}; font-size: 18px; font-weight: 700; text-align: right;'>{$price}</td>
                    </tr>
                </table>
            </div>

            {$discount_section}

            {$this->button('Complete Your Purchase', $checkout_url)}
        ";
        return $this->get_header($h['title'], $h['sub']) . $content . $this->get_footer();
    }

    /**
     * Sale Notification Template (for store owners)
     */
    public function get_sale_notification_template($data) {
        $amount = esc_html($data['amount'] ?? '0.00');
        $currency = strtoupper($data['currency'] ?? 'USD');
        $customer = esc_html($data['customer_name'] ?? 'A customer');
        $product = esc_html($data['product_name'] ?? 'Unknown Product');
        $order_id = esc_html($data['order_id'] ?? '');

        $content = "
            <div style='text-align: center; margin: 20px 0;'>
                <p style='color: #10b981; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin: 0;'>Revenue</p>
                <div style='font-size: 42px; font-weight: 800; color: #10b981; margin: 10px 0;'>{$currency} {$amount}</div>
            </div>

            {$this->metric_grid([
                ['value' => $customer, 'label' => 'Customer'],
                ['value' => $product, 'label' => 'Product'],
                ['value' => $order_id, 'label' => 'Order ID']
            ])}

            {$this->info_box('Quick Action', 'Check your dashboard to view order details, manage inventory, or email the customer.')}

            {$this->button('View Orders Dashboard', $this->dashboard_url)}
        ";
        return $this->get_header('New Sale! 🎉', $customer . ' just made a purchase') . $content . $this->get_footer();
    }

    /**
     * Review Request Template (post-purchase)
     */
    public function get_review_request_template($data) {
        $product = esc_html($data['product_name'] ?? 'your recent purchase');
        $customer = esc_html($data['customer_name'] ?? 'there');
        $review_url = esc_url($data['review_url'] ?? $this->dashboard_url);

        $content = "
            <div style='text-align: center; margin: 20px 0 30px;'>
                <p style='color: {$this->text_color}; font-size: 15px; line-height: 1.6;'>
                    Hi {$customer}, we hope you're enjoying <strong style='color: #ffffff;'>{$product}</strong>!
                </p>
                <p style='color: #94a3b8; font-size: 14px; line-height: 1.6;'>
                    Your feedback helps us improve and helps other shoppers make great choices. It only takes a minute.
                </p>
            </div>

            <div style='text-align: center; margin: 30px 0;'>
                <p style='color: #fbbf24; font-size: 13px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 1px;'>How would you rate it?</p>
                <div style='font-size: 36px; letter-spacing: 8px;'>
                    <a href='{$review_url}?rating=1' style='text-decoration:none;'>&#x2B50;</a>
                    <a href='{$review_url}?rating=2' style='text-decoration:none;'>&#x2B50;</a>
                    <a href='{$review_url}?rating=3' style='text-decoration:none;'>&#x2B50;</a>
                    <a href='{$review_url}?rating=4' style='text-decoration:none;'>&#x2B50;</a>
                    <a href='{$review_url}?rating=5' style='text-decoration:none;'>&#x2B50;</a>
                </div>
            </div>

            {$this->button('Write a Review', $review_url)}
        ";
        return $this->get_header('How was it?', 'We\'d love your feedback') . $content . $this->get_footer();
    }

    /**
     * Low Stock Alert Template (for store owners)
     */
    public function get_low_stock_template($data) {
        $product = esc_html($data['product_name'] ?? 'Unknown Product');
        $stock = intval($data['stock_remaining'] ?? 0);
        $is_out = ($stock <= 0);

        $status_color = $is_out ? '#ef4444' : '#f59e0b';
        $status_label = $is_out ? 'OUT OF STOCK' : 'LOW STOCK';
        $status_desc  = $is_out
            ? 'This product is now out of stock. Customers cannot purchase it until restocked.'
            : "Only {$stock} unit(s) remaining. Consider restocking soon to avoid lost sales.";

        $content = "
            <div style='text-align: center; margin: 20px 0;'>
                <div style='display: inline-block; background: rgba(" . ($is_out ? '239,68,68' : '245,158,11') . ",0.15); border: 1px solid {$status_color}; border-radius: 8px; padding: 8px 20px;'>
                    <span style='color: {$status_color}; font-weight: 700; font-size: 13px; letter-spacing: 2px;'>{$status_label}</span>
                </div>
            </div>

            {$this->metric_grid([
                ['value' => $product, 'label' => 'Product'],
                ['value' => $stock . ' left', 'label' => 'Stock Level']
            ])}

            {$this->info_box('Action Required', $status_desc, $is_out ? 'red' : 'yellow')}

            {$this->button('Manage Inventory', $this->dashboard_url)}
        ";
        $headline = $is_out ? 'Out of Stock' : 'Low Stock Warning';
        return $this->get_header($headline, $product) . $content . $this->get_footer();
    }
}
