"use client";

import { useState } from "react";
import { apiFetch } from "@/lib/api";

export default function InvestorForm() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;

    setStatus("loading");
    try {
      await apiFetch("/api/investors/interest", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      setStatus("success");
      setEmail("");
    } catch (err) {
      console.error(err);
      setStatus("error");
    }
  };

  return (
    <div className="mx-auto max-w-4xl rounded-3xl p-6 sm:p-12" style={{ backgroundColor: "#000d0a" }}>
      <div className="flex flex-col items-center text-center">
        <h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
          Interested in the future of ACI?
        </h2>
        <p className="mt-4 max-w-xl text-sm sm:text-base" style={{ color: "rgba(255,255,255,0.5)" }}>
          We are currently open for strategic partnerships and investment. Leave your email below, and our team will get in touch with our investor deck and vision roadmap.
        </p>

        {status === "success" ? (
          <div className="mt-8 rounded-xl bg-emerald-500/10 px-6 py-4 border border-emerald-500/20 text-emerald-400 font-medium animate-in fade-in zoom-in duration-300">
            ✓ Thank you. We will be in touch shortly.
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row">
            <input
              type="email"
              required
              placeholder="Enter your professional email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 rounded-xl border-none bg-white/5 px-5 py-3 text-sm text-white placeholder-white/30 ring-1 ring-inset ring-white/10 transition focus:ring-2 focus:ring-inset focus:ring-[#03ff94]"
              disabled={status === "loading"}
            />
            <button
              type="submit"
              disabled={status === "loading"}
              className="rounded-xl px-6 py-3 text-sm font-bold transition hover:opacity-90 disabled:opacity-50"
              style={{ backgroundColor: "#03ff94", color: "#1c3d36" }}
            >
              {status === "loading" ? "Sending..." : "Contact Team"}
            </button>
          </form>
        )}
        
        {status === "error" && (
          <p className="mt-3 text-xs text-red-400">
            Something went wrong. Please try again later.
          </p>
        )}
      </div>
    </div>
  );
}