-- Simple panel
local panel = FenUI:CreatePanel(UIParent, {
    title = "My Window",
    width = 400,
    height = 300,
    movable = true,
    resizable = true,
    closable = true,
})

-- Or use the builder pattern
local panel = FenUI.Panel(UIParent)
    :title("My Window")
    :size(400, 300)
    :movable()
    :resizable()
    :closable()
    :build()

-- Vertical stack with spacing and alignment
local stack = FenUI:CreateStack(parent, {
    direction = "vertical",
    gap = "md",
    align = "stretch",
    padding = "sm",
})

stack:AddChild(topButton)
stack:AddChild(spacer, { grow = 1 }) -- Fills remaining space
stack:AddChild(bottomButton)

-- Or use the builder pattern for a horizontal flex wrap
local flex = FenUI.Flex(parent)
    :gap("xs")
    :justify("center")
    :build()

-- Component with min/max boundaries
local panel = FenUI:CreatePanel(parent, {
    width = "80%",
    minWidth = 300,
    maxWidth = 800,
    height = "auto",
    minHeight = 200,
})

-- Aspect ratio locking (supports "16:9", "4/3", or number)
local card = FenUI:CreateLayout(parent, {
    width = "100%",
    aspectRatio = "16:9",
})

-- Aspect ratio based on height
local icon = FenUI:CreateLayout(parent, {
    height = 64,
    aspectRatio = 1,
    aspectBase = "height", -- width will be calculated from height
})

-- 1. Property Transitions (automatic animation on SetAlpha, SetScale, etc.)
local panel = FenUI:CreatePanel(parent, {
    transitions = {
        alpha = { duration = 0.2, easing = "ease-out" },
        scale = { duration = 0.15 },
    },
})

panel:SetAlpha(0.5) -- Fades to 0.5 over 0.2s

-- 2. Lifecycle Animations (Show/Hide)
local dialog = FenUI.Panel(parent)
    :showAnimation("fadeIn")
    :hideAnimation("fadeOut")
    :build()

-- 3. Custom Keyframe Animations
local bounce = FenUI.Animation:Keyframes({
    [0] = { scale = 1 },
    [0.5] = { scale = 1.1 },
    [1] = { scale = 1 },
    duration = 0.3,
})
bounce:Play(myFrame)

-- 4. Chaining
FenUI.Animation.Presets.slideUp:Then(FenUI.Animation.Presets.fadeOut):Play(myFrame)

local tabs = FenUI:CreateTabGroup(parent, {
    tabs = {
        { key = "main", text = "Main" },
        { key = "settings", text = "Settings", badge = "!" },
    },
    onChange = function(key)
        print("Selected:", key)
    end,
})

local grid = FenUI:CreateGrid(parent, {
    columns = { 24, "1fr", "auto" },  -- icon, name, count
    rowHeight = 24,
    onRowClick = function(row, data)
        print("Clicked:", data.name)
    end,
})

grid:SetData(myItems, function(row, item)
    row:SetIcon(1, item.icon)
    row:SetText(2, item.name)
    row:SetText(3, item.count)
end)

-- Simple texture
local img = FenUI:CreateImage(parent, {
    texture = "Interface\\Icons\\INV_Misc_Book_09",
    width = 64,
    height = 64,
})

-- Faction-conditional image
local factionImg = FenUI:CreateImage(parent, {
    condition = "faction",  -- or "class", "race", "spec"
    variants = {
        Horde = "path/to/horde.png",
        Alliance = "path/to/alliance.png",
    },
    fallback = "path/to/default.png",
    width = 128,
    height = 128,
    mask = "circle",  -- or "rounded", or custom texture path
    onClick = function(self) print("Clicked!") end,
})

-- Atlas texture with tinting
local atlasImg = FenUI:CreateImage(parent, {
    atlas = "ShipMissionIcon-Combat-Map",
    width = 32,
    height = 32,
    tint = "feedbackSuccess",  -- FenUI token
})

local header = FenUI:CreateSectionHeader(parent, {
    text = "ADDONS",
    spacing = "md",  -- 12-16px top margin
})

-- Get colors (safe for SetTextColor)
local r, g, b = FenUI:GetColorRGB("textDefault")
fontString:SetTextColor(r, g, b)

-- Or use the helper
FenUI:SetTextColor(fontString, "textHeading")

-- Get spacing
local padding = FenUI:GetSpacing("spacingPanel")  -- 24px

if FenUI and FenUI.CreatePanel then
    -- Use FenUI
    frame = FenUI:CreatePanel(parent, config)
else
    -- Fallback to native frames
    frame = CreateFrame("Frame", nil, parent, "BackdropTemplate")
    -- Manual setup...
end