<?php
/**
 * Title: Services
 * Slug: super-agency/services
 * Categories: featured, services
 * Keywords: services, features, expertise, capabilities
 * Description: Showcase your agency services with professional gradient cards
 */

$get_url = trailingslashit(get_template_directory_uri());
$service_icons = [
    $get_url . 'assets/images/icon-design.svg',
    $get_url . 'assets/images/icon-development.svg',
    $get_url . 'assets/images/icon-mobile.svg'
];
?>

<!-- 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"},"className":"super-agency-services-section"} -->
<div class="wp-block-group alignwide super-agency-services-section" 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('Our Expertise', '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('We offer comprehensive digital solutions tailored for agencies, creative professionals, and growing businesses.', '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-services-grid"} -->
    <div class="wp-block-columns alignwide super-agency-services-grid">
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-large","right":"var:preset|spacing|large","bottom":"var:preset|spacing|x-large","left":"var:preset|spacing|large"},"blockGap":"var:preset|spacing|medium"},"border":{"radius":"24px"},"dimensions":{"minHeight":"400px"}},"gradient":"service-card-1-gradient","textColor":"background","className":"super-agency-service-card","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
            <div class="wp-block-group super-agency-service-card has-background-color has-service-card-1-gradient-gradient-background has-text-color has-background" style="border-radius:24px;min-height:400px;padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--large)">
                <!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|large"},"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"}},"border":{"radius":"20px"},"dimensions":{"minHeight":"100px"}},"backgroundColor":"transparent","className":"super-agency-service-icon","layout":{"type":"constrained","contentSize":"100px"}} -->
                <div class="wp-block-group super-agency-service-icon has-transparent-background-color has-background" style="border-radius:20px;min-height:100px;margin-bottom:var(--wp--preset--spacing--large);padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
                    <!-- wp:image {"align":"center","width":"40px","height":"40px","sizeSlug":"full","linkDestination":"none"} -->
                    <figure class="wp-block-image aligncenter size-full is-resized"><img src="<?php echo esc_url($service_icons[0]); ?>" alt="<?php esc_attr_e('UI/UX Design Icon', 'super-agency'); ?>" style="width:40px;height:40px"/></figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:group -->

                <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}},"typography":{"fontWeight":"700"}},"textColor":"background","className":"super-agency-service-title","fontSize":"xx-large"} -->
                <h3 class="wp-block-heading has-text-align-center super-agency-service-title has-background-color has-text-color has-xx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--small);font-weight:700"><?php esc_html_e('UI/UX Design', 'super-agency'); ?></h3>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"align":"center","textColor":"background","className":"super-agency-service-description"} -->
                <p class="has-text-align-center super-agency-service-description has-background-color has-text-color"><?php esc_html_e('Crafting intuitive and beautiful user experiences that convert visitors into customers.', 'super-agency'); ?></p>
                <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-large","right":"var:preset|spacing|large","bottom":"var:preset|spacing|x-large","left":"var:preset|spacing|large"},"blockGap":"var:preset|spacing|medium"},"border":{"radius":"24px"},"dimensions":{"minHeight":"400px"}},"gradient":"service-card-2-gradient","textColor":"background","className":"super-agency-service-card","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
            <div class="wp-block-group super-agency-service-card has-background-color has-service-card-2-gradient-gradient-background has-text-color has-background" style="border-radius:24px;min-height:400px;padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--large)">
                <!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|large"},"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"}},"border":{"radius":"20px"},"dimensions":{"minHeight":"100px"}},"backgroundColor":"transparent","className":"super-agency-service-icon","layout":{"type":"constrained","contentSize":"100px"}} -->
                <div class="wp-block-group super-agency-service-icon has-transparent-background-color has-background" style="border-radius:20px;min-height:100px;margin-bottom:var(--wp--preset--spacing--large);padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
                    <!-- wp:image {"align":"center","width":"40px","height":"40px","sizeSlug":"full","linkDestination":"none"} -->
                    <figure class="wp-block-image aligncenter size-full is-resized"><img src="<?php echo esc_url($service_icons[1]); ?>" alt="<?php esc_attr_e('Web Development Icon', 'super-agency'); ?>" style="width:40px;height:40px"/></figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:group -->

                <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}},"typography":{"fontWeight":"700"}},"textColor":"background","className":"super-agency-service-title","fontSize":"xx-large"} -->
                <h3 class="wp-block-heading has-text-align-center super-agency-service-title has-background-color has-text-color has-xx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--small);font-weight:700"><?php esc_html_e('Web Development', 'super-agency'); ?></h3>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"align":"center","textColor":"background","className":"super-agency-service-description"} -->
                <p class="has-text-align-center super-agency-service-description has-background-color has-text-color"><?php esc_html_e('Building fast, secure, and scalable websites using modern technologies and best practices.', 'super-agency'); ?></p>
                <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|x-large","right":"var:preset|spacing|large","bottom":"var:preset|spacing|x-large","left":"var:preset|spacing|large"},"blockGap":"var:preset|spacing|medium"},"border":{"radius":"24px"},"dimensions":{"minHeight":"400px"}},"gradient":"service-card-3-gradient","textColor":"background","className":"super-agency-service-card","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
            <div class="wp-block-group super-agency-service-card has-background-color has-service-card-3-gradient-gradient-background has-text-color has-background" style="border-radius:24px;min-height:400px;padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--large)">
                <!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|large"},"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"}},"border":{"radius":"20px"},"dimensions":{"minHeight":"100px"}},"backgroundColor":"transparent","className":"super-agency-service-icon","layout":{"type":"constrained","contentSize":"100px"}} -->
                <div class="wp-block-group super-agency-service-icon has-transparent-background-color has-background" style="border-radius:20px;min-height:100px;margin-bottom:var(--wp--preset--spacing--large);padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
                    <!-- wp:image {"align":"center","width":"40px","height":"40px","sizeSlug":"full","linkDestination":"none"} -->
                    <figure class="wp-block-image aligncenter size-full is-resized"><img src="<?php echo esc_url($service_icons[2]); ?>" alt="<?php esc_attr_e('Mobile Apps Icon', 'super-agency'); ?>" style="width:40px;height:40px"/></figure>
                    <!-- /wp:image -->
                </div>
                <!-- /wp:group -->

                <!-- wp:heading {"textAlign":"center","level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}},"typography":{"fontWeight":"700"}},"textColor":"background","className":"super-agency-service-title","fontSize":"xx-large"} -->
                <h3 class="wp-block-heading has-text-align-center super-agency-service-title has-background-color has-text-color has-xx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--small);font-weight:700"><?php esc_html_e('Mobile Apps', 'super-agency'); ?></h3>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"align":"center","textColor":"background","className":"super-agency-service-description"} -->
                <p class="has-text-align-center super-agency-service-description has-background-color has-text-color"><?php esc_html_e('Developing native and cross-platform mobile applications for iOS and Android.', 'super-agency'); ?></p>
                <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->