import { cn } from '@/lib/utils';

/**
 * A hardware illustration with the real app running inside it.
 *
 * This is the entry screen on a desktop browser: rather than describing the
 * product in prose, it shows the actual running app — the same <Deck>, the same
 * drag gesture, the same data — inside a phone. Everything inside `children` is
 * live and interactive, not a screenshot.
 *
 * On a phone there is no frame. Drawing a picture of a phone on a phone is
 * absurd, and it would waste the ~24px of width the deck actually needs, so
 * below `sm` the bezel collapses and the app simply fills the viewport.
 */
export function PhoneFrame({
  className,
  children,
}: {
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <div
      className={cn(
        // Phone: no frame at all, app fills the screen.
        'h-dvh w-full',
        // Tablet and up: a 390x844 device, the iPhone 14 logical viewport.
        'sm:h-[844px] sm:w-[390px] sm:shrink-0',
        // The bezel. ink-950 rather than pure black, per DESIGN.md §2.2.
        'sm:rounded-[3.25rem] sm:bg-ink-950 sm:p-[0.7rem] sm:shadow-lg',
        // A hairline of light along the top edge reads as a chamfer and stops
        // the bezel looking like a flat black rectangle.
        'sm:ring-1 sm:ring-inset sm:ring-white/12',
        className,
      )}
    >
      {/* The screen. overflow-hidden is what makes a swiped card disappear at
          the bezel instead of flying across the page. */}
      <div className="relative h-full w-full overflow-hidden bg-page sm:rounded-[2.6rem]">
        {/* Dynamic Island. Pointer-events-none so it never eats a drag that
            starts near the top of the card. */}
        <div
          aria-hidden
          className="pointer-events-none absolute left-1/2 top-2 z-30 hidden h-[1.85rem] w-[6.2rem] -translate-x-1/2 rounded-pill bg-ink-950 sm:block"
        />
        {children}
        {/* Home indicator. */}
        <div
          aria-hidden
          className="pointer-events-none absolute bottom-2 left-1/2 z-30 hidden h-[0.3rem] w-[8.5rem] -translate-x-1/2 rounded-pill bg-ink-950/25 sm:block"
        />
      </div>
    </div>
  );
}