import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowUpRight, ArrowRight, MapPin } from "lucide-react";
import { units } from "@/lib/units";
import { Reveal } from "@/components/site/Reveal";
import { SectorEcosystem } from "@/components/site/SectorEcosystem";

export const Route = createFileRoute("/businesses/")({
  head: () => ({
    meta: [
      { title: "Our Businesses — Vigor Group of Companies" },
      {
        name: "description",
        content:
          "The industries and businesses of Vigor Group of Companies across healthcare, hospitality, manufacturing and real estate in Tanzania and Zanzibar.",
      },
      { property: "og:title", content: "Our Businesses — Vigor Group of Companies" },
      { property: "og:description", content: "A diversified portfolio of Tanzanian businesses." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/businesses" },
    ],
    links: [{ rel: "canonical", href: "/businesses" }],
  }),
  component: Businesses,
});

function Businesses() {
  return (
    <>
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <p className="eyebrow">Industries & Businesses</p>
        <h1 className="mt-6 text-5xl md:text-7xl max-w-4xl leading-[1]">
          A portfolio built to <span className="italic text-crimson">endure</span>.
        </h1>
        <p className="mt-8 max-w-2xl text-lg text-ink-soft leading-relaxed">
          Explore our seven connected industries and the businesses that bring each sector
          to life with shared standards of integrity, quality and community impact.
        </p>
      </section>

      <section id="industries" className="container-x py-16 md:py-20">
        <div className="max-w-2xl">
          <p className="eyebrow">Our Industries</p>
          <h2 className="mt-4 text-4xl md:text-5xl leading-tight">Seven Sectors. One Vision.</h2>
          <p className="mt-5 text-ink-soft leading-relaxed">
            Each sector supports and strengthens the others, creating a connected ecosystem
            built for Tanzania's long-term growth.
          </p>
        </div>
        <div className="mt-10">
          <SectorEcosystem />
        </div>
      </section>

      {/* Card grid on desktop, carousel on mobile */}
      <section id="businesses" className="bg-secondary/60 border-y border-border">
        <div className="container-x py-16 md:py-20">
          <div className="max-w-2xl mb-10">
            <p className="eyebrow">Our Businesses</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">The Businesses Behind Our Industries</h2>
          </div>
        <div className="flex gap-6 overflow-x-auto snap-x snap-mandatory pb-4 -mx-5 px-5 md:mx-0 md:px-0 md:grid md:grid-cols-2 lg:grid-cols-3 md:overflow-visible">
          {units.map((u, i) => (
            <Reveal key={u.slug} delay={i * 70} className="snap-start shrink-0 w-[85%] sm:w-[60%] md:w-auto">
              <article className="group h-full flex flex-col bg-card border border-border hover:border-crimson hover:shadow-[0_20px_50px_-30px_rgba(0,0,0,0.5)] transition-all duration-300 overflow-hidden">
                <div className="relative aspect-[4/3] 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 className="absolute inset-0 bg-gradient-to-t from-navy-deep/70 via-transparent to-transparent" />
                  <span className="card-label">{u.sector}</span>
                </div>
                <div className="p-7 flex flex-col flex-1">
                  <div className="flex items-center gap-2 text-xs text-muted-foreground uppercase tracking-[0.14em]">
                    <MapPin size={13} className="text-crimson" /> {u.location}
                  </div>
                  <h2 className="mt-3 text-2xl">{u.name}</h2>
                  <p className="mt-3 text-sm text-muted-foreground leading-relaxed flex-1">{u.blurb}</p>
                  <div className="mt-6 pt-5 border-t border-border flex flex-wrap items-center gap-4 text-xs font-semibold uppercase tracking-[0.1em]">
                    <Link
                      to="/businesses/$slug"
                      params={{ slug: u.slug }}
                      className="text-navy hover:text-crimson transition-colors"
                    >
                      Learn more
                    </Link>
                    <a
                      href={u.href}
                      target="_blank"
                      rel="noreferrer"
                      className="inline-flex items-center gap-1.5 text-crimson hover:underline"
                    >
                      Website <ArrowUpRight size={14} />
                    </a>
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
        </div>
      </section>

      <section className="bg-secondary/60 border-t border-border">
        <div className="container-x py-16 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
          <h2 className="text-3xl md:text-4xl max-w-xl">
            Interested in partnering?
          </h2>
          <Link to="/contact" className="btn-accent self-start">
            Talk to Us <ArrowRight size={16} />
          </Link>
        </div>
      </section>
    </>
  );
}