"use client"

import { useState } from "react"
import { Mail } from "lucide-react"
import { BlueskyIcon } from "@/components/bluesky-icon"
import { LinkedInIcon } from "@/components/linkedin-icon"
import { sendEmail } from "@/lib/actions"

export default function Contact() {
  const [formStatus, setFormStatus] = useState<{
    success?: boolean
    message?: string
  }>({})
  const [isSubmitting, setIsSubmitting] = useState(false)

  async function handleSubmit(formData: FormData) {
    setIsSubmitting(true)
    try {
      const result = await sendEmail(formData)
      setFormStatus({
        success: result.success,
        message: result.message,
      })
    } catch (error) {
      setFormStatus({
        success: false,
        message: "Something went wrong. Please try again later.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <section id="contact" className="py-20 dark-section-alt">
      <div className="container mx-auto px-4 md:px-6">
        {/* Section heading */}
        <div className="relative text-center mb-16">
          <h2 className="text-[6rem] font-bold text-purple-900/20 uppercase absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full">
            CONTACT
          </h2>
          <p className="text-3xl font-semibold text-purple-200 relative z-10">
            Get in Touch
            <span className="block w-24 h-1 bg-primary mx-auto mt-4"></span>
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
          <div className="lg:col-span-1">
            <h3 className="text-xl font-semibold mb-6 text-purple-300">CONTACT INFO</h3>

            <div className="flex items-center mb-6">
              <Mail className="w-5 h-5 text-primary mr-3" />
              <span className="text-gray-300">contact@ameliapetrie.com</span>
            </div>

            <h3 className="text-xl font-semibold mb-4 text-purple-300">FOLLOW ME</h3>
            <div className="flex space-x-3">
              <a
                href="https://web-cdn.bsky.app/profile/cyndergate.bsky.social"
                target="_blank"
                rel="noopener noreferrer"
                className="text-purple-300 hover:text-primary transition-colors"
                aria-label="Bluesky"
              >
                <BlueskyIcon />
              </a>
              <a
                href="https://linkedin.com/in/amelia-petrie-184503349"
                target="_blank"
                rel="noopener noreferrer"
                className="text-purple-300 hover:text-primary transition-colors"
                aria-label="LinkedIn"
              >
                <LinkedInIcon />
              </a>
            </div>
          </div>

          <div className="lg:col-span-2">
            <h3 className="text-xl font-semibold mb-6 text-purple-300">SEND ME A NOTE</h3>
            <form action={handleSubmit} className="glossy-card p-6 rounded-3xl">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <input
                  type="text"
                  name="name"
                  placeholder="Name"
                  className="w-full px-4 py-3 bg-purple-900/30 border border-purple-700/30 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-white placeholder-purple-400"
                  required
                />
                <input
                  type="email"
                  name="email"
                  placeholder="Email"
                  className="w-full px-4 py-3 bg-purple-900/30 border border-purple-700/30 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-white placeholder-purple-400"
                  required
                />
              </div>
              <textarea
                name="message"
                rows={5}
                placeholder="Tell me more about your needs..."
                className="w-full px-4 py-3 bg-purple-900/30 border border-purple-700/30 rounded-2xl focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary mb-6 text-white placeholder-purple-400"
                required
              ></textarea>
              <div className="text-center">
                <button type="submit" className="cute-button" disabled={isSubmitting}>
                  {isSubmitting ? "Sending..." : "Send Message"}
                </button>

                {formStatus.message && (
                  <div className={`mt-4 text-center ${formStatus.success ? "text-green-400" : "text-red-400"}`}>
                    {formStatus.message}
                  </div>
                )}
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}