import SwiftUI

struct AuroraTabOrbit: View {
    @Namespace private var namespace
    @State private var selection = "Discover"

    private let accent = Color.orange
    private let items = ["Discover", "Updates", "Saved", "Profile"]

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            Text("Aurora Tab Orbit")
                .font(.system(size: 32, weight: .bold, design: .rounded))

            Text("A bright floating tab bar with soft glass layers and compact destination labels.")
                .foregroundStyle(.secondary)

            RoundedRectangle(cornerRadius: 30, style: .continuous)
                .fill(
                    LinearGradient(
                        colors: [accent.opacity(0.26), .white],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .frame(height: 280)
                .overlay(alignment: .topLeading) {
                    VStack(alignment: .leading, spacing: 14) {
                        Text("Live preview")
                            .font(.headline)
                        Text("Use the selected tab to reveal contextual content while keeping the shell lightweight.")
                            .foregroundStyle(.secondary)
                        Spacer()
                    }
                    .padding(24)
                }

            HStack(spacing: 10) {
                ForEach(items, id: \.self) { item in
                    Button {
                        withAnimation(.spring(response: 0.34, dampingFraction: 0.78)) {
                            selection = item
                        }
                    } label: {
                        VStack(spacing: 8) {
                            Image(systemName: item == "Saved" ? "heart" : "circle.grid.2x2.fill")
                                .font(.system(size: 15, weight: .semibold))
                            Text(item)
                                .font(.system(size: 12, weight: .semibold, design: .rounded))
                        }
                        .foregroundStyle(selection == item ? accent : .primary)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background {
                            if selection == item {
                                Capsule()
                                    .fill(accent.opacity(0.18))
                                    .matchedGeometryEffect(id: "selection", in: namespace)
                            }
                        }
                    }
                    .buttonStyle(.plain)
                }
            }
            .padding(10)
            .background(.ultraThinMaterial, in: Capsule())
        }
        .padding(24)
        .background(Color(.systemBackground))
    }
}