/**
 * Hero — left panel with branding, feature pills, version
 *
 * Props:
 *   base    — base path for assets (string)
 *   version — app version (string)
 *   env     — environment label or null
 */
const { html } = window;

const PILLS = [
    { icon: '\u{1F9E9}', label: 'Extensions',           cls: 'pu' },
    { icon: '\u{1F310}', label: 'Surfaces',             cls: 'ac' },
    { icon: '\u{1F465}', label: 'Teams & RBAC',         cls: 'pu' },
    { icon: '\u{1F517}', label: 'Connections',           cls: 'ac' },
    { icon: '\u{2699}\u{FE0F}', label: 'Workflows',     cls: 'pu' },
    { icon: '\u{1F4E6}', label: 'Package Registry',     cls: 'ac' },
];

export function Hero({ base = '', version = '', env = null }) {
    return html`
        <div class="login-hero">
            <div class="login-hero-grid"></div>
            <div class="login-hero-orb"></div>
            <div class="login-hero-content">
                <div class="login-hero-brand login-anim login-anim-1">
                    <img class="login-hero-brand-icon"
                         src="${base}/favicon.svg?v=${version}"
                         alt="Armature" />
                    <span class="login-hero-brand-text">
                        Armature
                    </span>
                </div>
                <h1 class="login-anim login-anim-2">
                    Your platform,${html`<br />`}your infrastructure
                </h1>
                <p class="login-hero-sub login-anim login-anim-3">
                    Self-hosted extensible platform with surfaces, packages,
                    team RBAC, and a workflow engine.
                </p>
                <div class="login-hero-pills login-anim login-anim-4">
                    ${PILLS.map(p => html`
                        <span class="login-hero-pill ${p.cls}">
                            <span class="login-hero-pill-icon">${p.icon}</span>
                            ${' '}${p.label}
                        </span>
                    `)}
                </div>
                <p class="login-hero-version login-anim login-anim-5">
                    v${version}${env ? html` \u00B7 ${env}` : ''}
                </p>
            </div>
        </div>
    `;
}