// Olive branch decorations placed along the page sides
// Inline base styles so layout holds even if hero.css is stale

const baseDeco = {
  position: 'absolute',
  pointerEvents: 'none',
  zIndex: 1,
  opacity: 0.18,
  height: 'auto',
  display: 'block',
};

const OliveDeco = () => (
  <div className="olive-deco-layer" aria-hidden="true">
    <img style={{ ...baseDeco, top: 200, left: -60, width: 220, transform: 'rotate(-15deg)' }} src="assets/olive-1.svg" alt="" />
    <img style={{ ...baseDeco, top: 1200, right: -80, width: 240, transform: 'rotate(165deg) scaleX(-1)' }} src="assets/olive-3.svg" alt="" />
    <img style={{ ...baseDeco, top: 2400, left: -70, width: 200, transform: 'rotate(20deg)' }} src="assets/olive-2.svg" alt="" />
    <img style={{ ...baseDeco, top: 3600, right: -60, width: 230, transform: 'rotate(-160deg)' }} src="assets/olive-1.svg" alt="" />
    <img style={{ ...baseDeco, top: 4800, left: -50, width: 220, transform: 'rotate(-25deg) scaleX(-1)' }} src="assets/olive-3.svg" alt="" />
    <img style={{ ...baseDeco, top: 6000, right: -70, width: 220, transform: 'rotate(170deg)' }} src="assets/olive-2.svg" alt="" />
    {/* Lower sections: dances, music, gallery */}
    <img style={{ ...baseDeco, top: 7200, left: -40, width: 200, transform: 'rotate(15deg)', opacity: 0.15 }} src="assets/olive-1.svg" alt="" />
    <img style={{ ...baseDeco, top: 8400, right: -50, width: 230, transform: 'rotate(-170deg)', opacity: 0.15 }} src="assets/olive-3.svg" alt="" />
    <img style={{ ...baseDeco, top: 9600, left: -60, width: 210, transform: 'rotate(-20deg) scaleX(-1)', opacity: 0.15 }} src="assets/olive-2.svg" alt="" />
  </div>
);

window.OliveDeco = OliveDeco;