Contact Form

import {
  Button,
  Card,
  CardContent,
  Input,
  Label,
  Textarea,
} from "@cooud-ui/ui";
import { BookOpen, Mail, MessageCircle } from "lucide-react";

export function ContactFormBlock() {
  return (
    <div className="w-full py-4">
      <div className="grid gap-8 lg:grid-cols-[1fr_1.2fr] lg:items-center">
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-2">
            <h2 className="font-display text-2xl font-semibold">Get in touch</h2>
            <p className="text-sm text-fg-secondary">
              Questions, feedback, or partnership ideas — our team usually replies within a day.
            </p>
          </div>

          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <span className="inline-flex size-10 items-center justify-center rounded-xl bg-surface-raised text-primary">
                <Mail className="size-5" aria-hidden="true" />
              </span>
              <div className="flex flex-col">
                <span className="text-sm font-medium">Email</span>
                <span className="text-sm text-fg-secondary">contact@cooud.com</span>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <span className="inline-flex size-10 items-center justify-center rounded-xl bg-surface-raised text-primary">
                <MessageCircle className="size-5" aria-hidden="true" />
              </span>
              <div className="flex flex-col">
                <span className="text-sm font-medium">Live chat</span>
                <span className="text-sm text-fg-secondary">Mon–Fri, 9am–6pm</span>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <span className="inline-flex size-10 items-center justify-center rounded-xl bg-surface-raised text-primary">
                <BookOpen className="size-5" aria-hidden="true" />
              </span>
              <div className="flex flex-col">
                <span className="text-sm font-medium">Docs</span>
                <span className="text-sm text-fg-secondary">docs.cooud.com</span>
              </div>
            </div>
          </div>
        </div>

        <Card className="gap-6 shadow-lg">
          <CardContent className="flex flex-col gap-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="flex flex-col gap-2">
                <Label htmlFor="contact-name">Name</Label>
                <Input id="contact-name" placeholder="Mara Castillo" autoComplete="name" />
              </div>
              <div className="flex flex-col gap-2">
                <Label htmlFor="contact-email">Email</Label>
                <Input
                  id="contact-email"
                  type="email"
                  placeholder="you@company.com"
                  autoComplete="email"
                />
              </div>
            </div>

            <div className="flex flex-col gap-2">
              <Label htmlFor="contact-subject">Subject</Label>
              <Input id="contact-subject" placeholder="How can we help?" />
            </div>

            <div className="flex flex-col gap-2">
              <Label htmlFor="contact-message">Message</Label>
              <Textarea id="contact-message" placeholder="Tell us a little more…" rows={4} />
            </div>

            <Button variant="gradient" size="lg" className="w-full">
              Send message
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}