import QtQuick
import QtQuick.Shapes

Item {
    id: root

    implicitWidth: 720
    implicitHeight: 120

    readonly property color voidColor: "#0a0a0a"
    readonly property color inkColor: "#dedede"
    readonly property color mutedColor: "#858585"
    readonly property color accentColor: "#e8722a"

    Rectangle {
        anchors.fill: parent
        color: root.voidColor
    }

    Shape {
        anchors.fill: parent
        preferredRendererType: Shape.CurveRenderer

        ShapePath {
            fillColor: root.voidColor
            strokeColor: Qt.rgba(0.87, 0.87, 0.87, 0.28)
            strokeWidth: 1
            startX: 1
            startY: 1
            PathLine { x: root.width - 14; y: 1 }
            PathLine { x: root.width - 1; y: 14 }
            PathLine { x: root.width - 1; y: root.height - 9 }
            PathLine { x: root.width - 9; y: root.height - 1 }
            PathLine { x: 17; y: root.height - 1 }
            PathLine { x: 1; y: root.height - 17 }
            PathLine { x: 1; y: 1 }
        }

        ShapePath {
            fillColor: root.accentColor
            strokeWidth: 0
            startX: 1
            startY: 1
            PathLine { x: 92; y: 1 }
            PathLine { x: 92; y: 3 }
            PathLine { x: 1; y: 3 }
            PathLine { x: 1; y: 1 }
        }
    }

    Rectangle {
        x: 14
        y: 12
        width: 29
        height: 14
        color: root.accentColor

        Text {
            anchors.centerIn: parent
            text: "001"
            color: root.voidColor
            font.pixelSize: 8
            font.bold: true
        }
    }

    Text {
        x: 52
        y: 13
        text: "HEADLESS RENDER ARRAY"
        color: root.inkColor
        font.family: "monospace"
        font.pixelSize: 9
        font.bold: true
        font.letterSpacing: 1.4
    }

    Rectangle {
        x: 14
        y: 34
        width: root.width - 28
        height: 1
        color: root.inkColor
        opacity: 0.18
    }

    Text {
        x: 16
        y: 48
        text: "ORBITAL"
        color: root.inkColor
        font.family: "sans-serif-condensed"
        font.pixelSize: 28
        font.bold: true
        font.letterSpacing: 2
    }

    Text {
        x: 18
        y: 80
        text: "QML // GRABTOIMAGE // SOFTWARE RHI"
        color: root.accentColor
        font.family: "monospace"
        font.pixelSize: 7
        font.letterSpacing: 1.4
    }

    Row {
        x: 250
        y: 56
        spacing: 4

        Repeater {
            model: 16

            Rectangle {
                required property int index
                width: 20
                height: 12
                color: index < 11 ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.06)
                border.width: 1
                border.color: index < 11 ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.2)
            }
        }
    }

    Text {
        x: 250
        y: 78
        text: "RENDER PIPELINE"
        color: root.mutedColor
        font.family: "monospace"
        font.pixelSize: 7
        font.letterSpacing: 1.1
    }

    Text {
        x: 585
        y: 77
        text: "68.75%"
        color: root.inkColor
        font.family: "monospace"
        font.pixelSize: 15
        font.bold: true
    }

    Rectangle {
        x: 14
        y: root.height - 9
        width: root.width - 28
        height: 3
        color: root.accentColor
        opacity: 0.6
    }
}