import { Link } from "@tanstack/react-router";
import { contact } from "./content";

export function SiteFooter() {
  return (
    <footer className="bg-primary text-primary-foreground">
      <div className="mx-auto grid max-w-7xl gap-10 px-6 py-14 md:grid-cols-3">
        <div>
          <p className="font-serif text-2xl">Premier Pediatric Therapy, P.A.</p>
          <p className="mt-3 text-sm opacity-80">Speech, language, feeding, motor and sensory therapy for children in Jupiter and Palm Beach County.</p>
        </div>
        <div className="text-sm opacity-90">
          <p className="label-caps mb-3 opacity-70">Visit</p>
          {contact.addressLines.map((l) => <p key={l}>{l}</p>)}
          <a href={contact.directions} target="_blank" rel="noreferrer" className="mt-2 inline-block underline">Directions</a>
        </div>
        <div className="text-sm opacity-90">
          <p className="label-caps mb-3 opacity-70">Contact</p>
          <p>Phone: <a href={contact.phoneHref}>{contact.phone}</a></p>
          <p>Fax: {contact.fax}</p>
          <p className="break-words"><a href={`mailto:${contact.email}`}>{contact.email}</a></p>
          <div className="mt-3 flex gap-4">
            <a href={contact.facebook} target="_blank" rel="noreferrer" className="underline">Facebook</a>
            <a href={contact.instagram} target="_blank" rel="noreferrer" className="underline">Instagram</a>
          </div>
        </div>
      </div>
      <div className="border-t border-primary-foreground/15 py-5 text-center text-xs opacity-70">
        © {new Date().getFullYear()} Premier Pediatric Therapy, P.A. · <Link to="/resources">Payment & Forms</Link>
      </div>
    </footer>
  );
}