// ============================================================
// Photo + placeholder components
// ============================================================

// Real image with placeholder fallback if it fails to load
function Photo({ src, alt, aspect = "wide", style, objectPosition }) {
  const [errored, setErrored] = React.useState(false);
  const aspectClass = {
    wide: "ph-wide",
    square: "ph-square",
    tall: "ph-tall",
    banner: "ph-banner",
  }[aspect] || "ph-wide";

  if (errored || !src) {
    return <Ph aspect={aspect} label={alt} style={style} />;
  }
  return (
    <div className={`ph ${aspectClass}`} style={{...style, background: 'var(--krem-lys)'}}>
      <img
        src={src}
        alt={alt}
        loading="lazy"
        decoding="async"
        onError={() => setErrored(true)}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: objectPosition || 'center',
          display: 'block',
        }}
      />
    </div>
  );
}

// Striped placeholder for when a real image isn't available yet
function Ph({ label, aspect = "wide", style, children }) {
  const aspectClass = {
    wide: "ph-wide",
    square: "ph-square",
    tall: "ph-tall",
    banner: "ph-banner",
  }[aspect] || "ph-wide";
  return (
    <div className={`ph ${aspectClass}`} style={style}>
      {children}
      {label && (
        <div className="ph-label">
          <span>{label}</span>
        </div>
      )}
    </div>
  );
}

// The combined brushstroke bee + "AUKLEND BIRØKT" wordmark
function Logo({ height = 220 }) {
  const src = (typeof window !== 'undefined' && window.__resources && window.__resources['assets/logo-tittel.webp']) || 'assets/logo-tittel.webp';
  return (
    <img
      src={src}
      alt="Auklend Birøkt"
      style={{ height: height, width: 'auto', display: 'block' }}
    />
  );
}

Object.assign(window, { Photo, Ph, Logo });