global_it24_landing/nextjs_space/components/contact-form.tsx

'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { useToast } from '@/hooks/use-toast'
import { Phone, Mail, MessageSquare, User, Settings } from 'lucide-react'

export default function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    serviceType: '',
    message: ''
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (!formData.name || !formData.phone) {
      toast({
        title: "Ошибка",
        description: "Пожалуйста, заполните имя и телефон",
        variant: "destructive"
      })
      return
    }

    setIsSubmitting(true)

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      })

      const result = await response.json()

      if (response.ok) {
        toast({
          title: "Успешно!",
          description: "Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.",
        })
        setFormData({
          name: '',
          phone: '',
          email: '',
          serviceType: '',
          message: ''
        })
      } else {
        throw new Error(result.error || 'Произошла ошибка')
      }
    } catch (error) {
      toast({
        title: "Ошибка",
        description: "Не удалось отправить заявку. Попробуйте еще раз.",
        variant: "destructive"
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6 w-full">
      <div className="relative">
        <User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
        <Input
          type="text"
          placeholder="Ваше имя *"
          value={formData.name}
          onChange={(e) => setFormData({...formData, name: e.target.value})}
          className="pl-10 text-sm sm:text-base"
          required
        />
      </div>

      <div className="relative">
        <Phone className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
        <Input
          type="tel"
          placeholder="Телефон *"
          value={formData.phone}
          onChange={(e) => setFormData({...formData, phone: e.target.value})}
          className="pl-10 text-sm sm:text-base"
          required
        />
      </div>

      <div className="relative">
        <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
        <Input
          type="email"
          placeholder="Email (необязательно)"
          value={formData.email}
          onChange={(e) => setFormData({...formData, email: e.target.value})}
          className="pl-10 text-sm sm:text-base"
        />
      </div>

      <div className="relative">
        <Settings className="absolute left-3 top-3 h-4 w-4 text-gray-400 z-10" />
        <Select 
          value={formData.serviceType || "general"} 
          onValueChange={(value) => setFormData({...formData, serviceType: value})}
        >
          <SelectTrigger className="pl-10 text-sm sm:text-base">
            <SelectValue placeholder="Тип услуги" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="general">Общая консультация</SelectItem>
            <SelectItem value="residential">Видеонаблюдение для дома</SelectItem>
            <SelectItem value="commercial">Коммерческие системы</SelectItem>
            <SelectItem value="industrial">Промышленное видеонаблюдение</SelectItem>
            <SelectItem value="maintenance">Обслуживание систем</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="relative">
        <MessageSquare className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
        <Textarea
          placeholder="Дополнительная информация о вашем проекте"
          value={formData.message}
          onChange={(e) => setFormData({...formData, message: e.target.value})}
          className="pl-10 min-h-[100px] text-sm sm:text-base"
          rows={4}
        />
      </div>

      <Button 
        type="submit" 
        size="lg" 
        className="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm sm:text-base"
        disabled={isSubmitting}
      >
        {isSubmitting ? 'Отправляется...' : 'Получить консультацию'}
      </Button>

      <p className="text-xs sm:text-sm text-gray-500 text-center">
        * - обязательные поля
      </p>
    </form>
  )
}