<?php
/**
 * Template Name: EasySite About
 *
 * @package EasySite_Pro
 */

get_header();
?>

<div class="easysite-page-hero easysite-section">
	<div class="easysite-container">
		<h1><?php the_title(); ?></h1>
	</div>
</div>

<div class="easysite-container easysite-content-area">
	<section class="easysite-section easysite-about-story">
		<div class="easysite-split">
			<div>
				<h2><?php esc_html_e( 'Our Story', 'easysite-pro' ); ?></h2>
				<?php
				while ( have_posts() ) :
					the_post();
					the_content();
				endwhile;
				?>
			</div>
			<div class="easysite-about-image">
				<?php
				$img = easysite_get_mod( 'easysite_about_image' );
				if ( $img ) {
					echo '<img src="' . esc_url( $img ) . '" alt="" loading="lazy" />';
				} else {
					echo '<img src="' . esc_url( easysite_placeholder_image( 'team' ) ) . '" alt="" loading="lazy" />';
				}
				?>
			</div>
		</div>
	</section>

	<section class="easysite-section easysite-team">
		<h2><?php esc_html_e( 'Meet the Team', 'easysite-pro' ); ?></h2>
		<div class="easysite-team-grid">
			<?php for ( $i = 1; $i <= 6; $i++ ) :
				$name = easysite_get_mod( "easysite_team_{$i}_name", $i <= 3 ? sprintf( __( 'Team Member %d', 'easysite-pro' ), $i ) : '' );
				$role = easysite_get_mod( "easysite_team_{$i}_role", $i <= 3 ? __( 'Specialist', 'easysite-pro' ) : '' );
				if ( ! $name ) {
					continue;
				}
				?>
				<div class="easysite-team-card">
					<img src="<?php echo esc_url( easysite_placeholder_image( 'team' ) ); ?>" alt="" loading="lazy" />
					<h3><?php echo esc_html( $name ); ?></h3>
					<p><?php echo esc_html( $role ); ?></p>
				</div>
			<?php endfor; ?>
		</div>
	</section>

	<section class="easysite-section easysite-values">
		<h2><?php esc_html_e( 'Our Mission & Values', 'easysite-pro' ); ?></h2>
		<div class="easysite-values-grid">
			<div class="easysite-value-card">
				<h3><?php esc_html_e( 'Quality', 'easysite-pro' ); ?></h3>
				<p><?php esc_html_e( 'We deliver work we are proud of, every time.', 'easysite-pro' ); ?></p>
			</div>
			<div class="easysite-value-card">
				<h3><?php esc_html_e( 'Trust', 'easysite-pro' ); ?></h3>
				<p><?php esc_html_e( 'Honest communication and reliable service.', 'easysite-pro' ); ?></p>
			</div>
			<div class="easysite-value-card">
				<h3><?php esc_html_e( 'Community', 'easysite-pro' ); ?></h3>
				<p><?php esc_html_e( 'We support the people and places we serve.', 'easysite-pro' ); ?></p>
			</div>
		</div>
	</section>
</div>

<?php get_footer(); ?>
