"use client"

import { useState } from "react"
import Link from "next/link"
import { Mail, Phone, MapPin, ArrowLeft, Send, MessageCircle, Linkedin } from "lucide-react"

export default function ContactsPage() {
  const [formState, setFormState] = useState({
    name: "",
    company: "",
    email: "",
    phone: "",
    message: "",
  })
  const [submitted, setSubmitted] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    setFormState((prev) => ({ ...prev, [e.target.name]: e.target.value }))
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError(null)
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formState),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || "Something went wrong")
      setSubmitted(true)
    } catch (err: any) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <main className="min-h-screen bg-zinc-950 font-sans">
      {/* Header bar */}
      <div className="border-b border-white/8 px-6 py-4">
        <Link
          href="/"
          className="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          <span className="text-sm">Back to Home</span>
        </Link>
      </div>

      <div className="max-w-6xl mx-auto px-6 py-16 md:py-24">
        {/* Page heading */}
        <div className="mb-14">
          <p className="text-xs font-mono uppercase tracking-widest text-indigo-400 mb-3">Get in touch</p>
          <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-indigo-50 text-balance">
            Let&apos;s talk about your infrastructure
          </h1>
          <p className="mt-4 text-lg text-indigo-100/60 max-w-xl leading-relaxed">
            Tell us about your project and we&apos;ll get back to you within one business day.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-5 gap-10">
          {/* Left column — contact details */}
          <div className="lg:col-span-2 flex flex-col gap-6">

            {/* Direct contacts */}
            <div className="backdrop-blur-md bg-white/4 border border-white/10 rounded-2xl p-6 flex flex-col gap-4 animate-breathe-glow">
              <p className="text-xs font-mono uppercase tracking-widest text-indigo-400 mb-1">Direct contact</p>

              <a
                href="mailto:info@aidynamics.am"
                className="flex items-center gap-4 p-3 rounded-xl hover:bg-indigo-600/10 transition-all group"
              >
                <div className="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-600/20 text-indigo-400 group-hover:bg-indigo-600/30 shrink-0 transition-colors">
                  <Mail className="w-4 h-4" />
                </div>
                <div>
                  <p className="text-xs text-indigo-200/50 uppercase tracking-wider mb-0.5">Email</p>
                  <p className="text-indigo-50 text-sm font-medium">info@aidynamics.am</p>
                </div>
              </a>

              <a
                href="tel:+37444818887"
                className="flex items-center gap-4 p-3 rounded-xl hover:bg-indigo-600/10 transition-all group"
              >
                <div className="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-600/20 text-indigo-400 group-hover:bg-indigo-600/30 shrink-0 transition-colors">
                  <Phone className="w-4 h-4" />
                </div>
                <div>
                  <p className="text-xs text-indigo-200/50 uppercase tracking-wider mb-0.5">Phone</p>
                  <p className="text-indigo-50 text-sm font-medium">+374 44 818 887</p>
                </div>
              </a>

              <div className="flex items-center gap-4 p-3 rounded-xl">
                <div className="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-600/20 text-indigo-400 shrink-0">
                  <MapPin className="w-4 h-4" />
                </div>
                <div>
                  <p className="text-xs text-indigo-200/50 uppercase tracking-wider mb-0.5">Service area</p>
                  <p className="text-indigo-50 text-sm font-medium">Yerevan, Armenia</p>
                  <p className="text-indigo-200/50 text-xs mt-0.5">Remote engagements available</p>
                </div>
              </div>
            </div>

            {/* Social / messaging */}
            <div className="backdrop-blur-md bg-white/4 border border-white/10 rounded-2xl p-6">
              <p className="text-xs font-mono uppercase tracking-widest text-indigo-400 mb-4">Also reach us on</p>
              <div className="flex flex-col gap-3">
                <a
                  href="https://wa.me/37444818887"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-3 rounded-xl border border-white/8 hover:border-emerald-500/30 hover:bg-emerald-500/8 transition-all group"
                >
                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500/15 text-emerald-400 group-hover:bg-emerald-500/25 shrink-0 transition-colors">
                    <MessageCircle className="w-4 h-4" />
                  </div>
                  <span className="text-indigo-100/80 text-sm group-hover:text-emerald-300 transition-colors">WhatsApp</span>
                </a>

                <a
                  href="https://t.me/aidynamics"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-3 rounded-xl border border-white/8 hover:border-sky-400/30 hover:bg-sky-400/8 transition-all group"
                >
                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-sky-400/15 text-sky-400 group-hover:bg-sky-400/25 shrink-0 transition-colors">
                    <Send className="w-4 h-4" />
                  </div>
                  <span className="text-indigo-100/80 text-sm group-hover:text-sky-300 transition-colors">Telegram</span>
                </a>

                <a
                  href="https://linkedin.com/company/aidynamics"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 p-3 rounded-xl border border-white/8 hover:border-blue-400/30 hover:bg-blue-400/8 transition-all group"
                >
                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500/15 text-blue-400 group-hover:bg-blue-500/25 shrink-0 transition-colors">
                    <Linkedin className="w-4 h-4" />
                  </div>
                  <span className="text-indigo-100/80 text-sm group-hover:text-blue-300 transition-colors">LinkedIn</span>
                </a>
              </div>
            </div>

          </div>

          {/* Right column — inquiry form */}
          <div className="lg:col-span-3">
            <div className="backdrop-blur-md bg-white/4 border border-white/10 rounded-2xl p-8 md:p-10 animate-breathe-glow">
              {submitted ? (
                <div className="flex flex-col items-center justify-center py-16 text-center">
                  <div className="w-16 h-16 rounded-full bg-indigo-600/20 flex items-center justify-center mb-6">
                    <Send className="w-7 h-7 text-indigo-400" />
                  </div>
                  <h2 className="text-2xl font-semibold text-indigo-50 mb-3">Message received</h2>
                  <p className="text-indigo-100/60 max-w-sm leading-relaxed">
                    Thank you for reaching out. We&apos;ll review your inquiry and respond within one business day.
                  </p>
                </div>
              ) : (
                <>
                  <p className="text-xs font-mono uppercase tracking-widest text-indigo-400 mb-6">Send an inquiry</p>
                  <form onSubmit={handleSubmit} className="flex flex-col gap-5">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      <div className="flex flex-col gap-1.5">
                        <label htmlFor="name" className="text-xs text-indigo-200/60 uppercase tracking-wider">
                          Full name <span className="text-indigo-400">*</span>
                        </label>
                        <input
                          id="name"
                          name="name"
                          type="text"
                          required
                          value={formState.name}
                          onChange={handleChange}
                          placeholder="John Smith"
                          className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-indigo-50 placeholder:text-indigo-200/25 text-sm focus:outline-none focus:border-indigo-500/60 focus:bg-indigo-600/8 transition-all"
                        />
                      </div>
                      <div className="flex flex-col gap-1.5">
                        <label htmlFor="company" className="text-xs text-indigo-200/60 uppercase tracking-wider">
                          Company
                        </label>
                        <input
                          id="company"
                          name="company"
                          type="text"
                          value={formState.company}
                          onChange={handleChange}
                          placeholder="Acme Corp"
                          className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-indigo-50 placeholder:text-indigo-200/25 text-sm focus:outline-none focus:border-indigo-500/60 focus:bg-indigo-600/8 transition-all"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      <div className="flex flex-col gap-1.5">
                        <label htmlFor="email" className="text-xs text-indigo-200/60 uppercase tracking-wider">
                          Email <span className="text-indigo-400">*</span>
                        </label>
                        <input
                          id="email"
                          name="email"
                          type="email"
                          required
                          value={formState.email}
                          onChange={handleChange}
                          placeholder="you@company.com"
                          className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-indigo-50 placeholder:text-indigo-200/25 text-sm focus:outline-none focus:border-indigo-500/60 focus:bg-indigo-600/8 transition-all"
                        />
                      </div>
                      <div className="flex flex-col gap-1.5">
                        <label htmlFor="phone" className="text-xs text-indigo-200/60 uppercase tracking-wider">
                          Phone
                        </label>
                        <input
                          id="phone"
                          name="phone"
                          type="tel"
                          value={formState.phone}
                          onChange={handleChange}
                          placeholder="+374 xx xxx xxx"
                          className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-indigo-50 placeholder:text-indigo-200/25 text-sm focus:outline-none focus:border-indigo-500/60 focus:bg-indigo-600/8 transition-all"
                        />
                      </div>
                    </div>

                    <div className="flex flex-col gap-1.5">
                      <label htmlFor="message" className="text-xs text-indigo-200/60 uppercase tracking-wider">
                        How can we help? <span className="text-indigo-400">*</span>
                      </label>
                      <textarea
                        id="message"
                        name="message"
                        required
                        rows={5}
                        value={formState.message}
                        onChange={handleChange}
                        placeholder="Describe your project, infrastructure needs, or the challenge you're facing..."
                        className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-indigo-50 placeholder:text-indigo-200/25 text-sm focus:outline-none focus:border-indigo-500/60 focus:bg-indigo-600/8 transition-all resize-none leading-relaxed"
                      />
                    </div>

                    <button
                      type="submit"
                      disabled={loading}
                      className="mt-1 w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 disabled:opacity-60 disabled:cursor-not-allowed text-white font-medium text-sm px-6 py-3.5 rounded-xl transition-all"
                    >
                      <Send className="w-4 h-4" />
                      {loading ? "Sending…" : "Send inquiry"}
                    </button>

                    {error && (
                      <p className="text-center text-sm text-red-400">{error}</p>
                    )}

                    <p className="text-center text-xs text-indigo-200/35">
                      We respond within one business day. No spam, ever.
                    </p>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}