"use client";

import { useState } from "react";
import FadeIn from "@/components/FadeIn";

const subjects = [
  "General Inquiry",
  "Billing",
  "Technical Support",
  "Hardware ID Reset",
  "Other",
];

export default function Contact() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    subject: subjects[0],
    message: "",
  });
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        setStatus("sent");
        setForm({ name: "", email: "", subject: subjects[0], message: "" });
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  const inputStyle = {
    background: "#111111",
    border: "1px solid #222222",
    color: "#ffffff",
    borderRadius: "2px",
    padding: "10px 14px",
    fontSize: "14px",
    width: "100%",
    outline: "none",
    transition: "border-color 0.2s",
  };

  return (
    <section className="min-h-screen pt-32 pb-24 px-6">
      <div className="max-w-5xl mx-auto">
        <FadeIn>
          <p
            className="text-xs font-semibold uppercase tracking-widest mb-4"
            style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
          >
            Contact
          </p>
          <h1
            className="text-4xl md:text-5xl font-semibold mb-12"
            style={{ letterSpacing: "-0.03em" }}
          >
            Get in Touch
          </h1>
        </FadeIn>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
          {/* Contact info */}
          <FadeIn delay={0.1} direction="right">
            <div>
              <p
                className="text-xs font-semibold uppercase tracking-widest mb-6"
                style={{ color: "#3a3a3a", letterSpacing: "0.15em" }}
              >
                Direct Contact
              </p>
              <div
                className="p-7 rounded-sm border"
                style={{ border: "1px solid #222222", background: "#111111" }}
              >
                <div className="mb-5">
                  <p className="text-base font-semibold mb-0.5">Nolan Kovacs</p>
                  <p className="text-sm" style={{ color: "#888888" }}>
                    Chief Executive Officer
                  </p>
                  <p className="text-xs mt-0.5" style={{ color: "#3a3a3a" }}>
                    Verimund Solutions
                  </p>
                </div>
                <div className="flex flex-col gap-2 pt-5 border-t" style={{ borderColor: "#1a1a1a" }}>
                  <div className="flex items-center gap-3">
                    <span className="text-xs w-16" style={{ color: "#3a3a3a" }}>Phone</span>
                    <a
                      href="tel:+12482529430"
                      className="text-sm transition-colors duration-200"
                      style={{ color: "#888888" }}
                      onMouseEnter={(e) => (e.currentTarget.style.color = "#ffffff")}
                      onMouseLeave={(e) => (e.currentTarget.style.color = "#888888")}
                    >
                      248-252-9430
                    </a>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-xs w-16" style={{ color: "#3a3a3a" }}>Email</span>
                    <a
                      href="mailto:nolankovacs@verimundsolutions.com"
                      className="text-sm transition-colors duration-200"
                      style={{ color: "#888888" }}
                      onMouseEnter={(e) => (e.currentTarget.style.color = "#ffffff")}
                      onMouseLeave={(e) => (e.currentTarget.style.color = "#888888")}
                    >
                      nolankovacs@verimundsolutions.com
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </FadeIn>

          {/* Contact form */}
          <FadeIn delay={0.15} direction="left">
            {status === "sent" ? (
              <div
                className="p-7 rounded-sm border text-center"
                style={{ border: "1px solid #222222", background: "#111111" }}
              >
                <p
                  className="text-sm font-semibold mb-2"
                  style={{ color: "#4ade80" }}
                >
                  Message sent.
                </p>
                <p className="text-sm" style={{ color: "#888888" }}>
                  We&apos;ll get back to you as soon as possible.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col gap-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs" style={{ color: "#888888" }}>Name</label>
                    <input
                      name="name"
                      value={form.name}
                      onChange={handleChange}
                      required
                      placeholder="Your name"
                      style={inputStyle}
                      onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
                      onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
                    />
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs" style={{ color: "#888888" }}>Email</label>
                    <input
                      name="email"
                      type="email"
                      value={form.email}
                      onChange={handleChange}
                      required
                      placeholder="you@email.com"
                      style={inputStyle}
                      onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
                      onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
                    />
                  </div>
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs" style={{ color: "#888888" }}>Subject</label>
                  <select
                    name="subject"
                    value={form.subject}
                    onChange={handleChange}
                    style={{ ...inputStyle, cursor: "pointer" }}
                    onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
                    onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
                  >
                    {subjects.map((s) => (
                      <option key={s} value={s} style={{ background: "#111111" }}>
                        {s}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="flex flex-col gap-1.5">
                  <label className="text-xs" style={{ color: "#888888" }}>Message</label>
                  <textarea
                    name="message"
                    value={form.message}
                    onChange={handleChange}
                    required
                    rows={5}
                    placeholder="How can we help?"
                    style={{ ...inputStyle, resize: "vertical" }}
                    onFocus={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
                    onBlur={(e) => (e.currentTarget.style.borderColor = "#222222")}
                  />
                </div>

                {status === "error" && (
                  <p className="text-xs" style={{ color: "#f87171" }}>
                    Something went wrong. Please try again or email us directly.
                  </p>
                )}

                <button
                  type="submit"
                  disabled={status === "sending"}
                  className="py-3 text-sm font-medium rounded-sm transition-all duration-200"
                  style={{ background: "#ffffff", color: "#000000" }}
                  onMouseEnter={(e) => (e.currentTarget.style.background = "#e0e0e0")}
                  onMouseLeave={(e) => (e.currentTarget.style.background = "#ffffff")}
                >
                  {status === "sending" ? "Sending..." : "Send Message"}
                </button>
              </form>
            )}
          </FadeIn>
        </div>
      </div>
    </section>
  );
}