/* eslint-disable */
// Hero — used on the homepage. Full-bleed Willemstad photo, triplet headline.

const Hero = ({ onPrimary, onSecondary }) => {
  const ctx = (window.useTweaksCtx && window.useTweaksCtx()) || { tweaks: { voice: 'triplet' } };
  const v = (window.VOICE_COPY && window.VOICE_COPY[ctx.tweaks.voice]) || window.VOICE_COPY.triplet;
  return (
    <section className="cbm-hero">
      <div className="cbm-hero__photo" style={{backgroundImage: 'url(../../assets/imagery/willemstad-waterfront.jpg)'}} />
      <div className="cbm-hero__scrim" />
      <div className="cbm-hero__inner">
        <p className="cbm-hero__eyebrow">{v.heroEyebrow}</p>
        <h1 className="cbm-hero__triplet">
          {v.heroPre}<span className="gold">{v.heroAccent}</span>{v.heroPost}
        </h1>
        <p className="cbm-hero__lede">{v.heroLede}</p>
        <div className="cbm-hero__ctas">
          <button className="cbm-btn cbm-btn--gold" onClick={onPrimary}>{v.primaryCta}</button>
          <button className="cbm-btn cbm-btn--ghost-inv" onClick={onSecondary}>{v.secondaryCta}</button>
        </div>
      </div>
      <div className="cbm-hero__stripe" />
    </section>
  );
};

Object.assign(window, { Hero });