import { useState } from 'react'
import { motion } from 'framer-motion'
import { 
  EnvelopeIcon, 
  PhoneIcon, 
  MapPinIcon 
} from '@heroicons/react/24/outline'
import { Button, Card, Input } from '../../components/UI'
import { Switch } from '@headlessui/react'

const contactInfo = [
  {
    icon: PhoneIcon,
    title: 'Телефон',
    content: '+389 XX XXX XXX',
    link: 'tel:+389XXXXXXX'
  },
  {
    icon: EnvelopeIcon,
    title: 'Емаил',
    content: 'contact@imk.mk',
    link: 'mailto:contact@imk.mk'
  },
  {
    icon: MapPinIcon,
    title: 'Адреса',
    content: 'Скопје, Македонија',
    link: 'https://goo.gl/maps/your-location'
  }
]

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Contact() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    company: '',
    email: '',
    message: ''
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitStatus, setSubmitStatus] = useState(null)
  const [agreed, setAgreed] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsSubmitting(true)
    
    try {
      const response = await fetch('https://formsubmit.co/taratur@gmail.com', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      })

      if (response.ok) {
        setSubmitStatus('success')
        setFormData({
          firstName: '',
          lastName: '',
          company: '',
          email: '',
          message: ''
        })
      } else {
        setSubmitStatus('error')
      }
    } catch (error) {
      setSubmitStatus('error')
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  return (
    <div className="isolate px-6 bg-gradient-to-b from-primary-900 to-primary-700 sm:py-32 lg:px-8 h-screen">
      <div className="mx-auto max-w-2xl text-center mt-10">
        <h2 className="text-3xl font-bold tracking-tight text-white sm:text-3xl">
          Пишете ни порака | Закажете средба
        </h2>
      </div>
      <form 
        onSubmit={handleSubmit} 
        className="mx-auto mt-16 max-w-xl sm:mt-20"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
          <div>
            <label 
              htmlFor="first-name" 
              className="block text-sm font-semibold leading-6 text-white"
            >
              Име
            </label>
            <div className="mt-2.5">
              <input
                type="text"
                name="first-name"
                id="first-name"
                autoComplete="given-name"
                value={formData.firstName}
                onChange={handleChange}
                className="block w-full rounded-md border-0 px-3.5 py-2 text-neutral-900 shadow-sm 
                ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 
                focus:ring-2 focus:ring-inset focus:ring-primary-600 
                sm:text-sm sm:leading-6"
              />
            </div>
          </div>
          <div>
            <label 
              htmlFor="last-name" 
              className="block text-sm font-semibold leading-6 text-white"
            >
              Презиме
            </label>
            <div className="mt-2.5">
              <input
                type="text"
                name="last-name"
                id="last-name"
                autoComplete="family-name"
                value={formData.lastName}
                onChange={handleChange}
                className="block w-full rounded-md border-0 px-3.5 py-2 text-neutral-900 shadow-sm 
                ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 
                focus:ring-2 focus:ring-inset focus:ring-primary-600 
                sm:text-sm sm:leading-6"
              />
            </div>
          </div>
          <div className="sm:col-span-2">
            <label 
              htmlFor="company" 
              className="block text-sm font-semibold leading-6 text-white"
            >
              Компанија
            </label>
            <div className="mt-2.5">
              <input
                type="text"
                name="company"
                id="company"
                autoComplete="organization"
                value={formData.company}
                onChange={handleChange}
                className="block w-full rounded-md border-0 px-3.5 py-2 text-neutral-900 shadow-sm 
                ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 
                focus:ring-2 focus:ring-inset focus:ring-primary-600 
                sm:text-sm sm:leading-6"
              />
            </div>
          </div>
          <div className="sm:col-span-2">
            <label 
              htmlFor="email" 
              className="block text-sm font-semibold leading-6 text-white"
            >
              Мејл
            </label>
            <div className="mt-2.5">
              <input
                type="email"
                name="email"
                id="email"
                autoComplete="email"
                value={formData.email}
                onChange={handleChange}
                className="block w-full rounded-md border-0 px-3.5 py-2 text-neutral-900 shadow-sm 
                ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 
                focus:ring-2 focus:ring-inset focus:ring-primary-600 
                sm:text-sm sm:leading-6"
              />
            </div>
          </div>

          <div className="sm:col-span-2">
            <label 
              htmlFor="message" 
              className="block text-sm font-semibold leading-6 text-white"
            >
              Порака
            </label>
            <div className="mt-2.5">
              <textarea
                name="message"
                id="message"
                rows={4}
                value={formData.message}
                onChange={handleChange}
                className="block w-full rounded-md border-0 px-3.5 py-2 text-neutral-900 shadow-sm 
                ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 
                focus:ring-2 focus:ring-inset focus:ring-primary-600 
                sm:text-sm sm:leading-6"
              />
            </div>
          </div>
          <Switch.Group as="div" className="flex gap-x-4 sm:col-span-2">
          </Switch.Group>
        </div>
        <input type="hidden" name="_next" value="https://imk.mk/"></input>
        <div className="mt-10">
          <button
            type="submit"
            className="block w-full rounded-md bg-primary-600 px-3.5 py-2.5 text-center text-sm 
            font-semibold text-white shadow-sm hover:bg-primary-700 
            focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 
            focus-visible:outline-primary-600 transition-colors duration-200"
          >
            Испрати
          </button>
        </div>
      </form>
    </div>
  )
}