GPT 5.5 xhigh

ESIMDashboard.swift

@@ -0,0 +1,890 @@
import PuzzleCore
import PuzzleUIKit
import SwiftUI
import UIKit

struct ESIMDashboardData: PuzzleSectionedData {
    let puzzleSections: [PuzzleSectionModel<String, ESIMDashboardRow>]
}

enum ESIMDashboardRow: Hashable, Sendable {
    case hero(ESIMHeroRow)
    case balance(ESIMBalanceRow)
    case usage(ESIMUsageRow)
    case sectionTitle(ESIMSectionTitleRow)
    case plan(ESIMPlanRow)
    case chart(ESIMChartRow)
    case activity(ESIMActivityRow)

    var estimatedHeight: CGFloat {
        switch self {
        case .hero:
            return 206
        case .balance:
            return 76
        case .usage:
            return 224
        case .sectionTitle:
            return 64
        case .plan:
            return 132
        case .chart:
            return 250
        case .activity:
            return 92
        }
    }

    var fallbackTitle: String {
        switch self {
        case .hero(let row):
            return row.greeting
        case .balance(let row):
            return "Balance \(row.amount)"
        case .usage(let row):
            return "\(row.title) \(row.used) / \(row.limit)"
        case .sectionTitle(let row):
            return row.title
        case .plan(let row):
            return row.title
        case .chart(let row):
            return row.title
        case .activity(let row):
            return row.title
        }
    }
}

struct ESIMHeroRow: Hashable, Sendable {
    let greeting: String
    let subtitle: String
    let phoneNumber: String
    let daysLeft: String
    let network: String
}

struct ESIMBalanceRow: Hashable, Sendable {
    let amount: String
    let actionTitle: String
}

struct ESIMUsageRow: Hashable, Sendable {
    let title: String
    let subtitle: String
    let used: String
    let limit: String
    let activeUntil: String
    let progress: Double
}

struct ESIMSectionTitleRow: Hashable, Sendable {
    let title: String
    let actionTitle: String?
}

struct ESIMPlanRow: Hashable, Sendable {
    let icon: String
    let title: String
    let subtitle: String
    let detail: String
    let duration: String
    let price: String
    let accent: ESIMAccent
}

struct ESIMChartRow: Hashable, Sendable {
    let title: String
    let highlightedValue: String
    let highlightedDate: String
    let dataUsage: String
    let callUsage: String
    let smsUsage: String
}

struct ESIMActivityRow: Hashable, Sendable {
    let icon: String
    let title: String
    let date: String
    let status: String
    let accent: ESIMAccent
}

enum ESIMAccent: String, Hashable, Sendable {
    case blue
    case cyan
    case green
    case lime
}

extension DemoDataFactory {
    static func makeESIMDashboardData() -> ESIMDashboardData {
        ESIMDashboardData(
            puzzleSections: [
                PuzzleSectionModel(
                    id: "eSIM Dashboard",
                    items: [
                        .hero(
                            ESIMHeroRow(
                                greeting: "Hi Octavia,",
                                subtitle: "this is your recent usage",
                                phoneNumber: "+481234567890",
                                daysLeft: "18/30 days left",
                                network: "5G"
                            )
                        ),
                        .balance(
                            ESIMBalanceRow(
                                amount: "$ 124.50",
                                actionTitle: "+ Top Up Balance"
                            )
                        ),
                        .usage(
                            ESIMUsageRow(
                                title: "Data 5 GB",
                                subtitle: "Weekly Plan",
                                used: "3.5 GB",
                                limit: "5 GB",
                                activeUntil: "Feb 2, 2022",
                                progress: 0.7
                            )
                        ),
                        .sectionTitle(
                            ESIMSectionTitleRow(title: "Popular Plan", actionTitle: "See All")
                        ),
                        .plan(
                            ESIMPlanRow(
                                icon: "arrow.up.arrow.down",
                                title: "Data 5 GB",
                                subtitle: "Weekly Plan",
                                detail: "Internet 5 GB",
                                duration: "1 Week",
                                price: "$ 11.00",
                                accent: .green
                            )
                        ),
                        .plan(
                            ESIMPlanRow(
                                icon: "bolt.horizontal.fill",
                                title: "Super 30 GB",
                                subtitle: "Monthly Plan",
                                detail: "Internet 30 GB",
                                duration: "1 Month",
                                price: "$ 42.00",
                                accent: .cyan
                            )
                        ),
                        .plan(
                            ESIMPlanRow(
                                icon: "globe.europe.africa.fill",
                                title: "Europe Roaming",
                                subtitle: "Travel Plan",
                                detail: "Internet 15 GB",
                                duration: "14 Days",
                                price: "$ 24.00",
                                accent: .blue
                            )
                        ),
                        .sectionTitle(
                            ESIMSectionTitleRow(title: "Instant Add-On Plan", actionTitle: nil)
                        ),
                        .plan(
                            ESIMPlanRow(
                                icon: "plus.circle.fill",
                                title: "Add 5 GB",
                                subtitle: "Instant Add-On",
                                detail: "Extra data pack",
                                duration: "7 Days",
                                price: "$ 5.00",
                                accent: .green
                            )
                        ),
                        .plan(
                            ESIMPlanRow(
                                icon: "phone.fill",
                                title: "Add 30 min",
                                subtitle: "Instant Add-On",
                                detail: "International calls",
                                duration: "1 Day",
                                price: "$ 3.00",
                                accent: .lime
                            )
                        ),
                        .plan(
                            ESIMPlanRow(
                                icon: "message.fill",
                                title: "Add 100 SMS",
                                subtitle: "Instant Add-On",
                                detail: "Text message bundle",
                                duration: "3 Days",
                                price: "$ 2.00",
                                accent: .cyan
                            )
                        ),
                        .sectionTitle(
                            ESIMSectionTitleRow(title: "Usage History", actionTitle: "6 Month")
                        ),
                        .chart(
                            ESIMChartRow(
                                title: "Mobile data trend",
                                highlightedValue: "13.7 GB",
                                highlightedDate: "Dec 21",
                                dataUsage: "164.2 GB",
                                callUsage: "32 Min",
                                smsUsage: "21 SMS"
                            )
                        ),
                        .sectionTitle(
                            ESIMSectionTitleRow(title: "Recent Activity", actionTitle: nil)
                        ),
                        .activity(
                            ESIMActivityRow(
                                icon: "arrow.up.arrow.down",
                                title: "Data 5 GB",
                                date: "Dec 12, 21",
                                status: "Expired",
                                accent: .green
                            )
                        ),
                        .activity(
                            ESIMActivityRow(
                                icon: "wifi",
                                title: "Unlimited 1 Month",
                                date: "Nov 2, 21",
                                status: "Expired",
                                accent: .cyan
                            )
                        ),
                        .activity(
                            ESIMActivityRow(
                                icon: "phone.fill",
                                title: "Call Booster",
                                date: "Oct 19, 21",
                                status: "Expired",
                                accent: .lime
                            )
                        ),
                        .activity(
                            ESIMActivityRow(
                                icon: "globe.europe.africa.fill",
                                title: "Europe Roaming",
                                date: "Sep 7, 21",
                                status: "Expired",
                                accent: .blue
                            )
                        ),
                        .activity(
                            ESIMActivityRow(
                                icon: "message.fill",
                                title: "SMS 100",
                                date: "Aug 24, 21",
                                status: "Expired",
                                accent: .cyan
                            )
                        ),
                        .activity(
                            ESIMActivityRow(
                                icon: "arrow.up.arrow.down",
                                title: "Data 10 GB",
                                date: "Jul 16, 21",
                                status: "Expired",
                                accent: .green
                            )
                        ),
                    ]
                )
            ]
        )
    }
}

extension DemoScreenFactory {
    @MainActor static func makeESIMDashboardScreen(
        data: ESIMDashboardData = DemoDataFactory.makeESIMDashboardData()
    ) -> PuzzleListViewController<String, ESIMDashboardRow> {
        PuzzleScreen(data)
            .title("eSIM Dashboard")
            .layout(.list(style: .plain))
            .selfSizing(estimatedRowHeight: 112)
            .renderer { cell, row in
                if #available(iOS 16.0, *) {
                    swiftuiCell(
                        reuse: .hostingConfiguration,
                        sizing: .selfSizing(estimated: row.estimatedHeight),
                        margins: .zero
                    ) {
                        ESIMDashboardRowView(row: row)
                    }(cell)
                    cell.backgroundConfiguration = .clear()
                    cell.accessories = []
                    return
                }

                var content = cell.defaultContentConfiguration()
                content.text = row.fallbackTitle
                cell.contentConfiguration = content
                cell.accessories = []
            }
            .configure { collectionView in
                collectionView.backgroundColor = UIColor(
                    red: 0.943,
                    green: 0.951,
                    blue: 0.965,
                    alpha: 1
                )
                collectionView.showsVerticalScrollIndicator = false
            }
            .makeViewController()
    }
}

private struct ESIMDashboardRowView: View {
    let row: ESIMDashboardRow

    var body: some View {
        switch row {
        case .hero(let row):
            ESIMHeroCard(row: row)
        case .balance(let row):
            ESIMBalanceCard(row: row)
        case .usage(let row):
            ESIMUsageCard(row: row)
        case .sectionTitle(let row):
            ESIMSectionTitle(row: row)
        case .plan(let row):
            ESIMPlanCard(row: row)
        case .chart(let row):
            ESIMChartCard(row: row)
        case .activity(let row):
            ESIMActivityCard(row: row)
        }
    }
}

private struct ESIMHeroCard: View {
    let row: ESIMHeroRow

    var body: some View {
        ZStack(alignment: .topLeading) {
            LinearGradient(
                colors: [
                    Color(red: 0.16, green: 0.39, blue: 0.84),
                    Color(red: 0.36, green: 0.68, blue: 0.96),
                    Color(red: 0.80, green: 0.95, blue: 0.67),
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .overlay(alignment: .bottomTrailing) {
                Circle()
                    .fill(Color.white.opacity(0.16))
                    .frame(width: 190, height: 190)
                    .offset(x: 58, y: 62)
            }
            .clipShape(RoundedRectangle(cornerRadius: 34, style: .continuous))

            VStack(alignment: .leading, spacing: 24) {
                HStack {
                    Text("E-sim")
                        .font(.system(size: 13, weight: .medium, design: .rounded))
                        .padding(.horizontal, 12)
                        .padding(.vertical, 7)
                        .background(Color.white.opacity(0.18), in: Capsule())

                    Text(row.phoneNumber)
                        .font(.system(size: 14, weight: .medium, design: .rounded))

                    Image(systemName: "chevron.down")
                        .font(.system(size: 12, weight: .bold))

                    Spacer()

                    Image(systemName: "bell.fill")
                        .font(.system(size: 17, weight: .semibold))
                        .overlay(alignment: .topTrailing) {
                            Circle()
                                .fill(ESIMPalette.lime)
                                .frame(width: 7, height: 7)
                                .offset(x: 3, y: -3)
                        }

                    ESIMAvatar()
                }
                .foregroundStyle(.white)

                VStack(alignment: .leading, spacing: 7) {
                    Text(row.greeting)
                        .font(.system(size: 28, weight: .regular, design: .rounded))
                    Text(row.subtitle)
                        .font(.system(size: 28, weight: .regular, design: .rounded))
                }
                .foregroundStyle(.white)

                HStack {
                    Text(row.daysLeft)
                        .font(.system(size: 13, weight: .semibold, design: .rounded))
                        .foregroundStyle(.white.opacity(0.86))
                    Spacer()
                    Text(row.network)
                        .font(.system(size: 13, weight: .semibold, design: .rounded))
                        .foregroundStyle(.white)
                        .padding(.horizontal, 12)
                        .padding(.vertical, 7)
                        .background(Color.white.opacity(0.18), in: Capsule())
                }
            }
            .padding(24)
        }
        .frame(height: 206)
        .padding(.horizontal, 18)
        .padding(.top, 18)
        .padding(.bottom, 6)
    }
}

private struct ESIMBalanceCard: View {
    let row: ESIMBalanceRow

    var body: some View {
        HStack(spacing: 13) {
            ESIMIconBadge(systemName: "wallet.pass.fill", accent: .blue, size: 44)

            VStack(alignment: .leading, spacing: 3) {
                Text("Balance")
                    .font(.system(size: 12, weight: .medium, design: .rounded))
                    .foregroundStyle(ESIMPalette.secondaryText)
                Text(row.amount)
                    .font(.system(size: 17, weight: .bold, design: .rounded))
                    .foregroundStyle(ESIMPalette.ink)
            }

            Spacer()

            Text(row.actionTitle)
                .font(.system(size: 15, weight: .bold, design: .rounded))
                .foregroundStyle(.white)
                .padding(.horizontal, 18)
                .padding(.vertical, 12)
                .background(ESIMPalette.deepBlue, in: RoundedRectangle(cornerRadius: 13, style: .continuous))
        }
        .padding(14)
        .background(ESIMPalette.card, in: RoundedRectangle(cornerRadius: 22, style: .continuous))
        .shadow(color: ESIMPalette.cardShadow, radius: 18, x: 0, y: 12)
        .padding(.horizontal, 18)
        .padding(.vertical, 6)
    }
}

private struct ESIMUsageCard: View {
    let row: ESIMUsageRow

    var body: some View {
        HStack(spacing: 20) {
            VStack(alignment: .leading, spacing: 16) {
                HStack(spacing: 8) {
                    ESIMStatusPill(title: "In Use", color: ESIMPalette.green)
                    ESIMStatusPill(title: "Internet", color: ESIMPalette.softBlue)
                }

                HStack(spacing: 12) {
                    ESIMIconBadge(systemName: "arrow.up.arrow.down", accent: .green, size: 52)

                    VStack(alignment: .leading, spacing: 5) {
                        Text(row.title)
                            .font(.system(size: 18, weight: .bold, design: .rounded))
                            .foregroundStyle(ESIMPalette.ink)
                        Text(row.subtitle)
                            .font(.system(size: 14, weight: .medium, design: .rounded))
                            .foregroundStyle(ESIMPalette.secondaryText)
                    }
                }

                VStack(alignment: .leading, spacing: 5) {
                    Text("Active until")
                        .font(.system(size: 12, weight: .medium, design: .rounded))
                        .foregroundStyle(ESIMPalette.secondaryText)
                    Text(row.activeUntil)
                        .font(.system(size: 18, weight: .bold, design: .rounded))
                        .foregroundStyle(ESIMPalette.ink)
                }
            }

            Spacer()

            ESIMUsageRing(progress: row.progress, used: row.used, limit: row.limit)
                .frame(width: 132, height: 132)
        }
        .padding(24)
        .background(ESIMPalette.card, in: RoundedRectangle(cornerRadius: 30, style: .continuous))
        .shadow(color: ESIMPalette.cardShadow, radius: 22, x: 0, y: 13)
        .padding(.horizontal, 18)
        .padding(.vertical, 8)
    }
}

private struct ESIMSectionTitle: View {
    let row: ESIMSectionTitleRow

    var body: some View {
        HStack(alignment: .lastTextBaseline) {
            Text(row.title)
                .font(.system(size: 25, weight: .bold, design: .rounded))
                .foregroundStyle(ESIMPalette.ink)

            Spacer()

            if let actionTitle = row.actionTitle {
                Text(actionTitle)
                    .font(.system(size: 14, weight: .semibold, design: .rounded))
                    .foregroundStyle(ESIMPalette.deepBlue)
            }
        }
        .padding(.horizontal, 18)
        .padding(.top, 18)
        .padding(.bottom, 4)
    }
}

private struct ESIMPlanCard: View {
    let row: ESIMPlanRow

    var body: some View {
        HStack(spacing: 16) {
            ESIMIconBadge(systemName: row.icon, accent: row.accent, size: 54)

            VStack(alignment: .leading, spacing: 8) {
                VStack(alignment: .leading, spacing: 3) {
                    Text(row.title)
                        .font(.system(size: 17, weight: .bold, design: .rounded))
                        .foregroundStyle(ESIMPalette.ink)
                    Text(row.subtitle)
                        .font(.system(size: 13, weight: .medium, design: .rounded))
                        .foregroundStyle(ESIMPalette.secondaryText)
                }

                HStack(spacing: 10) {
                    Text(row.detail)
                        .font(.system(size: 16, weight: .semibold, design: .rounded))
                        .foregroundStyle(ESIMPalette.ink)
                    Text(row.duration)
                        .font(.system(size: 13, weight: .medium, design: .rounded))
                        .foregroundStyle(ESIMPalette.secondaryText)
                }
            }

            Spacer()

            VStack(alignment: .trailing, spacing: 16) {
                Image(systemName: "chevron.right")
                    .font(.system(size: 14, weight: .bold))
                    .foregroundStyle(ESIMPalette.ink)
                Text(row.price)
                    .font(.system(size: 24, weight: .black, design: .rounded))
                    .foregroundStyle(ESIMPalette.ink)
            }
        }
        .padding(20)
        .background(ESIMPalette.card, in: RoundedRectangle(cornerRadius: 28, style: .continuous))
        .shadow(color: ESIMPalette.cardShadow, radius: 20, x: 0, y: 13)
        .padding(.horizontal, 18)
        .padding(.vertical, 7)
    }
}

private struct ESIMChartCard: View {
    let row: ESIMChartRow

    var body: some View {
        VStack(alignment: .leading, spacing: 18) {
            ZStack {
                ESIMLineChart()
                    .frame(height: 130)

                VStack(alignment: .leading, spacing: 4) {
                    Text(row.highlightedValue)
                        .font(.system(size: 19, weight: .bold, design: .rounded))
                    Text(row.highlightedDate)
                        .font(.system(size: 13, weight: .medium, design: .rounded))
                }
                .foregroundStyle(.white)
                .padding(.horizontal, 14)
                .padding(.vertical, 11)
                .background(ESIMPalette.ink, in: RoundedRectangle(cornerRadius: 10, style: .continuous))
                .offset(x: 42, y: -14)
            }

            HStack(spacing: 12) {
                ESIMMetricChip(icon: "arrow.up.arrow.down", title: "Data", value: row.dataUsage, accent: .green)
                ESIMMetricChip(icon: "phone.fill", title: "Call", value: row.callUsage, accent: .lime)
                ESIMMetricChip(icon: "message.fill", title: "SMS", value: row.smsUsage, accent: .cyan)
            }
        }
        .padding(18)
        .background(ESIMPalette.card, in: RoundedRectangle(cornerRadius: 30, style: .continuous))
        .shadow(color: ESIMPalette.cardShadow, radius: 22, x: 0, y: 13)
        .padding(.horizontal, 18)
        .padding(.vertical, 8)
    }
}

private struct ESIMActivityCard: View {
    let row: ESIMActivityRow

    var body: some View {
        HStack(spacing: 15) {
            ESIMIconBadge(systemName: row.icon, accent: row.accent, size: 52)

            VStack(alignment: .leading, spacing: 4) {
                Text(row.title)
                    .font(.system(size: 17, weight: .bold, design: .rounded))
                    .foregroundStyle(ESIMPalette.ink)
                Text(row.date)
                    .font(.system(size: 13, weight: .medium, design: .rounded))
                    .foregroundStyle(ESIMPalette.secondaryText)
            }

            Spacer()

            Text(row.status)
                .font(.system(size: 13, weight: .semibold, design: .rounded))
                .foregroundStyle(Color(red: 0.73, green: 0.27, blue: 0.31))
                .padding(.horizontal, 13)
                .padding(.vertical, 8)
                .background(Color(red: 1.0, green: 0.87, blue: 0.89), in: Capsule())

            Image(systemName: "chevron.right")
                .font(.system(size: 14, weight: .bold))
                .foregroundStyle(ESIMPalette.ink)
        }
        .padding(18)
        .background(ESIMPalette.card, in: RoundedRectangle(cornerRadius: 26, style: .continuous))
        .shadow(color: ESIMPalette.cardShadow, radius: 18, x: 0, y: 12)
        .padding(.horizontal, 18)
        .padding(.vertical, 6)
    }
}

private struct ESIMUsageRing: View {
    let progress: Double
    let used: String
    let limit: String

    var body: some View {
        ZStack {
            Circle()
                .stroke(Color(red: 0.91, green: 0.93, blue: 0.96), lineWidth: 16)
            Circle()
                .trim(from: 0, to: progress)
                .stroke(
                    LinearGradient(
                        colors: [ESIMPalette.blue, ESIMPalette.green],
                        startPoint: .topTrailing,
                        endPoint: .bottomLeading
                    ),
                    style: StrokeStyle(lineWidth: 16, lineCap: .round)
                )
                .rotationEffect(.degrees(-90))

            VStack(spacing: 5) {
                HStack(alignment: .firstTextBaseline, spacing: 4) {
                    Text(used.replacingOccurrences(of: " GB", with: ""))
                        .font(.system(size: 32, weight: .black, design: .rounded))
                    Text("GB")
                        .font(.system(size: 13, weight: .bold, design: .rounded))
                }
                Text("/ \(limit)")
                    .font(.system(size: 17, weight: .medium, design: .rounded))
            }
            .foregroundStyle(ESIMPalette.ink)
        }
    }
}

private struct ESIMLineChart: View {
    private let points: [CGPoint] = [
        CGPoint(x: 0.00, y: 0.72),
        CGPoint(x: 0.16, y: 0.55),
        CGPoint(x: 0.31, y: 0.65),
        CGPoint(x: 0.45, y: 0.32),
        CGPoint(x: 0.60, y: 0.44),
        CGPoint(x: 0.76, y: 0.22),
        CGPoint(x: 1.00, y: 0.36),
    ]

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .bottomLeading) {
                VStack(spacing: 0) {
                    ForEach(0..<5, id: \.self) { _ in
                        Divider()
                        Spacer()
                    }
                }
                .foregroundStyle(Color.black.opacity(0.08))

                chartPath(in: proxy.size)
                    .fill(
                        LinearGradient(
                            colors: [
                                ESIMPalette.green.opacity(0.26),
                                ESIMPalette.green.opacity(0.02),
                            ],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )

                linePath(in: proxy.size)
                    .stroke(ESIMPalette.green, style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))

                Circle()
                    .fill(ESIMPalette.card)
                    .frame(width: 13, height: 13)
                    .overlay(Circle().stroke(ESIMPalette.green, lineWidth: 3))
                    .position(x: proxy.size.width * 0.76, y: proxy.size.height * 0.22)
            }
        }
    }

    private func linePath(in size: CGSize) -> Path {
        Path { path in
            guard let first = points.first else { return }
            path.move(to: CGPoint(x: first.x * size.width, y: first.y * size.height))
            for point in points.dropFirst() {
                path.addLine(to: CGPoint(x: point.x * size.width, y: point.y * size.height))
            }
        }
    }

    private func chartPath(in size: CGSize) -> Path {
        Path { path in
            guard let first = points.first, let last = points.last else { return }
            path.move(to: CGPoint(x: first.x * size.width, y: size.height))
            path.addLine(to: CGPoint(x: first.x * size.width, y: first.y * size.height))
            for point in points.dropFirst() {
                path.addLine(to: CGPoint(x: point.x * size.width, y: point.y * size.height))
            }
            path.addLine(to: CGPoint(x: last.x * size.width, y: size.height))
            path.closeSubpath()
        }
    }
}

private struct ESIMMetricChip: View {
    let icon: String
    let title: String
    let value: String
    let accent: ESIMAccent

    var body: some View {
        HStack(spacing: 8) {
            ESIMIconBadge(systemName: icon, accent: accent, size: 36)
            VStack(alignment: .leading, spacing: 2) {
                Text(title)
                    .font(.system(size: 14, weight: .bold, design: .rounded))
                    .foregroundStyle(ESIMPalette.ink)
                Text(value)
                    .font(.system(size: 12, weight: .medium, design: .rounded))
                    .foregroundStyle(ESIMPalette.secondaryText)
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(10)
        .background(ESIMPalette.surface, in: RoundedRectangle(cornerRadius: 18, style: .continuous))
    }
}

private struct ESIMIconBadge: View {
    let systemName: String
    let accent: ESIMAccent
    let size: CGFloat

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: size * 0.28, style: .continuous)
                .fill(accent.background)
            Image(systemName: systemName)
                .font(.system(size: size * 0.42, weight: .bold))
                .foregroundStyle(accent.foreground)
        }
        .frame(width: size, height: size)
    }
}

private struct ESIMStatusPill: View {
    let title: String
    let color: Color

    var body: some View {
        Text(title)
            .font(.system(size: 13, weight: .medium, design: .rounded))
            .foregroundStyle(ESIMPalette.ink.opacity(0.70))
            .padding(.horizontal, 11)
            .padding(.vertical, 7)
            .background(color.opacity(0.23), in: Capsule())
    }
}

private struct ESIMAvatar: View {
    var body: some View {
        ZStack {
            Circle()
                .fill(
                    LinearGradient(
                        colors: [
                            Color(red: 0.24, green: 0.13, blue: 0.12),
                            Color(red: 0.97, green: 0.81, blue: 0.63),
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
            Text("O")
                .font(.system(size: 18, weight: .bold, design: .rounded))
                .foregroundStyle(.white)
        }
        .frame(width: 42, height: 42)
        .overlay(Circle().stroke(Color.white.opacity(0.45), lineWidth: 1))
    }
}

private enum ESIMPalette {
    static let ink = Color(red: 0.02, green: 0.03, blue: 0.15)
    static let secondaryText = Color(red: 0.37, green: 0.38, blue: 0.46)
    static let card = Color.white
    static let surface = Color(red: 0.97, green: 0.98, blue: 0.99)
    static let deepBlue = Color(red: 0.12, green: 0.31, blue: 0.70)
    static let blue = Color(red: 0.23, green: 0.49, blue: 0.89)
    static let softBlue = Color(red: 0.54, green: 0.71, blue: 0.96)
    static let cyan = Color(red: 0.46, green: 0.84, blue: 0.91)
    static let green = Color(red: 0.57, green: 0.91, blue: 0.53)
    static let lime = Color(red: 0.87, green: 0.95, blue: 0.35)
    static let cardShadow = Color.black.opacity(0.07)
}

private extension ESIMAccent {
    var background: Color {
        switch self {
        case .blue:
            return Color(red: 0.81, green: 0.88, blue: 1.0)
        case .cyan:
            return Color(red: 0.76, green: 0.94, blue: 0.96)
        case .green:
            return Color(red: 0.72, green: 0.96, blue: 0.64)
        case .lime:
            return Color(red: 0.91, green: 0.98, blue: 0.42)
        }
    }

    var foreground: Color {
        switch self {
        case .blue:
            return ESIMPalette.deepBlue
        case .cyan:
            return Color(red: 0.10, green: 0.44, blue: 0.75)
        case .green:
            return Color(red: 0.18, green: 0.44, blue: 0.82)
        case .lime:
            return Color(red: 0.12, green: 0.37, blue: 0.72)
        }
    }
}