// Phone mockup component
const Phone = ({ src, alt = "I Can app", float = false, className = "" }) => {
  return (
    <div className={`phone ${float ? "phone-float" : ""} ${className}`}>
      <div className="phone-screen">
        {src ? <img src={src} alt={alt} /> : null}
      </div>
    </div>
  );
};

// Placeholder device screen with programmatic content (for variety)
const PhoneScreen = ({ children, bg = "#0b1220" }) => (
  <div className="phone">
    <div className="phone-screen" style={{ background: bg }}>
      {children}
    </div>
  </div>
);

Object.assign(window, { Phone, PhoneScreen });