@use 'sprucecss/scss/spruce' as *;

.hero-signup-block {
  background-color: color('surface-muted');
  padding-block: spacer-clamp('l', 'xxl');

  &__inner {
    align-items: center;
    display: grid;
    gap: spacer-clamp('l', 'xl');

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
  }

  &__content {
    @include layout-stack('m');
  }

  &__eyebrow {
    color: color('primary');
    font-weight: 700;
  }

  &__title {
    font-size: responsive-font-size(3.5rem, 40, '4vw + 1rem');
    letter-spacing: -0.02em;
  }

  &__lead {
    color: color('muted');
    font-size: config('font-size-lead', $typography);
  }

  &__points {
    list-style: none;
    padding: 0;
    @include layout-stack('xs');

    li {
      align-items: center;
      color: color('heading');
      display: flex;
      gap: spacer('xs');
    }
  }

  &__check {
    background-color: color-alpha('success', 0.15, 'alert');
    block-size: 1.5rem;
    border-radius: 50%;
    color: color('success', 'alert');
    flex-shrink: 0;
    inline-size: 1.5rem;
    padding: 0.3rem;
  }

  &__form {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    box-shadow: shadow('lg');
    padding: spacer-clamp('m', 'l');
    @include layout-stack('s');
  }

  &__form-title {
    font-size: font-size('h4');
  }

  &__note {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    text-align: center;
  }
}

<section class="hero-signup-block" aria-labelledby="hero-signup-title">
    <div class="container">
        <div class="hero-signup-block__inner">
            <div class="hero-signup-block__content">
                <p class="hero-signup-block__eyebrow">Free 14-day trial</p>
                <h1 class="hero-signup-block__title" id="hero-signup-title">Launch your next site in an afternoon</h1>
                <p class="hero-signup-block__lead">Start with a design style, add blocks, and ship a fast, accessible website your whole team can edit.</p>
                <ul class="hero-signup-block__points" role="list">
                    <li><svg class="hero-signup-block__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg> No credit card required</li>
                    <li><svg class="hero-signup-block__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg> Unlimited projects during the trial</li>
                    <li><svg class="hero-signup-block__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg> Cancel anytime in one click</li>
                </ul>
            </div>
            <form class="hero-signup-block__form" onsubmit="return false;" aria-labelledby="hero-signup-form-title">
                <h2 class="hero-signup-block__form-title" id="hero-signup-form-title">Create your account</h2>
                <div class="form-group">
                    <label class="form-label" for="hero-signup-name">Full name</label>
                    <input class="form-control" id="hero-signup-name" type="text" autocomplete="name" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="hero-signup-email">Work email</label>
                    <input class="form-control" id="hero-signup-email" type="email" autocomplete="email" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="hero-signup-password">Password</label>
                    <input class="form-control" id="hero-signup-password" type="password" autocomplete="new-password" minlength="12" aria-describedby="hero-signup-password-help" required>
                    <span class="form-description" id="hero-signup-password-help">At least 12 characters.</span>
                </div>
                <button class="btn btn--primary btn--lg btn--block" type="submit">Start free trial</button>
                <p class="hero-signup-block__note">By signing up, you agree to the Terms and the Privacy Policy.</p>
            </form>
        </div>
    </div>
</section>