portifolio-evandrodevbr/app/components/Contact.tsx

"use client";

import { ArrowUpRight, Mail, MapPin } from "lucide-react";
import type { FormEvent, MouseEvent, ReactNode } from "react";
import { useEffect, useState } from "react";
import { trackEmailClick, trackWhatsAppOpen } from "@/lib/analytics";
import { CONTACT_EMAIL } from "@/lib/site-navigation";
import {
  buildWhatsAppUrl,
  getWhatsAppDisplayNumber,
  OFFER_SUBJECTS,
} from "@/lib/whatsapp";
import {
  CONTACT_FORM_ID,
  CONTACT_KIND_EVENT,
  CONTACT_KIND_PARAM,
  CONTACT_KINDS,
  CONTACT_SUBJECT_OPTIONS,
  type ContactKind,
  contactKindForSubject,
  contactSubjectForKind,
  DEFAULT_CONTACT_SUBJECT,
} from "./contact-subject";
import "./conversion.css";
import WhatsAppLink from "./WhatsAppLink";
import { WhatsAppMark } from "./WhatsAppMark";

type ContactField = "name" | "email" | "message";
type FieldErrors = Partial<Record<ContactField, string>>;

const FIELD_ERRORS: Record<ContactField, string> = {
  name: "Informe seu nome para eu saber com quem falo.",
  email: "Confira o e-mail: ele precisa ter o formato [email protected].",
  message: "Conte em poucas palavras o que você precisa resolver.",
};

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const FIELD_ORDER: ContactField[] = ["name", "email", "message"];

/** E-mail é opcional: só é erro se vier preenchido e fora do formato. */
function validate(data: {
  name: string;
  email: string;
  message: string;
}): FieldErrors {
  const errors: FieldErrors = {};
  if (!data.name.trim()) errors.name = FIELD_ERRORS.name;
  const email = data.email.trim();
  if (email && !EMAIL_PATTERN.test(email)) errors.email = FIELD_ERRORS.email;
  if (!data.message.trim()) errors.message = FIELD_ERRORS.message;
  return errors;
}

/** Mesmo texto para o WhatsApp e para o e-mail; a linha do e-mail só entra se a pessoa informou um. */
function buildProjectMessage(data: {
  name: string;
  email: string;
  subject: string;
  message: string;
}) {
  const email = data.email.trim();
  return `Olá, Evandro! Quero conversar sobre um projeto.\n\nNome: ${data.name.trim()}\n${email ? `E-mail: ${email}\n` : ""}Tipo de projeto: ${data.subject}\n\nContexto, objetivo e prazo:\n${data.message.trim()}\n\nContato iniciado pelo site evandro.dev.br.`;
}

function buildMailtoUrl(message: string) {
  return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent("Projeto pelo site")}&body=${encodeURIComponent(message)}`;
}

const fieldClassName =
  "mt-sp-2 w-full min-w-0 rounded-lg border border-white/15 bg-black/25 px-sp-4 py-sp-3 !font-display text-base leading-6 text-white placeholder:text-white/40 focus-visible:border-[var(--slash)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--slash)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ink)] aria-[invalid=true]:border-[#ff8a80]";
const labelClassName =
  "block font-display text-[15px] font-medium text-white/85";
const errorClassName =
  "mt-sp-2 font-display text-[15px] leading-6 text-[#ff9d94]";

/** Mensagem dos links diretos de quem está sem JavaScript (o formulário não funciona sem ele). */
const DIRECT_MESSAGE =
  "Olá, Evandro! Quero conversar sobre um projeto. Contato iniciado pelo site evandro.dev.br.";

/** Abre a URL em outra aba, ou devolve null se não deu (sem `window.open`, bloqueado ou com erro). */
function tryOpenTab(url: string): Window | null {
  try {
    return window.open(url, "_blank");
  } catch {
    return null;
  }
}

/** Corta o vínculo da aba aberta com esta página; devolve false se o navegador não deixou. */
function detachOpener(tab: Window): boolean {
  try {
    tab.opener = null;
    return true;
  } catch {
    return false;
  }
}

/**
 * Abre o WhatsApp em outra aba. Sem "noopener" na chamada, porque com ele o window.open sempre devolve null
 * e não dá para saber se abriu; o vínculo com a página (`opener`) é cortado logo em seguida. A página vai para o
 * WhatsApp na própria aba quando não há aba nova (pop-up bloqueado, navegador interno de aplicativo, sem
 * `window.open`) e também quando o vínculo não pôde ser cortado: nesse caso a aba aberta é fechada, para
 * nenhuma aba do WhatsApp ficar com acesso a esta página.
 */
function openWhatsApp(url: string) {
  const tab = tryOpenTab(url);
  if (tab) {
    if (detachOpener(tab)) return;
    tab.close();
  }
  window.location.href = url;
}

/** Atributos que o campo entrega ao controle (input, textarea ou select) para o erro ser anunciado. */
interface ControlProps {
  id: string;
  "aria-invalid"?: true;
  "aria-describedby"?: string;
}

/** Rótulo, controle e mensagem de erro de um campo; o controle recebe o id e os atributos de acessibilidade. */
function Field({
  id,
  label,
  error,
  describedBy,
  children,
}: {
  id: string;
  label: string;
  error?: string;
  /** Outros textos que descrevem o campo, depois do erro. */
  describedBy?: string;
  children: (control: ControlProps) => ReactNode;
}) {
  const errorId = `${id}-error`;
  const description = [error ? errorId : "", describedBy ?? ""]
    .filter(Boolean)
    .join(" ");
  return (
    <div>
      <label htmlFor={id} className={labelClassName}>
        {label}
      </label>
      {children({
        id,
        "aria-invalid": error ? true : undefined,
        "aria-describedby": description || undefined,
      })}
      {error && (
        <p id={errorId} className={errorClassName}>
          {error}
        </p>
      )}
    </div>
  );
}

export default function Contact() {
  const [whatsAppDisplay, setWhatsAppDisplay] = useState("WhatsApp");
  useEffect(() => {
    setWhatsAppDisplay(getWhatsAppDisplayNumber());
  }, []);

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: DEFAULT_CONTACT_SUBJECT as string,
    message: "",
  });
  const [errors, setErrors] = useState<FieldErrors>({});
  // A oferta que a pessoa escolheu na home (botão ou `?tipo=`); some se ela trocar o tipo no próprio formulário.
  const [chosenOffer, setChosenOffer] = useState<ContactKind | null>(null);

  // O tipo de projeto pode vir da oferta escolhida na home: pelo endereço (`/?tipo=site#contact`, ao chegar de outra
  // página) ou pelo evento que o botão da oferta dispara na própria página. Tipo desconhecido não muda nada.
  useEffect(() => {
    const choose = (kind: string | null | undefined) => {
      const subject = contactSubjectForKind(kind);
      if (!subject) return;
      setFormData((current) => ({ ...current, subject }));
      setChosenOffer(contactKindForSubject(subject) ?? null);
    };
    choose(new URLSearchParams(window.location.search).get(CONTACT_KIND_PARAM));
    const onChoose = (event: Event) =>
      choose((event as CustomEvent<string | undefined>).detail);
    window.addEventListener(CONTACT_KIND_EVENT, onChoose);
    return () => window.removeEventListener(CONTACT_KIND_EVENT, onChoose);
  }, []);

  const updateField = (field: ContactField | "subject", value: string) => {
    setFormData((current) => ({ ...current, [field]: value }));
    if (field === "subject") setChosenOffer(null);
    if (field !== "subject" && errors[field]) {
      setErrors((current) => ({ ...current, [field]: undefined }));
    }
  };

  /** Mostra os erros, leva o foco ao primeiro campo inválido e diz se há algum. */
  const hasInvalidField = (form: HTMLFormElement | null) => {
    const found = validate(formData);
    setErrors(found);
    const firstInvalid = FIELD_ORDER.find((field) => found[field]);
    if (firstInvalid) {
      form?.querySelector<HTMLElement>(`[name="${firstInvalid}"]`)?.focus();
    }
    return firstInvalid !== undefined;
  };

  // O link direto de WhatsApp leva o tipo escolhido (o nome da oferta, em frase) na mensagem; sem oferta, fala de "um projeto".
  const selectedOffer = contactKindForSubject(formData.subject);
  const directSubject = selectedOffer
    ? OFFER_SUBJECTS[selectedOffer]
    : undefined;

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (hasInvalidField(e.currentTarget)) return;
    openWhatsApp(buildWhatsAppUrl(buildProjectMessage(formData)));
    trackWhatsAppOpen({ service: "Contato", placement: "contact_form" });
  };

  /** O rascunho por e-mail passa pela mesma validação do WhatsApp: sem ela o e-mail sairia vazio. */
  const handleEmailClick = (e: MouseEvent<HTMLAnchorElement>) => {
    if (hasInvalidField(e.currentTarget.closest("form"))) {
      e.preventDefault();
      return;
    }
    trackEmailClick({ placement: "contact_form" });
  };

  return (
    <section
      id="contact"
      aria-labelledby="contact-title"
      className="ds-section ds-section-dark"
    >
      <div className="ds-section-shell grid items-start gap-sp-10 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-sp-16">
        <div className="min-w-0">
          <p className="ds-eyebrow">Contato</p>
          <h2
            id="contact-title"
            className="ds-section-title mt-sp-4 max-w-[19ch] text-balance"
          >
            Vamos conversar sobre o que sua empresa precisa.
          </h2>
          <p className="mt-sp-5 max-w-[44ch] font-display text-base leading-8 text-white/70">
            Conte o que você quer resolver. Pode ser um projeto novo, uma
            melhoria ou uma integração. Não precisa chegar com a solução
            definida.
          </p>
          <div className="mt-sp-8 border-l-2 border-[var(--slash)] pl-sp-5">
            <h3 className="font-display text-lg font-semibold text-white">
              Como a conversa começa.
            </h3>
            <p className="mt-sp-2 max-w-[44ch] font-display text-[15px] leading-7 text-white/65">
              Sou Evandro. A primeira conversa é para entender sua necessidade;
              escopo, prazo e proposta vêm depois.
            </p>
          </div>
          <div className="mt-sp-8 divide-y divide-white/10 border-y border-white/10">
            <WhatsAppLink
              placement="contact_direct"
              service={directSubject}
              className="group flex min-h-20 items-center gap-sp-4 rounded-sm py-sp-5 text-white no-underline"
            >
              <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--whatsapp)]/10 text-[var(--whatsapp)]">
                <WhatsAppMark className="h-6 w-6" />
              </span>
              <span className="min-w-0 flex-1 font-display">
                <span className="block text-[15px] font-semibold text-white group-hover:text-[var(--whatsapp)]">
                  Prefere conversar direto?
                </span>
                <span className="mt-1 block text-[15px] text-white/65">
                  WhatsApp · {whatsAppDisplay}
                </span>
              </span>
              <ArrowUpRight
                className="h-5 w-5 shrink-0 text-white/50 group-hover:text-[var(--whatsapp)]"
                aria-hidden="true"
              />
            </WhatsAppLink>
            <a
              href={`mailto:${CONTACT_EMAIL}`}
              onClick={() => trackEmailClick({ placement: "contact_direct" })}
              className="group flex min-h-16 items-center gap-sp-4 rounded-sm py-sp-5 text-white/65 no-underline hover:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--slash)]"
            >
              <Mail className="h-5 w-5 shrink-0" aria-hidden="true" />
              <span className="min-w-0 break-all font-display text-[15px]">
                {CONTACT_EMAIL}
              </span>
              <ArrowUpRight
                className="ml-auto h-4 w-4 shrink-0"
                aria-hidden="true"
              />
            </a>
          </div>
          <p className="mt-sp-5 flex items-start gap-sp-3 font-display text-[15px] leading-6 text-white/55">
            <MapPin className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
            Garuva, Santa Catarina. Atendimento remoto em todo o Brasil.
          </p>
        </div>

        <form
          id={CONTACT_FORM_ID}
          onSubmit={handleSubmit}
          noValidate
          aria-labelledby="contact-form-title"
          className="min-w-0 rounded-2xl border border-white/12 bg-white/[0.035] p-sp-5 sm:p-sp-8"
        >
          <div className="mb-sp-6 flex items-start gap-sp-4 border-b border-white/10 pb-sp-6">
            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[var(--whatsapp)] text-[#071b10]">
              <WhatsAppMark className="h-7 w-7" />
            </span>
            <div>
              <h3
                id="contact-form-title"
                className="font-display text-xl font-semibold leading-7 text-white"
              >
                Prepare sua mensagem
              </h3>
              <p className="mt-1 font-display text-[15px] leading-6 text-white/65">
                Você revisa no WhatsApp antes de enviar.
              </p>
            </div>
          </div>
          {/* js-only: app/layout.tsx esconde o que depende de JavaScript quando ele está desligado, e o <noscript> abaixo entra no lugar */}
          <div className="js-only space-y-sp-5">
            <div className="grid gap-sp-5 xl:grid-cols-2">
              <Field id="contact-name" label="Seu nome" error={errors.name}>
                {(control) => (
                  <input
                    {...control}
                    name="name"
                    required
                    type="text"
                    autoComplete="name"
                    placeholder="Como posso te chamar?"
                    value={formData.name}
                    onChange={(e) => updateField("name", e.target.value)}
                    className={fieldClassName}
                  />
                )}
              </Field>
              <Field
                id="contact-email"
                label="E-mail (opcional)"
                error={errors.email}
              >
                {(control) => (
                  <input
                    {...control}
                    name="email"
                    type="email"
                    autoComplete="email"
                    placeholder="[email protected]"
                    value={formData.email}
                    onChange={(e) => updateField("email", e.target.value)}
                    className={fieldClassName}
                  />
                )}
              </Field>
            </div>
            <Field id="contact-subject" label="Tipo de projeto">
              {(control) => (
                <select
                  {...control}
                  name="subject"
                  value={formData.subject}
                  onChange={(e) => updateField("subject", e.target.value)}
                  className={`${fieldClassName} [color-scheme:dark]`}
                >
                  {CONTACT_SUBJECT_OPTIONS.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </select>
              )}
            </Field>
            {/* <output> (role status): o texto muda quando uma oferta da home é escolhida, e o leitor de tela o anuncia; vazio, não ocupa espaço */}
            <output className="block !mt-sp-2 font-display text-[15px] leading-6 text-white/85 empty:!mt-0">
              {chosenOffer && (
                <>
                  Você escolheu:{" "}
                  <strong className="font-semibold text-white">
                    {CONTACT_KINDS[chosenOffer]}
                  </strong>
                </>
              )}
            </output>
            <Field
              id="contact-message"
              label="Contexto do projeto"
              error={errors.message}
              describedBy="contact-privacy-note"
            >
              {(control) => (
                <textarea
                  {...control}
                  name="message"
                  required
                  rows={4}
                  autoComplete="off"
                  placeholder="O que você precisa resolver? Qual resultado espera e existe um prazo?"
                  value={formData.message}
                  onChange={(e) => updateField("message", e.target.value)}
                  className={`${fieldClassName} min-h-32 resize-y`}
                />
              )}
            </Field>
            <button
              type="submit"
              className="cv-btn cv-fill flex min-h-14 w-full items-center justify-center gap-sp-3 rounded-lg bg-[var(--whatsapp)] px-sp-4 py-sp-4 text-[#071b10] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--whatsapp)] motion-reduce:transition-none"
            >
              <WhatsAppMark className="h-6 w-6 shrink-0" />
              Continuar no WhatsApp
              <ArrowUpRight className="h-5 w-5 shrink-0" aria-hidden="true" />
            </button>
            <p className="text-center font-display text-[15px] leading-6 text-white/70">
              <a
                href={buildMailtoUrl(buildProjectMessage(formData))}
                onClick={handleEmailClick}
                className="inline-flex min-h-11 items-center underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--slash)]"
              >
                Prefere e-mail? Enviar por e-mail
              </a>
            </p>
            <p
              id="contact-privacy-note"
              className="font-display text-[15px] leading-6 text-white/55"
            >
              Nada é enviado automaticamente. O WhatsApp abre com a mensagem
              para você revisar. Não inclua senhas nem dados pessoais de
              clientes.
            </p>
          </div>
          {/* Sem JavaScript o formulário não envia nada: no lugar do botão, links diretos que funcionam sem script. */}
          <noscript>
            <p className="font-display text-base leading-7 text-white/80">
              Para enviar sua mensagem, use um destes contatos:
            </p>
            <p className="mt-sp-3 flex flex-col gap-sp-3 font-display text-base">
              <a
                href={buildWhatsAppUrl(DIRECT_MESSAGE)}
                className="inline-flex min-h-12 items-center justify-center rounded-lg bg-[var(--whatsapp)] px-sp-4 font-semibold text-[#071b10] no-underline"
              >
                Chamar no WhatsApp
              </a>
              <a
                href={`mailto:${CONTACT_EMAIL}`}
                className="inline-flex min-h-12 items-center justify-center break-all rounded-lg border border-white/25 px-sp-4 font-medium text-white no-underline"
              >
                {CONTACT_EMAIL}
              </a>
            </p>
          </noscript>
        </form>
      </div>
    </section>
  );
}