// Reusable UI primitives

const StoreButton = ({ store = 'apple', href = 'https://www.google.com' }) => {
  const isApple = store === 'apple';
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="store-pill"
      aria-label={isApple ? 'Download on the App Store' : 'Get It On Google Play'}
    >
      <img
        src={isApple ? 'public/icon-apple-store.svg' : 'public/icon-google-play-store.svg'}
        alt=""
        aria-hidden="true"
        className="store-pill__icon"
      />
      <span className="store-pill__label">
        <small>{isApple ? 'Download on the' : 'Get It On'}</small>
        <strong>{isApple ? 'App Store' : 'Google Play'}</strong>
      </span>
    </a>
  );
};

const StoreButtons = ({ urls = {} }) => (
  <div className="store-buttons" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
    <StoreButton store="apple" href={urls.apple} />
    <StoreButton store="google" href={urls.google} />
  </div>
);

// Animated phone mockup with placeholder screen art
const PhoneMockup = ({ tint = 'sunset', label = 'Game screenshot', sub = 'PNG · 9:19.5', children, className = '', variant = 'default' }) => {
  const tints = {
    sunset:  'linear-gradient(160deg, #FFE0A0 0%, #FFCF55 50%, #E8A93C 100%)',
    forest:  'linear-gradient(160deg, #C8E5C0 0%, #7FB377 60%, #4F8A4D 100%)',
    cafe:    'linear-gradient(160deg, #F5DEB3 0%, #C99A6B 60%, #8B5A3C 100%)',
    bubble:  'linear-gradient(160deg, #FFD3D3 0%, #FFA3B0 60%, #C76A8A 100%)',
    sky:     'linear-gradient(160deg, #BEE4F0 0%, #7FB8D6 60%, #4D8FB5 100%)',
    white:   '#FFFFFF',
  };
  return (
    <div className={`phone ${variant === 'light' ? 'phone--light' : ''} ${className}`}>
      <div className="phone-notch" />
      <div className="phone-screen" style={{ background: tints[tint] || tints.sunset, border: tint === 'white' ? '1px solid #DDE5ED' : undefined }}>
        {children || (
          <div className="placeholder-art" style={{ '--bg': 'transparent' }}>
            <Icon.Sparkle style={{ width: 28, height: 28, opacity: 0.5, color: 'rgba(12,12,12,0.5)' }} />
            <div className="ph-label">{label}</div>
            <div className="ph-sub">{sub}</div>
          </div>
        )}
      </div>
    </div>
  );
};

// Game art placeholder (landscape)
const GameArtPlaceholder = ({ label = 'Gameplay still', sub = 'Drop PNG here', tint = '#FFE0A0', height = 360 }) => (
  <div style={{
    width: '100%',
    height,
    borderRadius: 'var(--radius-card)',
    overflow: 'hidden',
    background: tint,
    border: '1px solid #DDE5ED',
  }}>
    <div className="placeholder-art" style={{ '--bg': tint, height: '100%' }}>
      <Icon.Sparkle style={{ width: 32, height: 32, opacity: 0.5 }} />
      <div className="ph-label">{label}</div>
      <div className="ph-sub">{sub}</div>
    </div>
  </div>
);

// Eyebrow pill
const Eyebrow = ({ children, variant = 'default', icon }) => (
  <span className={`eyebrow ${variant === 'on-light' ? 'on-light' : ''}`}>
    {icon === undefined ? <span className="dot" /> : icon}
    {children}
  </span>
);

window.StoreButton = StoreButton;
window.StoreButtons = StoreButtons;
window.PhoneMockup = PhoneMockup;
window.GameArtPlaceholder = GameArtPlaceholder;
window.Eyebrow = Eyebrow;