Add seed buy links and city-based weather

- Buy links per plant (price comparator + retailers) on fiche and a compact 🛒 on cards; pure shopping.ts + tests
- Weather: city search via Open-Meteo geocoding (no key) in addition to geolocation; shows resolved location label; geocode helpers + tests

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: Florian Flahaut

src/app/plantes/[id]/page.tsx

@@ -10,6 +10,7 @@ import {
 import AddToGarden from "@/components/AddToGarden";
 import PlantCalendar from "@/components/PlantCalendar";
 import PlantAvatar from "@/components/PlantAvatar";
+import BuyLinksSection from "@/components/BuyLinksSection";
 
 export function generateStaticParams() {
   return PLANTS.map((p) => ({ id: p.id }));
@@ -73,6 +74,9 @@ export default async function PlantePage(props: PageProps<"/plantes/[id]">) {
         <p className="text-sm text-amber-900/90 dark:text-amber-200/90">{plant.conseils}</p>
       </section>
 
+      {/* Où acheter */}
+      <BuyLinksSection plant={plant} />
+
       {/* Soins au fil de la saison */}
       {plant.soins.length > 0 && (
         <section className="rounded-xl border border-emerald-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4">

src/components/BuyLinksSection.tsx

@@ -0,0 +1,34 @@
+import type { Plant } from "@/lib/types";
+import { buyLinks } from "@/lib/shopping";
+
+export default function BuyLinksSection({ plant }: { plant: Plant }) {
+  const links = buyLinks(plant);
+  return (
+    <section className="rounded-xl border border-emerald-100 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+      <h3 className="mb-1 font-bold text-emerald-800 dark:text-emerald-100">
+        🛒 Où acheter les {plant.category === "fruit" ? "plants" : "graines"}
+      </h3>
+      <p className="mb-3 text-sm text-emerald-800/80 dark:text-emerald-100/80">
+        Comparez les prix pour trouver le moins cher.
+      </p>
+      <div className="flex flex-wrap gap-2">
+        {links.map((l) => (
+          <a
+            key={l.url}
+            href={l.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`rounded-full px-3 py-1.5 text-sm font-medium transition ${
+              l.compare
+                ? "bg-emerald-600 text-white hover:bg-emerald-700"
+                : "bg-emerald-50 text-emerald-800 hover:bg-emerald-100 dark:bg-zinc-800 dark:text-emerald-100 dark:hover:bg-zinc-700"
+            }`}
+          >
+            {l.compare ? "💶 " : ""}
+            {l.label}
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

src/components/PlantCard.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Plant, CATEGORY_LABELS, DIFFICULTY_LABELS } from "@/lib/types";
 import { ActionType } from "@/lib/types";
 import { ACTION_COLORS } from "@/lib/calendar";
+import { buyLinks } from "@/lib/shopping";
 import PlantAvatar from "./PlantAvatar";
 
 const DIFFICULTY_STYLE: Record<string, string> = {
@@ -17,34 +18,45 @@ export default function PlantCard({
   plant: Plant;
   badge?: ActionType;
 }) {
+  const compare = buyLinks(plant).find((l) => l.compare);
+
   return (
-    <Link
-      href={`/plantes/${plant.id}`}
-      className="group flex flex-col gap-2 rounded-xl border border-emerald-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 shadow-sm transition hover:border-emerald-300 dark:hover:border-zinc-600 hover:shadow-md"
-    >
-      <div className="flex items-start justify-between">
-        <PlantAvatar emoji={plant.emoji} category={plant.category} size="md" />
-        {badge && (
+    <div className="group flex flex-col gap-2 rounded-xl border border-emerald-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 shadow-sm transition hover:border-emerald-300 dark:hover:border-zinc-600 hover:shadow-md">
+      <Link href={`/plantes/${plant.id}`} className="flex flex-col gap-2">
+        <div className="flex items-start justify-between">
+          <PlantAvatar emoji={plant.emoji} category={plant.category} size="md" />
+          {badge && (
+            <span
+              className={`rounded-full px-2 py-0.5 text-xs font-semibold ${ACTION_COLORS[badge].bg} ${ACTION_COLORS[badge].text}`}
+            >
+              {ACTION_COLORS[badge].label}
+            </span>
+          )}
+        </div>
+        <h3 className="font-semibold text-emerald-900 dark:text-emerald-50 group-hover:text-emerald-700">
+          {plant.nom}
+        </h3>
+        <div className="flex flex-wrap gap-1.5 text-xs">
+          <span className="rounded-full bg-emerald-50 dark:bg-zinc-800 px-2 py-0.5 text-emerald-700 dark:text-emerald-300">
+            {CATEGORY_LABELS[plant.category]}
+          </span>
           <span
-            className={`rounded-full px-2 py-0.5 text-xs font-semibold ${ACTION_COLORS[badge].bg} ${ACTION_COLORS[badge].text}`}
+            className={`rounded-full px-2 py-0.5 ${DIFFICULTY_STYLE[plant.difficulty]}`}
           >
-            {ACTION_COLORS[badge].label}
+            {DIFFICULTY_LABELS[plant.difficulty]}
           </span>
-        )}
-      </div>
-      <h3 className="font-semibold text-emerald-900 dark:text-emerald-50 group-hover:text-emerald-700">
-        {plant.nom}
-      </h3>
-      <div className="mt-auto flex flex-wrap gap-1.5 text-xs">
-        <span className="rounded-full bg-emerald-50 dark:bg-zinc-800 px-2 py-0.5 text-emerald-700 dark:text-emerald-300">
-          {CATEGORY_LABELS[plant.category]}
-        </span>
-        <span
-          className={`rounded-full px-2 py-0.5 ${DIFFICULTY_STYLE[plant.difficulty]}`}
+        </div>
+      </Link>
+      {compare && (
+        <a
+          href={compare.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-auto inline-flex w-fit items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 transition hover:bg-emerald-100 dark:bg-zinc-800 dark:text-emerald-300 dark:hover:bg-zinc-700"
         >
-          {DIFFICULTY_LABELS[plant.difficulty]}
-        </span>
-      </div>
-    </Link>
+          🛒 Acheter
+        </a>
+      )}
+    </div>
   );
 }

src/components/WeatherAdvice.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from "react";
 import {
   openMeteoUrl,
+  geocodeUrl,
+  firstGeocode,
   summarize,
   wateringAdvice,
   WaterLevel,
@@ -27,33 +29,47 @@ const LEVEL_EMOJI: Record<WaterLevel, string> = {
   urgent: "🥵",
 };
 
+interface SavedGeo {
+  lat: number;
+  lon: number;
+  label?: string;
+}
+
 type State =
   | { kind: "idle" }
   | { kind: "loading" }
-  | { kind: "ready"; summary: ForecastSummary }
-  | { kind: "denied" }
+  | { kind: "ready"; summary: ForecastSummary; label: string }
   | { kind: "error"; message: string };
 
-function readSavedCoords(): { lat: number; lon: number } | null {
+function readSaved(): SavedGeo | null {
   try {
     const raw = localStorage.getItem(GEO_KEY);
-    return raw ? JSON.parse(raw) : null;
+    return raw ? (JSON.parse(raw) as SavedGeo) : null;
   } catch {
     return null;
   }
 }
 
+function save(geo: SavedGeo) {
+  try {
+    localStorage.setItem(GEO_KEY, JSON.stringify(geo));
+  } catch {
+    // ignore
+  }
+}
+
 export default function WeatherAdvice() {
   const [state, setState] = useState<State>({ kind: "idle" });
+  const [city, setCity] = useState("");
 
-  const load = useCallback(async (lat: number, lon: number) => {
+  const load = useCallback(async (lat: number, lon: number, label: string) => {
     setState({ kind: "loading" });
     try {
       const res = await fetch(openMeteoUrl(lat, lon));
       if (!res.ok) throw new Error("Météo indisponible");
       const summary = summarize(await res.json());
       if (!summary) throw new Error("Données météo incomplètes");
-      setState({ kind: "ready", summary });
+      setState({ kind: "ready", summary, label });
     } catch (e) {
       setState({
         kind: "error",
@@ -62,6 +78,31 @@ export default function WeatherAdvice() {
     }
   }, []);
 
+  const searchCity = useCallback(
+    async (name: string) => {
+      const q = name.trim();
+      if (!q) return;
+      setState({ kind: "loading" });
+      try {
+        const res = await fetch(geocodeUrl(q));
+        if (!res.ok) throw new Error("Recherche de ville impossible");
+        const place = firstGeocode(await res.json());
+        if (!place) {
+          setState({ kind: "error", message: `Ville « ${q} » introuvable` });
+          return;
+        }
+        save({ lat: place.lat, lon: place.lon, label: place.label });
+        load(place.lat, place.lon, place.label);
+      } catch (e) {
+        setState({
+          kind: "error",
+          message: e instanceof Error ? e.message : String(e),
+        });
+      }
+    },
+    [load]
+  );
+
   const locate = useCallback(() => {
     if (typeof navigator === "undefined" || !navigator.geolocation) {
       setState({ kind: "error", message: "Géolocalisation non disponible" });
@@ -70,89 +111,98 @@ export default function WeatherAdvice() {
     setState({ kind: "loading" });
     navigator.geolocation.getCurrentPosition(
       (pos) => {
-        const coords = {
+        const geo: SavedGeo = {
           lat: pos.coords.latitude,
           lon: pos.coords.longitude,
+          label: "Ma position",
         };
-        try {
-          localStorage.setItem(GEO_KEY, JSON.stringify(coords));
-        } catch {
-          // ignore
-        }
-        load(coords.lat, coords.lon);
+        save(geo);
+        load(geo.lat, geo.lon, geo.label!);
       },
-      () => setState({ kind: "denied" }),
+      () => setState({ kind: "error", message: "Localisation refusée" }),
       { maximumAge: 3_600_000, timeout: 10_000 }
     );
   }, [load]);
 
   useEffect(() => {
-    const saved = readSavedCoords();
-    // Différé hors de la phase synchrone de l'effet (pas de setState direct).
-    if (saved) queueMicrotask(() => load(saved.lat, saved.lon));
+    const saved = readSaved();
+    if (saved) {
+      // Différé hors de la phase synchrone de l'effet.
+      queueMicrotask(() =>
+        load(saved.lat, saved.lon, saved.label ?? "Position enregistrée")
+      );
+    }
   }, [load]);
 
-  if (state.kind === "idle" || state.kind === "denied") {
-    return (
+  const advice =
+    state.kind === "ready" ? wateringAdvice(state.summary) : null;
+
+  return (
+    <div className="space-y-2">
+      {/* Barre de localisation */}
       <div className="flex flex-wrap items-center gap-2 rounded-xl border border-emerald-100 bg-white p-3 text-sm dark:border-zinc-800 dark:bg-zinc-900">
         <span className="text-emerald-800/80 dark:text-emerald-100/80">
-          ⛅ Conseils d&apos;arrosage selon la météo locale
+          ⛅ Arrosage selon la météo
         </span>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            searchCity(city);
+          }}
+          className="flex items-center gap-1"
+        >
+          <input
+            value={city}
+            onChange={(e) => setCity(e.target.value)}
+            placeholder="Votre ville"
+            className="w-36 rounded-lg border border-emerald-200 px-2 py-1 text-sm outline-none focus:border-emerald-400 dark:border-zinc-700 dark:focus:border-emerald-500"
+          />
+          <button
+            type="submit"
+            className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700"
+          >
+            OK
+          </button>
+        </form>
         <button
           onClick={locate}
-          className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700"
+          title="Utiliser ma position"
+          className="rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-800 hover:bg-emerald-100 dark:bg-zinc-800 dark:text-emerald-100 dark:hover:bg-zinc-700"
         >
-          {state.kind === "denied"
-            ? "Réessayer la localisation"
-            : "Activer la localisation"}
+          📍 Ma position
         </button>
-        {state.kind === "denied" && (
-          <span className="text-xs text-rose-600 dark:text-rose-300">
-            Localisation refusée.
+        {state.kind === "ready" && (
+          <span className="text-xs text-emerald-700/70 dark:text-emerald-300/70">
+            {state.label}
           </span>
         )}
       </div>
-    );
-  }
 
-  if (state.kind === "loading") {
-    return (
-      <p className="text-sm text-emerald-700/60 dark:text-emerald-300/60">
-        Météo en cours…
-      </p>
-    );
-  }
+      {state.kind === "loading" && (
+        <p className="text-sm text-emerald-700/60 dark:text-emerald-300/60">
+          Météo en cours…
+        </p>
+      )}
 
-  if (state.kind === "error") {
-    return (
-      <div className="flex flex-wrap items-center gap-2 rounded-xl border border-emerald-100 bg-white p-3 text-sm dark:border-zinc-800 dark:bg-zinc-900">
-        <span className="text-rose-600 dark:text-rose-300">
-          Météo indisponible ({state.message}).
-        </span>
-        <button
-          onClick={locate}
-          className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-medium text-white hover:bg-emerald-700"
-        >
-          Réessayer
-        </button>
-      </div>
-    );
-  }
+      {state.kind === "error" && (
+        <p className="text-sm text-rose-600 dark:text-rose-300">
+          {state.message}.
+        </p>
+      )}
 
-  const advice = wateringAdvice(state.summary);
-  return (
-    <div
-      className={`rounded-xl border p-4 ${LEVEL_STYLE[advice.level]}`}
-    >
-      <p className="flex items-center gap-2 font-semibold">
-        <span className="text-lg">{LEVEL_EMOJI[advice.level]}</span>
-        {advice.title}
-      </p>
-      <p className="mt-1 text-sm opacity-90">{advice.detail}</p>
-      <p className="mt-2 text-xs opacity-70">
-        Prévision 48 h : {state.summary.precipitationMm.toFixed(1)} mm de pluie,
-        max {Math.round(state.summary.tempMaxC)} °C.
-      </p>
+      {advice && state.kind === "ready" && (
+        <div className={`rounded-xl border p-4 ${LEVEL_STYLE[advice.level]}`}>
+          <p className="flex items-center gap-2 font-semibold">
+            <span className="text-lg">{LEVEL_EMOJI[advice.level]}</span>
+            {advice.title}
+          </p>
+          <p className="mt-1 text-sm opacity-90">{advice.detail}</p>
+          <p className="mt-2 text-xs opacity-70">
+            Prévision 48 h : {state.summary.precipitationMm.toFixed(1)} mm de
+            pluie, max {Math.round(state.summary.tempMaxC)} °C.
+          </p>
+        </div>
+      )}
     </div>
   );
 }