// PHAROS — Hero / Masthead
const { useContext: useHeroCtx } = React;

function Hero() {
  const { t, lang } = React.useContext(window.LangCtx);
  return (
    <section id="top" className="hero">
      <div className="hero-inner">
        <div className="hero-grid">
          <div className="hero-body">
            <div className="hero-eyebrow">{t.hero.eyebrow}</div>
            <Reveal as="h1" className="display">
              <span className="display-line">{t.hero.h1a}</span>
              <span className="display-line display-line--muted">{t.hero.h1b}</span>
            </Reveal>
            <Reveal delay={120} as="p" className="hero-sub">{t.hero.sub}</Reveal>
            <Reveal delay={220} className="hero-cta-row">
              <a href="#contact" className="btn-link">
                <span>{t.hero.cta}</span>
                <span className="arrow" aria-hidden="true">→</span>
              </a>
              <a
                href={`mailto:hello@pharos-advisory.org?subject=${encodeURIComponent(t.hero.cta_secondary_subject)}&body=${encodeURIComponent(t.hero.cta_secondary_body)}`}
                className="btn-link btn-link--ghost"
              >
                <span>{t.hero.cta_secondary}</span>
                <span className="arrow" aria-hidden="true">→</span>
              </a>
            </Reveal>
          </div>

          <aside className="hero-side">
            <figure className="hero-figure">
              <img
                src="assets/hero-riyadh.jpg"
                alt="King Abdullah Financial District, Riyadh"
                className="hero-figure-img"
                loading="eager"
                fetchpriority="high"
                decoding="async"
                width="1920"
                height="1266"
              />
              <figcaption className="hero-figure-cap">
                <span>KAFD · Riyadh</span>
                <span>{t.ui.hero_zone}</span>
              </figcaption>
            </figure>
          </aside>
        </div>

        <div className="hero-trust">
          <div className="hero-trust-row">
            {t.hero.ticker.map(([k, v], i) => (
              <div className="hero-trust-cell" key={i}>
                <div className="hero-trust-val">{v}</div>
                <div className="hero-trust-key">{k}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;