import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PageHeader, Section, SectionHeading } from "@/components/site/PageHeader";
import { Reveal } from "@/components/site/Reveal";
import { CROPS } from "@/data/site";
import { VARIETIES, cropLabel } from "@/data/varieties";

export const Route = createFileRoute("/products/")({
  head: () => ({
    meta: [
      { title: "Products Certified Hybrid Seed | Seed Co Group" },
      {
        name: "description",
        content:
          "Browse Seed Co crop portfolios: maize, wheat, soya bean, sugar bean, groundnuts, sorghum, cowpeas and rice | all certified hybrid seed bred for African conditions.",
      },
      { property: "og:title", content: "Products | Certified Hybrid Seed | Seed Co Group" },
      { property: "og:description", content: "Eight crop portfolios bred and trialled across Africa." },
    ],
  }),
  component: ProductsPage,
});

function ProductsPage() {
  return (
    <>
      <PageHeader
        crumbs={[{ label: "Products" }]}
        eyebrow="Products"
        title="Certified seed for eight crops"
        lead="Each portfolio spans several maturity classes so you can match seed to rainfall, altitude and your planting window. Maize has the deepest range; legumes and small grains cover the drier margins."
      >
        <Button asChild variant="harvest" size="lg">
          <Link to="/variety-finder">Use the Variety Finder</Link>
        </Button>
      </PageHeader>

      <Section>
        <SectionHeading eyebrow="Crop categories" title="Choose a crop" />
        <ul className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {CROPS.map((crop, i) => {
            const count = VARIETIES.filter((v) => v.crop === crop.slug).length;
            return (
              <Reveal as="li" key={crop.slug} delay={i * 50}>
                <Link
                  to={crop.slug === "maize" ? "/products/maize" : "/variety-finder"}
                  className="group flex h-full flex-col rounded-2xl border border-border bg-card p-7 shadow-card transition-all hover:-translate-y-1 hover:shadow-lift"
                >
                  <img
                    src={crop.icon}
                    alt=""
                    aria-hidden="true"
                    className="size-12 object-contain transition-transform duration-200 group-hover:scale-110"
                  />
                  <h3 className="mt-5 font-display text-xl font-bold group-hover:text-primary">{crop.name}</h3>
                  <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{crop.blurb}</p>
                  <span className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
                    {crop.slug === "maize" ? "View maize range" : `${count} varieties in the finder`}
                    <ArrowRight aria-hidden="true" className="size-4 transition-transform group-hover:translate-x-1" />
                  </span>
                </Link>
              </Reveal>
            );
          })}
        </ul>
      </Section>

      <Section muted>
        <SectionHeading
          eyebrow="Featured varieties"
          title="Recently released"
          lead="New releases completed at least three seasons of multi-location trialling."
        />
        <ul className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {VARIETIES.slice(0, 6).map((v) => (
            <li key={v.id} className="rounded-xl border border-border bg-card p-6 shadow-card">
              <p className="eyebrow text-primary">{cropLabel(v.crop)}</p>
              <h3 className="mt-2 font-display text-lg font-bold">{v.name}</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                {v.maturityDays} days · {v.yieldPotential}
              </p>
              <p className="mt-3 text-sm leading-relaxed">{v.why}</p>
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}