Brand Identity with Liquid Glass UI Layering

import SwiftUI

struct BrandedContentView: View {
    // Brand accent color — used for tint, not toolbar backgrounds
    let brandColor = Color(red: 0.45, green: 0.25, blue: 0.85)

    var body: some View {
        TabView {
            Tab("Home", systemImage: "house.fill") {
                HomeContentView(brandColor: brandColor)
            }
            Tab("Explore", systemImage: "magnifyingglass") {
                Text("Explore")
            }
            Tab("Profile", systemImage: "person.fill") {
                Text("Profile")
            }
        }
        // Tint applies to tab bar selection and toolbar buttons
        // Liquid Glass picks up this color dynamically
        .tint(brandColor)
    }
}

struct HomeContentView: View {
    let brandColor: Color
    @State private var showingDetail = false

    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 0) {
                    // Brand color lives HERE — in the content layer
                    // It scrolls beneath the Liquid Glass toolbar
                    LinearGradient(
                        colors: [brandColor, brandColor.opacity(0.6), Color(.systemBackground)],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                    .frame(height: 260)
                    .overlay(alignment: .bottom) {
                        VStack(alignment: .leading, spacing: 4) {
                            Text("This Week's Feature")
                                .font(.caption)
                                .foregroundStyle(.white.opacity(0.8))
                            Text("Midnight Bloom")
                                .font(.largeTitle.bold())
                                .foregroundStyle(.white)
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.horizontal, 20)
                        .padding(.bottom, 20)
                    }

                    // Standard content below the hero
                    LazyVStack(spacing: 16) {
                        ForEach(0..<8, id: \.self) { index in
                            ContentCard(index: index, accentColor: brandColor)
                        }
                    }
                    .padding()
                }
            }
            .ignoresSafeArea(edges: .top) // Lets content extend under Liquid Glass toolbar
            .navigationTitle("Discover")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    // Context menu instead of custom toolbar component
                    Menu {
                        Button("Sort by Date", systemImage: "calendar") { }
                        Button("Sort by Name", systemImage: "textformat") { }
                        Divider()
                        Button("Settings", systemImage: "gear") { }
                    } label: {
                        Image(systemName: "ellipsis.circle")
                    }
                }
            }
        }
    }
}

struct ContentCard: View {
    let index: Int
    let accentColor: Color

    var body: some View {
        HStack(spacing: 12) {
            RoundedRectangle(cornerRadius: 10)
                .fill(accentColor.opacity(0.15))
                .frame(width: 56, height: 56)
                .overlay {
                    Image(systemName: "star.fill")
                        .foregroundStyle(accentColor)
                }
            VStack(alignment: .leading, spacing: 2) {
                // Custom font with scalable Dynamic Type support
                Text("Item \(index + 1)")
                    .font(.system(.headline, design: .rounded, weight: .semibold))
                Text("Supporting detail text")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            Spacer()
        }
        .padding()
        .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 14))
    }
}

#Preview {
    BrandedContentView()
}