import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { ArrowUpRight, ArrowLeft, MapPin, Check } from "lucide-react";
import { getUnit, units } from "@/lib/units";

export const Route = createFileRoute("/businesses/$slug")({
  loader: ({ params }) => {
    const unit = getUnit(params.slug);
    if (!unit) throw notFound();
    return { unit };
  },
  head: ({ loaderData, params }) => {
    if (!loaderData) {
      return { meta: [{ title: "Business not found — Vigor Group of Companies" }, { name: "robots", content: "noindex" }] };
    }
    const { unit } = loaderData;
    return {
      meta: [
        { title: `${unit.name} — Vigor Group of Companies` },
        { name: "description", content: unit.blurb },
        { property: "og:title", content: `${unit.name} — Vigor Group of Companies` },
        { property: "og:description", content: unit.blurb },
        { property: "og:type", content: "article" },
        { property: "og:url", content: `/businesses/${params.slug}` },
      ],
      links: [{ rel: "canonical", href: `/businesses/${params.slug}` }],
    };
  },
  component: BusinessDetail,
});

function BusinessDetail() {
  const { unit } = Route.useLoaderData();
  const others = units.filter((u) => u.slug !== unit.slug).slice(0, 3);

  return (
    <>
      <section className="relative">
        <div className="relative h-[46vh] min-h-[340px]">
          <img src={unit.image} alt={unit.name} className="absolute inset-0 w-full h-full object-cover" />
          <div className="absolute inset-0 bg-navy-deep/70" />
          <div className="relative container-x h-full flex flex-col justify-end pb-12 text-white">
            <Link to="/businesses" className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.16em] text-white/70 hover:text-white">
              <ArrowLeft size={14} /> All businesses
            </Link>
            <p className="eyebrow mt-6 text-white/70">{unit.sector}</p>
            <h1 className="mt-3 text-4xl md:text-6xl max-w-3xl leading-[1]">{unit.name}</h1>
            <p className="mt-4 inline-flex items-center gap-2 text-sm text-white/75">
              <MapPin size={15} /> {unit.location}
            </p>
          </div>
        </div>
      </section>

      <section className="container-x py-16 md:py-20 grid lg:grid-cols-12 gap-12">
        <div className="lg:col-span-7 space-y-6 text-lg text-ink-soft leading-relaxed">
          {unit.overview.map((p: string) => (
            <p key={p}>{p}</p>
          ))}
          <div className="pt-4">
            <a href={unit.href} target="_blank" rel="noreferrer" className="btn-accent">
              Website <ArrowUpRight size={16} />
            </a>
          </div>
        </div>
        <aside className="lg:col-span-5 lg:pl-8">
          <h2 className="text-2xl">At a glance</h2>
          <ul className="mt-6 space-y-4">
            {unit.highlights.map((h: string) => (
              <li key={h} className="flex gap-3 border-b border-border pb-4 text-ink-soft">
                <Check size={18} className="shrink-0 mt-0.5 text-crimson" />
                <span>{h}</span>
              </li>
            ))}
          </ul>
        </aside>
      </section>

      <section className="bg-secondary/60 border-t border-border">
        <div className="container-x py-16">
          <h2 className="text-3xl md:text-4xl">More from the group</h2>
          <div className="mt-10 grid md:grid-cols-3 gap-6">
            {others.map((u) => (
              <Link
                key={u.slug}
                to="/businesses/$slug"
                params={{ slug: u.slug }}
                className="group bg-card border border-border hover:border-crimson transition-colors overflow-hidden"
              >
                <div className="aspect-[16/10] overflow-hidden">
                  <img src={u.image} alt={u.name} loading="lazy" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                </div>
                <div className="p-6">
                  <p className="text-xs uppercase tracking-[0.16em] text-crimson font-semibold">{u.sector}</p>
                  <h3 className="mt-2 text-xl">{u.name}</h3>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}
