ProductCard

import SwiftUI
import EandTokens

// card-features type=product: 229×300 (row-4), r20, raised white. A 144pt tint panel
// (r24, 4pt white inside ring) holds a 112pt image. Footer (8/12/12, gap 4): heading/sm
// title, lg badge, then the body/xl price under a body/md "from". The tint colours the
// panel only, never the card.
struct ProductCard: View {
  let title: String; let price: String
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      Image("case").resizable().scaledToFit().frame(height: 112)
        .frame(maxWidth: .infinity, minHeight: EandScale.scale144)
        .background(EandColor.atomSurfacesBlue)
        .overlay(RoundedRectangle(cornerRadius: EandRadius.radius8)
          .strokeBorder(EandColor.borderInteractiveInversePressed, lineWidth: EandBorder.xl))
        .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius8))
      VStack(alignment: .leading, spacing: EandSpacing.xs) {
        Text(title)
          .font(.system(size: EandTypography.headingSm.size, weight: EandTypography.headingSm.weight))
          .foregroundColor(EandColor.midnight1100)   // legacy High-emphasis #140f21 (no semantic token)
          .lineLimit(2)
        Spacer(minLength: 0)
        OfferBadge(text: "20% off", size: .lg)
        Text("from").font(.system(size: EandTypography.bodyMd.size))
          .foregroundColor(EandColor.textDefaultSubtle)
        Text(price).font(.system(size: EandTypography.bodyXl.size))
      }
      .padding(.top, EandSpacing.sm).padding([.horizontal, .bottom], EandSpacing.md)
    }
    .frame(width: 229, height: EandSection.bodyHeightRow4)
    .background(EandColor.surfaceRaisedDefault)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7))
  }
}