'use client'

import { type FormEvent, useState } from 'react'
import './contact-form.css'

export default function ContactForm() {
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setSubmitted(true)
  }

  return (
    <div className="contact-form-box">
      <form className="contact-form-inner" onSubmit={handleSubmit} noValidate>
        <div>
          <h2 className="contact-form-title">Get in touch</h2>
          <p className="contact-form-description">
            Send us a message and we&apos;ll get back to you as soon as we can.
          </p>
        </div>

        <div className="contact-form-field">
          <label htmlFor="contact-email" className="contact-form-label">
            Email
          </label>
          <input
            id="contact-email"
            name="email"
            type="email"
            required
            autoComplete="email"
            placeholder="you@example.com"
            className="contact-form-input"
          />
        </div>

        <div className="contact-form-field">
          <label htmlFor="contact-phone" className="contact-form-label">
            Phone <span className="contact-form-label-optional">(optional)</span>
          </label>
          <input
            id="contact-phone"
            name="phone"
            type="tel"
            autoComplete="tel"
            placeholder="+44 7700 900000"
            className="contact-form-input"
          />
        </div>

        <div className="contact-form-field">
          <label htmlFor="contact-message" className="contact-form-label">
            Message
          </label>
          <textarea
            id="contact-message"
            name="message"
            required
            rows={6}
            placeholder="Tell us about your project..."
            className="contact-form-textarea"
          />
        </div>

        <button type="submit" className="contact-form-submit">
          {submitted ? 'Message sent' : 'Send message'}
        </button>
      </form>
    </div>
  )
}