sfp_front_nuxt_serprati_landing/app/pages/index.vue

<template>
  <div>

    <section
      id="quem-somos"
      class="relative min-h-screen flex flex-col bg-cover lg:bg-left"
      :style="{ backgroundImage: `url(${heroBackground})` }"
    >
      <div class="absolute inset-0 bg-violet-normal/45"/>

      <div class="relative z-10 flex-1 flex items-center">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full pt-8 pb-20 lg:py-18">
          <div class="flex flex-col lg:flex-row gap-4 lg:gap-12">

            <div class="max-w-2xl justifyBetween">
              <h1
                class="reveal text-h2 text-white font-black mb-10"
                style="font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 900;"
              >
                {{ settings.hero_title }}
              </h1>

              <p class="reveal reveal-delay-1 text-white/90 mb-6 leading-relaxed" style="font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600;">
                {{ settings.hero_subtitle }}
              </p>

              <div class="reveal reveal-delay-2 flex flex-col sm:flex-row gap-4">
                <button
                  class="btn-primary"
                  @click="scrollTo('associe-se')"
                >
                  ASSOCIE-SE AGORA
                </button>
                <button
                  class="btn-outline"
                  @click="scrollTo('beneficios')"
                >
                  CONHEÇA OS BENEFÍCIOS
                </button>
              </div>
            </div>

            <div class="reveal reveal-delay-3 flex flex-row lg:flex-col gap-6 lg:gap-8 shrink-0">

              <div class="flex flex-col items-start gap-1">
                <span class="material-icons text-white/90 text-3xl lg:text-4xl">group</span>
                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat1_value }}</span>
                <span class="text-white/80 text-sm">{{ settings.stat1_label }}</span>
              </div>

              <div class="flex flex-col items-start gap-1">
                <span class="material-icons text-white/90 text-3xl lg:text-4xl">handshake</span>
                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat2_value }}</span>
                <span class="text-white/80 text-sm">{{ settings.stat2_label }}</span>
              </div>

              <div class="flex flex-col items-start gap-1">
                <span class="material-icons text-white/90 text-3xl lg:text-4xl">favorite_border</span>
                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat3_value }}</span>
                <span class="text-white/80 text-sm">{{ settings.stat3_label }}</span>
              </div>

            </div>

          </div>
        </div>
      </div>
    </section>

    <section id="beneficios" class="bg-neutral-light py-16 lg:py-24">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="reveal text-center mb-12 lg:mb-16">
          <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
            Benefícios para você
          </h2>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <div
            v-for="(benefit, index) in benefits"
            :key="benefit.id"
            :class="`reveal reveal-delay-${index + 1}`"
            class="benefit-card"
          >
            <div class="benefit-icon-wrap">
              <i :class="`mdi ${benefit.icon} text-violet-normal`" style="font-size: 1.5rem;" />
            </div>
            <h3 class="text-subtitle-1 font-semibold text-text mt-4 mb-2">
              {{ benefit.title }}
            </h3>
            <p class="text-body-2 text-text-2 leading-relaxed">
              {{ benefit.description }}
            </p>
          </div>

        </div>
      </div>
    </section>

    <section v-if="hasAbout" id="sobre-nos" class=" py-16 lg:py-24">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div v-if="aboutCards.length" class="reveal text-center mb-12 lg:mb-16">
          <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
            Quem somos
          </h2>
        </div>

        <div v-if="aboutCards.length" class="grid grid-cols-1 gap-6">

          <div
            v-for="(card, index) in aboutCards"
            :key="card.title"
            :class="`reveal reveal-delay-${index + 1}`"
            class="benefit-card"
          >
            <div class="benefit-icon-wrap">
              <i :class="`mdi ${card.icon} text-violet-normal`" style="font-size: 1.5rem;" />
            </div>
            <h3 class="text-subtitle-1 font-semibold text-text mt-4 mb-2">
              {{ card.title }}
            </h3>
            <p
              v-for="(paragraph, paragraphIndex) in card.paragraphs"
              :key="paragraphIndex"
              lang="pt-BR"
              class="text-body-2 text-text-2 text-justify hyphens-auto about-text"
              :class="{ 'mt-3': paragraphIndex > 0 }"
            >
              {{ paragraph }}
            </p>
          </div>

        </div>

        <template v-if="settings.about_history">
          <div
            class="reveal text-center mb-10 lg:mb-12"
            :class="{ 'mt-16 lg:mt-24': aboutCards.length }"
          >
            <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
              História
            </h2>
          </div>

          <div class="reveal reveal-delay-1 benefit-card history-card">
            <div class="benefit-icon-wrap">
              <i class="mdi mdi-book-open-page-variant-outline text-violet-normal" style="font-size: 1.5rem;" />
            </div>
            <p
              v-for="(paragraph, index) in historyParagraphs"
              :key="index"
              lang="pt-BR"
              class="text-body-1 text-text-2 text-justify hyphens-auto history-text"
              :class="index === 0 ? 'mt-5' : 'mt-4'"
            >
              {{ paragraph }}
            </p>
          </div>
        </template>

      </div>
    </section>

    <section v-if="events.length" id="eventos" class="bg-neutral-light py-16 lg:py-24">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="reveal text-center mb-12 lg:mb-16">
          <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
            Eventos
          </h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
          <EventCard
            v-for="(event, index) in events"
            :key="event.id"
            :class="`reveal reveal-delay-${(index % 2) + 1}`"
            :event="event"
          />
        </div>

      </div>
    </section>

    <section id="associe-se" class="bg-violet-light py-16 lg:py-24">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="reveal text-center mb-10 lg:mb-12">
          <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
            Associe-se
          </h2>
        </div>

        <div class="reveal reveal-delay-1 max-w-3xl mx-auto">

          <div class="mb-0">
            <button class="tab-active">
              NOVA ASSOCIAÇÃO
            </button>
          </div>

          <div class="bg-white rounded-b-2xl rounded-tr-2xl shadow-md p-6 lg:p-10">
            <form novalidate @submit.prevent="handleSubmit" >

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">

                <div class="field-group">
                  <label class="field-label">Nome</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.nome }]">
                    <span class="material-icons field-icon">person</span>
                    <input
                      v-model="form.nome"
                      type="text"
                      placeholder="Seu nome"
                      class="field-input"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Sobrenome</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.sobrenome }]">
                    <span class="material-icons field-icon">person</span>
                    <input
                      v-model="form.sobrenome"
                      type="text"
                      placeholder="Seu sobrenome"
                      class="field-input"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">CPF</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.cpf }]">
                    <span class="material-icons field-icon">badge</span>
                    <input
                      :value="form.cpf"
                      type="text"
                      placeholder="000.000.000-00"
                      maxlength="14"
                      class="field-input"
                      @input="handleCPF"
                      @blur="onCPFBlur"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Crachá</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.cracha }]">
                    <span class="material-icons field-icon">credit_card</span>
                    <input
                      v-model="form.cracha"
                      type="text"
                      placeholder="Número do seu crachá"
                      class="field-input"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">E-mail</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.email }]">
                    <span class="material-icons field-icon">email</span>
                    <input
                      v-model="form.email"
                      type="email"
                      placeholder="nome@conta.com"
                      class="field-input"
                      @blur="onEmailBlur"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Telefone</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.telefone }]">
                    <span class="material-icons field-icon">phone</span>
                    <input
                      :value="form.telefone"
                      type="tel"
                      placeholder="(00) 00000-0000"
                      maxlength="15"
                      class="field-input"
                      @input="handlePhone"
                      @blur="onPhoneBlur"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Cargo</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.cargoId }]">
                    <span class="material-icons field-icon">work</span>
                    <select v-model="form.cargoId" class="field-input">
                      <option :value="null" disabled>Selecione seu cargo</option>
                      <option v-for="position in positions" :key="position.id" :value="position.id">
                        {{ position.name }}
                      </option>
                    </select>
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Setor</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.setorId }]">
                    <span class="material-icons field-icon">business</span>
                    <select v-model="form.setorId" class="field-input">
                      <option :value="null" disabled>Selecione seu setor</option>
                      <option v-for="sector in sectors" :key="sector.id" :value="sector.id">
                        {{ sector.name }}
                      </option>
                    </select>
                  </div>
                </div>

              </div>

              <div class="flex justify-center">
                <button type="submit" class="btn-submit" :disabled="isLoading" :style="isLoading ? 'opacity: 0.7; cursor: not-allowed;' : ''">
                  {{ isLoading ? 'ENVIANDO...' : 'ENVIAR SOLICITAÇÃO' }}
                </button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </section>

    <Transition name="toast">
      <div
        v-if="showSuccess"
        class="fixed bottom-6 right-6 z-50 max-w-sm bg-violet-normal text-white px-5 py-4 rounded-xl shadow-xl flex items-start gap-3"
      >
        <span class="material-icons text-xl">check_circle</span>
        <span class="text-sm font-medium">
          Solicitação enviada com sucesso! Assim que a administração aprovar seu cadastro,
          use a opção "Meu Primeiro Acesso" no login para criar sua senha.
        </span>
      </div>
    </Transition>

    <Transition name="toast">
      <div
        v-if="showError"
        class="fixed bottom-6 right-6 z-50 bg-red-600 text-white px-5 py-4 rounded-xl shadow-xl flex items-center gap-3"
      >
        <span class="material-icons text-xl">error_outline</span>
        <span class="text-sm font-medium">{{ errorMessage }}</span>
      </div>
    </Transition>

  </div>
</template>

<script setup lang="ts">
import heroBgFallback from '~/assets/images/imagem_fundo.png'

useHead({ title: 'Serprati' })
definePageMeta({ layout: 'default' })

const { settings, benefits } = useCompanyData()
const { events } = useEvents()

const heroBackground = computed(() => settings.value.hero_background_url ?? heroBgFallback)

const toParagraphs = (raw: string | null): string[] => {
  const content = raw?.trim()
  if (!content) return []

  const paragraphs: string[] = []
  let startNewParagraph = true

  for (const line of content.split(/\r?\n/)) {
    const text = line.trim()

    if (!text) {
      startNewParagraph = true
      continue
    }

    const previous = paragraphs[paragraphs.length - 1]
    const isWrappedLine = !!previous && previous.length >= 60 && !/[.!?:;]$/.test(previous)

    if (!startNewParagraph && isWrappedLine) {
      paragraphs[paragraphs.length - 1] = `${previous} ${text}`
    } else {
      paragraphs.push(text)
    }

    startNewParagraph = false
  }

  return paragraphs
}

const aboutCards = computed(() =>
  [
    { title: 'Visão', icon: 'mdi-eye-outline', text: settings.value.about_vision },
    { title: 'Missão', icon: 'mdi-bullseye-arrow', text: settings.value.about_mission },
    { title: 'Valores', icon: 'mdi-heart-outline', text: settings.value.about_values },
  ]
    .filter((card) => !!card.text?.trim())
    .map((card) => ({ ...card, paragraphs: toParagraphs(card.text) }))
)

const hasAbout = computed(() => aboutCards.value.length > 0 || !!settings.value.about_history?.trim())

const historyParagraphs = computed(() => toParagraphs(settings.value.about_history))

const scrollTo = (id: string) => {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}

const form = reactive({
  nome: '',
  sobrenome: '',
  cpf: '',
  cracha: '',
  email: '',
  telefone: '',
  cargoId: null as number | null,
  setorId: null as number | null,
})

const formatCPF = (value: string): string => {
  return value
    .replace(/\D/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d{1,2})$/, '$1-$2')
    .slice(0, 14)
}

const validateCPF = (cpf: string): boolean => {
  const d = cpf.replace(/\D/g, '')
  if (d.length !== 11 || /^(\d)\1{10}$/.test(d)) return false
  const calc = (n: number): number => {
    let sum = 0
    for (let i = 0; i < n; i++) sum += parseInt(d.charAt(i)) * (n + 1 - i)
    const rem = sum % 11
    return rem < 2 ? 0 : 11 - rem
  }
  return calc(9) === parseInt(d.charAt(9)) && calc(10) === parseInt(d.charAt(10))
}

const validateEmail = (email: string): boolean =>
  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)

const formatPhone = (value: string): string =>
  value
    .replace(/\D/g, '')
    .replace(/^(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{5})(\d{1,4})$/, '$1-$2')
    .slice(0, 15)

const errors = reactive({
  nome: '',
  sobrenome: '',
  cpf: '',
  cracha: '',
  email: '',
  telefone: '',
  cargoId: '',
  setorId: '',
})

const clearErrors = () => {
  Object.keys(errors).forEach((key) => { errors[key as keyof typeof errors] = '' })
}

const validateRequired = (): boolean => {
  errors.nome         = form.nome.trim() ? '' : 'Campo obrigatório'
  errors.sobrenome    = form.sobrenome.trim() ? '' : 'Campo obrigatório'
  errors.cracha       = form.cracha.trim() ? '' : 'Campo obrigatório'
  errors.cargoId      = form.cargoId ? '' : 'Campo obrigatório'
  errors.setorId      = form.setorId ? '' : 'Campo obrigatório'
  errors.cpf          = form.cpf.trim() ? errors.cpf : 'Campo obrigatório'
  errors.email        = form.email.trim() ? errors.email : 'Campo obrigatório'
  errors.telefone     = form.telefone.trim() ? errors.telefone : 'Campo obrigatório'

  return !Object.values(errors).some(Boolean)
}

const handleCPF = (e: Event) => {
  form.cpf = formatCPF((e.target as HTMLInputElement).value)
  if (errors.cpf) errors.cpf = ''
}

const handlePhone = (e: Event) => {
  form.telefone = formatPhone((e.target as HTMLInputElement).value)
  if (errors.telefone) errors.telefone = ''
}

const onCPFBlur = () => {
  errors.cpf = form.cpf && !validateCPF(form.cpf) ? 'CPF inválido' : ''
}

const onEmailBlur = () => {
  errors.email = form.email && !validateEmail(form.email) ? 'E-mail inválido' : ''
}

const onPhoneBlur = () => {
  errors.telefone = form.telefone && form.telefone.replace(/\D/g, '').length < 10 ? 'Telefone inválido' : ''
}

watch(() => form.email, () => { if (errors.email) errors.email = '' })
watch(() => form.nome, () => { if (errors.nome) errors.nome = '' })
watch(() => form.sobrenome, () => { if (errors.sobrenome) errors.sobrenome = '' })
watch(() => form.cracha, () => { if (errors.cracha) errors.cracha = '' })
watch(() => form.cargoId, () => { if (errors.cargoId) errors.cargoId = '' })
watch(() => form.setorId, () => { if (errors.setorId) errors.setorId = '' })

const { registerLandingUser, positions, sectors } = useRegisterApi()

const isLoading = ref(false)
const showSuccess = ref(false)
const showError = ref(false)
const errorMessage = ref('')

const resetForm = () => {
  Object.assign(form, {
    nome: '',
    sobrenome: '',
    cpf: '',
    cracha: '',
    email: '',
    telefone: '',
    cargoId: null,
    setorId: null,
  })
  clearErrors()
}

const handleSubmit = async () => {
  errors.cpf = form.cpf && !validateCPF(form.cpf) ? 'CPF inválido' : ''
  errors.email = form.email && !validateEmail(form.email) ? 'E-mail inválido' : ''
  errors.telefone = form.telefone && form.telefone.replace(/\D/g, '').length < 10 ? 'Telefone inválido' : ''
  if (!validateRequired()) return

  isLoading.value = true
  showError.value = false

  try {
    await registerLandingUser({
      name:         form.nome,
      last_name:    form.sobrenome,
      cpf:          form.cpf,
      registration: form.cracha,
      email:        form.email,
      phone:        form.telefone,
      position_id:  form.cargoId,
      sector_id:    form.setorId,
    })

    showSuccess.value = true
    setTimeout(() => { showSuccess.value = false }, 9000)
    resetForm()
  } catch (err: unknown) {
    const error = err as { data?: { errors?: Record<string, string[]>; message?: string } }
    const firstError = error?.data?.errors
      ? Object.values(error.data.errors)[0]?.[0]
      : error?.data?.message

    errorMessage.value = firstError || 'Erro ao enviar solicitação. Tente novamente.'
    showError.value = true
    setTimeout(() => { showError.value = false }, 5000)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
  )

  document.querySelectorAll('.reveal').forEach((el) => observer.observe(el))
})
</script>

<style scoped>
@media (max-width: 1023px) {
  #quem-somos {
    background-position: 8% 65%;
  }
}

.btn-primary {
  background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%);
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  transition: opacity 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover {
  opacity: 0.88;
}

.btn-outline {
  background-color: rgba(102, 29, 117, 0.18);
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  border: 2px solid #a855c8;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover {
  background-color: rgba(102, 29, 117, 0.32);
  border-color: #ffffff;
}

.benefit-card {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(102, 29, 117, 0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}
.benefit-card:hover {
  box-shadow: 0 6px 24px rgba(102, 29, 117, 0.13);
  transform: translateY(-2px);
}
.history-card {
  padding: 2rem 1.75rem;
}
@media (min-width: 1024px) {
  .history-card {
    padding: 2.5rem 3rem;
  }
}

.about-text {
  line-height: 1.7;
}

.history-text {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.85;
}

.benefit-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #f0e8f1;
  border-radius: 0.75rem;
}

.tab-active {
  background-color: #661d75;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 1.25px;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: default;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.field-label {
  font-family: "Nunito", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #505050;
}
.field-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid #C0C0C0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #fefefe;
  transition: border-color 0.2s;
}
.field-input-wrap:focus-within {
  border-color: #661d75;
}
.field-input-wrap.field-error {
  border-color: #dc2626;
}
.field-icon {
  font-size: 1.125rem;
  color: #b6b6b6;
  flex-shrink: 0;
}
.field-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Nunito", sans-serif;
  font-size: 0.875rem;
  color: #161616;
}
.field-input::placeholder {
  color: #b6b6b6;
}

.btn-submit {
  background-color: #661d75;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 1.25px;
  padding: 0.875rem 3rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-submit:hover {
  background-color: #5c1a69;
}

.toast-enter-active,
.toast-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(12px);
}

.justifyBetween {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>