Contact section

import { Clock, Mail, MapPin, Phone } from "lucide-react";

const details = [
  { icon: Phone, label: "Phone", value: "080 4718 2200", href: "tel:+918047182200" },
  { icon: Mail, label: "Email", value: "frontdesk@kaveri.clinic", href: "mailto:frontdesk@kaveri.clinic" },
  { icon: MapPin, label: "Address", value: "14 Lake View Road, Indiranagar, Bengaluru" },
  { icon: Clock, label: "Hours", value: "Mon–Sat, 8 am – 8 pm" },
];
const topics = ["Appointments", "Test reports", "Billing", "Something else"];

const field = "h-10 w-full rounded border border-border-strong bg-bg px-3 text-sm text-fg outline-none placeholder:text-fg-subtle focus:border-primary focus:ring-[3px] focus:ring-primary/20";

export function ContactSection({ action = "/api/contact" }: { action?: string }) {
  return (
    <section aria-labelledby="contact-title" className="bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl gap-12 px-4 py-20 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
        <div>
          <p className="text-[13px] font-medium text-primary">Kaveri Clinic</p>
          <h2 id="contact-title" className="mt-3 text-3xl font-semibold tracking-tight text-fg">Talk to the front desk</h2>
          <p className="mt-4 max-w-md text-sm leading-relaxed text-fg-muted">
            Questions about an appointment, a report or a bill? Send a note and we’ll reply within one working day.
          </p>
          <ul className="mt-8 grid gap-5">
            {details.map(({ icon: Icon, label, value, href }) => (
              <li key={label} className="flex items-start gap-3">
                <span aria-hidden className="inline-grid size-9 shrink-0 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Icon className="size-[18px]" /></span>
                <div className="min-w-0">
                  <p className="text-[13px] text-fg-subtle">{label}</p>
                  <p className="break-words text-sm text-fg">{href ? <a href={href} className="hover:underline">{value}</a> : value}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <form action={action} method="post" aria-label="Send a message" className="grid gap-4 rounded-xl border border-border bg-bg p-6 sm:p-8">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="grid gap-1.5">
              <label htmlFor="c-name" className="text-[13px] font-medium text-fg">Full name</label>
              <input id="c-name" name="name" required autoComplete="name" className={field} />
            </div>
            <div className="grid gap-1.5">
              <label htmlFor="c-reach" className="text-[13px] font-medium text-fg">Phone or email</label>
              <input id="c-reach" name="reach" required placeholder="So we can reply" className={field} />
            </div>
          </div>
          <div className="grid gap-1.5">
            <label htmlFor="c-topic" className="text-[13px] font-medium text-fg">Topic</label>
            <select id="c-topic" name="topic" className={field}>{topics.map((t) => <option key={t}>{t}</option>)}</select>
          </div>
          <div className="grid gap-1.5">
            <label htmlFor="c-message" className="text-[13px] font-medium text-fg">Message</label>
            <textarea id="c-message" name="message" required rows={4} placeholder="How can we help?" className={field + " h-auto py-2.5"} />
          </div>
          <button type="submit" className="h-10 w-fit rounded bg-primary px-4 text-sm font-medium text-primary-fg transition hover:bg-primary-hover">Send message</button>
          <p className="text-[13px] text-fg-subtle">In an emergency, call 108.</p>
        </form>
      </div>
    </section>
  );
}