/* global React */
function Hero() {
  const { t } = window.useT();
  return (
    <section className="vsc-hero" id="top" data-screen-label="Hero">
      <div className="vsc-hero-decor" aria-hidden="true">Victoria</div>
      <div className="vsc-hero-inner">
        <div className="vsc-hero-text">
          <div className="vsc-eyebrow">{t("hero.eyebrow")}</div>
          <h1 className="vsc-hero-h1">
            {t("hero.h1.a")} <em>{t("hero.h1.b")}</em> {t("hero.h1.c")}<span className="vsc-script-flourish">.</span>
          </h1>
          <p className="vsc-hero-sub">{t("hero.sub")}</p>
          <div className="vsc-hero-cta">
            <BookBtn className="vsc-btn vsc-btn-primary vsc-btn-lg">{t("common.book_my")}</BookBtn>
            <a className="vsc-btn vsc-btn-text" href="#servicios">
              {t("common.view_services")}
            </a>
          </div>

          <div className="vsc-hero-trust">
            <div className="vsc-trust-item">
              <div className="vsc-trust-num"><em>12+</em></div>
              <div className="vsc-trust-lab">{t("hero.trust.years")}</div>
            </div>
            <div className="vsc-trust-item">
              <div className="vsc-trust-num">4.9<span style={{fontSize:18,color:'var(--vsc-stone-500)'}}>/5</span></div>
              <div className="vsc-trust-lab">
                <span className="vsc-hero-stars" aria-hidden="true">★★★★★</span><br/>
                <span style={{textTransform:'none',letterSpacing:0,fontSize:11}}>{t("hero.trust.rating")}</span>
              </div>
            </div>
            <div className="vsc-trust-item">
              <div className="vsc-trust-num"><em>1:1</em></div>
              <div className="vsc-trust-lab">{t("hero.trust.private")}</div>
            </div>
          </div>
        </div>

        <div className="vsc-hero-image">
          <span className="photo-tag">
            <span className="dot" aria-hidden="true"></span>
            {t("hero.tag.live")}
          </span>
          <img className="photo" src="assets/spa-hero.jpg" alt="Victoria Skincare Curaçao — reed diffuser, candles and towels" />
          <div className="photo-card">
            <div className="stars" aria-hidden="true">★★★★★</div>
            <p className="q">"{t("hero.quote")}"</p>
            <div className="who">{t("hero.quote.who")}</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;