"use client";

import type React from "react";
import { useState } from "react";
import { motion, type Variants, useReducedMotion } from "framer-motion";
import { Section } from "./Section";
import { DrawLine } from "./animations/DrawLine";
import MagneticButton from "./cinematic/MagneticButton";

const WHATSAPP_NUMBER = "5547992742365";

export default function Contact() {
  const shouldReduceMotion = useReducedMotion();
  const fieldClassName =
    "mt-sp-2 w-full border border-[rgba(255,255,255,.12)] bg-[rgba(255,255,255,.06)] px-sp-4 py-[14px] text-[13px] leading-6 text-white outline-none transition-[border-color,box-shadow] focus-visible:border-[var(--slash)] focus-visible:ring-2 focus-visible:ring-[rgba(204,255,0,0.34)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ink)]";
  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");
  };

  const gridVariants: Variants = {
    hidden: {},
    visible: {
      transition: {
        delayChildren: 0.05,
        staggerChildren: 0.08,
      },
    },
  };

  const cardVariants: Variants = {
    hidden: shouldReduceMotion
      ? { opacity: 0 }
      : { opacity: 0, y: 18, clipPath: "inset(100% 0 0 0)" },
    visible: {
      opacity: 1,
      y: 0,
      clipPath: "inset(0% 0 0 0)",
      transition: shouldReduceMotion
        ? { duration: 0.25 }
        : { duration: 0.75, ease: [0.16, 1, 0.3, 1] },
    },
  };

  return (
    <Section
      id="contact"
      eyebrow="Contact"
      title="Consultoria tecnica para software, arquitetura e integracoes criticas"
      description="Fale comigo se voce precisa de engenharia de software, consultoria tecnica, arquitetura de software ou apoio em projetos com Next.js, Tauri, Rust e IoT."
      dark
      disableChildrenAnimation
    >
      <motion.div
        className="ds-grid-2"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.2 }}
        variants={gridVariants}
      >
        <motion.div
          className="ds-card"
          variants={cardVariants}
          whileHover={
            shouldReduceMotion
              ? undefined
              : {
                  y: -4,
                  boxShadow: "0 20px 42px rgba(0, 0, 0, 0.4)",
                }
          }
          whileTap={shouldReduceMotion ? undefined : { scale: 0.995 }}
          transition={{ type: "spring", stiffness: 180, damping: 18 }}
        >
          <div className="ds-kicker">Availability</div>
          <DrawLine delay={0.04} />
          <h3 className="ds-card-title">Resposta inicial em ate 24h</h3>
          <p className="ds-copy">
            Ideal para discovery tecnico, revisao de arquitetura, rescue de
            projeto, performance ou construcao de produto com ownership real.
          </p>
          <div className="mt-sp-6 space-y-sp-4 text-[13px] leading-7 text-[rgba(255,255,255,.85)]">
            <div>WhatsApp: +55 47 99274-2365</div>
            <div>E-mail: evandrofonsecajunior@gmail.com</div>
            <div>Base: Garuva, Santa Catarina | atuacao remota</div>
          </div>
          <div className="mt-sp-6 border-t border-[rgba(255,255,255,.08)] pt-sp-4 text-[12px] leading-6 text-[rgba(255,255,255,.75)]">
            Envie contexto, prazo e objetivo. Eu cuido de transformar isso em
            conversa tecnica objetiva.
          </div>
        </motion.div>

        <motion.form
          onSubmit={handleSubmit}
          className="ds-card space-y-sp-5"
          variants={cardVariants}
          whileHover={
            shouldReduceMotion
              ? undefined
              : {
                  y: -4,
                  boxShadow: "0 20px 42px rgba(0, 0, 0, 0.4)",
                }
          }
          transition={{ type: "spring", stiffness: 180, damping: 18 }}
        >
          <div>
            <label
              htmlFor="contact-name"
              className="block text-[12px] font-medium text-[rgba(255,255,255,.85)]"
            >
              Nome completo
            </label>
            <input
              id="contact-name"
              name="name"
              required
              type="text"
              autoComplete="name"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              className={fieldClassName}
            />
          </div>
          <div>
            <label
              htmlFor="contact-email"
              className="block text-[12px] font-medium text-[rgba(255,255,255,.85)]"
            >
              E-mail
            </label>
            <input
              id="contact-email"
              name="email"
              required
              type="email"
              autoComplete="email"
              value={formData.email}
              onChange={(e) =>
                setFormData({ ...formData, email: e.target.value })
              }
              className={fieldClassName}
            />
          </div>
          <div>
            <label
              htmlFor="contact-subject"
              className="block text-[12px] font-medium text-[rgba(255,255,255,.85)]"
            >
              Tipo de projeto
            </label>
            <select
              id="contact-subject"
              name="subject"
              value={formData.subject}
              onChange={(e) =>
                setFormData({ ...formData, subject: e.target.value })
              }
              className={fieldClassName}
              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 Tecnica Senior</option>
            </select>
          </div>
          <div>
            <label
              htmlFor="contact-message"
              className="block text-[12px] font-medium text-[rgba(255,255,255,.85)]"
            >
              Contexto do projeto
            </label>
            <textarea
              id="contact-message"
              name="message"
              required
              rows={6}
              autoComplete="off"
              value={formData.message}
              onChange={(e) =>
                setFormData({ ...formData, message: e.target.value })
              }
              className={`${fieldClassName} resize-none`}
            />
          </div>

          <MagneticButton
            as="button"
            type="submit"
            className="ds-link ds-link-accent min-h-12 border-0"
            strength={0.2}
          >
            Enviar briefing pelo WhatsApp
          </MagneticButton>
        </motion.form>
      </motion.div>
    </Section>
  );
}