<?php
/**
 * Title: Tool Section
 * Slug: aamira/tool-section
 * Categories: featured, tool
 * Keywords:
 * Block Types: core/template-part/featured
 * Inserter: true
 * description: A feature section with icons and customizable settings in cards.
 *
 * @package WordPress
 * @subpackage Aamira
 * @since Aamira 1.0
 */
?>

<!-- wp:group {"align":"full","style":{"color":{"gradient":"linear-gradient(135deg,rgb(59,130,246) 0%,rgb(254,202,202) 100%)"},"spacing":{"padding":{"top":"5rem","bottom":"5rem","right":"1.25rem","left":"1.25rem"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background alignfull"
    style="background:linear-gradient(135deg,rgb(59,130,246) 0%,rgb(254,202,202) 100%);padding-top:5rem;padding-right:1.25rem;padding-bottom:5rem;padding-left:1.25rem;margin-top:0;margin-bottom:0">
    <!-- wp:paragraph {"align":"center","style":{"color":{"text":"#2563eb"},"typography":{"textTransform":"uppercase","letterSpacing":"0.1em"}},"fontSize":"medium"} -->
    <p class="has-text-align-center has-text-color has-medium-font-size"
        style="color:#2563eb;letter-spacing:0.1em;text-transform:uppercase"><strong> <?php echo esc_html__( 'The tools you need', 'aamira' ); ?> </strong></p>
    <!-- /wp:paragraph -->
    <!-- wp:heading {"textAlign":"center","level":1,"style":{"color":{"text":"#1f2937"},"spacing":{"margin":{"top":"1rem"}}}} -->
    <h1 class="wp-block-heading has-text-align-center has-text-color" style="color:#1f2937;margin-top:1rem">
        <strong><?php echo esc_html__( 'All-in-One Solution for Your Projects', 'aamira' ); ?></strong>
    </h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"1rem","bottom":"4rem"}},"color":{"text":"#1f2937"},"elements":{"link":{"color":{"text":"#1f2937"}}}},"fontSize":"medium","fontFamily":"sans"} -->
    <p class="has-text-align-center has-text-color has-link-color has-sans-font-family has-medium-font-size"
        style="color:#1f2937;margin-top:1rem;margin-bottom:4rem"><?php echo esc_html__( 'Power up your workflow with the most reliable and scalable development tools.', 'aamira' ); ?></p>
    <!-- /wp:paragraph -->
    <!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"bottom":"0rem"},"blockGap":{"top":"0","left":"var:preset|spacing|40"}}}} -->
    <div class="wp-block-columns alignwide" style="margin-bottom:0rem">
        <!-- wp:column -->
        <div class="wp-block-column section-card">
            <!-- wp:group {"backgroundColor":"base","style":{"border":{"radius":"1rem"}}} -->
            <div class="wp-block-group has-base-background-color has-background" style="border-radius:1rem">
                <!-- wp:group {"style":{"spacing":{"padding":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"top","orientation":"vertical","alignItems":"center"}} -->
                <div class="wp-block-group" style="padding:2rem">
                    <!-- wp:image {"align":"center","sizeSlug":"full","className":"section-card-icon"} -->
                    <figure class="wp-block-image aligncenter size-full section-card-icon">
                        <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/settings.png"
                            alt="Settings Icon" />
                    </figure>
                    <!-- /wp:image -->
                    <!-- wp:heading {"level":3,"textAlign":"center","textColor":"gray-900","fontSize":"medium"} -->
                    <h3
                        class="wp-block-heading has-text-align-center has-gray-900-color has-text-color has-medium-font-size">
                        <strong><?php echo esc_html__( 'Customizable Settings', 'aamira' ); ?></strong>
                    </h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"align":"center","textColor":"gray-600","fontSize":"small","style":{"spacing":{"margin":{"top":"0.75rem"}}}} -->
                    <p class="has-text-align-center has-gray-600-color has-text-color has-small-font-size"
                        style="margin-top:0.75rem"><?php echo esc_html__( 'Connect to cloud services with ease and flexibility.', 'aamira' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
        <!-- wp:column -->
        <div class="wp-block-column section-card">
            <!-- wp:group {"backgroundColor":"base","style":{"border":{"radius":"1rem"}}} -->
            <div class="wp-block-group has-base-background-color has-background" style="border-radius:1rem">
                <!-- wp:group {"style":{"spacing":{"padding":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"top","orientation":"vertical","alignItems":"center"}} -->
                <div class="wp-block-group" style="padding:2rem">
                    <!-- wp:image {"align":"center","sizeSlug":"full","className":"section-card-icon"} -->
                    <figure class="wp-block-image aligncenter size-full section-card-icon">
                        <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/code.png"
                            alt="Code Icon" />
                    </figure>
                    <!-- /wp:image -->
                    <!-- wp:heading {"level":3,"textAlign":"center","textColor":"gray-900","fontSize":"medium"} -->
                    <h3
                        class="wp-block-heading has-text-align-center has-gray-900-color has-text-color has-medium-font-size">
                        <strong><?php echo esc_html__( 'Developer-Friendly', 'aamira' ); ?></strong>
                    </h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"align":"center","textColor":"gray-600","fontSize":"small","style":{"spacing":{"margin":{"top":"0.75rem"}}}} -->
                    <p class="has-text-align-center has-gray-600-color has-text-color has-small-font-size"
                        style="margin-top:0.75rem"><?php echo esc_html__( 'Optimized for developers with clean and efficient code.', 'aamira' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
        <!-- wp:column -->
        <div class="wp-block-column section-card">
            <!-- wp:group {"backgroundColor":"base","style":{"border":{"radius":"1rem"}}} -->
            <div class="wp-block-group has-base-background-color has-background" style="border-radius:1rem">
                <!-- wp:group {"style":{"spacing":{"padding":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"top","orientation":"vertical","alignItems":"center"}} -->
                <div class="wp-block-group" style="padding:2rem">
                    <!-- wp:image {"align":"center","sizeSlug":"full","className":"section-card-icon"} -->
                    <figure class="wp-block-image aligncenter size-full section-card-icon">
                        <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/cell-phone.png"
                            alt="Cell Phone Icon" />
                    </figure>
                    <!-- /wp:image -->
                    <!-- wp:heading {"level":3,"textAlign":"center","textColor":"gray-900","fontSize":"medium"} -->
                    <h3
                        class="wp-block-heading has-text-align-center has-gray-900-color has-text-color has-medium-font-size">
                        <strong><?php echo esc_html__( 'Responsive Design', 'aamira' ); ?></strong>
                    </h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"align":"center","textColor":"gray-600","fontSize":"small","style":{"spacing":{"margin":{"top":"0.75rem"}}}} -->
                    <p class="has-text-align-center has-gray-600-color has-text-color has-small-font-size"
                        style="margin-top:0.75rem"><?php echo esc_html__( 'Build tools that look great on any device and screen size.', 'aamira' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
        <!-- wp:column -->
        <div class="wp-block-column section-card">
            <!-- wp:group {"backgroundColor":"base","style":{"border":{"radius":"1rem"}}} -->
            <div class="wp-block-group has-base-background-color has-background" style="border-radius:1rem">
                <!-- wp:group {"style":{"spacing":{"padding":"2rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"top","orientation":"vertical","alignItems":"center"}} -->
                <div class="wp-block-group" style="padding:2rem">
                    <!-- wp:image {"align":"center","sizeSlug":"full","className":"section-card-icon"} -->
                    <figure class="wp-block-image aligncenter size-full section-card-icon">
                        <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/cloud.png"
                            alt="Cloud Icon" />
                    </figure>
                    <!-- /wp:image -->
                    <!-- wp:heading {"level":3,"textAlign":"center","textColor":"gray-900","fontSize":"medium"} -->
                    <h3
                        class="wp-block-heading has-text-align-center has-gray-900-color has-text-color has-medium-font-size">
                        <strong><?php echo esc_html__( 'Cloud Integration', 'aamira' ); ?></strong>
                    </h3>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"align":"center","textColor":"gray-600","fontSize":"small","style":{"spacing":{"margin":{"top":"0.75rem"}}}} -->
                    <p class="has-text-align-center has-gray-600-color has-text-color has-small-font-size"
                        style="margin-top:0.75rem"><?php echo esc_html__( 'Seamlessly connect with cloud services for better productivity.', 'aamira' ); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
        <!-- wp:button {"style":{"color":{"background":"#2563eb"},"spacing":{"padding":{"top":"0.75rem","bottom":"0.75rem","left":"2rem","right":"2rem"}}}} -->
        <div class="wp-block-button">
            <a class="wp-block-button__link has-background wp-element-button"
                style="background-color:#2563eb;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:2rem;padding-right:2rem">🚀
                <?php echo esc_html__( 'Explore More', 'aamira' ); ?></a>
        </div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
</div>
<!-- /wp:group -->