"use client"

import * as React from "react"
import { Mail, Send, CheckCircle2 } from "lucide-react"

export function Contact() {
  const [name, setName] = React.useState("")
  const [email, setEmail] = React.useState("")
  const [subject, setSubject] = React.useState("")
  const [message, setMessage] = React.useState("")
  const [submitted, setSubmitted] = React.useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    
    // In a real application, you would send this data to an API route or third-party service.
    // For now, we will simulate a successful send and also provide a mailto option.
    setSubmitted(true)
    
    // Reset form fields
    setName("")
    setEmail("")
    setSubject("")
    setMessage("")
  }

  return (
    <section id="contact" className="py-20 bg-muted/30 transition-colors duration-300 border-t border-border/20">
      <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Get In Touch
          </h2>
          <p className="mt-4 text-muted-foreground">
            Have a project in mind or want to discuss consulting opportunities? Fill out the form below or reach out directly via email.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
          {/* Direct Contact Info Card */}
          <div className="md:col-span-4 border border-border/40 bg-background rounded-2xl p-6 shadow-xs flex flex-col justify-between h-full min-h-[220px]">
            <div className="space-y-4">
              <h3 className="text-base font-bold text-foreground">Direct Contact</h3>
              <p className="text-xs text-muted-foreground leading-relaxed">
                If you prefer to use your own email client, feel free to write me directly.
              </p>
            </div>
            
            <a
              href="mailto:bdmc@buadh-brath.com"
              className="mt-6 inline-flex items-center justify-center gap-2 rounded-lg border border-cyan-500/30 dark:border-cyan-500/20 bg-cyan-500/5 px-4 py-3 text-sm font-semibold text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/10 transition-all text-center"
            >
              <Mail className="h-4 w-4" />
              <span>bdmc@buadh-brath.com</span>
            </a>
          </div>

          {/* Form Card */}
          <div className="md:col-span-8 border border-border/40 bg-background rounded-2xl p-6 md:p-8 shadow-xs">
            {submitted ? (
              <div className="text-center py-10 space-y-4">
                <div className="inline-flex p-3 rounded-full bg-emerald-500/10 text-emerald-500">
                  <CheckCircle2 className="h-8 w-8" />
                </div>
                <h3 className="text-lg font-bold text-foreground">Message Sent!</h3>
                <p className="text-sm text-muted-foreground max-w-sm mx-auto">
                  Thank you for reaching out, Brian. I will review your message and get back to you shortly.
                </p>
                <button
                  onClick={() => setSubmitted(false)}
                  className="mt-4 text-xs font-semibold text-cyan-600 dark:text-cyan-400 hover:underline cursor-pointer"
                >
                  Send another message
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {/* Name Input */}
                  <div className="space-y-1.5">
                    <label htmlFor="name" className="text-xs font-semibold text-muted-foreground">
                      Your Name
                    </label>
                    <input
                      type="text"
                      id="name"
                      required
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      placeholder="John Doe"
                      className="w-full rounded-lg border border-border bg-background px-3.5 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-cyan-500 focus:outline-hidden transition-colors"
                    />
                  </div>

                  {/* Email Input */}
                  <div className="space-y-1.5">
                    <label htmlFor="email" className="text-xs font-semibold text-muted-foreground">
                      Email Address
                    </label>
                    <input
                      type="email"
                      id="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="john@example.com"
                      className="w-full rounded-lg border border-border bg-background px-3.5 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-cyan-500 focus:outline-hidden transition-colors"
                    />
                  </div>
                </div>

                {/* Subject Input */}
                <div className="space-y-1.5">
                  <label htmlFor="subject" className="text-xs font-semibold text-muted-foreground">
                    Subject
                  </label>
                  <input
                    type="text"
                    id="subject"
                    required
                    value={subject}
                    onChange={(e) => setSubject(e.target.value)}
                    placeholder="Consulting Project / Job Opportunity"
                    className="w-full rounded-lg border border-border bg-background px-3.5 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-cyan-500 focus:outline-hidden transition-colors"
                  />
                </div>

                {/* Message Input */}
                <div className="space-y-1.5">
                  <label htmlFor="message" className="text-xs font-semibold text-muted-foreground">
                    Message
                  </label>
                  <textarea
                    id="message"
                    required
                    rows={4}
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    placeholder="Hi Brian, I'd like to talk about..."
                    className="w-full rounded-lg border border-border bg-background px-3.5 py-2 text-sm text-foreground placeholder-muted-foreground focus:border-cyan-500 focus:outline-hidden transition-colors resize-none"
                  />
                </div>

                {/* Submit Button */}
                <button
                  type="submit"
                  className="w-full inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-xs hover:bg-primary/95 transition-all cursor-pointer"
                >
                  <span>Send Message</span>
                  <Send className="ml-2 h-4 w-4" />
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}