import { createFileRoute, Link } from "@tanstack/react-router";
import { CalendarClock, Droplets, MessageSquare } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PageHeader, Section, SectionHeading } from "@/components/site/PageHeader";
import { AdvisoryCta } from "@/components/site/AdvisoryCta";
import { VarietyFinder } from "@/components/site/VarietyFinder";
import { VARIETIES, cropLabel } from "@/data/varieties";

export const Route = createFileRoute("/el-nino")({
  head: () => ({
    meta: [
      { title: "El Niño Advisory | Drought-Season Planning | Seed Co Group" },
      {
        name: "description",
        content:
          "Practical El Niño season guidance for African farmers: drought-tolerant variety recommendations, adjusted planting windows and water conservation practices.",
      },
      { property: "og:title", content: "El Niño Advisory | Seed Co Group" },
      {
        property: "og:description",
        content: "Drought-tolerant varieties and agronomy guidance for a below-normal rainfall season.",
      },
    ],
  }),
  component: ElNinoPage,
});

const drought = VARIETIES.filter((v) => v.droughtTolerance >= 4);

function ElNinoPage() {
  return (
    <>
      <PageHeader
        crumbs={[{ label: "El Niño Advisory" }]}
        eyebrow="Season advisory"
        title="El Niño Advisory 2026/27"
        lead="A below-normal rainfall season is manageable with the right variety, the right planting date and disciplined moisture conservation. Here is what we recommend."
      >
        <Button asChild variant="harvest" size="lg">
          <Link to="/variety-finder">Open the Variety Finder</Link>
        </Button>
        <Button asChild variant="onDark" size="lg">
          <a href="#alerts">Sign up for alerts</a>
        </Button>
      </PageHeader>

      <Section>
        <div className="grid items-start gap-10 lg:grid-cols-2">
          <div>
            <SectionHeading
              eyebrow="What it means for your field"
              title="Plan for a shorter, less reliable rainfall window"
              lead="El Niño years typically shift the onset of rains later and increase the chance of mid-season dry spells. The single biggest lever a farmer controls is variety maturity length."
            />
            <ul className="mt-7 space-y-4">
              {[
                {
                  icon: CalendarClock,
                  title: "Adjust your planting window",
                  body: "Wait for at least 25 mm of effective rain before planting, and avoid planting long-season hybrids after the normal cut-off date. If you miss the window, switch to an ultra-early variety rather than planting late with a late line.",
                },
                {
                  icon: Droplets,
                  title: "Conserve every millimetre",
                  body: "Basin planting, mulching with crop residue, contour ridging and reduced tillage all extend the number of days your crop can survive between rain events. Weed early | weeds compete for water before they compete for nutrients.",
                },
                {
                  icon: MessageSquare,
                  title: "Spread your risk",
                  body: "Split your land between two maturity classes, and consider a sorghum or cowpea block as an insurance crop. Reduce seeding density slightly on sandy soils to lower total crop water demand.",
                },
              ].map((c) => (
                <li key={c.title} className="flex items-start gap-3.5 rounded-xl border border-border bg-card p-5 shadow-card">
                  <c.icon aria-hidden="true" className="mt-0.5 size-5 shrink-0 text-primary" />
                  <div>
                    <h3 className="font-semibold">{c.title}</h3>
                    <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{c.body}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <img
            src="/drought-field.jpg"
            alt="Young corn plants growing resiliently in dry, cracked soil"
            loading="lazy"
            width={1200}
            height={800}
            className="w-full rounded-2xl object-cover shadow-lift lg:sticky lg:top-28"
          />
        </div>
      </Section>

      <Section muted>
        <SectionHeading
          eyebrow="Recommended now"
          title="Drought-resilient varieties by crop"
          lead="Every variety below scored 4 or 5 out of 5 for drought tolerance in our trials."
        />
        <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {drought.map((v) => (
            <li key={v.id} className="rounded-xl border border-border bg-card p-5 shadow-card">
              <p className="eyebrow text-[#FF1B2A]">{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} · drought {v.droughtTolerance}/5
              </p>
              <p className="mt-3 text-sm leading-relaxed">{v.why}</p>
            </li>
          ))}
        </ul>
      </Section>

      <Section>
        <SectionHeading
          eyebrow="Filtered tool"
          title="Variety Finder | drought filter applied"
          lead="Refine by your region and planting window with the drought-resilient filter already switched on."
        />
        <div className="mt-8">
          <VarietyFinder droughtDefault />
        </div>
      </Section>

      {/* Drought Advisory CTA & Horizon Contour Division */}
      <AdvisoryCta
        eyebrow="Early warning"
        title="Get drought alerts before you plant"
        description="Sign up for email and SMS advisories: rainfall onset updates, dry-spell warnings and variety switch recommendations for your region."
      />
    </>
  );
}