import React from 'react';

const PromoBar: React.FC = () => {
  return (
    <div className="fixed left-0 right-0 top-0 z-50 flex h-[30px] items-center bg-luxury-gold text-luxury-dark">
      <div className="max-w-7xl mx-auto px-2 sm:px-4 md:px-6 lg:px-8 w-full">
        <div className="flex flex-col gap-2 xs:gap-2.5 sm:gap-3">
          {/* Main promo items */}
          <div className="flex flex-row items-center justify-center gap-2 text-center sm:gap-4 md:gap-8 md:text-left">
            <div className="flex min-w-0 flex-1 items-center justify-center md:justify-end gap-1 xs:gap-1.5 sm:gap-2">
              <svg className="h-3.5 w-3.5 sm:h-4 sm:w-4" fill="currentColor" viewBox="0 0 20 20">
                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z" />
              </svg>
              <span className="text-[10px] font-semibold leading-tight sm:text-xs lg:text-[13px]">Doprava ZDARMA od 999 Kč</span>
            </div>
            <div className="hidden h-4 w-px bg-luxury-dark/20 md:block" />
            <div className="flex min-w-0 flex-1 items-center justify-center md:justify-start gap-1 xs:gap-1.5 sm:gap-2">
              <svg className="h-3.5 w-3.5 sm:h-4 sm:w-4" fill="currentColor" viewBox="0 0 20 20">
                <path d="M3 3V0H5C6.65685 0 8 1.34315 8 3C8 1.34315 9.34315 0 11 0H13V3H16V6H0V3H3Z" fill="#000000"/>
<path d="M1 8H7V15H1V8Z" fill="#000000"/>
<path d="M15 8H9V15H15V8Z" fill="#000000"/>
              </svg>
              <span className="text-[10px] font-semibold leading-tight sm:text-xs lg:text-[13px]">DÁREK ke každé objednávce</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PromoBar;