"use client"

import type React from "react"

import { useState } from "react"
import { Mail, Linkedin, Github, MessageCircle } from "lucide-react"
import { useLanguage } from "@/context/language-context"

export default function Contact() {
  const { t } = useLanguage()
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  })
  const [submitted, setSubmitted] = useState(false)

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    const whatsappNumber = "081395939188"
    const message = `Hello! My name is ${formData.name}.\n\nEmail: ${formData.email}\n\nMessage: ${formData.message}`
    const encodedMessage = encodeURIComponent(message)
    const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`

    // Open WhatsApp in a new window
    window.open(whatsappUrl, "_blank")

    // Show success message
    setSubmitted(true)
    setFormData({ name: "", email: "", message: "" })
    setTimeout(() => setSubmitted(false), 3000)
  }

  return (
    <section id="contact" className="py-20 px-4 sm:px-6 lg:px-8 bg-card">
      <div className="max-w-4xl mx-auto">
        <h2 className="text-4xl font-bold mb-12 text-center">{t("contact_title")}</h2>

        <div className="grid md:grid-cols-2 gap-12">
          <div>
            <p className="text-lg text-muted-foreground mb-8">{t("contact_description")}</p>

            <div className="space-y-6">
              <a
                href="mailto:febrytriyadi06@gmail.com"
                className="flex items-center gap-4 p-4 bg-background rounded-lg hover:border-primary border border-border transition-colors"
              >
                <Mail className="text-primary" size={24} />
                <div>
                  <p className="font-semibold">{t("email")}</p>
                  <p className="text-sm text-muted-foreground">febrytriyadi06@gmail.com</p>
                </div>
              </a>

              <a
                href="https://www.linkedin.com/in/febry-triyadi"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-4 p-4 bg-background rounded-lg hover:border-primary border border-border transition-colors"
              >
                <Linkedin className="text-primary" size={24} />
                <div>
                  <p className="font-semibold">{t("linkedin")}</p>
                  <p className="text-sm text-muted-foreground">linkedin.com/in/febrytriyadi</p>
                </div>
              </a>

              <a
                href="https://github.com/febrytriyadi"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-4 p-4 bg-background rounded-lg hover:border-primary border border-border transition-colors"
              >
                <Github className="text-primary" size={24} />
                <div>
                  <p className="font-semibold">{t("github")}</p>
                  <p className="text-sm text-muted-foreground">github.com/febrytriyadi</p>
                </div>
              </a>
            </div>
          </div>

          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="name" className="block text-sm font-medium mb-2">
                {t("name")}
              </label>
              <input
                type="text"
                id="name"
                name="name"
                value={formData.name}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:border-primary transition-colors"
                placeholder={t("your_name")}
              />
            </div>

            <div>
              <label htmlFor="email" className="block text-sm font-medium mb-2">
                {t("email")}
              </label>
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                required
                className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:border-primary transition-colors"
                placeholder={t("your_email")}
              />
            </div>

            <div>
              <label htmlFor="message" className="block text-sm font-medium mb-2">
                {t("message")}
              </label>
              <textarea
                id="message"
                name="message"
                value={formData.message}
                onChange={handleChange}
                required
                rows={5}
                className="w-full px-4 py-2 bg-background border border-border rounded-lg focus:outline-none focus:border-primary transition-colors resize-none"
                placeholder={t("your_message")}
              />
            </div>

            <button
              type="submit"
              className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
            >
              <MessageCircle size={20} />
              {submitted ? t("message_sent") : t("send_whatsapp")}
            </button>
          </form>
        </div>
      </div>
    </section>
  )
}