// Hero — asymmetric editorial. Headline left, seal right with gold rule frame.

const Hero = () => {
  const trust = t("hero.trust");
  const stamp = t("hero.stamp");

  return (
    <section id="top" className="scl-hero">
      <div className="scl-hero__bg" aria-hidden="true">
        <img
          src="/assets/seal-only-black.png"
          alt=""
          className="scl-hero__watermark"
        />
      </div>

      <div className="scl-container scl-hero__inner">
        {/* Positioned inside the same container as the text (not a grid column anymore), and
            behind it via z-index — the headline/sub flow and wrap at their own natural width
            and render on top of the logo, instead of being squeezed by a sibling column. */}
        <div className="scl-hero__seal-frame" aria-hidden="true">
          <div className="scl-hero__seal-logo-wrap">
            <img
              src="/assets/3dlogo.png"
              alt=""
              className="scl-hero__seal-logo"
            />
          </div>
        </div>

        <div className="scl-hero__content">
          <div className="scl-eyebrow scl-eyebrow--light">
            <span className="scl-rule" /> {t("hero.eyebrow")}
          </div>

          <h1 className="scl-hero__headline">
            {t("hero.headline")}
            <span className="scl-hero__headline-em">
              {t("hero.headlineEm")}
            </span>
          </h1>

          <p className="scl-hero__sub">{t("hero.sub")}</p>

          <div className="scl-hero__cta">
            <a
              href={scWhatsAppHref()}
              target="_blank"
              rel="noopener noreferrer"
              className="scl-btn scl-btn--primary scl-btn--lg"
            >
              {t("common.ctaPrimary")} <Icon name="arrow-right" size={18} />
            </a>
            <a
              href="tel:+14167126090"
              className="scl-btn scl-btn--ghost-light scl-btn--lg scl-phone-cta scl-phone-cta--light"
            >
              <Icon name="phone" size={16} /> {t("common.phone")}
            </a>
          </div>
        </div>

        <div className="scl-hero__trust">
          <div className="scl-hero__trust-track">
            {[false, true].map((isDuplicate) => (
              <div
                className="scl-hero__trust-set"
                key={isDuplicate ? "dup" : "orig"}
                aria-hidden={isDuplicate ? "true" : undefined}
              >
                {trust.map((item, i) => {
                 
                   return item.tp == "text" ? 
                  
                    <React.Fragment key={i}>
                      <div className="scl-hero__trust-item">
                        <span className="scl-hero__trust-num">{item.num}</span>
                        <span className="scl-hero__trust-label">
                          {item.line1}
                          <br />
                          {item.line2}
                        </span>
                      </div>
                      {<span className="scl-hero__trust-divider" />}
                    </React.Fragment>
                   : 
                    <React.Fragment key={`img-${i}`}>
                      <div className="scl-hero__trust-item scl-hero__trust-item--logo">
                        <img
                          src={item.src}
                          alt={item.alt}
                          className="scl-hero__trust-logo"
                        />
                      </div>
                      
                    </React.Fragment>
                })}
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
};

window.Hero = Hero;