// Launched — slim "Recently launched" announcement bar at the very top
// of the page (above the nav). Shows both live sub-products as compact
// clickable chips. No scrolling required.

function Launched() {
  const items = [
    {
      product: "LetsPlay",
      pillarEmoji: "🎒",
      pillarCode: "PFK",
      accent: "var(--pfk-color)",
      tint: "var(--pfk-tint)",
      url: "https://lets-play-nine.vercel.app/",
    },
    {
      product: "Executive Signal",
      pillarEmoji: "💼",
      pillarCode: "PFC",
      accent: "var(--pfc-color)",
      tint: "var(--pfc-tint)",
      url: "https://www.mycareersignal.com/",
    },
  ];

  return (
    <div className="vh-launched-bar" role="region" aria-label="Recently launched products">
      <div className="vh-launched-bar-inner">
        <span className="vh-launched-bar-tag">
          <span className="vh-launched-bar-pulse" />
          <span>Live now</span>
        </span>

        <span className="vh-launched-bar-label">2 sub-products are live:</span>

        <div className="vh-launched-bar-chips">
          {items.map((it) => (
            <a
              key={it.product}
              href={it.url}
              target="_blank"
              rel="noopener noreferrer"
              className="vh-launched-bar-chip"
              style={{ ["--accent"]: it.accent, ["--tint"]: it.tint }}
              title={`Open ${it.product} — under ${it.pillarCode}`}
            >
              <span className="vh-launched-bar-chip-emoji">{it.pillarEmoji}</span>
              <span className="vh-launched-bar-chip-name">{it.product}</span>
              <span className="vh-launched-bar-chip-code">{it.pillarCode}</span>
              <Icon name="arrow-up-right" size={13} />
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Launched = Launched;