import React from "react";

export default function MarqueeTicker() {
  return (
    <div className="elementor-element elementor-element-b62c0b3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="b62c0b3" data-element_type="container" data-e-type="container">
      <div className="elementor-element elementor-element-592e9e8 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="592e9e8" data-element_type="container" data-e-type="container">
        <div className="elementor-element elementor-element-ab41b28 elementor-widget elementor-widget-logico_marquee" data-id="ab41b28" data-element_type="widget" data-e-type="widget" data-widget_type="logico_marquee.default">
          <div className="elementor-widget-container">
            
            {/* Custom smooth pure CSS scrolling Marquee */}
            <div className="logico-ticker-wrapper" style={{ overflow: "hidden", position: "relative", width: "100%" }}>
              <style dangerouslySetInnerHTML={{ __html: `
                @keyframes cssMarquee {
                  0% { transform: translate3d(0, 0, 0); }
                  100% { transform: translate3d(-33.33%, 0, 0); }
                }
                .marquee-container-css {
                  display: flex;
                  width: max-content;
                  animation: cssMarquee 25s linear infinite;
                }
                .marquee-container-css:hover {
                  animation-play-state: paused;
                }
              `}} />
              <div className="marquee-container-css">
                {/* Repeat the item to ensure infinite seamless scrolling */}
                {[...Array(9)].map((_, i) => (
                  <div key={i} className="ticker" style={{ display: "inline-flex", alignItems: "center", whiteSpace: "nowrap", paddingRight: "50px" }}>
                    <span className="ticker-text">
                      <p style={{ margin: 0, display: "inline" }}>30% More Cost Efficient</p>
                    </span>
                    <span className="separator" style={{ marginLeft: "25px", display: "inline-flex", alignItems: "center" }}>
                      <i className="fontello icon-half-logo"></i>
                    </span>
                  </div>
                ))}
              </div>
            </div>

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