"use client";

import type React from "react";
import { useState } from "react";
import { Section } from "./Section";

const WHATSAPP_NUMBER = "5547992742365";

export default function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "full-stack",
    message: "",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const messageTemplate = `*NOVA SOLICITACAO DE PROJETO*\n\n*Origem:* Portfolio Profissional\n*Prioridade:* Alta\n\n---\n*CLIENTE:* ${formData.name}\n*EMAIL:* ${formData.email}\n*AREA:* ${formData.subject.toUpperCase()}\n\n*DESCRICAO:*\n"${formData.message}"\n---\n_Mensagem gerada via Evandro.dev | Garuva, SC_`;

    const encodedMessage = encodeURIComponent(messageTemplate);
    const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodedMessage}`;

    window.open(whatsappUrl, "_blank", "noopener,noreferrer");
  };

  return (
    <Section
      id="contact"
      eyebrow="CONTACT_PROTOCOL.init"
      title="Vamos discutir o próximo sistema"
      description="Descreva o contexto, o gargalo ou o produto. O contato abre direto no WhatsApp com briefing estruturado."
      dark
    >
      <div className="ds-grid-2">
        <div className="ds-card">
          <div className="ds-kicker">Response SLA</div>
          <h3 className="ds-card-title">Retorno inicial em até 24h</h3>
          <p className="ds-copy">
            Ideal para discovery técnico, revisão de arquitetura, rescue de
            projeto, otimização de performance ou construção de produto do
            zero.
          </p>
          <div className="mt-sp-6 space-y-sp-4 text-[12px] leading-7 text-[rgba(255,255,255,.7)]">
            <div>WhatsApp: +55 47 99274-2365</div>
            <div>E-mail: evandrofonsecajunior@gmail.com</div>
            <div>Base: Garuva, Santa Catarina · atuação remota</div>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="ds-card space-y-sp-5">
          <div>
            <label htmlFor="contact-name" className="ds-kicker block">
              Nome completo
            </label>
            <input
              id="contact-name"
              required
              type="text"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              className="mt-sp-2 w-full border border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.06)] px-sp-4 py-[14px] text-[12px] outline-none transition-colors focus:border-slash"
              style={{ color: "#fff", backgroundColor: "rgba(255,255,255,0.06)" }}
            />
          </div>
          <div>
            <label htmlFor="contact-email" className="ds-kicker block">
              E-mail corporativo
            </label>
            <input
              id="contact-email"
              required
              type="email"
              value={formData.email}
              onChange={(e) =>
                setFormData({ ...formData, email: e.target.value })
              }
              className="mt-sp-2 w-full border border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.06)] px-sp-4 py-[14px] text-[12px] outline-none transition-colors focus:border-slash"
              style={{ color: "#fff", backgroundColor: "rgba(255,255,255,0.06)" }}
            />
          </div>
          <div>
            <label htmlFor="contact-subject" className="ds-kicker block">
              Tipo de projeto
            </label>
            <select
              id="contact-subject"
              value={formData.subject}
              onChange={(e) =>
                setFormData({ ...formData, subject: e.target.value })
              }
              className="mt-sp-2 w-full border border-[rgba(255,255,255,.12)] px-sp-4 py-[14px] text-[12px] outline-none transition-colors focus:border-slash"
              style={{ color: "#fff", backgroundColor: "#1a1a1a" }}
            >
              <option value="full-stack">Desenvolvimento Full-Stack</option>
              <option value="cloud">Cloud & Infrastructure</option>
              <option value="iot">Internet of Things (IoT)</option>
              <option value="consultancy">Consultoria Técnica Sênior</option>
            </select>
          </div>
          <div>
            <label htmlFor="contact-message" className="ds-kicker block">
              Detalhes do projeto
            </label>
            <textarea
              id="contact-message"
              required
              rows={6}
              value={formData.message}
              onChange={(e) =>
                setFormData({ ...formData, message: e.target.value })
              }
              className="mt-sp-2 w-full resize-none border border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.06)] px-sp-4 py-[14px] text-[12px] outline-none transition-colors focus:border-slash"
              style={{ color: "#fff", backgroundColor: "rgba(255,255,255,0.06)" }}
            />
          </div>
          <button type="submit" className="ds-link ds-link-accent border-0">
            Iniciar protocolo de contato
          </button>
        </form>
      </div>
    </Section>
  );
}