<template>
  <div class="mail-container">
    <div class="label">Your Email</div>
    <div class="input-group">
      <input type="email" v-model="formData.email" placeholder="Email" class="input-field" />
    </div>
    <div class="btn" @click="handleNext">Next</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['nextStep'])

const formData = ref({
  email: ''
})

const handleNext = () => {
  emit('nextStep', { email: formData.value.email })
}
</script>
<style lang="less" scoped>
.mail-container {
  font-family: 'satoshiRegular';
  .label {
    font-size: 4.8rem;
    letter-spacing: 0.01em;
    margin-bottom: 6rem;
  }
  .input-field {
    width: 100%;
    height: 10rem;
    padding: 2.4rem 5.5rem;
    border: 2px solid #fff;
    background: transparent;
    border-radius: 7.1rem;
    color: white;
    outline: none;
    font-size: 3.83rem;
    padding: 0 5.5rem;
    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
      font-size: 3.83rem;
    }
  }
  .btn {
    margin-top: 7.6rem;
    width: 100%;
    height: 10rem;
    background: #000;
    color: white;
    border: none;
    border-radius: 7rem;
    font-size: 4rem;
    margin-bottom: 1.67rem;
    text-align: center;
    line-height: 10rem;
  }
}
</style>
