/* Hero — eyebrow rule, big serif headline, sub + CTAs */

// Render a line of headline text. Supports **markdown-style** highlight markers
// — anything wrapped in ** is rendered as a styled <span class="hl"> so we can
// give attention-grabbing words (like "100%") a distinct visual treatment in CSS.
function renderHeadline(line) {
  const parts = line.split(/(\*\*[^*]+\*\*)/g).filter(Boolean);
  return parts.map((p, i) =>
    p.startsWith("**") && p.endsWith("**")
      ? <span key={i} className="hl">{p.slice(2, -2)}</span>
      : <React.Fragment key={i}>{p}</React.Fragment>
  );
}

function Hero({ t }) {
  const openBooking = (e) => { e.preventDefault(); window.openBooking(); };
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-eyebrow">
          <span className="rule"></span>
          <span>{t.hero.eyebrow}</span>
        </div>
        <div className="hero-grid">
          <h1>
            {t.hero.headline.map((line, i) => (
              <React.Fragment key={i}>
                {renderHeadline(line)}{i < t.hero.headline.length - 1 ? <br/> : null}
              </React.Fragment>
            ))}
          </h1>
          <div className="hero-side">
            <p className="sub">{t.hero.sub}</p>
            <div className="hero-ctas">
              <a className="btn solid" href="#" onClick={openBooking}>
                {t.hero.cta} <span className="arrow">→</span>
              </a>
              <a className="btn accent" href="#services">
                {t.hero.secondary} <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;