// components/hero.el - Hero section.
//
// Full-bleed hero with headline, sub-copy, and two CTAs.
// Glow orbs are pure CSS absolute-positioned divs.
// Entrance animations are CSS keyframes with class-based delays.

extern fn el_section(attrs: String, children: String) -> String
extern fn el_div(attrs: String, children: String) -> String
extern fn el_p(attrs: String, children: String) -> String
extern fn el_h1(attrs: String, text: String) -> String
extern fn el_a(href: String, attrs: String, children: String) -> String
extern fn el_span(attrs: String, children: String) -> String

fn hero() -> String {
    let glows: String =
        el_div("class=\"glow-tl\" aria-hidden=\"true\"", "") +
        el_div("class=\"glow-br\" aria-hidden=\"true\"", "")

    let label: String = el_p(
        "class=\"label hero-label animate-up-1\"",
        "One builder. Patented. No permission."
    )

    let headline_em: String = el_span("class=\"gold\" style=\"font-style:normal\"",
        "I built the one that doesn't."
    )
    let headline: String = el_h1(
        "class=\"display-xl hero-headline animate-up-2\"",
        "Every AI resets when you close the tab. " + headline_em
    )

    let sub: String = el_p(
        "class=\"hero-sub animate-up-3\"",
        "Runs on your machine. Remembers everything. Priced below ChatGPT on day one."
    )

    let cta_primary: String = el_a(
        "#pricing",
        "class=\"btn-primary\"",
        "Preorder " + el_span("", "→")
    )
    let cta_ghost: String = el_a(
        "#how-it-works",
        "class=\"btn-ghost\"",
        "See how it works"
    )
    let ctas: String = el_div("class=\"hero-ctas animate-up-5\"", cta_primary + cta_ghost)

    let scroll_inner: String =
        el_span("", "Scroll") +
        el_div("class=\"hero-scroll-line\"", "")
    let scroll: String = el_div("class=\"hero-scroll\" aria-hidden=\"true\"", scroll_inner)

    el_section("id=\"hero\" aria-label=\"Hero\"", glows + label + headline + sub + ctas + scroll)
}