"use client";

import { useState } from "react";
import { ENQUIRY_EMAIL, ENQUIRY_TYPES } from "@/content/contact";

/**
 * A minimal, frictionless enquiry (ch.12): only what is genuinely useful.
 * Composes a structured message for the house's enquiry address, no
 * third party services, nothing stored, nothing tracked.
 */
export default function EnquiryForm() {
  const [type, setType] = useState<string>(ENQUIRY_TYPES[0]);
  const [name, setName] = useState("");
  const [country, setCountry] = useState("");
  const [message, setMessage] = useState("");

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    const subject = encodeURIComponent(`${type}, ${name || "Private enquiry"}`);
    const body = encodeURIComponent(
      `Name: ${name}\nCountry: ${country}\nEnquiry: ${type}\n\n${message}\n`
    );
    window.location.href = `mailto:${ENQUIRY_EMAIL}?subject=${subject}&body=${body}`;
  };

  const field: React.CSSProperties = {
    width: "100%",
    background: "var(--night-850)",
    border: "1px solid var(--hairline-strong)",
    color: "var(--ivory)",
    fontFamily: "var(--font-sans)",
    fontSize: 15,
    lineHeight: 1.6,
    padding: "14px 16px",
    outline: "none",
  };

  const label: React.CSSProperties = {
    display: "block",
    fontSize: 11,
    fontWeight: 500,
    letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: "var(--stone)",
    marginBottom: 10,
  };

  return (
    <form onSubmit={submit} style={{ display: "grid", gap: 26, maxWidth: 560 }}>
      <div>
        <label htmlFor="enq-type" style={label}>
          Nature of enquiry
        </label>
        <select id="enq-type" value={type} onChange={(e) => setType(e.target.value)} style={{ ...field, appearance: "none" }}>
          {ENQUIRY_TYPES.map((t) => (
            <option key={t} value={t}>
              {t}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label htmlFor="enq-name" style={label}>
          Name
        </label>
        <input id="enq-name" value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" required style={field} />
      </div>
      <div>
        <label htmlFor="enq-country" style={label}>
          Country
        </label>
        <input id="enq-country" value={country} onChange={(e) => setCountry(e.target.value)} autoComplete="country-name" style={field} />
      </div>
      <div>
        <label htmlFor="enq-msg" style={label}>
          Message
        </label>
        <textarea id="enq-msg" value={message} onChange={(e) => setMessage(e.target.value)} rows={6} required style={{ ...field, resize: "vertical" }} />
      </div>
      <div>
        <button type="submit" className="btn" style={{ background: "none", border: 0, cursor: "pointer" }}>
          Compose the enquiry <span className="arr">→</span>
        </button>
        <p className="caption" style={{ marginTop: 14 }}>
          Opens in your own mail application, addressed to {ENQUIRY_EMAIL}.
          Nothing is stored on this website.
        </p>
      </div>
    </form>
  );
}