"use client";

import { useState } from "react";

export function ContactSection() {
  const [status, setStatus] = useState("");

  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    setStatus("Thanks! We will reach out within 1 business day.");
  };

  return (
    <section className="mx-auto mt-10 max-w-6xl px-6">
      <div className="rounded-3xl border border-border bg-background/80 backdrop-blur-sm p-6 shadow-sm">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Contact us</p>
        <h2 className="mt-3 text-2xl font-semibold text-foreground">Let&apos;s talk about your ledger.</h2>
        <p className="mt-2 text-sm text-muted-foreground">
          Tell us about your workflow and we will suggest the best LedgerOne setup.
        </p>
        <form className="mt-6 grid gap-4 md:grid-cols-2" onSubmit={onSubmit}>
          <div className="space-y-2">
            <label className="block text-sm font-medium text-foreground">Full name</label>
            <input
              className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all"
              type="text"
              required
            />
          </div>
          <div className="space-y-2">
            <label className="block text-sm font-medium text-foreground">Work email</label>
            <input
              className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all"
              type="email"
              required
            />
          </div>
          <div className="space-y-2">
            <label className="block text-sm font-medium text-foreground">Company</label>
            <input
              className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all"
              type="text"
            />
          </div>
          <div className="space-y-2">
            <label className="block text-sm font-medium text-foreground">Monthly transactions</label>
            <select className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all">
              <option>Under 1,000</option>
              <option>1,000 - 10,000</option>
              <option>10,000 - 50,000</option>
              <option>50,000+</option>
            </select>
          </div>
          <div className="space-y-2 md:col-span-2">
            <label className="block text-sm font-medium text-foreground">What do you want to solve?</label>
            <textarea
              className="block min-h-[120px] w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all resize-y"
              required
            />
          </div>
          <div className="md:col-span-2">
            <button type="submit" className="btn-primary w-full py-3">
              Send message
            </button>
          </div>
        </form>
        {status ? <p className="mt-4 text-sm text-muted-foreground">{status}</p> : null}
      </div>
    </section>
  );
}