"use client";

import type React from "react";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { MessageSquare } from "lucide-react";
import { useLanguage } from "@/contexts/language-context";

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

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    console.log(formData);
  };

  return (
    <section className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            {t.contact.title}
          </h2>
          <p className="text-lg text-muted-foreground">{t.contact.subtitle}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Form */}
          <div className="bg-muted rounded-xl p-8 border border-border">
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  {t.contact.fields.name}
                </label>
                <Input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  placeholder={t.contact.fields.name}
                  className="bg-background border-border"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  {t.contact.fields.email}
                </label>
                <Input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder={t.contact.fields.email}
                  className="bg-background border-border"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">
                  {t.contact.fields.message}
                </label>
                <textarea
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  placeholder={t.contact.fields.message}
                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  rows={4}
                  required
                />
              </div>

              <Button className="w-full bg-primary hover:bg-primary/90">
                {t.contact.fields.send}
              </Button>
            </form>
          </div>

          {/* Contact Info */}
          <div className="flex flex-col justify-between space-y-6">
            <div className="bg-background rounded-xl p-6 border border-border">
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <MessageSquare size={24} className="text-primary" />
              </div>
              <h3 className="font-semibold text-foreground mb-2">
                {t.contact.whatsapp.title}
              </h3>
              <p className="text-muted-foreground mb-4">
                {t.contact.whatsapp.desc}
              </p>
              <Button
                variant="outline"
                className="w-full border-primary text-primary hover:bg-primary/5 bg-transparent"
              >
                Open WhatsApp
              </Button>
            </div>

            <div className="bg-background rounded-xl p-6 border border-border">
              <h3 className="font-semibold text-foreground mb-2">
                {t.contact.email.title}
              </h3>
              <p className="text-muted-foreground">{t.contact.email.address}</p>
            </div>

            <div className="bg-background rounded-xl p-6 border border-border">
              <h3 className="font-semibold text-foreground mb-2">
                {t.contact.response.title}
              </h3>
              <p className="text-muted-foreground">{t.contact.response.desc}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}