<?php
/**
 * Hero Block — render template
 *
 * Structure:
 *   - Full-width background image (farm photo)
 *   - Cream wave overlay with organic shape
 *   - Content: heading + description + CTA button (left on desktop)
 *   - Botanical illustration (right on desktop, above text on mobile)
 *   - White bottom wave transition into next section
 *
 * Built forward-from-Figma 2026-04-13 by Lark.
 * Figma source: CAE-1440-Hero (19095:38861), CAE-375-Hero (19143:405459)
 */

$heading      = get_field('hero_heading');
$description  = get_field('hero_description');
$button       = get_field('hero_button');
$background   = get_field('hero_background');
$illustration = get_field('hero_illustration');

// Defaults — use exported Figma assets when ACF fields are empty
$theme_images  = get_template_directory_uri() . '/assets/images/blocks/hero';
$bg_url        = $background ? $background['url'] : $theme_images . '/default-bg.png';
$bg_alt        = $background ? ($background['alt'] ?? '') : 'Vermont farm landscape';
$illust_url    = $illustration ? $illustration['url'] : $theme_images . '/illustration.png';
$illust_alt    = $illustration ? ($illustration['alt'] ?? '') : 'Botanical illustration';
$wave_url      = $theme_images . '/wave-overlay.png';

// Early return — nothing to render
if (!$heading && !$description && !$button) {
    return;
}

$block_attrs = get_block_wrapper_attributes([
    'class'         => 'hero-block',
    'data-figma-id' => '19095:38861',
]);
?>

<section <?php echo $block_attrs; ?>>

    <?php /* ── Background Image ────────────────────────────────────────────── */ ?>
    <div class="hero-block__bg" data-figma-id="I19095:38861;4702:20926">
        <img src="<?php echo esc_url($bg_url); ?>"
             alt="<?php echo esc_attr($bg_alt); ?>"
             width="2880"
             height="1128"
             loading="eager">
    </div>

    <?php /* ── Wave Overlay ────────────────────────────────────────────────── */ ?>
    <div class="hero-block__wave" data-figma-id="I19095:38861;4702:20927">
        <img src="<?php echo esc_url($wave_url); ?>"
             alt=""
             aria-hidden="true"
             class="hero-block__wave-shape"
             width="2367"
             height="915"
             loading="eager">

        <?php /* ── Illustration ────────────────────────────────────────────── */ ?>
        <div class="hero-block__illustration" data-figma-id="I19095:38861;4702:20929">
            <img src="<?php echo esc_url($illust_url); ?>"
                 alt="<?php echo esc_attr($illust_alt); ?>"
                 width="892"
                 height="696"
                 loading="eager">
        </div>

        <?php /* ── Content ─────────────────────────────────────────────────── */ ?>
        <div class="hero-block__content" data-figma-id="I19095:38861;4702:20930">
            <?php if ($heading): ?>
                <h1 class="hero-block__heading" data-figma-id="I19095:38861;4702:20931">
                    <?php echo esc_html($heading); ?>
                </h1>
            <?php endif; ?>

            <?php if ($description): ?>
                <p class="hero-block__description" data-figma-id="I19095:38861;4702:20932">
                    <?php echo esc_html($description); ?>
                </p>
            <?php endif; ?>

            <?php if ($button): ?>
                <a href="<?php echo esc_url($button['url']); ?>"
                   class="hero-block__button"
                   data-figma-id="I19095:38861;4702:61102"
                   <?php echo !empty($button['target']) ? 'target="' . esc_attr($button['target']) . '" rel="noopener"' : ''; ?>>
                    <span class="hero-block__button-text">
                        <?php echo esc_html($button['title']); ?>
                    </span>
                    <span class="hero-block__button-icon" aria-hidden="true">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.5 3.5L14 10L7.5 16.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </a>
            <?php endif; ?>
        </div>
    </div>

    <?php /* ── Bottom Wave Transition ──────────────────────────────────────── */ ?>
    <div class="hero-block__bottom-wave" data-figma-id="I19095:38861;4702:20933">
        <svg viewBox="0 0 1440 102" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" aria-hidden="true">
            <path d="M0 102C0 102 360 0 720 0C1080 0 1440 102 1440 102H0Z" fill="white"/>
        </svg>
    </div>

</section>