struct ProductDetailView: View {
    let product: Product
    @State private var isExpanded = false
    
    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
                productHeader
                productDetails
                actionButtons
            }
        }
    }
    
    @ViewBuilder
    private var productHeader: some View {
        VStack(alignment: .leading, spacing: 8) {
            AsyncImage(url: product.imageURL) { image in
                image.resizable().aspectRatio(contentMode: .fit)
            } placeholder: {
                Rectangle().fill(.gray.opacity(0.3))
            }
            .frame(height: 200)
            
            Text(product.name)
                .font(.title2)
                .fontWeight(.semibold)
        }
    }
    
    @ViewBuilder
    private var productDetails: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(product.description)
                .lineLimit(isExpanded ? nil : 3)
                .animation(.easeInOut(duration: 0.3), value: isExpanded)
            
            Button(isExpanded ? "Show Less" : "Show More") {
                isExpanded.toggle()
            }
            .foregroundColor(.blue)
        }
    }
    
    @ViewBuilder
    private var actionButtons: some View {
        HStack(spacing: 16) {
            Button("Add to Cart") { /* action */ }
                .buttonStyle(.borderedProminent)
            
            Button("Save for Later") { /* action */ }
                .buttonStyle(.bordered)
        }
    }
}