# Tour of Lux — landing page, authored in Lux.
#
# This is the dogfood artifact: the same chapter index that Astro serves at
# /docs/tour, rebuilt as a Lux app and rendered to static HTML by
#
#     lux build --target html lux/tour.lux
#
# The energy bar at the bottom of the built page is the build's own receipt.
# Build script: scripts/build-lux-pages.sh

style page:
    max_width = "760px"
    margin = "0 auto"
    padding = "64px 24px 96px"
    background = "#0A0A0F"
    color = "#E5E7EB"
    font_family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"

style kicker:
    font_family = "ui-monospace, monospace"
    font_size = "11px"
    letter_spacing = "2px"
    text_transform = "uppercase"
    color = "#6B7280"

style title:
    font_size = "38px"
    font_weight = "700"
    color = "#F9FAFB"
    margin = "8px 0 12px"

style lead:
    font_size = "15px"
    line_height = "1.7"
    color = "#9CA3AF"
    margin_bottom = "8px"

style note:
    font_size = "13px"
    line_height = "1.7"
    color = "#6B7280"
    margin_bottom = "32px"

style dogfood_banner:
    font_family = "ui-monospace, monospace"
    font_size = "12px"
    line_height = "1.7"
    color = "#00D4AA"
    background = "rgba(0, 212, 170, 0.07)"
    border = "1px solid rgba(0, 212, 170, 0.25)"
    border_radius = "12px"
    padding = "14px 18px"
    margin_bottom = "40px"

style chapter_card:
    display = "flex"
    align_items = "baseline"
    gap = "16px"
    border = "1px solid #1F2430"
    border_radius = "12px"
    padding = "16px 20px"
    margin_bottom = "12px"

style chapter_num:
    font_family = "ui-monospace, monospace"
    font_size = "13px"
    color = "#6B7280"
    min_width = "24px"

style chapter_link:
    font_size = "16px"
    font_weight = "600"
    color = "#F9FAFB"
    text_decoration = "none"

style chapter_summary:
    font_size = "13px"
    color = "#9CA3AF"
    margin_top = "2px"

style chapter_cells:
    font_family = "ui-monospace, monospace"
    font_size = "11px"
    color = "#6B7280"
    margin_left = "auto"

style footer_links:
    font_size = "13px"
    color = "#6B7280"
    margin_top = "40px"
    line_height = "1.8"

style accent_link:
    color = "#00D4AA"

app TourOfLux:
    chapters = [
        {num: "01", slug: "hello", title: "Hello, Lux", summary: "Run your first program and read your first receipt.", cells: "2 cells"},
        {num: "02", slug: "values", title: "Values", summary: "Bindings, mutability, lists, and records.", cells: "2 cells"},
        {num: "03", slug: "functions", title: "Functions & pipes", summary: "Definitions, lambdas, and the pipe operator.", cells: "2 cells"},
        {num: "04", slug: "control-flow", title: "Control flow", summary: "if/else, pattern matching, and loops.", cells: "2 cells"},
        {num: "05", slug: "collections", title: "Working with data", summary: "List, string, and record builtins.", cells: "2 cells"},
        {num: "06", slug: "signals", title: "Signals", summary: "Reactive state, one primitive.", cells: "1 cell"},
        {num: "07", slug: "apps", title: "Apps & views", summary: "Declarative UI that renders live, right here.", cells: "2 cells"},
        {num: "08", slug: "energy", title: "Energy as an observable", summary: "The part that makes Lux, Lux.", cells: "2 cells"},
    ]

    view:
        div @page:
            span @kicker "Learn by running"
            h1 @title "Tour of Lux"
            p @lead "8 short chapters, 15 live cells. Every example runs in your browser — edit anything, press Run, and read the receipt: output, evaluation steps, and a modeled energy figure. No server, no account; nothing leaves the page."
            p @note "By the last chapter you'll have built a live reactive app and measured two implementations of the same function against each other — in joules."

            div @dogfood_banner:
                text "This page is itself a Lux program. It was authored as a Lux app (view source: tour.lux in this directory) and rendered to the HTML you are reading by lux build --target html. The bar at the bottom is that build's energy receipt. The interactive version lives at /docs/tour."

            for ch in chapters:
                div @chapter_card:
                    span @chapter_num "{ch.num}"
                    div:
                        link @chapter_link "{ch.title}" href="/docs/tour/{ch.slug}"
                        p @chapter_summary "{ch.summary}"
                    span @chapter_cells "{ch.cells}"

            div @footer_links:
                text "Prefer free-form? The "
                link @accent_link "playground" href="https://play.lux-lang.dev"
                text " has the same engine with a full editor — and the "
                link @accent_link "language specification" href="/docs/spec"
                text " covers everything the tour doesn't."