/* ============================================================
   SectionHead — elegant, low-density section header.
   Replaces the heavy <GtaBanner> spam. No background imagery,
   no character cutout, no badges, no emblem lockup.

   Two visual variants alternate down the page so adjacent
   section headers never look identical:

     "marquee"  → big left-anchored title, section number on left
     "blade"    → right-anchored title, thin neon diagonal blade
                  cutting across, mono caption tucked to the left

   Props:
     num       — "02" | "03" — the section index (string)
     eyebrow   — short kicker, ALL CAPS letter-spaced
     title     — big lowercase Pricedown title
     sub       — single short line of secondary copy (optional)
     accent    — "cyan" | "pink" | "coral" | "gold" — drives the
                 single accent color used in this header
     variant   — "marquee" | "blade"
     align     — for marquee: "left" | "center". blade is always right.
   ============================================================ */

function SectionHead({
  num,
  eyebrow,
  title,
  sub,
  accent = "cyan",
  variant = "marquee",
  align = "left",
}) {
  const ACCENT = {
    cyan:  "#46e5e5",
    pink:  "#ff3aa3",
    coral: "#ffae6a",
    gold:  "#ffd23a",
    green: "#5be684",
    purple:"#a02bff",
  };
  const col = ACCENT[accent] || ACCENT.cyan;

  if (variant === "blade") {
    return (
      <div
        className="sh sh-blade"
        data-reveal
        style={{ "--sh-accent": col }}
      >
        <div className="sh-blade-line" />
        <div className="sh-blade-meta">
          {num && <span className="sh-num">§ {num}</span>}
          {eyebrow && <span className="sh-eyebrow">{eyebrow}</span>}
        </div>
        <h2 className="sh-title sh-title-blade">{title}</h2>
        {sub && <div className="sh-sub sh-sub-blade">{sub}</div>}
      </div>
    );
  }

  /* marquee */
  return (
    <div
      className={`sh sh-marquee sh-align-${align}`}
      data-reveal
      style={{ "--sh-accent": col }}
    >
      <div className="sh-rule" />
      <div className="sh-marquee-head">
        {num && <span className="sh-num">§ {num}</span>}
        {eyebrow && <span className="sh-eyebrow">{eyebrow}</span>}
        <span className="sh-tick" />
      </div>
      <h2 className="sh-title sh-title-marquee">{title}</h2>
      {sub && <div className="sh-sub">{sub}</div>}
    </div>
  );
}

window.SectionHead = SectionHead;