Add My Bar, Bartender, Recommend features + drink images

- Drink Images: upload/display photos of bottles/cans on drink cards and detail pages
- My Bar: inventory tracker for spirits, liqueurs, mixers, bitters, garnishes, tools
- Bartender: AI-powered cocktail recipe generation, "what can I make" suggestions,
  saved recipes. Cross-references bar inventory for ingredient availability.
- Recommend: AI flavor profile analysis, personalized drink recommendations,
  "find similar" drinks based on highly-rated favorites
- Navigation: desktop sidebar with all 8 routes, mobile bottom nav with
  4 primary items + "More" popup menu
- New Prisma models: BarItem, Recipe, FlavorProfile
- Backup/restore updated to include bar items

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

src/components/bar/bar-category-group.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import {
+  Wine,
+  Droplets,
+  GlassWater,
+  FlaskConical,
+  Flower2,
+  Wrench,
+} from "lucide-react"
+import { BarItemCard } from "@/components/bar/bar-item-card"
+import type { BarItem } from "@/hooks/use-bar"
+
+const CATEGORY_ICONS: Record<string, React.ElementType> = {
+  SPIRITS: Wine,
+  LIQUEURS: Droplets,
+  MIXERS: GlassWater,
+  BITTERS: FlaskConical,
+  GARNISHES: Flower2,
+  TOOLS: Wrench,
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  SPIRITS: "Spirits",
+  LIQUEURS: "Liqueurs",
+  MIXERS: "Mixers",
+  BITTERS: "Bitters",
+  GARNISHES: "Garnishes",
+  TOOLS: "Tools",
+}
+
+interface BarCategoryGroupProps {
+  category: string
+  items: BarItem[]
+  onEdit: (item: BarItem) => void
+  onDelete: (item: BarItem) => void
+}
+
+export function BarCategoryGroup({
+  category,
+  items,
+  onEdit,
+  onDelete,
+}: BarCategoryGroupProps) {
+  const Icon = CATEGORY_ICONS[category] || Wine
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Icon className="h-5 w-5 text-muted-foreground" />
+        <h2 className="text-lg font-semibold">
+          {CATEGORY_LABELS[category] || category}
+        </h2>
+        <span className="text-sm text-muted-foreground">
+          ({items.length})
+        </span>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {items.map((item) => (
+          <BarItemCard
+            key={item.id}
+            item={item}
+            onEdit={onEdit}
+            onDelete={onDelete}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/bar/bar-item-card.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Pencil, Trash2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { BarItem } from "@/hooks/use-bar"
+
+const CATEGORY_COLORS: Record<string, string> = {
+  SPIRITS: "bg-amber-500/15 text-amber-700 border-amber-500/25",
+  LIQUEURS: "bg-purple-500/15 text-purple-700 border-purple-500/25",
+  MIXERS: "bg-sky-500/15 text-sky-700 border-sky-500/25",
+  BITTERS: "bg-orange-500/15 text-orange-700 border-orange-500/25",
+  GARNISHES: "bg-green-500/15 text-green-700 border-green-500/25",
+  TOOLS: "bg-slate-500/15 text-slate-700 border-slate-500/25",
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  SPIRITS: "Spirits",
+  LIQUEURS: "Liqueurs",
+  MIXERS: "Mixers",
+  BITTERS: "Bitters",
+  GARNISHES: "Garnishes",
+  TOOLS: "Tools",
+}
+
+const QUANTITY_COLORS: Record<string, string> = {
+  FULL: "bg-green-500/15 text-green-700 border-green-500/25",
+  HALF: "bg-yellow-500/15 text-yellow-700 border-yellow-500/25",
+  LOW: "bg-orange-500/15 text-orange-700 border-orange-500/25",
+  EMPTY: "bg-red-500/15 text-red-700 border-red-500/25",
+}
+
+const QUANTITY_LABELS: Record<string, string> = {
+  FULL: "Full",
+  HALF: "Half",
+  LOW: "Low",
+  EMPTY: "Empty",
+}
+
+interface BarItemCardProps {
+  item: BarItem
+  onEdit: (item: BarItem) => void
+  onDelete: (item: BarItem) => void
+}
+
+export function BarItemCard({ item, onEdit, onDelete }: BarItemCardProps) {
+  return (
+    <Card className="h-full">
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="font-semibold leading-tight line-clamp-2">
+            {item.name}
+          </h3>
+          <div className="flex items-center gap-1 shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => onEdit(item)}
+            >
+              <Pencil className="h-3.5 w-3.5" />
+              <span className="sr-only">Edit</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-destructive hover:text-destructive"
+              onClick={() => onDelete(item)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+              <span className="sr-only">Delete</span>
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Badge
+            className={cn(
+              "text-[11px]",
+              CATEGORY_COLORS[item.category] || CATEGORY_COLORS.SPIRITS
+            )}
+          >
+            {CATEGORY_LABELS[item.category] || item.category}
+          </Badge>
+          <Badge
+            className={cn(
+              "text-[11px]",
+              QUANTITY_COLORS[item.quantity] || QUANTITY_COLORS.FULL
+            )}
+          >
+            {QUANTITY_LABELS[item.quantity] || item.quantity}
+          </Badge>
+        </div>
+
+        {item.notes && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {item.notes}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/bar/bar-item-form.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectOption } from "@/components/ui/select"
+import type { BarItemCreate } from "@/lib/validators"
+
+const CATEGORIES = [
+  { value: "SPIRITS", label: "Spirits" },
+  { value: "LIQUEURS", label: "Liqueurs" },
+  { value: "MIXERS", label: "Mixers" },
+  { value: "BITTERS", label: "Bitters" },
+  { value: "GARNISHES", label: "Garnishes" },
+  { value: "TOOLS", label: "Tools" },
+]
+
+const QUANTITIES = [
+  { value: "FULL", label: "Full" },
+  { value: "HALF", label: "Half" },
+  { value: "LOW", label: "Low" },
+  { value: "EMPTY", label: "Empty" },
+]
+
+interface BarItemFormProps {
+  initialData?: Partial<BarItemCreate>
+  onSubmit: (data: BarItemCreate) => void
+  isSubmitting?: boolean
+  submitLabel?: string
+}
+
+export function BarItemForm({
+  initialData,
+  onSubmit,
+  isSubmitting = false,
+  submitLabel = "Save Item",
+}: BarItemFormProps) {
+  const [name, setName] = useState(initialData?.name || "")
+  const [category, setCategory] = useState(initialData?.category || "SPIRITS")
+  const [quantity, setQuantity] = useState(initialData?.quantity || "FULL")
+  const [notes, setNotes] = useState(initialData?.notes || "")
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+
+    const newErrors: Record<string, string> = {}
+    if (!name.trim()) {
+      newErrors.name = "Name is required"
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors)
+      return
+    }
+
+    setErrors({})
+
+    const data: BarItemCreate = {
+      name: name.trim(),
+      category: category as BarItemCreate["category"],
+      quantity: quantity as BarItemCreate["quantity"],
+    }
+
+    if (notes.trim()) data.notes = notes.trim()
+
+    onSubmit(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="bar-item-name">
+          Name <span className="text-destructive">*</span>
+        </Label>
+        <Input
+          id="bar-item-name"
+          placeholder="e.g., Maker's Mark Bourbon"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        {errors.name && (
+          <p className="text-sm text-destructive">{errors.name}</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="bar-item-category">
+            Category <span className="text-destructive">*</span>
+          </Label>
+          <Select
+            id="bar-item-category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value as typeof category)}
+          >
+            {CATEGORIES.map((c) => (
+              <SelectOption key={c.value} value={c.value}>
+                {c.label}
+              </SelectOption>
+            ))}
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="bar-item-quantity">Quantity</Label>
+          <Select
+            id="bar-item-quantity"
+            value={quantity}
+            onChange={(e) => setQuantity(e.target.value as typeof quantity)}
+          >
+            {QUANTITIES.map((q) => (
+              <SelectOption key={q.value} value={q.value}>
+                {q.label}
+              </SelectOption>
+            ))}
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="bar-item-notes">Notes</Label>
+          <span className="text-xs text-muted-foreground">
+            {notes.length}/2000
+          </span>
+        </div>
+        <Textarea
+          id="bar-item-notes"
+          placeholder="Brand details, tasting notes, purchase info..."
+          value={notes}
+          onChange={(e) => setNotes(e.target.value.slice(0, 2000))}
+          rows={3}
+        />
+      </div>
+
+      <Button type="submit" className="w-full" disabled={isSubmitting}>
+        {isSubmitting ? "Saving..." : submitLabel}
+      </Button>
+    </form>
+  )
+}

src/components/bartender/recipe-card.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Check,
+  X,
+  ChevronDown,
+  ChevronUp,
+  Bookmark,
+  Trash2,
+  GlassWater,
+  Loader2,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { RecipeIngredient } from "@/hooks/use-bartender"
+
+export interface RecipeCardData {
+  id?: string
+  title: string
+  ingredients: RecipeIngredient[]
+  steps: string[]
+  garnish?: string | null
+  glassware?: string | null
+  notes?: string | null
+  missingCount?: number
+  sourceDrink?: { name: string; type: string } | null
+}
+
+interface RecipeCardProps {
+  recipe: RecipeCardData
+  onSave?: (recipe: RecipeCardData) => void
+  onDelete?: (id: string) => void
+  isSaving?: boolean
+  isDeleting?: boolean
+  saved?: boolean
+}
+
+export function RecipeCard({
+  recipe,
+  onSave,
+  onDelete,
+  isSaving,
+  isDeleting,
+  saved,
+}: RecipeCardProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  const availableCount = recipe.ingredients.filter((i) => i.available).length
+  const totalCount = recipe.ingredients.length
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-lg leading-tight">
+            {recipe.title}
+          </CardTitle>
+          <div className="flex items-center gap-1 shrink-0">
+            {recipe.missingCount !== undefined && (
+              <Badge
+                variant={recipe.missingCount === 0 ? "default" : "secondary"}
+                className={cn(
+                  "text-xs",
+                  recipe.missingCount === 0 &&
+                    "bg-green-500/15 text-green-700 border-green-500/25"
+                )}
+              >
+                {recipe.missingCount === 0
+                  ? "Ready"
+                  : `Missing ${recipe.missingCount}`}
+              </Badge>
+            )}
+            {!saved && onSave && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onSave(recipe)}
+                disabled={isSaving}
+                className="h-8 w-8 p-0"
+              >
+                {isSaving ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Bookmark className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+            {saved && recipe.id && onDelete && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onDelete(recipe.id!)}
+                disabled={isDeleting}
+                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {recipe.glassware && (
+          <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <GlassWater className="h-3.5 w-3.5" />
+            {recipe.glassware}
+          </div>
+        )}
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {/* Ingredients */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <h4 className="text-sm font-medium">
+              Ingredients
+            </h4>
+            <span className="text-xs text-muted-foreground">
+              {availableCount}/{totalCount} available
+            </span>
+          </div>
+          <ul className="space-y-1">
+            {recipe.ingredients.map((ing, i) => (
+              <li
+                key={i}
+                className={cn(
+                  "flex items-center gap-2 text-sm",
+                  !ing.available && "text-muted-foreground"
+                )}
+              >
+                {ing.available ? (
+                  <Check className="h-3.5 w-3.5 text-green-600 shrink-0" />
+                ) : (
+                  <X className="h-3.5 w-3.5 text-destructive shrink-0" />
+                )}
+                <span>
+                  {ing.amount} {ing.name}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Garnish */}
+        {recipe.garnish && (
+          <p className="text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">Garnish:</span>{" "}
+            {recipe.garnish}
+          </p>
+        )}
+
+        {/* Expandable Steps */}
+        <div>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+          >
+            {expanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+            {expanded ? "Hide steps" : "Show steps"}
+          </button>
+
+          {expanded && (
+            <ol className="mt-2 space-y-2">
+              {recipe.steps.map((step, i) => (
+                <li key={i} className="flex gap-2 text-sm">
+                  <span className="shrink-0 flex items-center justify-center h-5 w-5 rounded-full bg-primary/10 text-primary text-xs font-medium">
+                    {i + 1}
+                  </span>
+                  <span>{step}</span>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+
+        {/* Notes */}
+        {expanded && recipe.notes && (
+          <div className="rounded-md bg-muted/50 p-3">
+            <p className="text-sm text-muted-foreground">{recipe.notes}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/bartender/recreate-tab.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard } from "./recipe-card"
+import { useRecreateRecipe, useSaveRecipe } from "@/hooks/use-bartender"
+import { Search, Loader2, Sparkles } from "lucide-react"
+import type { RecipeCardData } from "./recipe-card"
+import type { RecipeCreate } from "@/lib/validators"
+
+export function RecreateTab() {
+  const [cocktailName, setCocktailName] = useState("")
+  const [recipe, setRecipe] = useState<RecipeCardData | null>(null)
+
+  const recreate = useRecreateRecipe()
+  const saveRecipe = useSaveRecipe()
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const name = cocktailName.trim()
+    if (!name) return
+
+    recreate.mutate(
+      { cocktailName: name },
+      {
+        onSuccess: (data) => {
+          setRecipe(data)
+        },
+      }
+    )
+  }
+
+  function handleSave(recipeData: RecipeCardData) {
+    const payload: RecipeCreate = {
+      title: recipeData.title,
+      ingredients: recipeData.ingredients,
+      steps: recipeData.steps,
+      garnish: recipeData.garnish || null,
+      glassware: recipeData.glassware || null,
+      notes: recipeData.notes || null,
+    }
+    saveRecipe.mutate(payload, {
+      onSuccess: () => {
+        setRecipe((prev) =>
+          prev ? { ...prev, id: "saved" } : prev
+        )
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-1">Recreate a Cocktail</h3>
+        <p className="text-sm text-muted-foreground">
+          Enter a cocktail name and get a recipe matched against your bar
+          inventory.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <Input
+          placeholder="e.g., Old Fashioned, Margarita, Negroni..."
+          value={cocktailName}
+          onChange={(e) => setCocktailName(e.target.value)}
+          disabled={recreate.isPending}
+        />
+        <Button type="submit" disabled={recreate.isPending || !cocktailName.trim()}>
+          {recreate.isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Search className="h-4 w-4" />
+          )}
+        </Button>
+      </form>
+
+      {recreate.isPending && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Sparkles className="h-4 w-4 animate-pulse" />
+            Generating recipe...
+          </div>
+          <Skeleton className="h-[200px] rounded-lg" />
+        </div>
+      )}
+
+      {recreate.isError && (
+        <div className="rounded-md bg-destructive/10 p-3">
+          <p className="text-sm text-destructive">
+            {recreate.error.message || "Failed to generate recipe. Please try again."}
+          </p>
+        </div>
+      )}
+
+      {recipe && !recreate.isPending && (
+        <RecipeCard
+          recipe={recipe}
+          onSave={handleSave}
+          isSaving={saveRecipe.isPending}
+          saved={recipe.id === "saved" || saveRecipe.isSuccess}
+        />
+      )}
+    </div>
+  )
+}

src/components/bartender/saved-recipes-tab.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard } from "./recipe-card"
+import { useRecipes, useDeleteRecipe } from "@/hooks/use-bartender"
+import { BookOpen } from "lucide-react"
+import { useState } from "react"
+
+export function SavedRecipesTab() {
+  const { data, isLoading, error } = useRecipes()
+  const deleteRecipe = useDeleteRecipe()
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+
+  const recipes = data?.recipes || []
+
+  function handleDelete(id: string) {
+    if (!confirm("Delete this saved recipe?")) return
+    setDeletingId(id)
+    deleteRecipe.mutate(id, {
+      onSettled: () => {
+        setDeletingId(null)
+      },
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {Array.from({ length: 4 }, (_, i) => (
+          <Skeleton key={i} className="h-[200px] rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-destructive/10 p-3">
+        <p className="text-sm text-destructive">
+          Failed to load saved recipes. Please try again.
+        </p>
+      </div>
+    )
+  }
+
+  if (recipes.length === 0) {
+    return (
+      <div className="text-center py-12 space-y-3">
+        <BookOpen className="h-10 w-10 mx-auto text-muted-foreground/50" />
+        <div>
+          <p className="font-medium">No saved recipes yet</p>
+          <p className="text-sm text-muted-foreground mt-1">
+            Generate a recipe and save it to build your collection.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      {recipes.map((recipe) => (
+        <RecipeCard
+          key={recipe.id}
+          recipe={{
+            id: recipe.id,
+            title: recipe.title,
+            ingredients: recipe.ingredients,
+            steps: recipe.steps,
+            garnish: recipe.garnish,
+            glassware: recipe.glassware,
+            notes: recipe.notes,
+            sourceDrink: recipe.sourceDrink,
+          }}
+          onDelete={handleDelete}
+          isDeleting={deletingId === recipe.id}
+          saved
+        />
+      ))}
+    </div>
+  )
+}

src/components/bartender/suggest-tab.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard } from "./recipe-card"
+import { useSuggestCocktails, useSaveRecipe } from "@/hooks/use-bartender"
+import type { SuggestedCocktail } from "@/hooks/use-bartender"
+import { Loader2, Sparkles, Wine } from "lucide-react"
+import type { RecipeCardData } from "./recipe-card"
+import type { RecipeCreate } from "@/lib/validators"
+import { useState } from "react"
+
+export function SuggestTab() {
+  const suggest = useSuggestCocktails()
+  const saveRecipe = useSaveRecipe()
+  const [savedIds, setSavedIds] = useState<Set<number>>(new Set())
+  const [savingIndex, setSavingIndex] = useState<number | null>(null)
+
+  const suggestions: SuggestedCocktail[] =
+    (suggest.data as { suggestions?: SuggestedCocktail[] })?.suggestions || []
+
+  function handleSuggest() {
+    setSavedIds(new Set())
+    suggest.mutate()
+  }
+
+  function handleSave(recipeData: RecipeCardData, index: number) {
+    setSavingIndex(index)
+    const payload: RecipeCreate = {
+      title: recipeData.title,
+      ingredients: recipeData.ingredients,
+      steps: recipeData.steps,
+      garnish: recipeData.garnish || null,
+      glassware: recipeData.glassware || null,
+      notes: null,
+    }
+    saveRecipe.mutate(payload, {
+      onSuccess: () => {
+        setSavedIds((prev) => new Set(prev).add(index))
+        setSavingIndex(null)
+      },
+      onError: () => {
+        setSavingIndex(null)
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-1">What Can I Make?</h3>
+        <p className="text-sm text-muted-foreground">
+          Get cocktail suggestions based on what you have in your bar.
+        </p>
+      </div>
+
+      <Button onClick={handleSuggest} disabled={suggest.isPending}>
+        {suggest.isPending ? (
+          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+        ) : (
+          <Sparkles className="h-4 w-4 mr-2" />
+        )}
+        {suggest.isPending ? "Thinking..." : "Suggest Cocktails"}
+      </Button>
+
+      {suggest.isPending && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Sparkles className="h-4 w-4 animate-pulse" />
+            Analyzing your bar inventory...
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {Array.from({ length: 4 }, (_, i) => (
+              <Skeleton key={i} className="h-[200px] rounded-lg" />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {suggest.isError && (
+        <div className="rounded-md bg-destructive/10 p-3">
+          <p className="text-sm text-destructive">
+            {suggest.error.message ||
+              "Failed to generate suggestions. Please try again."}
+          </p>
+        </div>
+      )}
+
+      {suggestions.length > 0 && !suggest.isPending && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {suggestions.map((cocktail, i) => (
+            <RecipeCard
+              key={`${cocktail.title}-${i}`}
+              recipe={{
+                title: cocktail.title,
+                ingredients: cocktail.ingredients,
+                steps: cocktail.steps,
+                garnish: cocktail.garnish,
+                glassware: cocktail.glassware,
+                missingCount: cocktail.missingCount,
+              }}
+              onSave={(recipe) => handleSave(recipe, i)}
+              isSaving={savingIndex === i}
+              saved={savedIds.has(i)}
+            />
+          ))}
+        </div>
+      )}
+
+      {suggest.isSuccess && suggestions.length === 0 && (
+        <div className="text-center py-12 space-y-3">
+          <Wine className="h-10 w-10 mx-auto text-muted-foreground/50" />
+          <div>
+            <p className="font-medium">No suggestions available</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Try adding more items to your bar inventory.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/drinks/drink-card.tsx

@@ -30,7 +30,16 @@ interface DrinkCardProps {
 export function DrinkCard({ drink }: DrinkCardProps) {
   return (
     <Link href={`/drinks/${drink.id}`}>
-      <Card className="hover:border-primary/50 transition-colors cursor-pointer h-full">
+      <Card className="hover:border-primary/50 transition-colors cursor-pointer h-full overflow-hidden">
+        {drink.imageUrl && (
+          <div className="h-32 overflow-hidden">
+            <img
+              src={drink.imageUrl}
+              alt={drink.name}
+              className="w-full h-full object-cover rounded-t-lg"
+            />
+          </div>
+        )}
         <CardContent className="p-4 space-y-3">
           <div className="flex items-start justify-between gap-2">
             <h3 className="font-semibold leading-tight line-clamp-2">

src/components/drinks/drink-detail-actions.tsx

@@ -92,6 +92,7 @@ export function DrinkDetailActions({
                 region: drink.region || undefined,
                 abv: drink.abv || undefined,
                 description: drink.description || undefined,
+                imageUrl: drink.imageUrl || undefined,
               }}
               onSubmit={handleUpdate}
               isSubmitting={updateDrink.isPending}

src/components/drinks/drink-form.tsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectOption } from "@/components/ui/select"
+import { DrinkImageUpload } from "@/components/drinks/drink-image-upload"
 import type { DrinkCreate } from "@/lib/validators"
 
 const DRINK_TYPES = [
@@ -17,7 +18,7 @@ const DRINK_TYPES = [
 ]
 
 interface DrinkFormProps {
-  initialData?: Partial<DrinkCreate>
+  initialData?: Partial<DrinkCreate> & { imageUrl?: string | null }
   onSubmit: (data: DrinkCreate) => void
   isSubmitting?: boolean
   submitLabel?: string
@@ -38,6 +39,9 @@ export function DrinkForm({
   const [description, setDescription] = useState(
     initialData?.description || ""
   )
+  const [imageUrl, setImageUrl] = useState<string | null>(
+    initialData?.imageUrl || null
+  )
   const [errors, setErrors] = useState<Record<string, string>>({})
 
   function handleSubmit(e: React.FormEvent) {
@@ -70,6 +74,7 @@ export function DrinkForm({
       }
     }
     if (description.trim()) data.description = description.trim()
+    if (imageUrl) data.imageUrl = imageUrl
 
     onSubmit(data)
   }
@@ -167,6 +172,11 @@ export function DrinkForm({
         />
       </div>
 
+      <div className="space-y-2">
+        <Label>Photo</Label>
+        <DrinkImageUpload imageUrl={imageUrl} onImageChange={setImageUrl} />
+      </div>
+
       <Button type="submit" className="w-full" disabled={isSubmitting}>
         {isSubmitting ? "Saving..." : submitLabel}
       </Button>

src/components/drinks/drink-image-upload.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import { useRef, useState, useCallback } from "react"
+import { ImagePlus, X, Loader2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface DrinkImageUploadProps {
+  imageUrl?: string | null
+  onImageChange: (url: string | null) => void
+}
+
+export function DrinkImageUpload({
+  imageUrl,
+  onImageChange,
+}: DrinkImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false)
+  const [dragActive, setDragActive] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      setError(null)
+      setIsUploading(true)
+
+      try {
+        const formData = new FormData()
+        formData.append("file", file)
+
+        const res = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+        })
+
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}))
+          throw new Error(body.error || "Failed to upload image")
+        }
+
+        const { url } = await res.json()
+        onImageChange(url)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to upload image")
+      } finally {
+        setIsUploading(false)
+      }
+    },
+    [onImageChange]
+  )
+
+  const handleFile = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("image/")) {
+        setError("Please select an image file")
+        return
+      }
+      uploadFile(file)
+    },
+    [uploadFile]
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setDragActive(false)
+      const file = e.dataTransfer.files[0]
+      if (file) {
+        handleFile(file)
+      }
+    },
+    [handleFile]
+  )
+
+  const handleRemove = () => {
+    onImageChange(null)
+    setError(null)
+    if (fileInputRef.current) fileInputRef.current.value = ""
+  }
+
+  if (imageUrl) {
+    return (
+      <div className="relative">
+        <img
+          src={imageUrl}
+          alt="Drink photo"
+          className="w-full rounded-lg max-h-[300px] object-contain bg-muted"
+        />
+        <Button
+          type="button"
+          variant="destructive"
+          size="icon"
+          className="absolute top-2 right-2"
+          onClick={handleRemove}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "border-2 border-dashed rounded-lg transition-colors",
+          dragActive
+            ? "border-primary bg-primary/5"
+            : "border-muted-foreground/25",
+          isUploading && "pointer-events-none opacity-60"
+        )}
+        onDragOver={(e) => {
+          e.preventDefault()
+          setDragActive(true)
+        }}
+        onDragLeave={() => setDragActive(false)}
+        onDrop={handleDrop}
+      >
+        <div className="flex flex-col items-center gap-3 py-8">
+          {isUploading ? (
+            <>
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">Uploading...</p>
+            </>
+          ) : (
+            <>
+              <ImagePlus className="h-8 w-8 text-muted-foreground" />
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                Upload Photo
+              </Button>
+              <p className="text-xs text-muted-foreground text-center">
+                or drag and drop an image here
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-destructive mt-1.5">{error}</p>}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/heic"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (file) handleFile(file)
+        }}
+      />
+    </div>
+  )
+}

src/components/layout/bottom-nav.tsx

@@ -2,15 +2,15 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { LayoutDashboard, Camera, Wine, Bookmark, Settings } from "lucide-react"
+import { LayoutDashboard, Wine, FlaskConical, GlassWater } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { MoreMenu } from "./more-menu"
 
-const navItems = [
+const primaryItems = [
   { href: "/dashboard", label: "Home", icon: LayoutDashboard },
-  { href: "/scan", label: "Scan", icon: Camera },
   { href: "/drinks", label: "Drinks", icon: Wine },
-  { href: "/wishlist", label: "Later", icon: Bookmark },
-  { href: "/settings", label: "Settings", icon: Settings },
+  { href: "/bar", label: "Bar", icon: FlaskConical },
+  { href: "/bartender", label: "Mix", icon: GlassWater },
 ]
 
 export function BottomNav() {
@@ -19,7 +19,7 @@ export function BottomNav() {
   return (
     <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-card border-t safe-area-bottom">
       <div className="flex items-center justify-around h-16">
-        {navItems.map((item) => {
+        {primaryItems.map((item) => {
           const isActive = pathname.startsWith(item.href)
           return (
             <Link
@@ -37,6 +37,7 @@ export function BottomNav() {
             </Link>
           )
         })}
+        <MoreMenu />
       </div>
     </nav>
   )

src/components/layout/more-menu.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  Camera,
+  Sparkles,
+  Bookmark,
+  Settings,
+  MoreHorizontal,
+  X,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const moreItems = [
+  { href: "/scan", label: "Scan Menu", icon: Camera },
+  { href: "/recommend", label: "For You", icon: Sparkles },
+  { href: "/wishlist", label: "Try Later", icon: Bookmark },
+  { href: "/settings", label: "Settings", icon: Settings },
+]
+
+export function MoreMenu() {
+  const [open, setOpen] = useState(false)
+  const pathname = usePathname()
+
+  const isActiveInMore = moreItems.some((item) =>
+    pathname.startsWith(item.href)
+  )
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex flex-col items-center gap-1 px-3 py-2 text-xs font-medium transition-colors min-w-[64px]",
+          open || isActiveInMore ? "text-primary" : "text-muted-foreground"
+        )}
+      >
+        {open ? (
+          <X className="h-5 w-5" />
+        ) : (
+          <MoreHorizontal className="h-5 w-5" />
+        )}
+        More
+      </button>
+
+      {open && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setOpen(false)}
+          />
+
+          {/* Menu */}
+          <div className="absolute bottom-full right-0 mb-2 z-50 bg-card border rounded-lg shadow-lg p-2 min-w-[160px]">
+            {moreItems.map((item) => {
+              const isActive = pathname.startsWith(item.href)
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setOpen(false)}
+                  className={cn(
+                    "flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
+                    isActive
+                      ? "bg-primary/10 text-primary"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

src/components/layout/sidebar.tsx

@@ -11,6 +11,9 @@ import {
   Settings,
   LogOut,
   Beer,
+  FlaskConical,
+  GlassWater,
+  Sparkles,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -19,6 +22,9 @@ const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { href: "/scan", label: "Scan Menu", icon: Camera },
   { href: "/drinks", label: "My Drinks", icon: Wine },
+  { href: "/bar", label: "My Bar", icon: FlaskConical },
+  { href: "/bartender", label: "Bartender", icon: GlassWater },
+  { href: "/recommend", label: "Recommend", icon: Sparkles },
   { href: "/wishlist", label: "Try Later", icon: Bookmark },
   { href: "/settings", label: "Settings", icon: Settings },
 ]

src/components/recommend/flavor-profile-card.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  RefreshCw,
+  Sparkles,
+  AlertTriangle,
+  ThumbsUp,
+  ThumbsDown,
+  Compass,
+} from "lucide-react"
+import type { FlavorProfile, FlavorProfileData } from "@/hooks/use-recommend"
+
+interface FlavorProfileCardProps {
+  profile: FlavorProfile | null
+  isLoading: boolean
+  isGenerating: boolean
+  error: Error | null
+  generateError: Error | null
+  onGenerate: () => void
+}
+
+export function FlavorProfileCard({
+  profile,
+  isLoading,
+  isGenerating,
+  error,
+  generateError,
+  onGenerate,
+}: FlavorProfileCardProps) {
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-40" />
+          <Skeleton className="h-4 w-64" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-20 w-full" />
+          <div className="flex gap-2">
+            <Skeleton className="h-6 w-16" />
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-6 w-14" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            My Flavor Profile
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-destructive">
+            Failed to load your flavor profile. Please try again.
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!profile) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            My Flavor Profile
+          </CardTitle>
+          <CardDescription>
+            Generate an AI-powered analysis of your taste preferences based on
+            your drink ratings.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="text-center py-4">
+            <Sparkles className="h-10 w-10 mx-auto text-muted-foreground/40 mb-3" />
+            <p className="text-sm text-muted-foreground mb-4">
+              Rate at least 3 drinks to unlock your personalized flavor profile.
+            </p>
+            <Button onClick={onGenerate} disabled={isGenerating}>
+              {isGenerating ? (
+                <>
+                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                  Analyzing...
+                </>
+              ) : (
+                <>
+                  <Sparkles className="h-4 w-4 mr-2" />
+                  Generate Profile
+                </>
+              )}
+            </Button>
+          </div>
+          {generateError && (
+            <p className="text-sm text-destructive text-center">
+              {generateError.message}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const data = profile.profileData as FlavorProfileData | null
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-primary" />
+              My Flavor Profile
+            </CardTitle>
+            <CardDescription>
+              Based on {profile.ratingCount} rating
+              {profile.ratingCount !== 1 ? "s" : ""}
+              {" -- "}
+              updated{" "}
+              {new Date(profile.generatedAt).toLocaleDateString()}
+            </CardDescription>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onGenerate}
+            disabled={isGenerating}
+          >
+            {isGenerating ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        {profile.isStale && (
+          <div className="flex items-center gap-2 text-sm text-amber-600 bg-amber-50 dark:bg-amber-950/30 px-3 py-2 rounded-md mt-2">
+            <AlertTriangle className="h-4 w-4 shrink-0" />
+            <span>
+              You have {profile.currentRatingCount - profile.ratingCount} new
+              rating{profile.currentRatingCount - profile.ratingCount !== 1 ? "s" : ""}{" "}
+              since your last profile update. Refresh to get an updated profile.
+            </span>
+          </div>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-sm leading-relaxed">{profile.profileText}</p>
+
+        {data && (
+          <>
+            {data.topFlavors && data.topFlavors.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  <ThumbsUp className="h-3.5 w-3.5" />
+                  Flavors You Love
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {data.topFlavors.map((flavor) => (
+                    <Badge key={flavor} variant="secondary">
+                      {flavor}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {data.avoidFlavors && data.avoidFlavors.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  <ThumbsDown className="h-3.5 w-3.5" />
+                  Flavors to Avoid
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {data.avoidFlavors.map((flavor) => (
+                    <Badge key={flavor} variant="outline">
+                      {flavor}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {data.preferredTypes && data.preferredTypes.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  Preferred Styles
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {data.preferredTypes.map((type) => (
+                    <Badge key={type}>{type}</Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {data.adventureScore != null && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  <Compass className="h-3.5 w-3.5" />
+                  Adventure Score
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-primary rounded-full transition-all"
+                      style={{
+                        width: `${Math.round(data.adventureScore * 100)}%`,
+                      }}
+                    />
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    {Math.round(data.adventureScore * 100)}%
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {data.adventureScore >= 0.7
+                    ? "You love trying new and different things!"
+                    : data.adventureScore >= 0.4
+                      ? "You have a nice balance between favorites and new discoveries."
+                      : "You know what you like and stick to it."}
+                </p>
+              </div>
+            )}
+          </>
+        )}
+
+        {generateError && (
+          <p className="text-sm text-destructive">
+            {generateError.message}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/recommend/recommendation-card.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+const TYPE_COLORS: Record<string, string> = {
+  BEER: "bg-amber-500/15 text-amber-700 border-amber-500/25",
+  WINE: "bg-rose-500/15 text-rose-700 border-rose-500/25",
+  COCKTAIL: "bg-purple-500/15 text-purple-700 border-purple-500/25",
+  SPIRIT: "bg-sky-500/15 text-sky-700 border-sky-500/25",
+  OTHER: "bg-slate-500/15 text-slate-700 border-slate-500/25",
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  BEER: "Beer",
+  WINE: "Wine",
+  COCKTAIL: "Cocktail",
+  SPIRIT: "Spirit",
+  OTHER: "Other",
+}
+
+interface RecommendationCardProps {
+  name: string
+  type: string
+  subType?: string
+  brewery?: string
+  reason: string
+  score: number
+  scoreLabel?: string
+}
+
+export function RecommendationCard({
+  name,
+  type,
+  subType,
+  brewery,
+  reason,
+  score,
+  scoreLabel = "Match",
+}: RecommendationCardProps) {
+  const percentage = Math.round(score * 100)
+
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <h4 className="font-semibold leading-tight">{name}</h4>
+            {subType && (
+              <p className="text-sm text-muted-foreground mt-0.5">
+                {subType}
+              </p>
+            )}
+            {brewery && (
+              <p className="text-sm text-muted-foreground">{brewery}</p>
+            )}
+          </div>
+          <Badge
+            className={cn(
+              "shrink-0 text-[11px]",
+              TYPE_COLORS[type] || TYPE_COLORS.OTHER
+            )}
+          >
+            {TYPE_LABELS[type] || type}
+          </Badge>
+        </div>
+
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          {reason}
+        </p>
+
+        <div className="flex items-center gap-2">
+          <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+            <div
+              className={cn(
+                "h-full rounded-full transition-all",
+                percentage >= 80
+                  ? "bg-green-500"
+                  : percentage >= 60
+                    ? "bg-yellow-500"
+                    : "bg-orange-500"
+              )}
+              style={{ width: `${percentage}%` }}
+            />
+          </div>
+          <span className="text-xs text-muted-foreground whitespace-nowrap">
+            {percentage}% {scoreLabel}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/recommend/similar-section.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Select } from "@/components/ui/select"
+import { GitCompareArrows, RefreshCw } from "lucide-react"
+import { RecommendationCard } from "./recommendation-card"
+import { useSimilarDrinks } from "@/hooks/use-recommend"
+import type { SimilarDrink } from "@/hooks/use-recommend"
+
+interface DrinkOption {
+  id: string
+  name: string
+  type: string
+}
+
+interface SimilarSectionProps {
+  drinks: DrinkOption[]
+  drinksLoading: boolean
+}
+
+export function SimilarSection({
+  drinks,
+  drinksLoading,
+}: SimilarSectionProps) {
+  const [selectedDrinkId, setSelectedDrinkId] = useState("")
+  const similarDrinks = useSimilarDrinks()
+  const [results, setResults] = useState<SimilarDrink[]>([])
+  const [sourceName, setSourceName] = useState("")
+
+  function handleFindSimilar() {
+    if (!selectedDrinkId) return
+
+    similarDrinks.mutate(
+      { drinkId: selectedDrinkId },
+      {
+        onSuccess: (data) => {
+          setResults(data.recommendations)
+          setSourceName(data.sourceDrink)
+        },
+      }
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <GitCompareArrows className="h-5 w-5 text-primary" />
+          Find Similar Drinks
+        </CardTitle>
+        <CardDescription>
+          Pick a drink you love and discover similar ones you might enjoy.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {drinksLoading ? (
+          <Skeleton className="h-10 w-full" />
+        ) : drinks.length === 0 ? (
+          <div className="text-center py-4">
+            <p className="text-sm text-muted-foreground">
+              Add some drinks to your collection to find similar ones.
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <div className="flex-1">
+                <Select
+                  value={selectedDrinkId}
+                  onChange={(e) => setSelectedDrinkId(e.target.value)}
+                  disabled={similarDrinks.isPending}
+                >
+                  <option value="">Select a drink...</option>
+                  {drinks.map((drink) => (
+                    <option key={drink.id} value={drink.id}>
+                      {drink.name} ({drink.type.charAt(0) + drink.type.slice(1).toLowerCase()})
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              <Button
+                onClick={handleFindSimilar}
+                disabled={!selectedDrinkId || similarDrinks.isPending}
+                className="sm:w-auto"
+              >
+                {similarDrinks.isPending ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Searching...
+                  </>
+                ) : (
+                  <>
+                    <GitCompareArrows className="h-4 w-4 mr-2" />
+                    Find Similar
+                  </>
+                )}
+              </Button>
+            </div>
+
+            {similarDrinks.isPending && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {Array.from({ length: 3 }, (_, i) => (
+                  <Skeleton key={i} className="h-[140px] rounded-lg" />
+                ))}
+              </div>
+            )}
+
+            {similarDrinks.isError && (
+              <p className="text-sm text-destructive">
+                {similarDrinks.error.message}
+              </p>
+            )}
+
+            {results.length > 0 && !similarDrinks.isPending && (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  Drinks similar to <span className="font-medium text-foreground">{sourceName}</span>:
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {results.map((drink, i) => (
+                    <RecommendationCard
+                      key={`${drink.name}-${i}`}
+                      name={drink.name}
+                      type={drink.type}
+                      subType={drink.subType}
+                      brewery={drink.brewery}
+                      reason={drink.reason}
+                      score={drink.similarity}
+                      scoreLabel="Similar"
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/recommend/suggest-section.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Lightbulb, RefreshCw } from "lucide-react"
+import { RecommendationCard } from "./recommendation-card"
+import { useSuggestDrinks } from "@/hooks/use-recommend"
+import type { DrinkSuggestion } from "@/hooks/use-recommend"
+
+interface SuggestSectionProps {
+  hasProfile: boolean
+}
+
+export function SuggestSection({ hasProfile }: SuggestSectionProps) {
+  const [mood, setMood] = useState("")
+  const [occasion, setOccasion] = useState("")
+  const suggestDrinks = useSuggestDrinks()
+  const [results, setResults] = useState<DrinkSuggestion[]>([])
+
+  function handleSuggest() {
+    suggestDrinks.mutate(
+      {
+        mood: mood.trim() || undefined,
+        occasion: occasion.trim() || undefined,
+      },
+      {
+        onSuccess: (data) => {
+          setResults(data.recommendations)
+        },
+      }
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Lightbulb className="h-5 w-5 text-primary" />
+          What Should I Drink?
+        </CardTitle>
+        <CardDescription>
+          Get personalized drink suggestions based on your flavor profile.
+          Optionally add your mood or the occasion.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {!hasProfile ? (
+          <div className="text-center py-4">
+            <p className="text-sm text-muted-foreground">
+              Generate your flavor profile above to unlock personalized
+              suggestions.
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="mood"
+                  className="text-sm font-medium text-muted-foreground"
+                >
+                  Mood (optional)
+                </label>
+                <Input
+                  id="mood"
+                  placeholder='e.g., "Relaxed", "Celebrating"'
+                  value={mood}
+                  onChange={(e) => setMood(e.target.value)}
+                  disabled={suggestDrinks.isPending}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="occasion"
+                  className="text-sm font-medium text-muted-foreground"
+                >
+                  Occasion (optional)
+                </label>
+                <Input
+                  id="occasion"
+                  placeholder='e.g., "Dinner party", "After work"'
+                  value={occasion}
+                  onChange={(e) => setOccasion(e.target.value)}
+                  disabled={suggestDrinks.isPending}
+                />
+              </div>
+            </div>
+
+            <Button
+              onClick={handleSuggest}
+              disabled={suggestDrinks.isPending}
+              className="w-full sm:w-auto"
+            >
+              {suggestDrinks.isPending ? (
+                <>
+                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                  Finding drinks...
+                </>
+              ) : (
+                <>
+                  <Lightbulb className="h-4 w-4 mr-2" />
+                  Suggest Drinks
+                </>
+              )}
+            </Button>
+
+            {suggestDrinks.isPending && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {Array.from({ length: 3 }, (_, i) => (
+                  <Skeleton key={i} className="h-[140px] rounded-lg" />
+                ))}
+              </div>
+            )}
+
+            {suggestDrinks.isError && (
+              <p className="text-sm text-destructive">
+                {suggestDrinks.error.message}
+              </p>
+            )}
+
+            {results.length > 0 && !suggestDrinks.isPending && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {results.map((drink, i) => (
+                  <RecommendationCard
+                    key={`${drink.name}-${i}`}
+                    name={drink.name}
+                    type={drink.type}
+                    subType={drink.subType}
+                    brewery={drink.brewery}
+                    reason={drink.reason}
+                    score={drink.matchScore}
+                    scoreLabel="Match"
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}