/* hPanel top bar — logo, refer pill, Ask AI, search, account. */
const { IconButton, Avatar, Badge } = window.HostingerHPanelDesignSystem_3ef285;
const { Icon } = window.HostingerHPanelDesignSystem_3ef285;

function TopBar() {
  return (
    <header style={{
      height: "var(--topbar-height)", display: "flex", alignItems: "center",
      gap: 16, padding: "0 24px", background: "var(--surface-base)",
      borderBottom: "1px solid var(--border-hairline)", flex: "none",
    }}>
      <img src="assets/hostinger-logo-mark-black.png" alt="Hostinger"
        style={{ width: 30, height: 30 }} />

      <a href="#" style={{
        display: "inline-flex", alignItems: "center", gap: 8, marginLeft: 6,
        height: 38, padding: "0 16px", borderRadius: "var(--radius-pill)",
        background: "var(--brand-soft-bg)", color: "var(--brand-soft-text)",
        fontSize: "var(--fs-sm)", fontWeight: "var(--fw-medium)", textDecoration: "none",
      }}>
        <Icon name="gift" size={18} />
        Refer &amp; earn up to $305
      </a>

      <div style={{ flex: 1 }} />

      <button style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        height: 42, padding: "0 16px 0 14px", borderRadius: "var(--radius-pill)",
        background: "var(--surface-base)", border: "1px solid var(--border-default)",
        fontFamily: "var(--font-sans)", fontSize: "var(--fs-body)",
        fontWeight: "var(--fw-medium)", color: "var(--text-strong)", cursor: "pointer",
      }}>
        <span style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 22, height: 22, borderRadius: "50%",
          background: "linear-gradient(135deg, var(--violet-400), var(--violet-600))",
        }}>
          <Icon name="sparkles" size={13} color="#fff" />
        </span>
        Ask AI
      </button>

      <IconButton icon="search" variant="outline" aria-label="Search" />
      <IconButton icon="user" variant="outline" aria-label="Account" />
    </header>
  );
}

window.TopBar = TopBar;