// AirStep — Product visuals (real photos)

const ShoePhoto = ({ variant = "hero", className = "", alt = "Airstep therapeutic trainer" }) => {
  // variant: hero | studio | insole
  const src = {
    hero:   "assets/product-hero-navy.png",
    studio: "assets/product-clean.png",
    insole: "assets/product-insole.jpg",
  }[variant] || "assets/product-clean.png";
  return <img src={src} alt={alt} className={className} loading="lazy"/>;
};

const FeatureCallouts = () => (
  <img src="assets/built-for-performance.png"
       alt="Airstep features: breathable mesh upper, lightweight cushion sole, durable grip outsole"
       loading="lazy"
       style={{ width: "100%", height: "auto", display: "block", borderRadius: 16 }}/>
);

const Logo = ({ height = 40, className = "" }) => (
  <img src="assets/airstep-logo-transparent.png"
       alt="Airstep"
       className={className}
       style={{ height, width: "auto", display: "block" }}/>
);

const LogoWhite = ({ height = 56, className = "" }) => (
  // White / inverted logo for dark backgrounds — uses CSS filter on the same file
  <img src="assets/airstep-logo-transparent.png"
       alt="Airstep"
       className={className}
       style={{
         height, width: "auto", display: "block",
         filter: "brightness(0) invert(1)",
         opacity: 0.95,
       }}/>
);

Object.assign(window, { ShoePhoto, FeatureCallouts, Logo, LogoWhite });