---
import Icon from '@ui/Icon.astro'
import Illustration from '@ui/Illustration.astro'
import Carousel from '@ui/Carousel.astro'
import CaptureScript from '../../CaptureScript.astro'

const strings = ['more effective', 'more efficient', 'more productive']
const typedId = 'typed'
---

<!-- BEGIN HERO -->
<header class="hero">
  <div class="container">
    <div class="row g-lg-8 align-items-center">
      <div class="col-md-6 text-center text-md-start">
        <div class="hero-subheader">Tabler Emails</div>
        <h1 class="hero-title">
          Better email communication,<br />
          <span class="text-primary" id={typedId}>{strings[0]}</span>
        </h1>
        <p class="hero-description mt-4">54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.</p>
        <div class="mt-6 mt-lg-7">
          <div class="row justify-content-center justify-content-md-start">
            <div class="col-auto"><a href="#" class="btn btn-lg btn-primary">Buy for $29</a></div>
            <div class="col-auto"><a href="#" class="btn btn-lg">Browse gallery</a></div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <Carousel id="carousel-controls" interval={4000}>
            <div class="carousel-item active">
              <Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
            </div>
            <div class="carousel-item">
              <Illustration image="boy-girl.svg" class="d-block mx-auto" height="350" />
            </div>
            <div class="carousel-item">
              <Illustration image="computer-fix.svg" class="d-block mx-auto" height="350" />
            </div>
            <a slot="controls" class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
              <Icon name="chevron-left" class="icon-md" />
              <span class="visually-hidden">Previous</span>
            </a>
            <a slot="controls" class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
              <Icon name="chevron-right" class="icon-md" />
              <span class="visually-hidden">Next</span>
            </a>
          </Carousel>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- END HERO -->
<CaptureScript>
  <!-- BEGIN TYPED -->
  <script is:inline define:vars={{ typedId, strings }}>
    // @ts-nocheck — typedId is used in a template literal, which the type checker resolves independently of define:vars.
    function initTyped() {
      new Typed(`#${typedId}`, {
        strings,
        typeSpeed: 100,
        backSpeed: 50,
        backDelay: 1000,
        startDelay: 1000,
        loop: true,
        fade: true,
      })
    }

    // Typed.js loads via a deferred page-lib <script>, which only runs once parsing
    // finishes — this inline script (positioned mid-body) would otherwise run first.
    document.readyState !== 'loading' ? initTyped() : document.addEventListener('DOMContentLoaded', initTyped, { once: true })
  </script>
  <!-- END TYPED -->
</CaptureScript>