<?php
/** Title: Campaign Hero (Image Left)
 * Slug: crowdfunding-platform/campaign-hero-flipped
 * Categories: header, crowdfunding_platform
 * Description: A hero section for individual campaign pages with image on left, title and key details on right
 */

// Campaign data - can be filtered by plugins for dynamic content
$campaign_data = array(
    'title'              => apply_filters( 'crowdfunding_platform_hero_title', __( 'Help Us Build the Future', 'crowdfunding-platform' ) ),
    'description'        => apply_filters( 'crowdfunding_platform_hero_description', __( 'Join our mission to create innovative solutions that make a real difference. Your support helps us reach our goal and bring this vision to life.', 'crowdfunding-platform' ) ),
    'raised'             => apply_filters( 'crowdfunding_platform_hero_raised', '$18,750' ),
    'goal'               => apply_filters( 'crowdfunding_platform_hero_goal', '$25,000' ),
    'percentage'         => apply_filters( 'crowdfunding_platform_hero_percentage', 75 ),
    'percentage_numeric' => apply_filters( 'crowdfunding_platform_hero_percentage_numeric', 75 ),
    'supporters'         => apply_filters( 'crowdfunding_platform_hero_supporters', '156' ),
    'days_left'          => apply_filters( 'crowdfunding_platform_hero_days_left', '23' ),
    'image_url'          => apply_filters( 'crowdfunding_platform_hero_image_url', get_template_directory_uri() . '/assets/images/placeholder-campaign.webp' ),
    'image_alt'          => apply_filters( 'crowdfunding_platform_hero_image_alt', __( 'Campaign placeholder image', 'crowdfunding-platform' ) ),
    'support_url'        => apply_filters( 'crowdfunding_platform_hero_support_url', '#' ),
    'share_url'          => apply_filters( 'crowdfunding_platform_hero_share_url', '#' ),
);

// Generate progress text and ARIA label
$progress_text = sprintf(
    /* translators: 1: percentage, 2: goal amount */
    __( '%1$s%% of %2$s goal', 'crowdfunding-platform' ),
    $campaign_data['percentage'],
    $campaign_data['goal']
);

$progress_aria_label = sprintf(
    /* translators: %s: percentage */
    __( 'Campaign progress: %s%%', 'crowdfunding-platform' ),
    $campaign_data['percentage']
);
?>

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--70)","bottom":"var(--wp--preset--spacing--70)"}}},"backgroundColor":"accent-5","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-accent-5-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)">

	<!-- wp:columns {"align":"wide","verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"var(--wp--preset--spacing--60)","left":"var(--wp--preset--spacing--60)"}}}} -->
	<div class="wp-block-columns alignwide are-vertically-aligned-center">
		
		<!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">
			
			<!-- wp:image {"aspectRatio":"4/3","scale":"cover","style":{"border":{"radius":"12px"}},"sizeSlug":"full","linkDestination":"none"} -->
			<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( $campaign_data['image_url'] ); ?>" alt="<?php echo esc_attr( $campaign_data['image_alt'] ); ?>" style="border-radius:12px;aspect-ratio:4/3;object-fit:cover"/></figure>
			<!-- /wp:image -->
			
		</div>
		<!-- /wp:column -->
		
		<!-- wp:column {"verticalAlignment":"center","width":"60%"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%">
			
			<!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var(--wp--preset--spacing--30)"}}},"fontSize":"jumbo"} -->
			<h1 class="wp-block-heading has-jumbo-font-size" style="margin-bottom:var(--wp--preset--spacing--30)"><?php echo esc_html( $campaign_data['title'] ); ?></h1>
			<!-- /wp:heading -->
			
			<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var(--wp--preset--spacing--40)"}}},"textColor":"secondary","fontSize":"big"} -->
			<p class="has-secondary-color has-text-color has-big-font-size" style="margin-bottom:var(--wp--preset--spacing--40)"><?php echo esc_html( $campaign_data['description'] ); ?></p>
			<!-- /wp:paragraph -->
			
			<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var(--wp--preset--spacing--50)"}}},"layout":{"type":"default"}} -->
			<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--50)">
				
				<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var(--wp--preset--spacing--30)","left":"var(--wp--preset--spacing--40)"}}},"className":"three-column-equal"} -->
				<div class="wp-block-columns three-column-equal">
					
					<!-- wp:column -->
					<div class="wp-block-column">
						<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"700"}},"textColor":"primary","fontSize":"bigger"} -->
						<h3 class="wp-block-heading has-primary-color has-text-color has-bigger-font-size" style="font-weight:700"><?php echo esc_html( $campaign_data['raised'] ); ?></h3>
						<!-- /wp:heading -->
						
						<!-- wp:paragraph {"textColor":"secondary","fontSize":"tiny"} -->
						<p class="has-secondary-color has-text-color has-tiny-font-size"><?php esc_html_e( 'raised so far', 'crowdfunding-platform' ); ?></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:column -->
					
					<!-- wp:column -->
					<div class="wp-block-column">
						<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"700"}},"textColor":"primary","fontSize":"bigger"} -->
						<h3 class="wp-block-heading has-primary-color has-text-color has-bigger-font-size" style="font-weight:700"><?php echo esc_html( $campaign_data['supporters'] ); ?></h3>
						<!-- /wp:heading -->
						
						<!-- wp:paragraph {"textColor":"secondary","fontSize":"tiny"} -->
						<p class="has-secondary-color has-text-color has-tiny-font-size"><?php esc_html_e( 'supporters', 'crowdfunding-platform' ); ?></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:column -->
					
					<!-- wp:column -->
					<div class="wp-block-column">
						<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"700"}},"textColor":"primary","fontSize":"bigger"} -->
						<h3 class="wp-block-heading has-primary-color has-text-color has-bigger-font-size" style="font-weight:700"><?php echo esc_html( $campaign_data['days_left'] ); ?></h3>
						<!-- /wp:heading -->
						
						<!-- wp:paragraph {"textColor":"secondary","fontSize":"tiny"} -->
						<p class="has-secondary-color has-text-color has-tiny-font-size"><?php esc_html_e( 'days left', 'crowdfunding-platform' ); ?></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:column -->
					
				</div>
				<!-- /wp:columns -->
				
				<!-- wp:group {"style":{"spacing":{"margin":{"top":"var(--wp--preset--spacing--30)"}}},"layout":{"type":"default"}} -->
				<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30)">
					<!-- wp:paragraph {"fontSize":"base"} -->
					<p class="has-base-font-size" ><?php echo esc_html( $progress_text ); ?></p>
					<!-- /wp:paragraph -->
					
					<!-- wp:html -->
					<div class="theme-progress-bar" role="progressbar" aria-valuenow="<?php echo esc_attr( $campaign_data['percentage_numeric'] ); ?>" aria-valuemin="0" aria-valuemax="100" aria-label="<?php echo esc_attr( $progress_aria_label ); ?>" style="--progress-value: <?php echo esc_attr( $campaign_data['percentage_numeric'] ); ?>;">
						<div class="theme-progress-fill"></div>
					</div>
					<!-- /wp:html -->
				</div>
				<!-- /wp:group -->
				
			</div>
			<!-- /wp:group -->
			
			<!-- wp:buttons {"style":{"spacing":{"blockGap":"var(--wp--preset--spacing--30)"}}} -->
			<div class="wp-block-buttons">
				<!-- wp:button {"fontSize":"big"} -->
				<div class="wp-block-button has-big-font-size"><a href="<?php echo esc_url( $campaign_data['support_url'] ); ?>" class="wp-block-button__link has-big-font-size has-custom-font-size wp-element-button"><?php esc_html_e( 'Support This Campaign', 'crowdfunding-platform' ); ?></a></div>
				<!-- /wp:button -->
				
				<!-- wp:button {"className":"is-style-outline","fontSize":"big"} -->
				<div class="wp-block-button has-big-font-size is-style-outline"><a href="<?php echo esc_url( $campaign_data['share_url'] ); ?>" class="wp-block-button__link has-big-font-size has-custom-font-size wp-element-button"><?php esc_html_e( 'Share', 'crowdfunding-platform' ); ?></a></div>
				<!-- /wp:button -->
			</div>
			<!-- /wp:buttons -->
			
		</div>
		<!-- /wp:column -->
		
	</div>
	<!-- /wp:columns -->
	
</div>
<!-- /wp:group -->