'use client'

import { useState } from 'react'
import { Mail, MapPin, Github, Linkedin, Send } from 'lucide-react'
import { SectionHeader } from './section-header'

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

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setStatus('sending')
    // Simulate async submit — wire up to a real email service (e.g. Resend) later
    await new Promise((res) => setTimeout(res, 1200))
    setStatus('sent')
  }

  return (
    <section id="contact" className="py-24 px-6 max-w-5xl mx-auto">
      <SectionHeader label="Contact" />

      <div className="mt-4 mb-12">
        <h2 className="font-serif text-3xl font-semibold text-foreground text-balance">
          Let&apos;s work together
        </h2>
        <p className="mt-3 text-muted-foreground max-w-md leading-relaxed">
          Whether you have a project in mind, want to collaborate, or just want to say hello — my
          inbox is always open.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-16">
        {/* Contact info */}
        <div className="space-y-8">
          <div className="space-y-5">
            <div className="flex items-center gap-4">
              <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 shrink-0">
                <Mail size={18} className="text-primary" />
              </div>
              <div>
                <p className="text-xs text-muted-foreground mb-0.5">Email</p>
                <a
                  href="mailto:uprety.nitish@gmail.com"
                  className="text-sm font-medium text-foreground hover:text-primary transition-colors"
                >
                  uprety.nitish@gmail.com
                </a>
              </div>
            </div>

            <div className="flex items-center gap-4">
              <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 shrink-0">
                <MapPin size={18} className="text-primary" />
              </div>
              <div>
                <p className="text-xs text-muted-foreground mb-0.5">Location</p>
                <p className="text-sm font-medium text-foreground">
                  Bhaktapur, Nepal &middot; Remote worldwide
                </p>
              </div>
            </div>
          </div>

          <div className="pt-6 border-t border-border">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-4">
              Find me online
            </p>
            <div className="flex items-center gap-4">
              <a
                href="https://github.com/nitishneputer"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
                aria-label="GitHub"
              >
                <Github size={16} /> GitHub
              </a>
              <a
                href="https://linkedin.com/in/nitishrajuprety"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
                aria-label="LinkedIn"
              >
                <Linkedin size={16} /> LinkedIn
              </a>
            </div>
          </div>
        </div>

        {/* Contact form */}
        {status === 'sent' ? (
          <div className="flex flex-col items-start justify-center gap-3">
            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
              <Send size={20} className="text-primary" />
            </div>
            <p className="font-serif text-xl font-semibold text-foreground">Message sent!</p>
            <p className="text-sm text-muted-foreground">
              Thank you for reaching out. I will get back to you as soon as possible.
            </p>
            <button
              onClick={() => { setStatus('idle'); setForm({ name: '', email: '', message: '' }) }}
              className="mt-2 text-sm text-primary hover:underline underline-offset-4"
            >
              Send another message
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-5" noValidate>
            <div>
              <label htmlFor="name" className="block text-xs font-medium text-muted-foreground mb-1.5">
                Name
              </label>
              <input
                id="name"
                name="name"
                type="text"
                required
                value={form.name}
                onChange={handleChange}
                placeholder="Your name"
                className="w-full px-4 py-2.5 rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring transition-shadow"
              />
            </div>
            <div>
              <label htmlFor="email" className="block text-xs font-medium text-muted-foreground mb-1.5">
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                required
                value={form.email}
                onChange={handleChange}
                placeholder="you@example.com"
                className="w-full px-4 py-2.5 rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring transition-shadow"
              />
            </div>
            <div>
              <label htmlFor="message" className="block text-xs font-medium text-muted-foreground mb-1.5">
                Message
              </label>
              <textarea
                id="message"
                name="message"
                required
                value={form.message}
                onChange={handleChange}
                placeholder="Tell me about your project or just say hello..."
                rows={5}
                className="w-full px-4 py-2.5 rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring transition-shadow resize-none"
              />
            </div>
            <button
              type="submit"
              disabled={status === 'sending'}
              className="inline-flex items-center gap-2 px-6 py-3 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-60"
            >
              {status === 'sending' ? 'Sending...' : (
                <>
                  Send message <Send size={14} />
                </>
              )}
            </button>
          </form>
        )}
      </div>
    </section>
  )
}
