Ranglar, gradientlar va stillar

// ═══════════════════════════════════════
//  TIZIM RANGLARI — Dark/Light mode ga avtomatik moslashadi
// ═══════════════════════════════════════
Text("Tizim ranglari")
    .foregroundStyle(.primary)      // Asosiy matn rangi
    // .secondary, .tertiary, .quaternary — yordamchi ranglar

// Semantik ranglar — mazmuniga qarab
Color.accentColor  // Ilova aksent rangi
Color.red          // Tizim qizil (dark mode da farq qiladi!)
Color.blue         // Tizim ko'k
Color.green        // Tizim yashil

// Fon ranglari
Color(.systemBackground)       // Asosiy fon
Color(.secondarySystemBackground) // Ikkinchi darajali fon


// ═══════════════════════════════════════
//  MAXSUS RANGLAR
// ═══════════════════════════════════════
// RGB bilan
Color(red: 0.4, green: 0.2, blue: 0.8)

// HSB (Hue-Saturation-Brightness) bilan
Color(hue: 0.6, saturation: 0.8, brightness: 0.9)

// Hex Extension
extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: .alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default: (a, r, g, b) = (255, 0, 0, 0)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue: Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

// Ishlatish
Color(hex: "FF6B35")   // To'q apelsin
Color(hex: "#3498DB")  // Ko'k

// ═══════════════════════════════════════
//  LINEAR GRADIENT — chiziqli
// ═══════════════════════════════════════
// Tepadan pastga
LinearGradient(
    colors: [.blue, .purple],
    startPoint: .top,
    endPoint: .bottom
)

// Chapdan o'ngga, ko'p rang
LinearGradient(
    stops: [
        .init(color: .red, location: 0.0),
        .init(color: .orange, location: 0.3),
        .init(color: .yellow, location: 0.6),
        .init(color: .green, location: 1.0),
    ],
    startPoint: .leading,
    endPoint: .trailing
)


// ═══════════════════════════════════════
//  RADIAL GRADIENT — doiraviy
// ═══════════════════════════════════════
RadialGradient(
    colors: [.yellow, .orange, .red],
    center: .center,
    startRadius: 20,
    endRadius: 150
)


// ═══════════════════════════════════════
//  ANGULAR GRADIENT — burchakli
// ═══════════════════════════════════════
AngularGradient(
    colors: [.red, .yellow, .green, .blue, .purple, .red],
    center: .center
)


// ═══════════════════════════════════════
//  AMALIY MISOL — gradient tugma
// ═══════════════════════════════════════
Button("Bosing") { }
    .font(.headline)
    .foregroundStyle(.white)
    .padding(.horizontal, 40)
    .padding(.vertical, 15)
    .background(
        LinearGradient(
            colors: [Color(hex: "667eea"), Color(hex: "764ba2")],
            startPoint: .leading,
            endPoint: .trailing
        )
    )
    .clipShape(Capsule())
    .shadow(color: Color(hex: "667eea").opacity(0.4), radius: 10, y: 5)

// ═══════════════════════════════════════
//  FOREGROUNDSTYLE — rang, gradient, material
// ═══════════════════════════════════════

// Oddiy rang
Text("Salom").foregroundStyle(.blue)

// Gradient bilan matn
Text("Gradient Matn")
    .font(.largeTitle.bold())
    .foregroundStyle(
        LinearGradient(
            colors: [.purple, .pink, .orange],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

// Birlamchi va ikkilamchi stil
VStack {
    Text("Asosiy").foregroundStyle(.primary)
    Text("Ikkinchi").foregroundStyle(.secondary)
    Text("Uchinchi").foregroundStyle(.tertiary)
}

// Bir nechta stil
Label("Sozlamalar", systemImage: "gear")
    .foregroundStyle(.blue, .gray)
    // Birinchi — matn, ikkinchi — ikon

// ═══════════════════════════════════════
//  MATERIAL — blur effekti
// ═══════════════════════════════════════
ZStack {
    // Fon rasm
    Image("fon")
        .resizable()
        .scaledToFill()

    // Material — fonni xiralashtiradi
    VStack {
        Text("Material effekt")
            .font(.title)
    }
    .padding(30)
    .background(.ultraThinMaterial)   // Juda yupqa blur
    // .thinMaterial        — yupqa blur
    // .regularMaterial     — oddiy blur
    // .thickMaterial       — qalin blur
    // .ultraThickMaterial  — juda qalin blur
    .clipShape(RoundedRectangle(cornerRadius: 20))
}