Order Confirmation Screen

struct OrderConfirmationTemplate: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 32) {
                Spacer()
                // Success Icon & Message
                VStack(spacing: 12) {
                    ZStack {
                        Circle()
                            .fill(LinearGradient(gradient: Gradient(colors: [Color.green.opacity(0.2), Color.blue.opacity(0.15)]), startPoint: .topLeading, endPoint: .bottomTrailing))
                            .frame(width: 80, height: 80)
                        Image(systemName: "checkmark.seal.fill")
                            .font(.system(size: 44))
                            .foregroundColor(.green)
                    }
                    Text("Order Confirmed!")
                        .font(.title2)
                        .fontWeight(.bold)
                    Text("Thank you for your purchase.")
                        .foregroundColor(.secondary)
                }

                // Order Number
                VStack(spacing: 4) {
                    Text("Order Number")
                        .font(.caption)
                        .foregroundColor(.secondary)
                    Text("#1002")
                        .font(.headline)
                        .fontWeight(.semibold)
                }

                // Items Summary
                VStack(alignment: .leading, spacing: 0) {
                    Text("Items")
                        .font(.headline)
                        .padding(.bottom, 8)
                    ForEach(confirmationItems) { item in
                        ConfirmationItemRow(item: item)
                        Divider()
                    }
                }
                .padding()
                .background(
                    RoundedRectangle(cornerRadius: 16, style: .continuous)
                        .fill(Color(.systemBackground).opacity(0.7))
                )
                .padding(.horizontal)

                // Delivery Info (full width, leading)
                HStack {
                    VStack(alignment: .leading, spacing: 8) {
                        HStack {
                            Image(systemName: "shippingbox.fill")
                                .foregroundColor(.blue)
                            Text("Delivery to:")
                                .font(.headline)
                        }
                        Text("John Doe\n123 Main St\nSan Francisco, CA 94101")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                }
                .padding()
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(
                    RoundedRectangle(cornerRadius: 16, style: .continuous)
                        .fill(Color(.systemBackground).opacity(0.7))
                )
                .padding(.horizontal)

                Spacer()
                // Continue Shopping Button
                Button(action: {}) {
                    Text("Continue Shopping")
                        .font(.headline)
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue)
                        .cornerRadius(16)
                }
                .padding(.horizontal)
                .padding(.bottom, 24)
            }
            .navigationTitle("Order Confirmation")
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.10), Color.purple.opacity(0.08)]), startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
            )
        }
    }
}

// Confirmation Items
struct ConfirmationItem: Identifiable {
    let id = UUID()
    let name: String
    let icon: String // SF Symbol or image name
    let qty: Int
    let price: Double
}

let confirmationItems: [ConfirmationItem] = [
    .init(name: "Wireless Earbuds", icon: "earbuds", qty: 1, price: 150.0),
    .init(name: "Charging Cable", icon: "cable.connector", qty: 2, price: 30.0)
]

struct ConfirmationItemRow: View {
    let item: ConfirmationItem
    var body: some View {
        HStack(spacing: 12) {
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(Color(.systemGray6))
                    .frame(width: 36, height: 36)
                Image(systemName: item.icon)
                    .font(.system(size: 20))
                    .foregroundColor(.blue)
            }
            VStack(alignment: .leading, spacing: 2) {
                Text(item.name)
                    .font(.subheadline)
                Text("\(item.qty)x")
                    .font(.caption)
                    .foregroundColor(.secondary)
            }
            Spacer()
            Text(String(format: "$%.2f", item.price * Double(item.qty)))
                .font(.subheadline)
        }
        .padding(.vertical, 4)
    }
}