import type { FormEvent } from 'react';
import { Send } from 'lucide-react';
import { useState } from 'react';
import { GlassCard } from '../ui/GlassCard';
import { NeonButton } from '../ui/NeonButton';
import { SectionShell } from '../ui/SectionShell';

export function ContactForm() {
  const [sent, setSent] = useState(false);

  function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <section id="contact" className="relative py-20 md:py-28">
      <div className="absolute inset-0 bg-gradient-to-t from-nebula/40 to-transparent" />
      <SectionShell
        eyebrow="Contact"
        title="Konsultasi & Demo"
        subtitle="Ceritakan kebutuhan integrasi Anda — tim solutions akan merespons dalam 1–2 hari kerja."
      >
        <div className="mx-auto max-w-2xl">
          <GlassCard hover={false}>
            {sent ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.96 }}
                animate={{ opacity: 1, scale: 1 }}
                className="py-10 text-center"
              >
                <p className="font-display text-2xl font-bold text-white">Terima kasih!</p>
                <p className="mt-2 text-slate-400">Pesan Anda telah direkam (demo). Hubungi sales untuk follow-up nyata.</p>
              </motion.div>
            ) : (
              <form onSubmit={onSubmit} className="space-y-5">
                <div className="grid gap-4 sm:grid-cols-2">
                  <div>
                    <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                      Nama
                    </label>
                    <input
                      required
                      name="name"
                      className="w-full rounded-xl border border-white/10 bg-slate-950/60 px-4 py-3 text-sm text-white outline-none ring-cyan-400/40 transition focus:border-cyan-400/50 focus:ring-2"
                      placeholder="Nama lengkap"
                    />
                  </div>
                  <div>
                    <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                      Email korporat
                    </label>
                    <input
                      required
                      type="email"
                      name="email"
                      className="w-full rounded-xl border border-white/10 bg-slate-950/60 px-4 py-3 text-sm text-white outline-none ring-cyan-400/40 transition focus:border-cyan-400/50 focus:ring-2"
                      placeholder="nama@perusahaan.com"
                    />
                  </div>
                </div>
                <div>
                  <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                    Organisasi
                  </label>
                  <input
                    required
                    name="org"
                    className="w-full rounded-xl border border-white/10 bg-slate-950/60 px-4 py-3 text-sm text-white outline-none ring-cyan-400/40 transition focus:border-cyan-400/50 focus:ring-2"
                    placeholder="Nama rumah sakit / perusahaan"
                  />
                </div>
                <div>
                  <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                    Pesan
                  </label>
                  <textarea
                    required
                    name="message"
                    rows={4}
                    className="w-full resize-none rounded-xl border border-white/10 bg-slate-950/60 px-4 py-3 text-sm text-white outline-none ring-cyan-400/40 transition focus:border-cyan-400/50 focus:ring-2"
                    placeholder="Jelaskan use case, jumlah site, dan integrasi yang diinginkan."
                  />
                </div>
                <NeonButton type="submit" className="w-full justify-center !py-3.5">
                  <Send className="h-4 w-4" />
                  Kirim permintaan
                </NeonButton>
              </form>
            )}
          </GlassCard>
        </div>
      </SectionShell>
    </section>
  );
}
