"use client";

import { useState } from "react";
import { Mail, MessageCircle, Send } from "lucide-react";
import { Button, Card, Input, Textarea, toast } from "@sisyphos-ui/react";

export function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [topic, setTopic] = useState("");
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    // Wire to your server action / API route here.
    await new Promise((r) => setTimeout(r, 700));
    setBusy(false);
    toast.success("Message sent");
  };

  return (
    <section className="bg-white px-6 py-24">
      <div className="mx-auto grid max-w-5xl items-start gap-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16">
        <div>
          <span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-orange-600">
            <MessageCircle className="size-3.5" /> Talk to us
          </span>
          <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight">
            We answer every message.
          </h2>
          <p className="mt-6 max-w-md text-zinc-600">
            Sales, technical help, partnerships — drop us a note and a real human replies.
          </p>
        </div>

        <Card variant="outlined">
          <Card.Body>
            <form onSubmit={onSubmit} className="flex flex-col gap-5">
              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
                <Input label="Name"  value={name}  onChange={(e) => setName(e.target.value)}  required />
                <Input label="Email" value={email} onChange={(e) => setEmail(e.target.value)} type="email" required />
              </div>
              <Input label="Topic" value={topic} onChange={(e) => setTopic(e.target.value)} />
              <Textarea
                label="Message"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                rows={5}
                required
              />
              <div className="flex justify-end">
                <Button type="submit" loading={busy} endIcon={<Send className="size-4" />}>
                  Send message
                </Button>
              </div>
            </form>
          </Card.Body>
        </Card>
      </div>
    </section>
  );
}
Components used

Used in templates
