// Shared glass primitives, buttons, photo tiles.

const GlassBox = ({ children, className = '', style, onClick, interactive, thin, pill, as = 'div', ...rest }) => {
  const Tag = as;
  const cls = ['glass',
    thin && 'glass--thin',
    pill && 'glass--pill',
    interactive && 'glass-interactive',
    className,
  ].filter(Boolean).join(' ');
  return <Tag className={cls} style={style} onClick={onClick} {...rest}>{children}</Tag>;
};

const GlassButton = ({ children, onClick, icon, variant = 'default', style }) => {
  const styles = {
    padding: variant === 'lg' ? '14px 28px' : '10px 18px',
    fontFamily: 'var(--font-ui)',
    fontSize: variant === 'lg' ? 12 : 11,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--bone)',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    cursor: 'pointer',
    ...style,
  };
  return (
    <GlassBox pill interactive style={styles} onClick={onClick}>
      {icon && <Icon name={icon} size={14} />}
      <span>{children}</span>
    </GlassBox>
  );
};

// Photo tile. Accepts a PHOTOS entry or an externalUrl override.
// externalUrl: direct https:// image link (e.g. official Disney press image).
//   When set it bypasses the PHOTOS entry entirely.
const PhotoTile = ({ photo, externalUrl, style = {}, onClick, showMeta = true, className = '' }) => {
  const src = externalUrl || (photo && photo.src) || null;
  const gradient = !src && photo && photo.bg && photo.bg.startsWith('linear-gradient')
    ? photo.bg : null;
  return (
    <div
      className={'photo-tile ' + className}
      onClick={onClick}
      style={{
        position: 'relative',
        overflow: 'hidden',
        borderRadius: 14,
        background: gradient || '#14100a',
        cursor: onClick ? 'pointer' : 'default',
        transition: 'transform 700ms cubic-bezier(0.2,0.8,0.2,1)',
        ...style,
      }}
    >
      {src && (
        <img
          src={src}
          srcSet={externalUrl ? undefined : (photo && photo.srcset)}
          sizes={externalUrl ? undefined : "(max-width: 640px) 50vw, (max-width: 1200px) 33vw, 420px"}
          alt={(photo && photo.title) || ''}
          loading="lazy"
          decoding="async"
          draggable={false}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center',
            display: 'block', userSelect: 'none',
          }}
        />
      )}
      {/* film-grade overlay on every tile */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%)',
        pointerEvents: 'none',
      }}/>
      {showMeta && (
        <div style={{
          position: 'absolute',
          left: 14, right: 14, bottom: 12,
          fontFamily: 'var(--font-ui)',
          fontSize: 10,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: 'var(--bone)',
          textShadow: '0 1px 3px rgba(0,0,0,0.8)',
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-end',
          gap: 8,
        }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.28em' }}>{photo.title}</span>
          <span style={{ opacity: 0.7, flexShrink: 0 }}>{photo.date}</span>
        </div>
      )}
    </div>
  );
};

// Big gold-lined metric/eyebrow line
const Rule = ({ label, style }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 14,
    fontFamily: 'var(--font-ui)',
    fontSize: 10,
    letterSpacing: '0.3em',
    textTransform: 'uppercase',
    color: 'var(--bone-soft)',
    ...style,
  }}>
    <span style={{ flexShrink: 0 }}>{label}</span>
    <span style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, var(--gold-dim), transparent)' }}/>
  </div>
);

// Card chrome for article listings
const ArticleCard = ({ news, variant = 'default', onClick }) => {
  const photo = window.PHOTOS[news.photo] || window.PHOTOS[0];
  if (variant === 'featured') {
    return (
      <div onClick={onClick} className="lwn-card-featured" style={{ position: 'relative', cursor: 'pointer', minHeight: 520 }}>
        <PhotoTile photo={photo} externalUrl={news.externalPhoto} showMeta={false} style={{ position: 'absolute', inset: 0, borderRadius: 24 }}/>
        <GlassBox style={{
          position: 'absolute',
          left: 32, right: 32, bottom: 32,
          padding: '24px 28px',
        }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>{news.eyebrow} · {news.category}</div>
          <h2 className="display" style={{ fontSize: 'clamp(22px, 2.4vw, 36px)', fontWeight: 600, marginBottom: 10 }}>
            {news.title}
          </h2>
          <p className="serif" style={{ fontSize: 17, color: 'var(--bone-soft)', marginBottom: 14 }}>
            {news.dek}
          </p>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ display: 'flex', gap: 18, fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bone-dim)' }}>
              <span>{news.date}</span>
              <span>{news.readTime}</span>
            </div>
            <span style={{ color: 'var(--bone-soft)' }}>
              <Icon name="arrow-up-right" size={18}/>
            </span>
          </div>
        </GlassBox>
      </div>
    );
  }
  // default list-card: thumb on left, text on right, glass
  return (
    <GlassBox interactive onClick={onClick} className="lwn-card-list" style={{ padding: 14, display: 'flex', gap: 18, alignItems: 'stretch' }}>
      <PhotoTile photo={photo} externalUrl={news.externalPhoto} showMeta={false} style={{ width: 140, height: 110, borderRadius: 10, flexShrink: 0 }}/>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingRight: 6 }}>
        <div>
          <div className="eyebrow" style={{ fontSize: 9, marginBottom: 6 }}>{news.eyebrow} · {news.category}</div>
          <h3 className="display" style={{ fontSize: 17, fontWeight: 500, marginBottom: 6 }}>{news.title}</h3>
          <p className="serif" style={{ fontSize: 14.5, color: 'var(--bone-soft)', lineHeight: 1.4,
             display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{news.dek}</p>
        </div>
        <div style={{ display: 'flex', gap: 14, fontFamily: 'var(--font-ui)', fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bone-dim)', marginTop: 8 }}>
          <span>{news.date}</span>
          <span>{news.readTime}</span>
        </div>
      </div>
    </GlassBox>
  );
};

Object.assign(window, { GlassBox, GlassButton, PhotoTile, Rule, ArticleCard });