import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "@/components/ui/card";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
DialogDescription,
} from "@/components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
ArrowRight,
CheckCircle2,
MapPin,
Award,
Clock,
AlertTriangle,
CalendarPlus,
Users,
Utensils,
Check,
} from "lucide-react";
import { Progress } from "@/components/ui/progress";
import { useToast } from "@/hooks/use-toast";
import { TOTAL_SEATS, SEATS_TAKEN_START } from "@/lib/seminarConfig";
import { postLead, type SeminarFormData } from "@/lib/postLead";
import { useCountdown } from "@/lib/useCountdown";
import { downloadIcs } from "@/lib/downloadIcs";
const selectCls =
"h-14 bg-muted/30 text-base rounded-xl border-border/60 focus:border-primary";
const inputCls =
"h-14 bg-muted/30 focus:bg-background transition-colors text-base rounded-xl border-border/60 focus:border-primary";
export default function Index() {
const { toast } = useToast();
const [step, setStep] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
const [wantsCert, setWantsCert] = useState
(null);
const [seatsTaken, setSeatsTaken] = useState(SEATS_TAKEN_START);
const { timeLeft, isExpired } = useCountdown("2026-10-06T23:59:59-06:00");
const [formData, setFormData] = useState({
name: "",
phone: "",
email: "",
guests: "1",
consentContact: false,
consentMedia: false,
propertyType: "",
downPayment: "",
cardBalance: "",
carLoan: "",
employment: "",
income: "",
credit: "",
immigration: "",
consentFinancial: false,
});
const set = (k: string, v: string | boolean) =>
setFormData((p) => ({ ...p, [k]: v }));
const onInput = (e: React.ChangeEvent) =>
set(e.target.name, e.target.value);
const seatsLeft = Math.max(0, TOTAL_SEATS - seatsTaken);
const fillPct = (seatsTaken / TOTAL_SEATS) * 100;
const handleStep1 = () => {
const digits = formData.phone.replace(/\D/g, "");
if (!formData.name.trim() || !formData.email.trim() || !digits) {
return toast({
title: "Campos obrigatórios",
description: "Preencha nome, e-mail e WhatsApp.",
variant: "destructive",
});
}
if (formData.name.trim().split(/\s+/).length < 2) {
return toast({
title: "Nome completo",
description: "Escreva nome e sobrenome.",
variant: "destructive",
});
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
return toast({
title: "E-mail inválido",
description: "Confira o e-mail digitado.",
variant: "destructive",
});
}
if (digits.length < 10) {
return toast({
title: "WhatsApp inválido",
description: "O número precisa ter 10 dígitos.",
variant: "destructive",
});
}
if (!formData.consentContact) {
return toast({
title: "Consentimento necessário",
description: "Precisamos da sua autorização de contato.",
variant: "destructive",
});
}
if (!formData.consentMedia) {
return toast({
title: "Autorização de imagem",
description: "O evento é filmado — precisamos da sua autorização.",
variant: "destructive",
});
}
postLead(1, false, formData);
setStep(2);
};
const handleCertSubmit = async () => {
const required = [
"propertyType",
"downPayment",
"cardBalance",
"carLoan",
"employment",
"income",
"credit",
"immigration",
];
if (required.some((k) => !formData[k as keyof SeminarFormData])) {
return toast({
title: "Faltou responder",
description:
"Responda todas as perguntas para gerarmos seu certificado.",
variant: "destructive",
});
}
if (!formData.consentFinancial) {
return toast({
title: "Autorização necessária",
description: "Precisamos da sua autorização para usar esses dados.",
variant: "destructive",
});
}
setIsSubmitting(true);
await postLead(2, true, formData);
setWantsCert(true);
setSeatsTaken((s) => Math.min(TOTAL_SEATS, s + Number(formData.guests)));
setIsSubmitting(false);
setStep(3);
};
const handleSkipCert = async () => {
setIsSubmitting(true);
await postLead(2, false, formData);
setWantsCert(false);
setSeatsTaken((s) => Math.min(TOTAL_SEATS, s + Number(formData.guests)));
setIsSubmitting(false);
setStep(3);
};
return (
{step === 0 && (
Vagas restantes
{seatsLeft}
Sala pequena — apenas {TOTAL_SEATS} lugares. Cada pessoa ocupa
uma vaga.
{!isExpired ? (
Inscrições encerram em:
{timeLeft.days > 0 && {timeLeft.days}d }
{String(timeLeft.hours).padStart(2, "0")}h
:
{String(timeLeft.minutes).padStart(2, "0")}m
:
{String(timeLeft.seconds).padStart(2, "0")}s
) : (
Inscrições Encerradas
)}
setStep(1)}
disabled={isExpired || seatsLeft === 0}
>
{isExpired
? "INSCRIÇÕES ENCERRADAS"
: seatsLeft === 0
? "VAGAS ESGOTADAS"
: "QUERO MINHA VAGA →"}
O que você vai descobrir
{[
"Por que o banco diz não — e o que realmente resolve",
"Quanto de entrada você precisa de verdade",
"Local comprar em Calgary começando do zero",
"Os 3 erros mais caros de quem compra a primeira casa",
"Seu certificado de pré-qualificação — na sua mão, no dia",
].map((t, i) => (
{t}
))}
First Assembly
6031 Elbow Dr SW
Comidinha brasileira
Por nossa conta 🇧🇷
)}
{(step === 1 || step === 2) && (
Passo 1 de 2
Garanta sua vaga
30 segundos. Só o essencial.
set("consentContact", !!v)}
className="mt-1 shrink-0 border-primary/50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
/>
Autorizo o Red Ribbon Group a entrar em contato comigo
por telefone, e-mail e mensagem sobre o evento e o
mercado imobiliário. Posso cancelar a qualquer momento.
set("consentMedia", !!v)}
className="mt-1 shrink-0 border-primary/50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
/>
Autorizo fotos e vídeo. O evento será
filmado e fotografado pelo Red Ribbon Group, e as
imagens podem ser usadas em redes sociais e materiais da
empresa.
CONTINUAR
)}
{step === 2 && (
<>
Passo 2 de 2 · Opcional
Quer sair com seu número na mão?
Sua vaga{" "}
já está garantida
. Isto aqui é o bônus.
Certificado de Pré-Qualificação
A Greice prepara o{" "}
seu certificado oficial antes do
evento — com o valor que você já pode comprar hoje.
Impresso, no seu nome, entregue na sua mão dia 7.
Você não vê o resultado agora. Descobre lá. 🤫
Você quer comprar casa ou condomínio?
set("propertyType", v)}
>
Casa
Condomínio (condo)
Ainda não sei
Quanto você tem para a entrada?
set("downPayment", v)}
>
Ainda estou começando
Até $10.000
$10.000 a $25.000
$25.000 a $50.000
$50.000 a $100.000
Acima de $100.000
O que já está guardado ou vai receber de presente
(gift).
Renda bruta anual da família (antes dos impostos)
set("income", v)}
>
Até $50.000
$50.000 a $75.000
$75.000 a $100.000
$100.000 a $150.000
Acima de $150.000
Se vão comprar juntos, some a renda dos dois.
Como você trabalha hoje?
set("employment", v)}
>
Empregado(a) — recebo T4
Autônomo(a) / dono(a) de negócio
Aposentado(a) / pensão
Quanto você deve hoje em cartão e linha de crédito?
set("cardBalance", v)}
>
Não devo nada
Até $5.000
$5.000 a $15.000
$15.000 a $30.000
Acima de $30.000
Somando todos os cartões e a linha de crédito.
Você paga carro ou outro empréstimo por mês?
set("carLoan", v)}
>
Não pago nenhum
Até $300 por mês
$300 a $600 por mês
$600 a $1.000 por mês
Acima de $1.000 por mês
Carro, leasing, empréstimo estudantil, qualquer
parcela fixa.
Seu score de crédito
set("credit", v)}
>
800 a 900 — excelente
680 a 799 — bom
600 a 679 — regular
300 a 599 — precisa melhorar
Não sei meu score
Ainda não tenho histórico no Canadá
Não sabe? Escolha a última opção — a Greice trabalha
com isso.
Sua situação no Canadá
set("immigration", v)}
>
Residente Permanente (PR)
Work Permit
Study Permit
Cidadão(ã) canadense
Outra
Cada situação tem um caminho — nenhuma é caminho
fechado.
set("consentFinancial", !!v)}
className="mt-1 shrink-0 border-primary/50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
/>
Autorizo o uso destes dados pela Greice
Pereira-Galhardo (Mortgage Connection) para preparar meu
certificado de pré-qualificação. Entendo que{" "}
não é uma aprovação de financiamento —
é uma estimativa, sem consulta ao meu crédito. Os dados
são usados só para isso e apagados após o evento.
{isSubmitting
? "ENVIANDO…"
: "QUERO MEU CERTIFICADO 🎓"}
Agora não — só quero a vaga
)}
)}
{step === 3 && (
Vaga confirmada!
{wantsCert
? "Seu certificado vai estar pronto e esperando por você no dia 7. Não vamos adiantar o resultado. 😉"
: "Te esperamos dia 7! Se mudar de ideia sobre o certificado, é só responder o WhatsApp."}
Sua entrada
DOS VISTOS
{[
["Data", "Quarta, 7 de outubro"],
["Horário", "18h00"],
["Local", "First Assembly · Meeting Place"],
["Endereço", "6031 Elbow Dr SW, Calgary"],
["No nome de", formData.name],
[
"Vagas",
`${formData.guests} ${Number(formData.guests) > 1 ? "vagas" : "vaga"}`,
],
].map(([k, v]) => (
{k}
{v}
))}
{wantsCert && (
Certificado de pré-qualificação reservado no seu nome 🎓
)}
IMPORTANTE: tire um print desta tela. É a sua confirmação de
vaga — a sala tem só 20 lugares.
Você vai receber a confirmação na mensagem de texto ou WhatsApp.
)}
);
}
