<?php
$pro_purchase_url = "https://themegrove.com/products/inkstory-pro/";
$live_demo_url = "https://demos.themegrove.com/inkstory-pro";
$support_url = "https://themegrove.com/contact/"
?>

<style>
    .inkstory-themeinfo-page--wrapper {
        background: #fff;
        padding: 50px;
        margin: 20px 20px;
    }
    a.inkstory-button.button-primary {
        background: #ff5e00;
        border: none;
    }

    .inkstory-features {
        display: flex;
        flex-wrap: wrap;
        margin: 30px -15px 0;
        justify-content: space-around;
    }

    .inkstory-features > div {
        flex: 0 0 21%;
        padding: 15px;
        background: #eee;
        border-radius: 8px;
    }

    .inkstory-themeinfo-page--wrapper p {
        font-size: 16px;
    }

    p.customization-notice {
        background: #eee;
        padding: 20px;
        font-weight: 500;
        font-style: italic;
        border-radius: 6px;
    }

    
</style>
<div class="inkstory-themeinfo-page--wrapper">
    <div id="inkstory-admin-about-page">
        <div class="inkstory-admin-card-header">
            <div class="inkstory-header-left">
                <h2>
                    <?php echo esc_html( $theme->Name ); ?>
                </h2>
                <p>
                    <?php esc_html_e( 'Upgrade to the Pro version to unlock advanced blocks and patterns, dedicated support, and theme installation with demo setup. Experience enhanced flexibility and receive dedicated support to effortlessly elevate your website to new heights of excellence. ', 'inkstory' ); ?>
                </p>

            </div>
            <div class="inkstory-header-right">
                <div class="inkstory-pro-button">
                    <a href="<?php echo esc_url( $live_demo_url ); ?>" class="inkstory-button button-secondary" target="_blank"
                        rel="noreferrer">
                        <?php esc_html_e( 'Pro Live Demo', 'inkstory' ); ?>
                    </a>
                    <a href="<?php echo esc_url( $pro_purchase_url ); ?>" class="inkstory-button button-primary" target="_blank"
                        rel="noreferrer">
                        <?php esc_html_e( 'Buy Pro Now', 'inkstory' ); ?>
                    </a>
                    <a href="<?php echo esc_url( $support_url ); ?>" class="inkstory-button button-secondary" target="_blank"
                        rel="noreferrer">
                        <?php esc_html_e( 'Supports', 'inkstory' ); ?>
                    </a>
                </div>
            </div>
        </div>   
        <div class="inkstory-features">
            <div class="inkstory-features-box">
                <i class="dashicons dashicons-align-pull-left"></i>
                <h3> <?php esc_html_e( 'Block-Based Customization', 'inkstory' ); ?></h3>
                <p><?php esc_html_e( 'Create and customize website content effortlessly by arranging various blocks such as text, images, and more within the Gutenberg editor, making web design accessible to all skill levels.', 'inkstory' ); ?></p>
            </div>
            <div class="inkstory-features-box">
                <i class="dashicons dashicons-desktop"></i>
                <h3> <?php esc_html_e( 'Responsive Design', 'inkstory' ); ?></h3>
                <p><?php esc_html_e( 'Ensure your website looks and functions flawlessly on various devices, from desktops to mobile devices, thanks to the responsive design of Gutenberg themes, providing an exceptional user experience.', 'inkstory' ); ?></p>
            </div>
            <div class="inkstory-features-box">
                <i class="dashicons dashicons-wordpress"></i>
                <h3> <?php esc_html_e( 'Full Gutenberg Compatibility', 'inkstory' ); ?></h3>
                <p><?php esc_html_e( 'Enjoy a hassle-free content creation experience as Gutenberg themes are designed to fully integrate with the Gutenberg block editor, allowing you to easily create, edit, and maintain your website’s design within the editor’s environment.', 'inkstory' ); ?></p>
            </div>
            <div class="inkstory-features-box">
                <i class="dashicons dashicons-microphone"></i>
                <h3> <?php esc_html_e( '24/7 Support', 'inkstory' ); ?></h3>
                <p><?php esc_html_e( 'Our dedicated support team is available around the clock to provide assistance, ensuring your website operates smoothly and addressing any technical issues, customization queries, or general inquiries at any time.', 'inkstory' ); ?></p>
            </div>
        </div>  
        <p class="customization-notice"><?php esc_html_e( 'If you require assistance with theme installation, demo setup, or customization, please feel free to reach out to us at support@themegrove.com or thmegrove@gmail.com. We are here to help!' , 'inkstory' ); ?></p>
        <div class="inkstory-header-right">
                <div class="inkstory-pro-button">                    
                    <a href="<?php echo esc_url( $pro_purchase_url ); ?>" class="inkstory-button button-primary" target="_blank"
                        rel="noreferrer">
                        <?php esc_html_e( 'Buy Pro Now', 'inkstory' ); ?>
                    </a>
                    <a href="<?php echo esc_url( $support_url ); ?>" class="inkstory-button button-secondary" target="_blank"
                        rel="noreferrer">
                        <?php esc_html_e( 'Supports', 'inkstory' ); ?>
                    </a>
                </div>
            </div> 
    </div>
</div>