micromelon-website/src/app/contact/ContactForm.tsx

"use client";

import { useState, useRef, useEffect } from "react";
import { Container } from "@/components/layout/Container";
import { Button } from "@/components/ui/Button";
import { FormField } from "@/components/ui/FormField";
import { KNOWN_SCHOOLS } from "@/data/schools";

export default function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [institution, setInstitution] = useState("");
  const [institutionOpen, setInstitutionOpen] = useState(false);
  const [message, setMessage] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const institutionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (institutionRef.current && !institutionRef.current.contains(e.target as Node)) {
        setInstitutionOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: Replace with Airtable form embed once URL is available
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section className="bg-white py-16 sm:py-24">
        <Container>
          <div className="mx-auto max-w-2xl text-center">
            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Thank you!
            </h1>
            <p className="mt-4 text-lg text-foreground-light">
              Your message has been sent.
            </p>
          </div>
        </Container>
      </section>
    );
  }

  const inputClasses =
    "w-full rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20";

  return (
    <section className="bg-white py-16 sm:py-24">
      <Container>
        <div className="mx-auto max-w-2xl">
          <div className="mb-12">
            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Contact us.
            </h1>
            <p className="mt-4 text-foreground-light">
              Email:{" "}
              <a
                href="mailto:contact@micromelon.com.au"
                className="text-brand-dark underline hover:text-foreground"
              >
                contact@micromelon.com.au
              </a>
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-6">
            <FormField
              label="Your Name"
              name="name"
              type="text"
              required
              placeholder="Your full name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <FormField
              label="Email"
              name="email"
              type="email"
              required
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <FormField
              label="Phone Number"
              name="phone"
              type="tel"
              placeholder="Your phone number"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />

            {/* School search combobox */}
            <div ref={institutionRef} className="relative">
              <label htmlFor="institution" className="mb-2 block text-sm font-medium text-foreground">
                School / Organisation
              </label>
              <input
                type="text"
                id="institution"
                value={institution}
                onChange={(e) => {
                  setInstitution(e.target.value);
                  setInstitutionOpen(true);
                }}
                onFocus={() => setInstitutionOpen(true)}
                placeholder="Search or type your school name"
                className={inputClasses}
                autoComplete="off"
              />
              {institutionOpen && institution.length > 0 && (() => {
                const query = institution.toLowerCase();
                const matches = KNOWN_SCHOOLS.filter((s) => s.toLowerCase().includes(query));
                const exactMatch = KNOWN_SCHOOLS.some((s) => s.toLowerCase() === query);
                if (matches.length === 0 && !exactMatch) return null;
                if (matches.length === 1 && matches[0].toLowerCase() === query) return null;
                return (
                  <ul className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
                    {matches.map((school) => (
                      <li key={school}>
                        <button
                          type="button"
                          onClick={() => {
                            setInstitution(school);
                            setInstitutionOpen(false);
                          }}
                          className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-muted"
                        >
                          {school}
                        </button>
                      </li>
                    ))}
                  </ul>
                );
              })()}
            </div>

            <FormField
              label="Message"
              name="message"
              type="textarea"
              required
              placeholder="How can we help?"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
            />

            <div>
              <Button type="submit" variant="primary">
                SEND
              </Button>
            </div>
          </form>
        </div>
      </Container>
    </section>
  );
}