import { createFileRoute } from "@tanstack/react-router";
import { SiteLayout } from "@/components/SiteLayout";
import { FIRMA } from "@/lib/site";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact | Laboratorul de Afaceri și Profit, Bârlad" },
      { name: "description", content: `Ne găsești pe ${FIRMA.adresa}. Telefon ${FIRMA.telefon}, email ${FIRMA.email}, CUI ${FIRMA.cui}.` },
      { property: "og:title", content: "Contact – Laboratorul de Afaceri și Profit" },
      { property: "og:description", content: `${FIRMA.adresa}. Telefon ${FIRMA.telefon}.` },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Contact,
});

function Contact() {
  const q = encodeURIComponent("Strada Vasile Lupu 5, Bârlad, Vaslui");
  return (
    <SiteLayout>
      <section className="mx-auto grid max-w-6xl gap-10 px-6 py-20 md:grid-cols-2">
        <div>
          <h1 className="text-5xl text-navy">Contact</h1>
          <p className="mt-4 text-lg text-muted-foreground">Treci pe la noi sau scrie-ne — îți răspundem cu drag.</p>
          <div className="mt-8 rounded-lg border bg-card p-6 shadow-card">
            <p className="font-serif text-xl text-navy">{FIRMA.numeLegal}</p>
            <p className="mt-2 text-muted-foreground">{FIRMA.adresa}</p>
            <p className="mt-4 text-sm text-muted-foreground">
              Telefon:{" "}
              <a href={FIRMA.telefonLink} className="font-medium text-navy underline-offset-4 hover:underline">
                {FIRMA.telefon}
              </a>
            </p>
            <p className="mt-1 text-sm text-muted-foreground">
              Email:{" "}
              <a href={FIRMA.emailLink} className="font-medium text-navy underline-offset-4 hover:underline">
                {FIRMA.email}
              </a>
            </p>
            <p className="mt-1 text-sm text-muted-foreground">CUI: {FIRMA.cui}</p>
          </div>
          <div className="mt-6 flex flex-wrap gap-3">
            <a href={FIRMA.telefonLink} className="rounded-md bg-accent px-6 py-3 font-medium text-accent-foreground hover:opacity-90">
              Sună-ne la {FIRMA.telefon}
            </a>
            <a href={FIRMA.emailLink} className="rounded-md border px-6 py-3 font-medium text-navy hover:bg-muted">
              Scrie-ne pe email
            </a>
          </div>
        </div>

        <iframe title="Hartă" className="h-96 w-full rounded-lg border" loading="lazy" src={`https://www.google.com/maps?q=${q}&output=embed`} />
      </section>
    </SiteLayout>
  );
}