"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-16 max-w-6xl px-6">
      <div className="rounded-3xl border border-ink/10 bg-white/80 p-8 shadow-soft">
        <p className="text-xs uppercase tracking-[0.3em] text-muted">Contact us</p>
        <h2 className="mt-3 text-2xl font-semibold">Let's talk about your ledger.</h2>
        <p className="mt-2 text-sm text-muted">
          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="text-xs uppercase tracking-[0.2em] text-muted">
              Full name
            </label>
            <input
              className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
              type="text"
              required
            />
          </div>
          <div className="space-y-2">
            <label className="text-xs uppercase tracking-[0.2em] text-muted">Work email</label>
            <input
              className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
              type="email"
              required
            />
          </div>
          <div className="space-y-2">
            <label className="text-xs uppercase tracking-[0.2em] text-muted">Company</label>
            <input
              className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
              type="text"
            />
          </div>
          <div className="space-y-2">
            <label className="text-xs uppercase tracking-[0.2em] text-muted">
              Monthly transactions
            </label>
            <select className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm">
              <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="text-xs uppercase tracking-[0.2em] text-muted">
              What do you want to solve?
            </label>
            <textarea
              className="min-h-[120px] w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
              required
            />
          </div>
          <div className="md:col-span-2">
            <button
              type="submit"
              className="w-full rounded-2xl bg-ink px-4 py-3 text-sm font-semibold text-haze"
            >
              Send message
            </button>
          </div>
        </form>
        {status ? <p className="mt-4 text-xs text-muted">{status}</p> : null}
      </div>
    </section>
  );
}
