<?php
/**
 * Base email layout — HTML shell that wraps all TitanCart emails.
 *
 * Available variables (set by Mailer::render()):
 *   $site_name     — Blog name
 *   $site_url      — Home URL
 *   $logo_url      — Optional logo URL (empty if not set)
 *   $accent_color  — Primary accent colour (default #1F6AE1)
 *   $email_content — Rendered inner email body HTML
 *
 * To customise: copy to your-theme/titancart/emails/base.php
 *
 * @package TitanCart
 */
defined( 'ABSPATH' ) || exit;
?><!DOCTYPE html>
<html lang="<?php echo esc_attr( get_locale() ); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?php echo esc_html( $site_name ); ?></title>
    <?php // WP.org R1 🅱1: this is an HTML EMAIL template (rendered into the mail
          // body, never served as a web page) — wp_enqueue_style/wp_add_inline_style
          // do not apply to email documents; embedded <style> is the only mechanism
          // email clients support. ?>
    <style>
        /* Reset */
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
        /* Layout */
        body { background-color: #F6F8FB; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; }
        .email-wrapper { background-color: #F6F8FB; padding: 40px 20px; }
        .email-container { background-color: #ffffff; border-radius: 12px; max-width: 600px; margin: 0 auto; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
        .email-header { background-color: <?php echo esc_attr( $accent_color ); ?>; padding: 28px 40px; text-align: center; }
        .email-header a { text-decoration: none; }
        .email-header img { max-height: 44px; width: auto; }
        .email-header .site-name { color: #ffffff; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
        .email-body { padding: 40px; color: #1C2430; font-size: 14px; line-height: 1.65; }
        .email-footer { background-color: #F6F8FB; padding: 24px 40px; text-align: center; border-top: 1px solid #E1E5EA; }
        .email-footer p { color: #5A6270; font-size: 12px; margin: 0; line-height: 1.6; }
        .email-footer a { color: <?php echo esc_attr( $accent_color ); ?>; text-decoration: none; }
        /* Helpers */
        h1, h2, h3 { color: #0E2B53; font-weight: 700; margin-top: 0; }
        h1 { font-size: 22px; }
        h2 { font-size: 18px; margin-bottom: 12px; }
        h3 { font-size: 15px; margin-bottom: 8px; }
        a { color: <?php echo esc_attr( $accent_color ); ?>; }
        p { margin: 0 0 16px; }
        .btn { display: inline-block; background-color: <?php echo esc_attr( $accent_color ); ?>; color: #ffffff !important; text-decoration: none; padding: 12px 28px; border-radius: 8px; font-weight: 600; font-size: 14px; letter-spacing: 0.2px; }
        .divider { border: none; border-top: 1px solid #E1E5EA; margin: 28px 0; }
        /* Order table */
        .order-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px; }
        .order-table th { background: #F6F8FB; color: #5A6270; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; text-align: left; border-bottom: 1px solid #E1E5EA; }
        .order-table td { padding: 12px; border-bottom: 1px solid #F0F2F5; vertical-align: top; }
        .order-table tr:last-child td { border-bottom: none; }
        .totals-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .totals-table td { padding: 5px 0; }
        .totals-table td:last-child { text-align: right; font-weight: 600; }
        .totals-total td { font-size: 15px; font-weight: 700; color: #0E2B53; border-top: 1px solid #E1E5EA; padding-top: 10px; }
        /* Status badge */
        .status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
        /* Address block */
        .address-block { background: #F6F8FB; border-radius: 8px; padding: 16px; font-size: 13px; line-height: 1.7; }
        .address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        @media only screen and (max-width: 480px) {
            .email-body { padding: 28px 20px; }
            .address-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
<div class="email-wrapper">
    <table class="email-container" role="presentation" width="100%" style="max-width:600px;margin:0 auto;">
        <!-- Header -->
        <tr>
            <td class="email-header">
                <a href="<?php echo esc_url( $site_url ); ?>">
                    <?php if ( $logo_url ) : ?>
                        <img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php echo esc_attr( $site_name ); ?>">
                    <?php else : ?>
                        <span class="site-name"><?php echo esc_html( $site_name ); ?></span>
                    <?php endif; ?>
                </a>
            </td>
        </tr>
        <!-- Body -->
        <tr>
            <td class="email-body">
                <?php echo wp_kses_post( $email_content ); // WP.org R2 item 6: kses at echo — email body is HTML output (tables/inline styles allowed by kses_post). ?>
            </td>
        </tr>
        <!-- Footer -->
        <tr>
            <td class="email-footer">
                <p>
                    &copy; <?php echo esc_html( ! empty( $company_year ) ? $company_year . '–' . gmdate( 'Y' ) : gmdate( 'Y' ) ); ?> <a href="<?php echo esc_url( ! empty( $company_website ) ? $company_website : $site_url ); ?>"><?php echo esc_html( $site_name ); ?></a>
                </p>
                <?php if ( ! empty( $company_address ) ) : ?>
                <p><?php echo esc_html( $company_address ); ?></p>
                <?php endif; ?>
                <?php if ( ! empty( $company_phone ) || ! empty( $company_phone_2 ) ) : ?>
                <p>
                    <?php if ( ! empty( $company_phone ) ) echo esc_html( $company_phone ); ?>
                    <?php if ( ! empty( $company_phone ) && ! empty( $company_phone_2 ) ) echo ' &middot; '; ?>
                    <?php if ( ! empty( $company_phone_2 ) ) echo esc_html( $company_phone_2 ); ?>
                </p>
                <?php endif; ?>
                <p style="margin-top:8px">
                    <?php esc_html_e( 'You received this email because you placed an order with us.', 'titancart-lite' ); ?>
                </p>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
