<?php

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

?>
<div class="oroku-feature-spotlight-list">
  <article class="oroku-feature-spotlight oroku-feature-spotlight--position--center">
    <div class="oroku-feature-spotlight__content">
      <p class="oroku-feature-spotlight__pretitle"><?php esc_html_e( 'GETTING STARTED', 'orokublocks' ); ?></p>
      <h2 class="oroku-feature-spotlight__title oroku-h2">
      <?php

        echo wp_kses(
          sprintf(
            /* translators: 1: opening span tag, 2: closing span tag. */
            __( 'Thanks for Downloading the %1$sOrokuBlocks%2$s Plugin!', 'orokublocks' ),
            '<span class="oroku-blocky-word">',
            '</span>'
          ),
          [
            'span'  => [
              'class' => []
            ]
          ]
        );

      ?>
      </h2>
      <p class="oroku-feature-spotlight__description oroku-paragraph"><?php esc_html_e( 'This is a freemium plugin with dedicated widgets for Elementor! Each widget has several presets that let you customize it in distinct and amazing ways. There are both free and pro widgets. You can check them all out in the widgets section, or visiting our website to view what the pro version offers.', 'orokublocks' ); ?></p>
      <a class="oroku-button oroku-button--theme--primary" href="https://orokublocks.com/" target="_blank"><?php esc_html_e( 'Visit Our Website', 'orokublocks' ); ?></a>
    </div>

    <div class="oroku-feature-spotlight__image-wrapper">
      <img  
        class="oroku-feature-spotlight__image"
        src="<?php echo esc_url( orokublocks()->url ); ?>admin/assets/image/featured-spotlight.png"
        alt=""
        width="580"
      >
    </div>
  </article>

  <?php do_action( 'orokublocks_admin_page_general_after_spotlight' ); ?>
</div>

<div class="oroku-feature-box-list">
<?php

  $feature_box_data = [
    [
      'title'     => __( 'Read the Documentation and our FAQs!', 'orokublocks' ),
      'text'      => sprintf(
        /* translators: 1: opening strong tag, 2: closing strong tag. */
        __( 'We have made a very detailed documentation where you can find %1$severything you\'ll need in order to use the plugin%2$s. Be sure to also check out the FAQs for the most common issues!', 'orokublocks' ),
        '<strong>',
        '</strong>'
      ),
      'image_url' => orokublocks()->url . 'admin/assets/image/feature-box-01.png',
      'links'     => [
        [
          'name'    => __( 'Documentation', 'orokublocks' ),
          'href'    => 'https://orokublocks.com/documentation',
          'target'  => '_blank'
        ],
        [
          'name'    => __( 'FAQs', 'orokublocks' ),
          'href'    => 'https://orokublocks.com/faqs',
          'target'  => '_blank'
        ]
      ]
    ],
    [
      'theme'     => 'secondary',
      'title'     => __( 'More Widgets and Presets Coming Soon!', 'orokublocks' ),
      'text'      => sprintf(
        /* translators: 1: opening strong tag, 2: closing strong tag. */
        __( 'This is just the beginning! We are already working on new and exciting widgets and presets %1$sfor the free and pro versions%2$s. We are also preparing widgets for more plugins, like LMS and others!', 'orokublocks' ),
        '<strong>',
        '</strong>'
      ),
      'image_url' => orokublocks()->url . 'admin/assets/image/feature-box-02.png',
      'links'     => [
        [
          'name'    => __( 'Browse all Widgets', 'orokublocks' ),
          'href'    => 'https://orokublocks.com/widgets',
          'target'  => '_blank'
        ]
      ]
    ]
  ];

  foreach ( $feature_box_data as $feature_box ) {
    /**
     * Feature Box
     */
    orokublocks()->admin->requireTemplate( 'feature-box', $feature_box );
  }

?>
</div>