import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import logo from "@/assets/real-history-logo-transparent.png";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Real History — Coming Soon" },
      { name: "description", content: "Real History is launching soon. Sign up to be the first to know." },
      { property: "og:title", content: "Real History — Coming Soon" },
      { property: "og:description", content: "Real History is launching soon. Sign up to be the first to know." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Index,
});

function Index() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email.trim()) return;
    setSubmitted(true);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-black px-6 py-12 text-center">
      <h1 className="sr-only">Real History — Coming Soon</h1>
      <img
        src={logo}
        alt="Real History"
        className="w-full max-w-2xl h-auto object-contain"
      />
      <p className="mt-6 text-lg md:text-xl tracking-[0.25em] uppercase text-[#c9a86a]">
        Property Intelligence Built on History
      </p>
      <p className="mt-8 text-2xl md:text-3xl tracking-[0.35em] uppercase text-[#c9a86a]">
        Coming Soon
      </p>
      <p className="mt-4 max-w-md text-sm md:text-base text-neutral-400">
        Something remarkable is on the way. Be the first to know when we launch.
      </p>

      {submitted ? (
        <p className="mt-10 text-[#c9a86a] text-base">
          Thank you — we'll be in touch soon.
        </p>
      ) : (
        <form
          onSubmit={handleSubmit}
          className="mt-10 flex w-full max-w-md flex-col sm:flex-row gap-3"
        >
          <label htmlFor="email" className="sr-only">Email address</label>
          <input
            id="email"
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Enter your email"
            maxLength={255}
            className="flex-1 rounded-md border border-neutral-700 bg-neutral-950 px-4 py-3 text-sm text-neutral-100 placeholder:text-neutral-500 focus:border-[#c9a86a] focus:outline-none focus:ring-1 focus:ring-[#c9a86a]"
          />
          <button
            type="submit"
            className="rounded-md bg-[#c9a86a] px-6 py-3 text-sm font-medium uppercase tracking-widest text-black transition hover:bg-[#d9bb7f]"
          >
            Notify Me
          </button>
        </form>
      )}
    </main>
  );
}