import { createFileRoute } from "@tanstack/react-router";
import { Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PageHeader, Section, SectionHeading } from "@/components/site/PageHeader";
import { Reveal } from "@/components/site/Reveal";

export const Route = createFileRoute("/sustainability")({
  head: () => ({
    meta: [
      { title: "Sustainability & ESG | Seed Co Group" },
      {
        name: "description",
        content:
          "Seed Co Group's ESG approach: climate-smart breeding, farmer livelihoods and community programmes, and dual-listed governance | with measurable targets.",
      },
      { property: "og:title", content: "Sustainability & ESG | Seed Co Group" },
      {
        property: "og:description",
        content: "Climate-smart breeding, farmer livelihoods and sound governance across 35+ African markets.",
      },
    ],
  }),
  component: SustainabilityPage,
});

const PILLARS = [
  {
    icon: "/icons8-environment.svg",
    title: "Environmental stewardship",
    lead: "Climate-smart breeding is our largest environmental lever.",
    points: [
      "Drought and heat tolerance selected as core traits across all eight crop programmes",
      "Disease-resistant genetics that reduce the need for fungicide applications",
      "Water and energy monitoring at seed processing plants",
      "Legume varieties that fix nitrogen and cut synthetic fertiliser demand in rotation",
    ],
  },
  {
    icon: "/icons8-social.svg",
    title: "Social | farmer livelihoods",
    lead: "Better seed only raises income when it comes with agronomy support.",
    points: [
      "Field days and demonstration plots in every operating country",
      "Community seed bank programme reaching 18,000+ smallholder households",
      "Starter packs and training for women-led and youth farming groups",
      "School and clinic support programmes in farming communities",
    ],
  },
  {
    icon: "/icons8-governance.svg",
    title: "Governance",
    lead: "Dual-listed discipline across Seed Co International and Seed Co Limited.",
    points: [
      "Independent-majority boards with audit, risk and remuneration committees",
      "Published interim and full-year results with analyst briefings",
      "Group code of conduct, anti-bribery policy and whistle-blower channel",
      "Seed certification compliance audited in every market we supply",
    ],
  },
];

const SCORECARD = [
  { value: "18,000+", label: "Smallholder households in community programmes", trend: "+21% year on year" },
  { value: "62%", label: "Portfolio rated 4/5 or higher for drought tolerance", trend: "Target: 75% by 2030" },
  { value: "31%", label: "Women in the group workforce", trend: "Target: 40% by 2030" },
  { value: "24%", label: "Reduction in processing water intensity", trend: "Since 2019 baseline" },
  { value: "100%", label: "Seed lots certified by national authorities", trend: "Maintained" },
  { value: "40+", label: "Research and trial sites contributing local data", trend: "Expanding annually" },
];

const PROGRAMMES = [
  {
    title: "Community seed banks",
    body: "Local farmer groups receive certified starter seed, storage support and season-long agronomy coaching, then multiply and share within their community.",
  },
  {
    title: "Climate-smart breeding pipeline",
    body: "Marker-assisted selection for drought and heat tolerance, evaluated in on-farm trials with participating growers before commercial release.",
  },
  {
    title: "Farmer field schools",
    body: "Practical training on plant population, moisture conservation and post-harvest handling, delivered in local languages across our markets.",
  },
  {
    title: "Youth in agriculture",
    body: "Internships and graduate placements in breeding, seed production and agronomy, building the next generation of African plant scientists.",
  },
];

function SustainabilityPage() {
  return (
    <>
      <PageHeader
        crumbs={[{ label: "Sustainability & ESG" }]}
        eyebrow="Sustainability"
        title="Seed that stands up to a changing climate"
        lead="Our ESG agenda is inseparable from our core business: genetics that yield under stress, delivered to farmers with the support they need to succeed, governed transparently across two listings."
      >
        <Button variant="harvest" size="lg">
          <Download aria-hidden="true" /> Sustainability commitment (PDF)
        </Button>
      </PageHeader>

      <Section>
        <SectionHeading eyebrow="Our pillars" title="Three pillars, one agenda" />
        <div className="mt-10 grid gap-6 lg:grid-cols-3">
          {PILLARS.map((p, i) => (
            <Reveal key={p.title} delay={i * 70}>
              <article className="flex h-full flex-col rounded-2xl border border-border bg-card p-7 shadow-card">
                <img
                  src={p.icon}
                  alt=""
                  aria-hidden="true"
                  className="size-11 object-contain"
                />
                <h3 className="mt-5 font-display text-xl font-bold">{p.title}</h3>
                <p className="mt-2 text-sm font-medium text-primary">{p.lead}</p>
                <ul className="mt-5 space-y-3 text-sm leading-relaxed text-muted-foreground">
                  {p.points.map((pt) => (
                    <li key={pt} className="flex gap-2.5">
                      <span aria-hidden="true" className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                      <span>{pt}</span>
                    </li>
                  ))}
                </ul>
              </article>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section muted>
        <SectionHeading
          eyebrow="Scorecard"
          title="Where we stand"
          lead="Indicative group-level metrics, reported alongside our annual results."
        />
        <dl className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {SCORECARD.map((s, i) => (
            <Reveal key={s.label} delay={i * 50}>
              <div className="h-full rounded-xl border border-border bg-card p-6 shadow-card">
                <dt className="text-sm text-muted-foreground">{s.label}</dt>
                <dd>
                  <span className="mt-2 block font-display text-3xl font-bold text-primary">{s.value}</span>
                  <span className="mt-2 inline-block rounded-full bg-[#007338] px-3 py-1 text-xs font-bold text-white shadow-xs">
                    {s.trend}
                  </span>
                </dd>
              </div>
            </Reveal>
          ))}
        </dl>
      </Section>

      <Section>
        <SectionHeading eyebrow="In practice" title="Programmes running today" />
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {PROGRAMMES.map((p) => (
            <article key={p.title} className="rounded-none border border-border bg-card p-6 shadow-card">
              <h3 className="font-display text-lg font-bold">{p.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{p.body}</p>
            </article>
          ))}
        </div>
      </Section>
    </>
  );
}