"use client";

import { useState } from "react";

export function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const finalSubject = encodeURIComponent(subject || `New inquiry from ${name || "Website visitor"}`);
    const finalBody = encodeURIComponent(
      [
        `Name: ${name || "Not provided"}`,
        `Email: ${email || "Not provided"}`,
        "",
        message || "No message provided.",
      ].join("\n"),
    );

    window.location.href = `mailto:aryan@deviltools.in?subject=${finalSubject}&body=${finalBody}`;
  }

  return (
    <form onSubmit={handleSubmit} className="surface rounded-[2rem] p-6 sm:p-8">
      <div className="grid gap-4 sm:grid-cols-2">
        <label className="space-y-2 text-sm text-[var(--muted)]">
          <span>Name</span>
          <input value={name} onChange={(event) => setName(event.target.value)} className="w-full rounded-2xl border border-[var(--border)] bg-[var(--background-soft)] px-4 py-3 text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]" placeholder="Your name" />
        </label>
        <label className="space-y-2 text-sm text-[var(--muted)]">
          <span>Email</span>
          <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} className="w-full rounded-2xl border border-[var(--border)] bg-[var(--background-soft)] px-4 py-3 text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]" placeholder="you@example.com" />
        </label>
      </div>
      <label className="mt-4 block space-y-2 text-sm text-[var(--muted)]">
        <span>Subject</span>
        <input value={subject} onChange={(event) => setSubject(event.target.value)} className="w-full rounded-2xl border border-[var(--border)] bg-[var(--background-soft)] px-4 py-3 text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]" placeholder="What would you like to build?" />
      </label>
      <label className="mt-4 block space-y-2 text-sm text-[var(--muted)]">
        <span>Message</span>
        <textarea value={message} onChange={(event) => setMessage(event.target.value)} rows={7} className="w-full rounded-[1.5rem] border border-[var(--border)] bg-[var(--background-soft)] px-4 py-3 text-[var(--foreground)] outline-none transition focus:border-[var(--accent)]" placeholder="Share the project, problem, or idea." />
      </label>
      <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm leading-6 text-[var(--muted)]">Submitting opens your default email app with the message prefilled, so nothing gets lost behind a third-party form service.</p>
        <button type="submit" className="inline-flex items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--accent),var(--secondary))] px-6 py-3 text-sm font-medium text-white transition hover:-translate-y-0.5 hover:brightness-105">Send message</button>
      </div>
    </form>
  );
}