<?php
/**
 * Title: Hero Section
 * Slug: technicalistic/hero
 * Categories: technicalistic, technicalistic-hero
 * Description: Dark theme hero with gradient headline, CTAs, and featured image.
 */
?>
<!-- wp:group {"align":"full","className":"jb-hero jb-section-dark","style":{"spacing":{"padding":{"top":"5rem","bottom":"6rem"}}},"layout":{"type":"constrained","contentSize":"80rem"}} -->
<div class="wp-block-group alignfull jb-hero jb-section-dark" style="padding-top:5rem;padding-bottom:6rem">

	<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"3rem"}}}} -->
	<div class="wp-block-columns">

		<!-- wp:column {"width":"55%"} -->
		<div class="wp-block-column" style="flex-basis:55%">

			<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"clamp(2.5rem,5vw,3.75rem)","fontWeight":"700","lineHeight":"1.15"},"spacing":{"margin":{"bottom":"1.5rem"}}},"textColor":"white"} -->
			<h1 class="wp-block-heading has-white-color has-text-color" style="font-size:clamp(2.5rem,5vw,3.75rem);font-weight:700;line-height:1.15;margin-bottom:1.5rem"><?php esc_html_e( 'Transform Complex Information into ', 'technicalistic' ); ?><span class="gradient-cyan-text"><?php esc_html_e( 'Clear Content', 'technicalistic' ); ?></span></h1>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"bottom":"2rem"}}},"textColor":"slate-300"} -->
			<p class="has-slate-300-color has-text-color" style="font-size:1.25rem;margin-bottom:2rem"><?php esc_html_e( 'Strategic technical writing services for companies that need precise documentation, scalable content systems, and measurable results.', 'technicalistic' ); ?></p>
			<!-- /wp:paragraph -->

			<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"wrap"}} -->
			<div class="wp-block-buttons">
				<?php if ( get_theme_mod( 'technicalistic_show_view_services', true ) ) : ?>
				<!-- wp:button {"backgroundColor":"yellow-500","textColor":"black","className":"btn-lg","style":{"border":{"radius":"0.625rem"}}} -->
				<div class="wp-block-button btn-lg"><a class="wp-block-button__link has-black-color has-yellow-500-background-color has-text-color has-background wp-element-button" style="border-radius:0.625rem" href="<?php echo esc_url( get_theme_mod( 'technicalistic_view_services_url', '/portfolio/' ) ); ?>"><?php esc_html_e( 'View Portfolio', 'technicalistic' ); ?> &#8594;</a></div>
				<!-- /wp:button -->
				<?php endif; ?>

				<?php if ( get_theme_mod( 'technicalistic_show_get_in_touch', true ) ) : ?>
				<!-- wp:button {"className":"is-style-outline btn-lg","style":{"border":{"radius":"0.625rem","color":"#22d3ee","width":"2px"},"color":{"text":"#22d3ee"}}} -->
				<div class="wp-block-button is-style-outline btn-lg"><a class="wp-block-button__link has-text-color wp-element-button" style="border-color:#22d3ee;border-width:2px;border-radius:0.625rem;color:#22d3ee" href="<?php echo esc_url( get_theme_mod( 'technicalistic_get_in_touch_url', '/contact/' ) ); ?>"><?php esc_html_e( 'Get in Touch', 'technicalistic' ); ?></a></div>
				<!-- /wp:button -->
				<?php endif; ?>
			</div>
			<!-- /wp:buttons -->

		</div>
		<!-- /wp:column -->

		<!-- wp:column {"width":"45%","verticalAlignment":"center"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:45%">

			<!-- wp:image {"className":"hero-img-wrap","sizeSlug":"full"} -->
			<figure class="wp-block-image size-full hero-img-wrap"><img src="<?php echo esc_url( technicalistic_get_theme_image( 'technicalistic_hero_image', 'lucite-typewriter_sm.png' ) ); ?>" alt="<?php esc_attr_e( 'Hero image', 'technicalistic' ); ?>"/></figure>
			<!-- /wp:image -->

		</div>
		<!-- /wp:column -->

	</div>
	<!-- /wp:columns -->

</div>
<!-- /wp:group -->
