/* mtz. website — hero. Asymmetric, bleeding editorial headline.
   Copy comes from content.json (window.mtzContent.hero). The last title line's
   trailing "." becomes the brand-colored dot that pops in. */
function Hero() {
  const c = mtzContent.hero;
  const lines = c.titleLines || [];
  return (
    <section className="mtz-hero" id="top">
      <div className="mtz-hero__top">
        <span className="mtz-eyebrow-row">{eb(c.eyebrowLeft)}</span>
        <span className="mtz-eyebrow-row">{rt(c.eyebrowRight)}</span>
      </div>

      <h1 className="mtz-hero__title mtz-line-reveal">
        {lines.map((line, i) => {
          const isLast = i === lines.length - 1;
          const hasDot = isLast && /\.\s*$/.test(line);
          const body = hasDot ? line.replace(/\.\s*$/, '') : line;
          return (
            <span className={'mtz-line l' + (i + 1)} key={i}>
              <span className="mtz-line__i" style={{ transitionDelay: (i * 0.08).toFixed(2) + 's' }}>
                {rt(body)}{hasDot && <span className="dot">.</span>}
              </span>
            </span>
          );
        })}
      </h1>

      <div className="mtz-hero__foot">
        <span className="mtz-hero__cue">{c.cue}</span>
        <p className="mtz-hero__lead">{rt(c.lead)}</p>
      </div>
    </section>
  );
}
window.Hero = Hero;