// ❌ Missing priority — browser discovers image late
<Image src="/hero.jpg" alt="Hero" fill />

// ✅ With priority: browser preloads this immediately
// Also: explicit sizes prevents layout shift AND helps browser
// pick the right size from srcset
<Image
  src="/hero.jpg"
  alt="Hero"
  fill
  priority
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
/>

// ❌ Browser doesn't know height until image loads → layout shift
<img src="/product.jpg" alt="Product" style={{ width: '100%' }} />

// ✅ Explicit aspect ratio reserves space before image loads
<div style={{ aspectRatio: '16/9', position: 'relative' }}>
  <Image src="/product.jpg" alt="Product" fill className="object-cover" />
</div>

/* ❌ Default font-display: auto causes flash/shift */
@import url('https://fonts.googleapis.com/css2?family=Inter');

/* ✅ With Next.js font optimization — zero layout shift */
/* next/font/google automatically handles this */

// next/font is the correct approach — fonts load as CSS variables
// Eliminates flash of unstyled text AND layout shift
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Fallback shows immediately, swap when font loads
  variable: '--font-inter',
});

// ❌ Ad, widget, or dynamic component injected after render → shift
function Dashboard() {
  const [stats, setStats] = useState(null);
  
  return (
    <div>
      <h1>Dashboard</h1>
      {stats && <StatsWidget data={stats} />}  {/* Appears, pushes content down */}
    </div>
  );
}

// ✅ Reserve space with skeleton
function Dashboard() {
  const [stats, setStats] = useState(null);
  
  return (
    <div>
      <h1>Dashboard</h1>
      {stats
        ? <StatsWidget data={stats} />
        : <div className="h-32 bg-muted animate-pulse rounded-xl" />  // Fixed height
      }
    </div>
  );
}

// ❌ Synchronous heavy computation blocking the event loop
function handleFilterChange(filter: string) {
  const results = products.filter(p => expensiveFilter(p, filter)); // blocks for 200ms+
  setFilteredProducts(results);
}

// ✅ Yield to browser between chunks
async function handleFilterChange(filter: string) {
  const CHUNK_SIZE = 100;
  const results: Product[] = [];
  
  for (let i = 0; i < products.length; i += CHUNK_SIZE) {
    const chunk = products.slice(i, i + CHUNK_SIZE);
    results.push(...chunk.filter(p => expensiveFilter(p, filter)));
    
    // Yield to browser — allows paint and input handling
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  setFilteredProducts(results);
}

// ❌ Importing heavy client library on a mostly-static page
import { HeavyChart } from 'recharts'; // 200KB of JS blocking hydration

// ✅ Lazy load components below the fold
const HeavyChart = dynamic(
  () => import('@/components/HeavyChart'),
  { 
    loading: () => <div className="h-64 bg-muted animate-pulse rounded-xl" />,
    ssr: false // Don't render on server — this component needs browser APIs
  }
);

// Next.js App Router: be explicit about static vs dynamic
// Default is static — explicitly make dynamic routes opt-in
export const dynamic = 'force-dynamic'; // Use only when you must

// For blogs, products, marketing pages:
// generateStaticParams + revalidate = best of both worlds
export async function generateStaticParams() {
  const posts = await db.select({ slug: blogs.slug }).from(blogs);
  return posts.map(p => ({ slug: p.slug }));
}

export const revalidate = 60; // Regenerate every 60s in background