// Hero v2 — picks one of three variants based on prop.
// Variants: "manifest" | "route" | "ledger"

function HeroV2({ lang = "en", variant = "manifest" }) {
  const tx = (window.HERO_I18N && window.HERO_I18N[lang]) || window.HERO_I18N.en;
  // We render the shared shell, then mount the chosen variant inside hv-canvas.
  // To do that cleanly, we re-implement the shell here so we can place the
  // variant child where we want (after pills, before foot).

  const wa = (typeof WA !== "undefined" && WA.beirut) ? WA.beirut : "#";

  let Variant = null;
  if (variant === "route")    Variant = window.HeroRoute;
  else if (variant === "ledger")  Variant = window.HeroLedger;
  else                            Variant = window.HeroManifest;

  // For ledger variant we want the canvas to render BEFORE the foot but use
  // less vertical chrome; same shell otherwise. The ledger variant also hides
  // the sub paragraph (it has its own intro line) — passed via class.

  return (
    <section id="top" className={`hv hv-v-${variant}`}>
      <div className="hv-bg" aria-hidden="true" />
      <div className="hv-grain" aria-hidden="true" />
      <div className="hv-wrap wrap">
        <div className="hv-eyebrow">{tx.eyebrow}</div>
        <h1 className="hv-title">
          <span className="hv-l1">{tx.titleA}</span>
          <span className="hv-l2"><em>{tx.titleB}</em> <span className="hv-accent">{tx.titleC}</span></span>
        </h1>
        {variant !== "ledger" && <p className="hv-sub">{tx.sub}</p>}
        <div className="hv-ctas">
          <a className="hv-cta" href="#receipts">{tx.cta} <span aria-hidden="true">→</span></a>
          <a className="hv-cta-link" href={wa} target="_blank" rel="noopener"
             onClick={() => window.fireAutoLead && window.fireAutoLead({ inquiry_source: "auto_hero_wa", request_kind: "WhatsApp interest", subject: "hero v2 CTA", whatsapp: wa })}>{tx.wa}</a>
        </div>
        {variant !== "ledger" && (
          <div className="hv-pills" aria-label="Price comparison">
            <div className="hv-pill">
              <span className="hv-pill-label">{tx.p1}</span>
              <span className="hv-pill-value">{tx.p1v}</span>
            </div>
            <div className="hv-pill hv-pill-accent">
              <span className="hv-pill-label">{tx.p2}</span>
              <span className="hv-pill-value">{tx.p2v}</span>
            </div>
            <div className="hv-pill hv-pill-muted">
              <span className="hv-pill-label">{tx.p3}</span>
              <span className="hv-pill-value">{tx.p3v}</span>
            </div>
          </div>
        )}
        <div className="hv-canvas">
          {Variant ? <Variant lang={lang} /> : null}
        </div>
        <div className="hv-foot">{tx.foot}</div>
      </div>
    </section>
  );
}

window.HeroV2 = HeroV2;