function TireCard({ tire, imageVariant }: { tire: Tire; imageVariant?: TireImageVariant }) {
  // Complex rendering - re-renders on ANY parent state change
}

const TireCard = memo(function TireCard({ tire, imageVariant }: Props) {
  // Same code, but only re-renders when props change
});

app/tires/_lib/transform.test.ts
app/tires/_components/real-time-inventory.test.tsx
lib/constants/manufacturers.test.ts
app/api/tires/__tests__/inventory.test.ts

return {
  title: `${tire.title} · ${brand} · CROP Prime Grid`,
  description: tire.description,
  // Missing: openGraph, twitter, structured data
};

return {
  title: `${tire.title} · ${brand} · CROP Prime Grid`,
  description: tire.description,
  openGraph: {
    title: tire.title,
    description: tire.description,
    images: imageUrl ? [{ url: imageUrl, alt: tire.title }] : [],
    type: 'product',
  },
  twitter: {
    card: 'summary_large_image',
    title: tire.title,
    images: imageUrl ? [imageUrl] : [],
  },
};

const sectionsResult = await fetchAutocompleteSections(es, {
  indexName: env.SEARCH_INDEX_NAME, // Only parts!
});

const targetIndex = shouldSearchTires(query, p.manufacturer)
  ? env.TIRES_INDEX_NAME
  : env.SEARCH_INDEX_NAME;

<Image
  src={imageUrl}
  unoptimized  // Disables WebP/AVIF, responsive srcsets
/>

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'nyc3.digitaloceanspaces.com' }, // K&M CDN
  ],
}

function generateKmtSlug(partNumber: string): string {
  const compactPn = partNumber.toLowerCase().replace(/[^a-z0-9]/g, '');
  return `ct-kmt-${compactPn}`; // Could be 'ct-kmt-' if empty
}

function generateKmtSlug(partNumber: string): string {
  const compactPn = partNumber.toLowerCase().replace(/[^a-z0-9]/g, '');
  if (!compactPn) {
    throw new Error(`Invalid part number for slug: "${partNumber}"`);
  }
  return `ct-kmt-${compactPn.slice(0, 50)}`; // Limit length
}

// tires-catalog-client.tsx
import { memo } from "react";

const TireCard = memo(function TireCard({
  tire,
  imageVariant = "brand-logo"
}: {
  tire: Tire;
  imageVariant?: TireImageVariant
}) {
  // existing implementation
});

const TiresGrid = memo(function TiresGrid({
  tires,
  imageVariant
}: {
  tires: Tire[];
  imageVariant: TireImageVariant
}) {
  return (
    <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {tires.map((tire) => (
        <TireCard key={tire.id} tire={tire} imageVariant={imageVariant} />
      ))}
    </div>
  );
});

// [slug]/page.tsx - Remove line 99
// console.log(`[TireDetail] Trying fallback slug: ${oldSlug}`);
// Replace with nothing (or use proper logging if needed)

// [slug]/page.tsx
export async function generateMetadata({ params }: TireDetailPageProps): Promise<Metadata> {
  const { slug } = await params;

  if (isOldTireSlugFormat(slug)) {
    return { title: "Redirecting..." };
  }

  const tire = await fetchTireBySlug(slug);
  if (!tire) {
    return {
      title: "Tire not found",
      description: "The requested tire could not be found.",
    };
  }

  const brand = tire.specifications?.Brand ?? "Unknown";
  const imageUrl = tire.media?.images?.[0]?.url;
  const price = tire.pricing?.list?.value;

  return {
    title: `${tire.title} · ${brand} · CROP Prime Grid`,
    description: tire.description ?? `${tire.title} by ${brand}. View pricing and availability.`,
    openGraph: {
      title: tire.title,
      description: tire.description,
      type: "website",
      images: imageUrl ? [{ url: imageUrl, alt: tire.title, width: 300, height: 300 }] : [],
    },
    twitter: {
      card: "summary_large_image",
      title: tire.title,
      description: tire.description,
      images: imageUrl ? [imageUrl] : [],
    },
  };
}

# 1. Run type check
bun run type-check

# 2. Run lint
bun run lint

# 3. Run tests (after adding them)
bun test

# 4. Check performance (React DevTools Profiler)
# - TireCard should NOT re-render when filters change
# - Only re-render when tire data changes

# 5. Check SEO (view-source or Lighthouse)
# - OpenGraph tags present
# - Twitter cards present

# 6. Check accessibility (axe DevTools)
# - No ARIA violations
# - All interactive elements accessible

# 7. Check autocomplete
curl 'https://api.crop-dev.app/api/autocomplete?q=tire' | jq '.sections'
# Should return tire suggestions