'use client'

import { useState } from 'react'

export default function ContactForm() {
  const [sent, setSent] = useState(false)
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' })
  const [loading, setLoading] = useState(false)

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    // Replace with POST to Power Automate endpoint
    await new Promise(r => setTimeout(r, 800))
    setLoading(false)
    setSent(true)
  }

  return (
    <>
      <section className="bg-hero-gradient text-white py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="badge bg-white/15 text-white mb-4">Contact</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">Get in touch</h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Have a question, a suggestion, or want to volunteer? We'd love to hear from you.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 bg-metro-light">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
            {/* Contact info */}
            <div>
              <h2 className="text-2xl font-bold text-metro-navy mb-6">Contact information</h2>
              <div className="space-y-5">
                {[
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} className="w-5 h-5" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                      </svg>
                    ),
                    label: 'Email',
                    value: 'hello@plymouthmetro.co.uk',
                    href: 'mailto:hello@plymouthmetro.co.uk',
                  },
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5" aria-hidden="true">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                      </svg>
                    ),
                    label: 'Twitter / X',
                    value: '@PlymouthMetro',
                    href: 'https://twitter.com/PlymouthMetro',
                  },
                  {
                    icon: (
                      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5" aria-hidden="true">
                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                      </svg>
                    ),
                    label: 'Facebook',
                    value: 'facebook.com/PlymouthMetro',
                    href: 'https://facebook.com/PlymouthMetro',
                  },
                ].map(item => (
                  <div key={item.label} className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-xl bg-white border border-metro-border flex items-center justify-center text-metro-sky flex-shrink-0">
                      {item.icon}
                    </div>
                    <div>
                      <p className="text-sm font-medium text-metro-muted">{item.label}</p>
                      <a
                        href={item.href}
                        className="text-metro-navy hover:text-metro-sky transition-colors font-medium"
                        target={item.href.startsWith('http') ? '_blank' : undefined}
                        rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
                      >
                        {item.value}
                      </a>
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-10 bg-white rounded-2xl border border-metro-border p-6">
                <h3 className="font-semibold text-metro-navy mb-2">Press enquiries</h3>
                <p className="text-sm text-metro-muted leading-relaxed mb-3">
                  For press and media enquiries, please email us with your publication name
                  and deadline. We aim to respond to all media enquiries within 24 hours.
                </p>
                <a
                  href="mailto:press@plymouthmetro.co.uk"
                  className="text-metro-sky font-medium text-sm hover:underline"
                >
                  press@plymouthmetro.co.uk
                </a>
              </div>
            </div>

            {/* Form card */}
            <div className="bg-white rounded-2xl border border-metro-border shadow-sm p-6 sm:p-8">
              {sent ? (
                <div className="flex flex-col items-center text-center py-8">
                  <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
                         className="w-8 h-8 text-green-600" aria-hidden="true">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                  </div>
                  <h2 className="text-2xl font-bold text-metro-navy mb-2">Message sent!</h2>
                  <p className="text-metro-muted">
                    Thank you for getting in touch. We'll get back to you as soon as possible.
                  </p>
                </div>
              ) : (
                <>
                  <h2 className="text-2xl font-bold text-metro-navy mb-6">Send a message</h2>
                  <form onSubmit={handleSubmit} noValidate className="space-y-4">
                    <div>
                      <label htmlFor="c-name" className="block text-sm font-medium text-metro-navy mb-1.5">
                        Your name <span className="text-red-500" aria-hidden="true">*</span>
                      </label>
                      <input
                        id="c-name"
                        name="name"
                        type="text"
                        required
                        autoComplete="name"
                        value={form.name}
                        onChange={handleChange}
                        className="input-field"
                      />
                    </div>
                    <div>
                      <label htmlFor="c-email" className="block text-sm font-medium text-metro-navy mb-1.5">
                        Email address <span className="text-red-500" aria-hidden="true">*</span>
                      </label>
                      <input
                        id="c-email"
                        name="email"
                        type="email"
                        required
                        autoComplete="email"
                        value={form.email}
                        onChange={handleChange}
                        className="input-field"
                      />
                    </div>
                    <div>
                      <label htmlFor="c-subject" className="block text-sm font-medium text-metro-navy mb-1.5">
                        Subject <span className="text-red-500" aria-hidden="true">*</span>
                      </label>
                      <select
                        id="c-subject"
                        name="subject"
                        required
                        value={form.subject}
                        onChange={handleChange}
                        className="input-field"
                      >
                        <option value="">Please select…</option>
                        <option value="general">General enquiry</option>
                        <option value="volunteer">I'd like to volunteer</option>
                        <option value="press">Press / media enquiry</option>
                        <option value="partner">Partnership or sponsorship</option>
                        <option value="technical">Technical question about the proposal</option>
                        <option value="other">Other</option>
                      </select>
                    </div>
                    <div>
                      <label htmlFor="c-message" className="block text-sm font-medium text-metro-navy mb-1.5">
                        Message <span className="text-red-500" aria-hidden="true">*</span>
                      </label>
                      <textarea
                        id="c-message"
                        name="message"
                        required
                        rows={5}
                        value={form.message}
                        onChange={handleChange}
                        className="input-field resize-none"
                      />
                    </div>
                    <button
                      type="submit"
                      disabled={loading}
                      className="w-full btn-primary py-3.5 disabled:opacity-60 disabled:cursor-not-allowed"
                    >
                      {loading ? 'Sending…' : 'Send Message'}
                    </button>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}