kokken/src/components/marketing/featured-menus.tsx

'use client'

import { sampleData } from '@/config/sample-data'
import { Menu, Package } from '@/types/models'
import { ImagePlaceholder } from '@/components/ui/image-placeholder'
import { cn } from '@/lib/utils'
import { ArrowRight } from 'lucide-react'

export function FeaturedMenus() {
  const { packages, menus } = sampleData
  
  // Force rebuild - Prefer menus explicitly marked as featured
  const featuredMenus = (menus.filter((m: Menu) => (m as any).featured) as Menu[])
    .slice(0, 4)
    .length > 0 ? (menus.filter((m: Menu) => (m as any).featured) as Menu[]).slice(0, 4) : menus.slice(0, 4)

  console.log('=== FeaturedMenus Debug v2 ===')
  console.log('Total menus:', menus.length)
  console.log('Featured menus:', featuredMenus.map(m => m.id))
  console.log('Total packages:', packages.length)
  console.log('Package menuIds:', packages.map((p: Package) => p.menuId))
  
  return (
    <section className="py-16 bg-primary-50">
      <div className="container mx-auto px-4">
        <div className="max-w-5xl mx-auto text-center mb-12">
          <h2 className="text-4xl font-bold mb-4">
            Skræddersyet Madoplevelse
          </h2>
          <p className="text-xl text-primary-600">
            Vælg mellem vores populære menuer eller lad os sammensætte en menu der passer til jeres ønsker
          </p>
        </div>
        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          {featuredMenus.map((menu: Menu) => {
            const basePackage = packages.find((p: Package) => p.menuId === menu.id)
            console.log(`Menu: ${menu.id}, Package found: ${basePackage?.id}, Price: ${basePackage?.pricePerCover}`)
            return (
              <MenuCard 
                key={menu.id} 
                menu={menu} 
                basePrice={basePackage?.pricePerCover} 
              />
            )
          })}
        </div>
        <div className="text-center mt-12">
          <a 
            href="/menuer" 
            className={cn(
              "inline-flex items-center justify-center gap-2",
              "px-6 py-3 rounded-lg",
              "bg-accent hover:bg-accent-600",
              "text-white font-medium",
              "transition-colors"
            )}
          >
            Se alle menuer
            <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </div>
    </section>
  )
}

function MenuCard({ menu, basePrice }: { menu: Menu, basePrice?: number }) {
  return (
    <a 
      href={`/menuer?menu=${menu.id}`}
      className="group relative bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-shadow"
    >
      <div className="aspect-[4/3] relative bg-primary-100">
        <ImagePlaceholder 
          label={menu.title}
          src={menu.image}
          className="absolute inset-0"
        />
      </div>
      <div className="p-6">
        <div className="flex justify-between items-start gap-4 mb-4">
          <div>
            <h3 className="text-2xl font-semibold mb-2 group-hover:text-accent transition-colors">
              {menu.title}
            </h3>
            <p className="text-primary-600">{menu.description}</p>
          </div>
          <div className="text-right shrink-0">
            {basePrice && (
              <>
                <div className="text-2xl font-bold">
                  {basePrice} kr
                </div>
                <div className="text-sm text-primary-500">
                  pr. kuvert
                </div>
              </>
            )}
          </div>
        </div>

        <div className="space-y-4">
          <div className="bg-primary-50 rounded-lg p-4">
            <h4 className="font-medium mb-2">Menuen indeholder</h4>
            <ul className="space-y-2 text-primary-600">
              {menu.courses.slice(0, 3).map((course, index) => (
                <li key={index} className="flex items-start gap-2">
                  <span className="font-medium text-xs bg-primary-100 text-primary-700 px-1.5 py-0.5 rounded mt-0.5">
                    {index === 0 ? 'Forret' : index === 2 ? 'Dessert' : 'Hovedret'}
                  </span>
                  <span>{course}</span>
                </li>
              ))}
              {menu.courses.length > 3 && (
                <li className="text-sm text-primary-500 mt-2">
                  + {menu.courses.length - 3} flere retter
                </li>
              )}
            </ul>
          </div>

          <div className="flex flex-wrap gap-2">
            {menu.tags.map((tag) => (
              <span
                key={tag}
                className="px-2 py-1 text-sm bg-primary-100 text-primary-700 rounded-full"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      </div>
    </a>
  )
}