/**
 * ThinkSchool Public Website — Premium Browser Screenshot Frame
 * Houses real ERP screenshots inside a dark macOS/browser mockup frame with URL chrome and amber glow.
 */
function ScreenshotFrame({
  src,
  alt = "ThinkSchool ERP Interface",
  title = "app.thinkschool.live",
  caption = null,
  roleBadge = null,
  className = "",
  perspective = false,
  glow = true,
  priority = false,
}) {
  const [hasError, setHasError] = React.useState(false);

  return (
    <figure
      className={`relative group rounded-2xl overflow-hidden border border-white/10 bg-[#09090b] shadow-[0_20px_50px_rgba(0,0,0,0.8)] transition-all duration-500 ${
        perspective ? "transform md:rotate-[-0.5deg] hover:rotate-0 hover:scale-[1.01]" : ""
      } ${className}`}
    >
      {/* Ambient background glow */}
      {glow && (
        <div
          className="absolute -inset-1 bg-gradient-to-r from-amber-500/10 via-orange-500/5 to-transparent rounded-2xl blur-xl opacity-75 group-hover:opacity-100 transition duration-500 -z-10 pointer-events-none"
          aria-hidden="true"
        />
      )}

      {/* Browser Top Navigation Bar */}
      <div className="flex items-center justify-between px-4 py-2.5 bg-zinc-950/90 border-b border-white/10 select-none">
        <div className="flex items-center gap-2">
          <span className="w-2.5 h-2.5 rounded-full bg-red-500/80 inline-block" />
          <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/80 inline-block" />
          <span className="w-2.5 h-2.5 rounded-full bg-green-500/80 inline-block" />
        </div>

        {/* Browser URL Bar */}
        <div className="flex items-center gap-2 px-3 py-1 rounded-md bg-zinc-900/80 border border-white/5 text-xs text-zinc-400 font-mono max-w-xs sm:max-w-sm truncate">
          <Icon name="lock" size={12} className="w-3 h-3 text-emerald-400 shrink-0" />
          <span className="text-zinc-500">https://</span>
          <span className="text-zinc-200">{title}</span>
        </div>

        {/* Optional Role Badge */}
        <div className="text-xs text-zinc-500 font-body hidden sm:block">
          {roleBadge ? (
            <span className="px-2 py-0.5 rounded bg-zinc-900 border border-white/10 text-amber-400 text-[10px] font-medium tracking-wide uppercase">
              {roleBadge}
            </span>
          ) : (
            <span className="text-[11px] text-zinc-500">ThinkSchool Cloud</span>
          )}
        </div>
      </div>

      {/* Viewport Content */}
      <div className="relative bg-[#0c0d12] overflow-hidden aspect-[16/9] sm:aspect-[16/8.8] flex items-center justify-center">
        {!hasError ? (
          <img
            src={src}
            alt={alt}
            loading={priority ? "eager" : "lazy"}
            onError={() => setHasError(true)}
            className="w-full h-full object-cover object-top transition-transform duration-700 group-hover:scale-[1.015]"
          />
        ) : (
          <div className="flex flex-col items-center justify-center p-8 text-center text-zinc-500">
            <Icon name="zap" size={32} className="w-8 h-8 text-amber-500 mb-2 opacity-60" />
            <p className="text-sm font-medium text-zinc-400">{alt}</p>
            <p className="text-xs text-zinc-600 mt-1 font-mono">{src}</p>
          </div>
        )}
      </div>

      {/* Caption if provided */}
      {caption && (
        <figcaption className="px-4 py-2.5 bg-zinc-950/70 border-t border-white/5 text-xs text-zinc-400 font-body flex items-center justify-between">
          <span>{caption}</span>
          <span className="text-[11px] text-zinc-600 font-mono">Verified Interface</span>
        </figcaption>
      )}
    </figure>
  );
}

window.ScreenshotFrame = ScreenshotFrame;