/* Hero.jsx — parallax clouds + "Freedom to Transact" + LFG + scroll arrow */
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="hero-clouds" data-clouds>
        {/* Real cloud.svg used as 6 parallax layers at different speeds */}
        <div className="hero-cloud" style={{ top: '6%',  left: '-12%', width: '52%' }} data-speed="0.25">
          <img src="assets/cloud.svg" alt="" />
        </div>
        <div className="hero-cloud" style={{ top: '16%', left: '38%', width: '60%' }} data-speed="0.45">
          <img src="assets/cloud.svg" alt="" />
        </div>
        <div className="hero-cloud" style={{ top: '50%', left: '-10%', width: '48%' }} data-speed="0.35">
          <img src="assets/cloud.svg" alt="" />
        </div>
        <div className="hero-cloud" style={{ top: '62%', left: '34%', width: '54%' }} data-speed="0.6">
          <img src="assets/cloud.svg" alt="" />
        </div>
        <div className="hero-cloud" style={{ top: '74%', left: '-6%', width: '40%' }} data-speed="0.5">
          <img src="assets/cloud.svg" alt="" />
        </div>
        <div className="hero-cloud" style={{ top: '82%', left: '48%', width: '46%', opacity: 0.85 }} data-speed="0.8">
          <img src="assets/cloud.svg" alt="" />
        </div>
      </div>

      <div className="hero-inner">
        <img className="hero-title-img" src="assets/t-freedom.png" alt="Freedom to Transact" />
        <img className="hero-lfg-img" src="assets/t-lfg.png" alt="LFG" />
      </div>

      <div className="hero-down" aria-hidden="true" />
    </section>
  );
}
window.Hero = Hero;