portifolio-evandrodevbr/app/components/Contact.tsx

"use client";

import { ArrowUpRight, Mail, MapPin } from "lucide-react";
import type { FormEvent } from "react";
import { useEffect, useState } from "react";
import { trackEmailClick, trackWhatsAppOpen } from "@/lib/analytics";
import { CONTACT_EMAIL } from "@/lib/site-navigation";
import { buildWhatsAppUrl, getWhatsAppDisplayNumber } from "@/lib/whatsapp";
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)}`;
}

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

  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-sm font-medium text-white/85";
  const errorClassName =
    "mt-sp-2 font-display text-sm leading-6 text-[#ff9d94]";
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "Site para empresa",
    message: "",
  });
  const [errors, setErrors] = useState<FieldErrors>({});

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

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const found = validate(formData);
    setErrors(found);
    const firstInvalid = FIELD_ORDER.find((field) => found[field]);
    if (firstInvalid) {
      form.querySelector<HTMLElement>(`[name="${firstInvalid}"]`)?.focus();
      return;
    }
    window.open(
      buildWhatsAppUrl(buildProjectMessage(formData)),
      "_blank",
      "noopener,noreferrer",
    );
    trackWhatsAppOpen({ service: "Contato", 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">
              Você fala direto com quem desenvolve.
            </h3>
            <p className="mt-sp-2 max-w-[44ch] font-display text-sm 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"
              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-[#25d366]/10 text-[#25d366]">
                <WhatsAppMark className="h-6 w-6" />
              </span>
              <span className="min-w-0 flex-1 font-display">
                <span className="block text-sm font-semibold text-white group-hover:text-[#25d366]">
                  Prefere conversar direto?
                </span>
                <span className="mt-1 block text-sm text-white/65">
                  WhatsApp · {whatsAppDisplay}
                </span>
              </span>
              <ArrowUpRight
                className="h-5 w-5 shrink-0 text-white/50 group-hover:text-[#25d366]"
                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-sm">
                {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-sm 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
          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-[#25d366] 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-sm leading-6 text-white/65">
                Você revisa no WhatsApp antes de enviar.
              </p>
            </div>
          </div>
          <div className="space-y-sp-5">
            <div className="grid gap-sp-5 xl:grid-cols-2">
              <div>
                <label htmlFor="contact-name" className={labelClassName}>
                  Nome completo
                </label>
                <input
                  id="contact-name"
                  name="name"
                  required
                  type="text"
                  autoComplete="name"
                  placeholder="Como posso te chamar?"
                  aria-invalid={errors.name ? true : undefined}
                  aria-describedby={
                    errors.name ? "contact-name-error" : undefined
                  }
                  value={formData.name}
                  onChange={(e) => updateField("name", e.target.value)}
                  className={fieldClassName}
                />
                {errors.name && (
                  <p id="contact-name-error" className={errorClassName}>
                    {errors.name}
                  </p>
                )}
              </div>
              <div>
                <label htmlFor="contact-email" className={labelClassName}>
                  E-mail (opcional)
                </label>
                <input
                  id="contact-email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="[email protected]"
                  aria-invalid={errors.email ? true : undefined}
                  aria-describedby={
                    errors.email ? "contact-email-error" : undefined
                  }
                  value={formData.email}
                  onChange={(e) => updateField("email", e.target.value)}
                  className={fieldClassName}
                />
                {errors.email && (
                  <p id="contact-email-error" className={errorClassName}>
                    {errors.email}
                  </p>
                )}
              </div>
            </div>
            <div>
              <label htmlFor="contact-subject" className={labelClassName}>
                Tipo de projeto
              </label>
              <select
                id="contact-subject"
                name="subject"
                value={formData.subject}
                onChange={(e) => updateField("subject", e.target.value)}
                className={`${fieldClassName} [color-scheme:dark]`}
              >
                <option value="Site para empresa">Site para empresa</option>
                <option value="Sistemas web sob medida">
                  Sistemas web sob medida
                </option>
                <option value="Aplicativos">Aplicativos</option>
                <option value="Integrações e automações">
                  Integrações e automações
                </option>
                <option value="Evolução de um sistema existente">
                  Evolução de um sistema existente
                </option>
                <option value="Ainda preciso definir">
                  Ainda preciso definir
                </option>
              </select>
            </div>
            <div>
              <label htmlFor="contact-message" className={labelClassName}>
                Contexto do projeto
              </label>
              <textarea
                id="contact-message"
                name="message"
                required
                rows={4}
                autoComplete="off"
                placeholder="O que você precisa resolver? Qual resultado espera e existe um prazo?"
                aria-invalid={errors.message ? true : undefined}
                aria-describedby={
                  errors.message
                    ? "contact-message-error contact-privacy-note"
                    : "contact-privacy-note"
                }
                value={formData.message}
                onChange={(e) => updateField("message", e.target.value)}
                className={`${fieldClassName} min-h-32 resize-y`}
              />
              {errors.message && (
                <p id="contact-message-error" className={errorClassName}>
                  {errors.message}
                </p>
              )}
            </div>
            <button
              type="submit"
              className="cv-btn flex min-h-14 w-full items-center justify-center gap-sp-3 rounded-lg bg-[#25d366] px-sp-4 py-sp-4 text-[#071b10] transition-colors hover:bg-[#54e58b] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#25d366] 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={() => trackEmailClick({ placement: "contact_form" })}
                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-xs 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>
        </form>
      </div>
    </section>
  );
}