/* Device frames: iPhone, iPad, MacBook */

const IPhoneFrame = ({ children, width = 280, height = 580, dark = false, screenshot = null }) => {
  const innerW = width;
  const innerH = height;
  const bezel = 12;
  return (
    <div className="relative" style={{ width: innerW + bezel * 2, height: innerH + bezel * 2 }}>
      {/* outer bezel */}
      <div className="absolute inset-0 rounded-[44px]"
        style={{
          background: 'linear-gradient(160deg, #1c1c1f, #0a0a0c)',
          boxShadow: '0 30px 60px -20px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.05) inset, 0 -2px 0 rgba(0,0,0,.6) inset',
        }} />
      {/* inner screen */}
      <div className="absolute overflow-hidden rounded-[34px]"
        style={{
          top: bezel, left: bezel, width: innerW, height: innerH,
          background: dark ? '#0B1220' : '#FAFAFA',
          color: dark ? '#fff' : '#0A0A0A',
        }}>
        {screenshot ? (
          <img src={screenshot} alt="App screenshot"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }} />
        ) : (
          <>
            {/* status bar */}
            <div className={`flex items-center justify-between px-6 pt-2 text-[12px] mono font-semibold ${dark ? 'text-white' : 'text-ink'}`}>
              <span>9:41</span>
              <div className="flex items-center gap-1.5">
                <svg width="16" height="10" viewBox="0 0 16 10"><path d="M1 8h2v1H1zM5 6h2v3H5zM9 3h2v6H9zM13 0h2v9h-2z" fill="currentColor"/></svg>
                <svg width="14" height="10" viewBox="0 0 14 10"><path d="M0 5a7 7 0 0 1 14 0l-2 1a5 5 0 0 0-10 0z" fill="currentColor" opacity=".9"/></svg>
                <svg width="22" height="10" viewBox="0 0 22 10"><rect x=".5" y=".5" width="18" height="9" rx="2" fill="none" stroke="currentColor" opacity=".6"/><rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/><rect x="19.5" y="3" width="1.5" height="4" rx=".5" fill="currentColor" opacity=".6"/></svg>
              </div>
            </div>
            {/* notch */}
            <div className="absolute left-1/2 -translate-x-1/2 top-1.5 w-24 h-6 rounded-full"
              style={{ background: '#000' }} />
            <div className="h-[calc(100%-22px)] overflow-hidden">
              {children}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const IPadFrame = ({ children, width = 880, height = 600 }) => {
  const bezel = 16;
  return (
    <div className="relative" style={{ width: width + bezel * 2, height: height + bezel * 2 }}>
      <div className="absolute inset-0 rounded-[28px]"
        style={{
          background: 'linear-gradient(160deg, #1a1a1d, #0a0a0c)',
          boxShadow: '0 40px 80px -20px rgba(99,102,241,.35), 0 2px 0 rgba(255,255,255,.06) inset',
        }} />
      <div className="absolute overflow-hidden rounded-[18px]"
        style={{ top: bezel, left: bezel, width, height, background: '#0B1220', color: '#fff' }}>
        {children}
      </div>
    </div>
  );
};

const MacBookFrame = ({ children, width = 1100, height = 690 }) => {
  const screenPadV = 14;
  const screenPadH = 16;
  return (
    <div className="relative mx-auto" style={{ width: width + 80, maxWidth: '100%' }}>
      {/* lid */}
      <div className="relative rounded-t-2xl mx-auto"
        style={{
          width: width + 40, padding: `${screenPadV}px ${screenPadH}px`,
          background: 'linear-gradient(180deg, #1a1a1d, #0a0a0c)',
          boxShadow: '0 30px 60px -20px rgba(0,0,0,.35)',
        }}>
        {/* camera dot */}
        <div className="absolute left-1/2 -translate-x-1/2 top-1.5 w-1.5 h-1.5 rounded-full bg-zinc-700" />
        <div className="rounded-md overflow-hidden bg-white" style={{ height }}>
          {children}
        </div>
      </div>
      {/* base */}
      <div className="relative mx-auto"
        style={{
          width: width + 130,
          height: 16,
          background: 'linear-gradient(180deg, #d4d4d8, #a1a1aa 60%, #71717a)',
          borderRadius: '0 0 14px 14px',
        }}>
        <div className="absolute left-1/2 top-0 -translate-x-1/2 h-2 w-28 rounded-b-md"
          style={{ background: 'linear-gradient(180deg, #71717a, #52525b)' }} />
      </div>
    </div>
  );
};

/* Auto-fit wrapper — scales a fixed-width child down when the parent is narrower.
   The inner is absolutely positioned so its natural baseWidth doesn't push layout. */
const FitScale = ({ children, baseWidth, baseHeight, maxScale = 1 }) => {
  const wrapRef = React.useRef(null);
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const el = wrapRef.current; if (!el) return;
    const update = () => {
      const w = el.clientWidth;
      const s = Math.min(maxScale, w / baseWidth);
      setScale(Number.isFinite(s) && s > 0 ? s : 1);
    };
    update();
    const ro = new ResizeObserver(update);
    ro.observe(el);
    window.addEventListener('resize', update);
    return () => { ro.disconnect(); window.removeEventListener('resize', update); };
  }, [baseWidth, maxScale]);
  return (
    <div ref={wrapRef} style={{ width: '100%', height: baseHeight * scale, position: 'relative', overflow: 'visible' }}>
      <div style={{
        width: baseWidth,
        height: baseHeight,
        position: 'absolute',
        left: '50%',
        top: 0,
        transform: `translateX(-50%) scale(${scale})`,
        transformOrigin: 'top center',
      }}>
        {children}
      </div>
    </div>
  );
};

Object.assign(window, { IPhoneFrame, IPadFrame, MacBookFrame, FitScale });