Text("Hola, mundo")
    .font(.title)
    .fontWeight(.bold)

// Con Markdown
Text("Texto en **negrita** y *cursiva*")

// Con formato de número
Text(precio, format: .currency(code: "MXN"))

// SF Symbol
Image(systemName: "star.fill")
    .foregroundStyle(.yellow)

// Asset catalog
Image("avatar")
    .resizable()
    .scaledToFill()
    .frame(width: 80, height: 80)
    .clipShape(Circle())

Label("Favoritos", systemImage: "heart.fill")

Label("Compartir", systemImage: "square.and.arrow.up")
    .foregroundStyle(.blue)

// Solo ícono
Label("Ajustes", systemImage: "gear")
    .labelStyle(.iconOnly)

Link("Visitar slekens.dev",
     destination: URL(string: "https://slekens.dev")!)

// Con vista personalizada como label
Link(destination: URL(string: "https://slekens.dev")!) {
    HStack {
        Image(systemName: "safari")
        Text("Abrir en Safari")
    }
}

@State private var nombre = ""

TextField("Nombre", text: $nombre)
    .textFieldStyle(.roundedBorder)
    .keyboardType(.default)

// Con label personalizado
TextField(text: $email) {
    Label("Email", systemImage: "envelope")
}

@State private var password = ""

SecureField("Contraseña", text: $password)
    .textFieldStyle(.roundedBorder)
    .submitLabel(.done)
    .onSubmit {
        iniciarSesion()
    }

@State private var notificaciones = true

Toggle("Notificaciones", isOn: $notificaciones)

// Estilo botón
Toggle("Wi-Fi", isOn: $wifi)
    .toggleStyle(.button)
    .tint(.blue)

@State private var volumen: Double = 0.5

Slider(value: $volumen, in: 0...1)

// Con rango y step
Slider(value: $brillo, in: 0...100, step: 10) {
    Text("Brillo")
} minimumValueLabel: {
    Image(systemName: "sun.min")
} maximumValueLabel: {
    Image(systemName: "sun.max")
}

@State private var cantidad = 1

Stepper("Cantidad: \(cantidad)", value: $cantidad, in: 1...10)

// Con paso personalizado
Stepper(value: $precio, in: 0...1000, step: 50) {
    Text("Precio: $\(precio)")
}

@State private var seleccion = "Swift"
let opciones = ["Swift", "Kotlin", "Dart"]

Picker("Lenguaje", selection: $seleccion) {
    ForEach(opciones, id: \.self) {
        Text($0)
    }
}
.pickerStyle(.segmented)

@State private var fecha = Date()

DatePicker("Fecha de entrega", selection: $fecha,
           in: Date()...,
           displayedComponents: .date)
    .datePickerStyle(.compact)

// Solo hora
DatePicker("Hora", selection: $hora,
           displayedComponents: .hourAndMinute)

HStack(spacing: 16) {
    Image(systemName: "person.circle")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Abraham")
            .font(.headline)
        Text("iOS Developer")
            .foregroundStyle(.secondary)
    }
    Spacer()
}
.padding()

VStack(alignment: .leading, spacing: 12) {
    Text("Pokédex")
        .font(.largeTitle)
        .fontWeight(.bold)
    Text("151 Pokémon de Kanto")
        .foregroundStyle(.secondary)
    Divider()
    ForEach(pokemones) { p in
        PokemonRow(pokemon: p)
    }
}
.padding()

ZStack(alignment: .topTrailing) {
    AsyncImage(url: portadaURL)
        .frame(width: 200, height: 200)
        .clipShape(RoundedRectangle(cornerRadius: 16))

    // Badge encima
    Text("3")
        .font(.caption2).fontWeight(.bold)
        .foregroundStyle(.white)
        .padding(6)
        .background(.red)
        .clipShape(Circle())
        .offset(x: 8, y: -8)
}

// Empuja el botón al lado derecho
HStack {
    Text("Título")
        .font(.headline)
    Spacer()
    Button("Editar") { }
}

// Centra el contenido verticalmente
VStack {
    Spacer()
    Text("Centrado")
    Spacer()
}

VStack {
    Text("Sección 1")
    Divider()
    Text("Sección 2")
}

// Personalizado
Divider()
    .overlay(Color.blue.opacity(0.4))
    .padding(.horizontal)

ScrollView {
    LazyVStack(spacing: 12) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
    .padding()
}

// Horizontal
ScrollView(.horizontal, showsIndicators: false) {
    HStack { ... }
}

List(pokemones) { pokemon in
    HStack {
        AsyncImage(url: pokemon.imageURL)
            .frame(width: 44, height: 44)
        VStack(alignment: .leading) {
            Text(pokemon.nombre)
            Text(pokemon.tipo)
                .foregroundStyle(.secondary)
        }
    }
    .swipeActions {
        Button("Favorito", systemImage: "heart") {
            toggleFavorito(pokemon)
        }.tint(.pink)
    }
}
.listStyle(.insetGrouped)

Form {
    Section("Perfil") {
        TextField("Nombre", text: $nombre)
        TextField("Email", text: $email)
    }

    Section("Preferencias") {
        Toggle("Notificaciones", isOn: $notifs)
        Picker("Tema", selection: $tema) {
            Text("Claro").tag("light")
            Text("Oscuro").tag("dark")
        }
    }

    Section {
        Button("Guardar", action: guardar)
            .frame(maxWidth: .infinity)
    }
}

// Aplicar modificador a varios elementos
Group {
    Text("Línea 1")
    Text("Línea 2")
    Text("Línea 3")
}
.font(.caption)
.foregroundStyle(.secondary)

// Superar límite de 10 vistas en ViewBuilder
VStack {
    Group {
        // vistas 1–9
    }
    Group {
        // vistas 10–18
    }
}

List {
    Section {
        Text("Elemento 1")
        Text("Elemento 2")
    } header: {
        Text("Mi sección")
    } footer: {
        Text("Texto explicativo al pie")
            .font(.caption)
    }
}

NavigationStack {
    List(pokemones) { pokemon in
        NavigationLink(value: pokemon) {
            Text(pokemon.nombre)
        }
    }
    .navigationTitle("Pokédex")
    .navigationDestination(for: Pokemon.self) { pokemon in
        PokemonDetailView(pokemon: pokemon)
    }
    .toolbar {
        ToolbarItem(placement: .topBarTrailing) {
            Button("Filtrar", systemImage: "line.3.horizontal.decrease")
            { mostrarFiltro = true }
        }
    }
}

// Forma moderna (iOS 16+)
NavigationLink(value: pokemon) {
    Label(pokemon.nombre, systemImage: "flame.fill")
}

// Forma clásica
NavigationLink("Ver detalle") {
    DetalleView()
}

// Con vista compleja como label
NavigationLink(value: articulo) {
    ArticuloRow(articulo: articulo)
}

TabView {
    PokemonListView()
        .tabItem {
            Label("Pokédex", systemImage: "list.bullet")
        }

    FavoritosView()
        .tabItem {
            Label("Favoritos", systemImage: "heart.fill")
        }
        .badge(3)

    AjustesView()
        .tabItem {
            Label("Ajustes", systemImage: "gear")
        }
}