import type { ReactNode } from 'react';
import { TvFrame } from '@/components/marketing/mocks/Devices';
import { cn } from '@/lib/cn';

/** The live TV display in the marketing site's TV bezel (same look as the hero mock), as a 16:9 iframe. */
export function DemoTv({ src, title, className }: { src: string; title: string; className?: string }) {
  return (
    <TvFrame className={className}>
      {/* The TV page scales its 1920×1080 stage to whatever size this frame gives it. */}
      <iframe src={src} title={title} loading="eager" referrerPolicy="no-referrer" className="absolute inset-0 size-full border-0" />
    </TvFrame>
  );
}

/**
 * A phone-shaped frame around the interactive phone iframe. Unlike the hero mock, the notch sits in
 * the bezel above the screen so it never covers the game.
 */
export function DemoPhone({ src, title, className, children }: { src: string; title: string; className?: string; children?: ReactNode }) {
  return (
    <div className={cn('relative rounded-[2.75rem] border border-line-strong/50 bg-[#03050f] p-2.5 pt-7 shadow-[0_40px_70px_-25px_rgb(0_0_0/0.95),0_0_0_1px_rgb(34_211_238/0.12),0_0_60px_-18px_rgb(34_211_238/0.35)]', className)}>
      <span aria-hidden="true" className="absolute top-2.5 left-1/2 h-2 w-20 -translate-x-1/2 rounded-full bg-line" />
      <div className="relative h-[min(660px,82dvh)] overflow-hidden rounded-[2.25rem] bg-night">
        <iframe src={src} title={title} loading="lazy" className="absolute inset-0 size-full border-0" />
      </div>
      {children}
    </div>
  );
}