"use client";

import { useState, type FormEvent } from "react";

import { PageHero } from "@/components/marketing/page-hero";
import { PlaceholderNotice } from "@/components/marketing/placeholder-notice";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

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

  function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    // Email delivery (mittera.eu) wires later — UI is real now.
    setSent(true);
  }

  return (
    <>
      <PageHero
        eyebrow="Contact"
        title="Get in touch"
        description="Partnerships, builder access, or general questions. The form below is ready; message delivery will connect in a later pass."
      />

      <section className="section-pad">
        <div className="mx-auto max-w-lg px-5 lg:px-8">
          <PlaceholderNotice className="mb-8">
            Submit is stubbed for now — you will see a confirmation, but no
            email is sent yet.
          </PlaceholderNotice>

          {sent ? (
            <div className="rounded-2xl border border-proof/30 bg-proof-muted p-8 text-sm leading-relaxed">
              Thanks — your message is noted in this preview. Live delivery
              lands when email is wired.
            </div>
          ) : (
            <form onSubmit={onSubmit} className="space-y-5">
              <div>
                <label
                  htmlFor="name"
                  className="mb-1.5 block text-sm font-medium"
                >
                  Name
                </label>
                <Input id="name" name="name" required autoComplete="name" />
              </div>
              <div>
                <label
                  htmlFor="email"
                  className="mb-1.5 block text-sm font-medium"
                >
                  Email
                </label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  required
                  autoComplete="email"
                />
              </div>
              <div>
                <label
                  htmlFor="message"
                  className="mb-1.5 block text-sm font-medium"
                >
                  Message
                </label>
                <textarea
                  id="message"
                  name="message"
                  required
                  rows={5}
                  className="flex w-full rounded-md border border-border bg-input px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                />
              </div>
              <Button type="submit" size="lg" className="w-full sm:w-auto">
                Send message
              </Button>
            </form>
          )}
        </div>
      </section>
    </>
  );
}