<?php
/**
 * Title: Team
 * Slug: super-agency/team
 * Categories: featured, about
 * Keywords: team, people, staff, members, about
 * Description: Showcase your team members with photos and descriptions
 */

$get_url = trailingslashit(get_template_directory_uri());
$team_photos = [
    $get_url . 'assets/images/team-1.jpg',
    $get_url . 'assets/images/team-2.jpg',
    $get_url . 'assets/images/team-3.jpg'
];
?>

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-bottom:var(--wp--preset--spacing--xxx-large)">
    <!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|xx-large"}}},"layout":{"type":"constrained","contentSize":"600px"}} -->
    <div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--xx-large)">
        <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|medium"}},"typography":{"fontWeight":"800"}},"textColor":"heading","fontSize":"xxxx-large"} -->
        <h2 class="wp-block-heading has-text-align-center has-heading-color has-text-color has-xxxx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--medium);font-weight:800"><?php esc_html_e('Meet Our Team', 'super-agency'); ?></h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph {"align":"center","textColor":"body","fontSize":"x-large"} -->
        <p class="has-text-align-center has-body-color has-text-color has-x-large-font-size"><?php esc_html_e('The creative minds behind every successful project. Our diverse team brings together expertise in design, development, and strategy.', 'super-agency'); ?></p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:group -->

    <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|x-large","left":"var:preset|spacing|x-large"}}},"className":"super-agency-team-section"} -->
    <div class="wp-block-columns alignwide super-agency-team-section">
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
                <!-- wp:image {"align":"center","width":"200px","height":"200px","sizeSlug":"medium","linkDestination":"none","style":{"border":{"radius":"100px"}}} -->
                <figure class="wp-block-image aligncenter size-medium is-resized has-custom-border"><img src="<?php echo esc_url($team_photos[0]); ?>" alt="<?php esc_attr_e('Sarah Johnson', 'super-agency'); ?>" style="border-radius:100px;width:200px;height:200px"/></figure>
                <!-- /wp:image -->

                <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"constrained"}} -->
                <div class="wp-block-group">
                    <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|x-small"}},"typography":{"fontWeight":"700"}},"textColor":"heading","fontSize":"xx-large"} -->
                    <h3 class="wp-block-heading has-text-align-center has-heading-color has-text-color has-xx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--x-small);font-weight:700"><?php esc_html_e('Sarah Johnson', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}},"typography":{"fontWeight":"600"}},"textColor":"primary","fontSize":"medium"} -->
                    <p class="has-text-align-center has-primary-color has-text-color has-medium-font-size" style="margin-bottom:var(--wp--preset--spacing--small);font-weight:600"><?php esc_html_e('Creative Director', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:paragraph {"align":"center","textColor":"body","fontSize":"small"} -->
                    <p class="has-text-align-center has-body-color has-text-color has-small-font-size"><?php esc_html_e('Leading creative vision with 10+ years in digital design and brand strategy.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
                <!-- wp:image {"align":"center","width":"200px","height":"200px","sizeSlug":"medium","linkDestination":"none","style":{"border":{"radius":"100px"}}} -->
                <figure class="wp-block-image aligncenter size-medium is-resized has-custom-border"><img src="<?php echo esc_url($team_photos[1]); ?>" alt="<?php esc_attr_e('Mike Chen', 'super-agency'); ?>" style="border-radius:100px;width:200px;height:200px"/></figure>
                <!-- /wp:image -->

                <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"constrained"}} -->
                <div class="wp-block-group">
                    <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|x-small"}},"typography":{"fontWeight":"700"}},"textColor":"heading","fontSize":"xx-large"} -->
                    <h3 class="wp-block-heading has-text-align-center has-heading-color has-text-color has-xx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--x-small);font-weight:700"><?php esc_html_e('Mike Chen', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}},"typography":{"fontWeight":"600"}},"textColor":"primary","fontSize":"medium"} -->
                    <p class="has-text-align-center has-primary-color has-text-color has-medium-font-size" style="margin-bottom:var(--wp--preset--spacing--small);font-weight:600"><?php esc_html_e('Lead Developer', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:paragraph {"align":"center","textColor":"body","fontSize":"small"} -->
                    <p class="has-text-align-center has-body-color has-text-color has-small-font-size"><?php esc_html_e('Full-stack developer specializing in modern web technologies and scalable solutions.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
                <!-- wp:image {"align":"center","width":"200px","height":"200px","sizeSlug":"medium","linkDestination":"none","style":{"border":{"radius":"100px"}}} -->
                <figure class="wp-block-image aligncenter size-medium is-resized has-custom-border"><img src="<?php echo esc_url($team_photos[2]); ?>" alt="<?php esc_attr_e('Emily Rodriguez', 'super-agency'); ?>" style="border-radius:100px;width:200px;height:200px"/></figure>
                <!-- /wp:image -->

                <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"constrained"}} -->
                <div class="wp-block-group">
                    <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|x-small"}},"typography":{"fontWeight":"700"}},"textColor":"heading","fontSize":"xx-large"} -->
                    <h3 class="wp-block-heading has-text-align-center has-heading-color has-text-color has-xx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--x-small);font-weight:700"><?php esc_html_e('Emily Rodriguez', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}},"typography":{"fontWeight":"600"}},"textColor":"primary","fontSize":"medium"} -->
                    <p class="has-text-align-center has-primary-color has-text-color has-medium-font-size" style="margin-bottom:var(--wp--preset--spacing--small);font-weight:600"><?php esc_html_e('UX Designer', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:paragraph {"align":"center","textColor":"body","fontSize":"small"} -->
                    <p class="has-text-align-center has-body-color has-text-color has-small-font-size"><?php esc_html_e('User experience expert focused on creating intuitive and accessible digital experiences.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->