// Hero variants for the landing page — A (Editorial postcard) and B (Photo-first).
const HeroA = () => (
  <section className="lp-hero lp-heroA">
    {/* Watermark behind everything */}
    <img className="lp-heroA__watermark" src="assets/mast-watermark.png" alt="" aria-hidden="true" />

    {/* Posidonia ribbon */}
    <div className="lp-heroA__ribbon">
      <span>Posidonia 2026</span>
      <span className="lp-heroA__ribbonSep">·</span>
      <span>Athens · GR</span>
      <span className="lp-heroA__ribbonSep">·</span>
      <span>Stand 4.317</span>
    </div>

    <div className="lp-heroA__inner">
      <img className="lp-heroA__logo" src="assets/mast-logo.jpg" alt="MAST Maritime Services" />

      <div className="lp-heroA__eyebrow">Welcome aboard</div>
      <h1 className="lp-heroA__h1">
        Maritime services,<br />
        <span className="lp-heroA__h1Em"><span className="lp-heroA__h1Mast">MAST</span>ered.</span>
      </h1>
      <p className="lp-heroA__sub">
        A trusted partner for ship repairs, energy efficiency, technical
        consultancy and spares — delivered through one integrated, global desk.
      </p>

      <div className="lp-heroA__actions">
        <a href="#services" className="lp-btn lp-btn--primary">
          Explore our services
          <span className="lp-btn__circle">
            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
              <circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" strokeWidth="1.5" />
              <path d="M6 8.5l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        </a>
        <a href="#contacts" className="lp-btn lp-btn--ghost">
          Email our team
          <span className="lp-btn__arrow">→</span>
        </a>
      </div>
    </div>

    <div className="lp-heroA__chips">
      <span className="lp-chip">Athens HQ</span>
      <span className="lp-chip">Guangzhou Branch</span>
    </div>
  </section>
);

const HeroB = () => (
  <section className="lp-hero lp-heroB">
    {/* Full-bleed hero photo */}
    <img
      className="lp-heroB__photo"
      src="assets/mast-bow.jpg"
      alt="MAST engineer standing beneath a vessel's bow in drydock"
    />
    <div className="lp-heroB__overlay" />

    <div className="lp-heroB__top">
      <img className="lp-heroB__logo" src="assets/mast-logo.jpg" alt="MAST Maritime Services" />
      <div className="lp-heroB__tag">
        Posidonia 2026<br />
        <span>Stand 4.317</span>
      </div>
    </div>

    <div className="lp-heroB__bottom">
      <div className="lp-heroB__eyebrow">Welcome aboard</div>
      <h1 className="lp-heroB__h1">
        Maritime services,<br />
        <span className="lp-heroB__h1Em"><span className="lp-heroB__h1Mast">MAST</span>ered.</span>
      </h1>
      <p className="lp-heroB__sub">
        A trusted partner for ship repairs, energy efficiency, technical
        consultancy and spares — globally delivered.
      </p>
      <div className="lp-heroB__actions">
        <a href="#services" className="lp-btn lp-btn--primary">
          Explore our services
          <span className="lp-btn__circle">
            <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
              <circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" strokeWidth="1.5" />
              <path d="M6 8.5l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        </a>
      </div>
    </div>
  </section>
);

window.HeroA = HeroA;
window.HeroB = HeroB;