"use client";

import { useState } from "react";

import { GlassCard } from "@/components/shared/glass-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";

export function ContactForm() {
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    /** In production POST to your CRM / email API — here we simply acknowledge. */
    await new Promise((r) => setTimeout(r, 400));
    toast.success("Message captured — we will reply via email.");
    setLoading(false);
    (e.target as HTMLFormElement).reset();
  }

  return (
    <GlassCard className="p-8">
      <form onSubmit={onSubmit} className="space-y-4">
        <div>
          <Label htmlFor="name">Name</Label>
          <Input id="name" name="name" required className="mt-1 border-white/15 bg-white/5" />
        </div>
        <div>
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            name="email"
            type="email"
            required
            className="mt-1 border-white/15 bg-white/5"
          />
        </div>
        <div>
          <Label htmlFor="message">How can we help?</Label>
          <Textarea
            id="message"
            name="message"
            required
            rows={5}
            className="mt-1 border-white/15 bg-white/5"
          />
        </div>
        <Button type="submit" disabled={loading} className="w-full rounded-full">
          {loading ? "Sending…" : "Send message"}
        </Button>
        <p className="text-center text-xs text-muted-foreground">
          After you purchase a plan, WhatsApp coach support unlocks in your athlete
          dashboard.
        </p>
      </form>
    </GlassCard>
  );
}