<?php
/**
 * Background optimization email upsell template for old free users.
 */
use Smush\App\Admin;

$discount = WP_Smush::get_instance()->admin()->get_plugin_discount();
?>
<div style="margin:0px auto;padding:0;max-width:600px;">
	<table id="smush-cdn-faster-delivery" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="max-width:600px;border-collapse:collapse;margin:10px auto 0;padding:0 0;color:#fff">
		<tbody>
			<tr>
				<td class="smush-cdn-title-box" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;border:0;width:59.5%;max-width:222px;">
				</td>
				<td class="smush-cdn-image-box" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;border:0;width:40.5%;max-width:222px;">
					<a href="#" style="text-decoration:none!important;cursor:default;max-width:222px!important;height:auto;display:block;"><img style="width:100%;max-width:222px!important;height:auto;display:block;"  src="<?php echo WP_SMUSH_URL . 'app/assets/images/email/faster-delivery-with-cdn.png'; ?>" alt=""></a>
				</td>
			</tr>
		</tbody>
	</table>
	<table id="smush-cdn-upto2x" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="margin:0px auto;max-width:600px;border-collapse:collapse;padding:0 0;color:#fff;background:#2F1D4D;border-radius: 4px;border-top-left-radius: 4px;border-top-right-radius: 4px;">
		<tbody>
			<tr>
				<td class="smush-cdn-title-box" border="0" cellpadding="0" cellspacing="0" style="width:59.5%;max-width:222px;border-collapse:collapse;border-spacing:0px;border:0;padding:32px 0 0 20px;vertical-align:top;">
					<h3 style="font-family:Roboto, Arial, sans-serif;font-size: 22px;letter-spacing:-0.25px;line-height:33px;font-weight: 600;color:inherit;margin:0;padding-bottom:10px;max-width: 316px;">
						<?php esc_html_e( 'Serve images 2X faster with Smush Pro’s CDN', 'wp-smushit' ); ?>
					</h3>
				</td>
				<td class="smush-cdn-image-box" border="0" cellpadding="0" cellspacing="0" style="width:40.5%;max-width:222px;border-collapse:collapse;border-spacing:0px;border:0;vertical-align:top;">
					<a href="#" style="text-decoration:none!important;cursor:default;"><img style="width:100%;max-width:222px!important;height:auto" src="<?php echo WP_SMUSH_URL . 'app/assets/images/email/upto-2x.png'; ?>" alt=""></a>
				</td>
			</tr>
			<tr>
				<td border="0" cellpadding="0" cellspacing="0" colspan="2" style="border-collapse:collapse;border-spacing:0px;border:0;padding:4px 20px 0;">
					<p style="color:#fff;font-size:13px;font-weight:400;margin:0;padding:0;font-family:Roboto, Arial, sans-serif;line-height:22px;text-decoration:none;">
						<?php
						printf(
							/* translators: 1: Number of CDN PoP locations, 2: Discount */
							esc_html__( 'Serve images closer to visitors and boost site speed with our %1$d-point CDN. Exclusive %2$s welcome discount for Smush free users. Limited time only.', 'wp-smushit' ),
							Admin::CDN_POP_LOCATIONS,
							esc_html( $discount )
						);
						?>
					</p>
				</td>
			</tr>
			<tr>
				<td border="0" cellpadding="0" cellspacing="0" colspan="2" style="border-collapse:collapse;border-spacing:0px;border:0;padding:13px 20px 0">
					<p style="padding-left:4px;letter-spacing:0px;font-family:Roboto, Arial, sans-serif;margin:0;line-height:24px;text-decoration:none;font-size:13px;maring:0;font-weight:600;font-style:normal;">
						<span class="smush-light-img">
							<img onerror="arguments[0].currentTarget.style.display='none'" style="width:16px;margin-top:16px;margin-right:12px;" src="<?php echo WP_SMUSH_URL . 'app/assets/images/email/valid.png'; ?>" />
						</span>
						<span class="smush-dark-img" style="display:inline-block;display:none;width:0;height:0;visibility:hidden;margin:0;padding:0">
							<img onerror="arguments[0].currentTarget.style.display='none'" style="width:16px;margin-top:16px;margin-right:12px;" src="<?php echo WP_SMUSH_URL . 'app/assets/images/email/valid-dark.png'; ?>" />
						</span>
						<?php esc_html_e( 'Includes better GIF performance', 'wp-smushit' ); ?>
					</p>
					<p style="padding-left:4px;letter-spacing:0px;font-family:Roboto, Arial, sans-serif;margin:0;line-height:24px;text-decoration:none;font-size:13px;maring:0;font-weight:600;font-style:normal;">
						<span class="smush-light-img">
							<img onerror="arguments[0].currentTarget.style.display='none'" style="width:16px;margin-top:16px;margin-right:12px;" src="<?php echo WP_SMUSH_URL . 'app/assets/images/email/valid.png'; ?>" />
						</span>
						<span class="smush-dark-img" style="display:inline-block;display:none;width:0;height:0;visibility:hidden;margin:0;padding:0">
							<img onerror="arguments[0].currentTarget.style.display='none'" style="width:16px;margin-top:16px;margin-right:12px;" src="<?php echo WP_SMUSH_URL . 'app/assets/images/email/valid-dark.png'; ?>" />
						</span>
						<?php
						printf(
							/* translators: %s: Discount */
							esc_html__( '%s off your first year', 'wp-smushit' ),
							esc_html( $discount )
						);
						?>
					</p>
					<p style="margin:0;padding:20px 0 35px;">
						<a class="button"
						style="display:inline-block;background:#0059FF;border-radius:6px;font-family:Roboto,Arial,sans-serif;font-size:13px;width:176px;height:40px;padding:0!important;font-weight:500;line-height:40px;text-align:center;margin:0;display:inline-block!important;color:#fff!important;text-decoration:none!important;"
						href="<?php echo esc_url( $upsell_url ); ?>"><?php esc_html_e( 'Learn more about Pro', 'wp-smushit' ); ?></a>
					</p>
				</td>
			</tr>
		</tbody>
	</table>
</div>
