import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/**
 * Device frames for product mocks. Each frame is a size container, so screen content is laid
 * out in `cqw` units and scales perfectly from a phone-width hero to a desktop showcase.
 */
export function TvFrame({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div className={cn('@container', className)}>
      <div className="relative rounded-[1.8cqw] border border-line-strong/40 bg-[#03050f] p-[1.1cqw] shadow-[0_40px_80px_-30px_rgb(0_0_0/0.9),0_0_0_1px_rgb(124_92_255/0.15),0_0_80px_-20px_rgb(124_92_255/0.35)]">
        <div className="@container relative aspect-video overflow-hidden rounded-[0.8cqw] bg-night">{children}</div>
        {/* glass reflection */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-[1.1cqw] rounded-[0.8cqw] bg-[linear-gradient(115deg,rgb(255_255_255/0.06),transparent_38%)]"
        />
      </div>
      <div aria-hidden="true" className="mx-auto h-[2.2cqw] w-[14%] bg-[linear-gradient(180deg,#0b1030,#03050f)]" />
      <div aria-hidden="true" className="mx-auto h-[0.9cqw] w-[30%] rounded-full bg-line" />
    </div>
  );
}

export function PhoneFrame({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div className={cn('@container', className)}>
      <div className="relative rounded-[15cqw] border border-line-strong/50 bg-[#03050f] p-[3.6cqw] 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)]">
        <div className="@container relative aspect-[9/19] overflow-hidden rounded-[12cqw] bg-night">
          <div aria-hidden="true" className="absolute top-[2.2%] left-1/2 z-20 h-[3.2%] w-[30%] -translate-x-1/2 rounded-full bg-black" />
          {children}
        </div>
      </div>
    </div>
  );
}
