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

.contact-block {
  padding-block: spacer-clamp('xl', 'xxl');

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

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

  &__info {
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__methods {
    @include clear-list;
    @include layout-stack('m');

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

    a {
      color: color('heading');
      font-weight: 600;
    }
  }

  &__icon {
    align-items: center;
    background-color: color-alpha('primary', 0.12);
    block-size: 2.75rem;
    border-radius: radius('md');
    color: color('primary');
    display: inline-flex;
    flex-shrink: 0;
    inline-size: 2.75rem;
    justify-content: center;

    svg {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }

  &__label {
    color: color('muted');
    display: block;
    font-size: config('font-size-sm', $typography);
  }

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

    // The submit sits in its own .form-group (a flex column); keep its natural width.
    .btn {
      align-self: start;
    }
  }

  &__row {
    @include layout-switcher(30rem, 'm');
  }
}

<section class="contact-block" aria-labelledby="contact-title">
    <div class="container">
        <div class="contact-block__inner">
            <div class="contact-block__info">
            <header class="block-heading block-heading--start">
                <p class="block-heading__eyebrow">Contact</p>
                <h2 class="block-heading__title" id="contact-title">Let’s talk about your project</h2>
                <p class="block-heading__text">Tell us what you need, and we’ll get back to you within one business day.</p>
            </header>
                <ul class="contact-block__methods" role="list">
                    <li>
                        <span class="contact-block__icon"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 6L2 7"/>
</svg>
</span>
                        <span>
                            <span class="contact-block__label">Email</span>
                            <a href="mailto:hello@example.com">hello@example.com</a>
                        </span>
                    </li>
                    <li>
                        <span class="contact-block__icon"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>
</svg>
</span>
                        <span>
                            <span class="contact-block__label">Phone</span>
                            <a href="tel:+15550102030">+1 (555) 010-2030</a>
                        </span>
                    </li>
                    <li>
                        <span class="contact-block__icon"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/>
</svg>
</span>
                        <span>
                            <span class="contact-block__label">Office</span>
                            <span>12 Pine Street, Portland, OR</span>
                        </span>
                    </li>
                </ul>
            </div>
            <form class="contact-block__form" onsubmit="return false;">
                <div class="contact-block__row">
                    <div class="form-group">
                        <label class="form-label form-label--required" for="contact-name">Name</label>
                        <input class="form-control" id="contact-name" type="text" autocomplete="name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label form-label--required" for="contact-email">Email</label>
                        <input class="form-control" id="contact-email" type="email" autocomplete="email" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label" for="contact-topic">What can we help with?</label>
                    <select class="form-control" id="contact-topic">
                        <option>A new website</option>
                        <option>A design system</option>
                        <option>Consulting</option>
                        <option>Something else</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--required" for="contact-message">Message</label>
                    <textarea class="form-control" id="contact-message" rows="5" required></textarea>
                </div>
                <label class="form-check">
                    <input class="form-check__control" type="checkbox" required>
                    <span class="form-label form-check__label">I agree to the privacy policy.</span>
                </label>
                <div class="form-group">
                    <button class="btn btn--primary btn--lg" type="submit">Send message</button>
                </div>
            </form>
        </div>
    </div>
</section>