import { createFileRoute, Link } from "@tanstack/react-router";
import { ExternalLink, MapPin, ShoppingCart } from "lucide-react";
import { PageHeader, Section, SectionHeading } from "@/components/site/PageHeader";
import { COUNTRIES } from "@/data/site";

export const Route = createFileRoute("/countries")({
  head: () => ({
    meta: [
      { title: "Our Countries | Seed Co Group Across Africa" },
      {
        name: "description",
        content:
          "Choose your country site: Angola, Botswana, DRC, Kenya, Malawi, Mozambique, Nigeria, South Africa, Tanzania, Uganda, Zambia, Zimbabwe and West & Central Africa.",
      },
      { property: "og:title", content: "Our Countries | Seed Co Group" },
      { property: "og:description", content: "Country sites and online seed shops across 35+ African markets." },
    ],
  }),
  component: CountriesPage,
});

const REGIONS = ["Southern Africa", "East Africa", "West Africa", "Central Africa", "Regional hub"];

function CountriesPage() {
  return (
    <>
      <PageHeader
        crumbs={[{ label: "Our Countries" }]}
        eyebrow="Our footprint"
        title="Choose your country"
        lead="Local teams, locally adapted varieties and local seed certification. Select your market for country-specific product ranges, agronomy contacts and online shops."
      />

      <Section>
        {REGIONS.map((region) => {
          const list = COUNTRIES.filter((c) => c.region === region);
          if (list.length === 0) return null;
          return (
            <div key={region} className="mb-12 last:mb-0">
              <h2 className="font-display text-xl font-bold">{region}</h2>
              <ul className="mt-5 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                {list.map((c) => (
                  <li key={c.name}>
                    <Link
                      to="/contact"
                      className="group flex h-full flex-col rounded-xl border border-border bg-card p-6 shadow-card transition-all hover:-translate-y-1 hover:shadow-lift"
                    >
                      <span className="flex items-center gap-2 text-primary">
                        <MapPin aria-hidden="true" className="size-4" />
                        <span className="text-xs font-semibold uppercase tracking-wider">{c.lang}</span>
                      </span>
                      <h3 className="mt-3 font-display text-lg font-bold group-hover:text-primary">{c.name}</h3>
                      <p className="mt-1 flex-1 text-sm text-muted-foreground">
                        Country site, product range and local agronomy contacts.
                      </p>
                      {c.shop && (
                        <span className="mt-4 inline-flex items-center gap-1.5 text-xs font-semibold text-primary">
                          <ShoppingCart aria-hidden="true" className="size-3.5" /> Online shop available
                        </span>
                      )}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </Section>

      <Section muted>
        <SectionHeading
          eyebrow="Buy online"
          title="Online seed shops"
          lead="Certified seed delivered from our national distribution centres."
        />
        <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
          {COUNTRIES.filter((c) => c.shop).map((c) => (
            <li key={c.name}>
              <a
                href="https://www.seedcogroup.com"
                className="flex items-center justify-between gap-2 rounded-lg border border-border bg-card px-4 py-3 text-sm font-semibold shadow-card hover:border-primary hover:text-primary"
              >
                {c.name} shop
                <ExternalLink aria-hidden="true" className="size-4" />
              </a>
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}