<?php
$pro_purchase_url = 'https://fireflythemes.com/themes/brick-beam-pro';
$doc_url          = 'https://fireflythemes.com/documentation/brick-beam';
$support_url      = 'https://fireflythemes.com/support/';
$theme            = wp_get_theme();
$theme_name       = $theme->get( 'Name' );
?>
<div class="brick-beam--about-page--wrapper">
	<div id="brick-beam-admin-about-page">
		<div class="brick-beam-admin-card-header">
			<div class="brick-beam-header-left">
				<h2><?php echo esc_html( $theme_name ); ?></h2>
				<p><?php echo esc_html__( 'Multipurpose WordPress Full Site Editing Theme', 'brick-beam' ); ?></p>
			</div>

			<div class="brick-beam-header-right">
				<div class="brick-beam-card-header-button-group">
					<a href="<?php echo esc_url( $pro_purchase_url ); ?>" class="brick-beam-admin-button pro-button" target="_blank" rel="noreferrer">
						<?php
						echo esc_html(
							sprintf(
								/* translators: %s: Theme name. */
								__( 'Get %s Pro', 'brick-beam' ),
								$theme_name
							)
						);
						?>
					</a>

					<a href="<?php echo esc_url( $doc_url ); ?>" class="brick-beam-admin-button premium-button" target="_blank" rel="noreferrer">
						<?php echo esc_html__( 'Documentation', 'brick-beam' ); ?>
					</a>

					<a href="<?php echo esc_url( $support_url ); ?>" class="brick-beam-admin-button primary large" target="_blank" rel="noreferrer">
						<?php echo esc_html__( 'Get Support', 'brick-beam' ); ?>
					</a>
				</div>
			</div>
		</div>

		<div class="brick-beam-pro-upsell-banner" style="background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%); border-radius: 8px; padding: 28px 32px; margin: 20px 0; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
			<div style="flex: 1; min-width: 260px;">
				<h3 style="margin: 0 0 8px; font-size: 1.4em; color: #fff;">
					<?php
					echo esc_html(
						sprintf(
							/* translators: %s: Theme name. */
							__( '🚀 Unlock the Full Power of %s Pro', 'brick-beam' ),
							$theme_name
						)
					);
					?>
				</h3>
				<p style="margin: 0 0 16px; opacity: 0.9; font-size: 0.95em; line-height: 1.6;">
					<?php esc_html_e( 'Take your website to the next level. Pro gives you premium patterns, advanced blocks, carousel sliders, masonry galleries, and priority support — everything you need to build a stunning, professional site.', 'brick-beam' ); ?>
				</p>
				<ul style="margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px;">
					<?php
					$upsell_points = array(
						__( '✅ 20+ Pro Patterns', 'brick-beam' ),
						__( '✅ Custom Blocks (Slider, Tabs, Masonry)', 'brick-beam' ),
						__( '✅ Priority Support', 'brick-beam' ),
						__( '✅ Lifetime Updates', 'brick-beam' ),
					);
					foreach ( $upsell_points as $point ) :
						?>
						<li style="font-size: 0.9em; opacity: 0.95;"><?php echo esc_html( $point ); ?></li>
					<?php endforeach; ?>
				</ul>
			</div>
			<div style="text-align: center; flex-shrink: 0;">
				<a href="<?php echo esc_url( $pro_purchase_url ); ?>" class="brick-beam-admin-button pro-button" target="_blank" rel="noreferrer" style="display: inline-block; background: #f0a500; color: #1a1a1a; font-weight: 700; font-size: 1em; padding: 12px 28px; border-radius: 6px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform 0.2s;">
					<?php
					echo esc_html(
						sprintf(
							/* translators: %s: Theme name. */
							__( 'Get %s Pro →', 'brick-beam' ),
							$theme_name
						)
					);
					?>
				</a>
				<p style="margin: 8px 0 0; font-size: 0.8em; opacity: 0.75;"><?php esc_html_e( 'One-time purchase or subscription plans available', 'brick-beam' ); ?></p>
			</div>
		</div>

		<div class="feature-list">
			<div class="brick-beam-about-container">
				<div class="brick-beam-admin-card features">
					<div class="brick-beam-about-container brick-beam-compare-table">
						<div class="about-compare-table">
							<h3>
								<?php
								echo esc_html(
									sprintf(
										/* translators: %s: Theme name. */
										__( '%s Free Vs Pro', 'brick-beam' ),
										$theme_name
									)
								);
								?>
							</h3>

							<table>
								<thead>
									<tr>
										<th><?php echo esc_html__( 'Bricks & Beam Free', 'brick-beam' ); ?></th>
										<th><?php echo esc_html__( 'Features', 'brick-beam' ); ?></th>
										<th><?php echo esc_html__( 'Bricks & Beam Pro', 'brick-beam' ); ?></th>
									</tr>
								</thead>

								<tbody>
									<?php
									$features = array(
										array( true, esc_html__( 'Responsive', 'brick-beam' ), true ),
										array( true, esc_html__( 'Super Easy Setup', 'brick-beam' ), true ),
										array( true, esc_html__( 'Color Options for various sections', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: 404 Error Page', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Archive Title', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Default Footer', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Default Header', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Latest News', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Main Banner', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Services', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: What We Do', 'brick-beam' ), true ),
										array( true, esc_html__( 'Pattern: Hero Content', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Call to Action', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Gallery Masonry', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Hero Content Two', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Key Feature', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Main Slider', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Post Title', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Recent Work Carousel', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Recent Works', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Services Carousel', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Skills', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Tabs', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Teams', 'brick-beam' ), true ),
										array( false, esc_html__( 'Pattern: Testimonials Carousel', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Skills', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Masonry', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Popup Video', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Header Search', 'brick-beam' ), true, esc_html__( 'More', 'brick-beam' ) ),
										array( false, esc_html__( 'Block: Header Social', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Icons', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Slider', 'brick-beam' ), true ),
										array( false, esc_html__( 'Block: Tabs', 'brick-beam' ), true ),
									);

									foreach ( $features as $feature ) :
										$free_enabled = (bool) $feature[0];
										$feature_name = isset( $feature[1] ) ? $feature[1] : '';
										$pro_enabled  = (bool) $feature[2];
										$extra_text   = isset( $feature[3] ) ? $feature[3] : '';
										?>
										<tr>
											<td>
												<i class="dashicons <?php echo esc_attr( $free_enabled ? 'dashicons-yes' : 'dashicons-no' ); ?>"></i>
											</td>
											<td><?php echo esc_html( $feature_name ); ?></td>
											<td>
												<i class="dashicons <?php echo esc_attr( $pro_enabled ? 'dashicons-yes' : 'dashicons-no' ); ?>"></i>
												<?php echo esc_html( $extra_text ); ?>
											</td>
										</tr>
									<?php endforeach; ?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="brick-beam-card-header-button-group footer-buttons">
		<a href="<?php echo esc_url( $pro_purchase_url ); ?>" class="brick-beam-admin-button pro-button" target="_blank" rel="noreferrer">
			<i class="fa fa-paint-brush"></i>
			<?php
			echo esc_html(
				sprintf(
					/* translators: %s: Theme name. */
					__( 'Get %s Pro', 'brick-beam' ),
					$theme_name
				)
			);
			?>
		</a>

		<a href="<?php echo esc_url( $doc_url ); ?>" class="brick-beam-admin-button premium-button" target="_blank" rel="noreferrer">
			<i class="fa fa-book"></i>
			<?php echo esc_html__( 'Documentation', 'brick-beam' ); ?>
		</a>

		<a href="<?php echo esc_url( $support_url ); ?>" class="brick-beam-admin-button primary large" target="_blank" rel="noreferrer">
			<?php echo esc_html__( 'Get Support', 'brick-beam' ); ?>
		</a>
	</div>
</div>