import React from 'react';
import { Img, staticFile, useCurrentFrame, useVideoConfig } from 'remotion';

// Floats Arthur Kotsch's REAL App-Store icons (downloaded to public/icons/appN.png).
type Tile = { x: number; y: number; size: number; depth: number; phase: number; dx: number; dy: number; n: number };

const TILES: Tile[] = [
  { x: 17, y: 30, size: 196, depth: 0.95, phase: 0.0, dx: 28, dy: 36, n: 0 },
  { x: 32, y: 63, size: 132, depth: 0.55, phase: 1.1, dx: 20, dy: 26, n: 1 },
  { x: 45, y: 21, size: 108, depth: 0.42, phase: 2.2, dx: 16, dy: 22, n: 2 },
  { x: 59, y: 55, size: 214, depth: 1.0, phase: 0.7, dx: 32, dy: 32, n: 3 },
  { x: 73, y: 31, size: 122, depth: 0.5, phase: 3.0, dx: 18, dy: 28, n: 4 },
  { x: 85, y: 61, size: 162, depth: 0.82, phase: 1.8, dx: 26, dy: 24, n: 5 },
  { x: 24, y: 81, size: 98, depth: 0.36, phase: 2.6, dx: 14, dy: 18, n: 6 },
  { x: 51, y: 84, size: 112, depth: 0.46, phase: 0.4, dx: 16, dy: 20, n: 7 },
  { x: 67, y: 83, size: 86, depth: 0.3, phase: 1.5, dx: 12, dy: 16, n: 8 },
  { x: 9, y: 58, size: 92, depth: 0.33, phase: 2.0, dx: 13, dy: 18, n: 9 },
  { x: 91, y: 33, size: 94, depth: 0.35, phase: 0.9, dx: 13, dy: 16, n: 10 },
  { x: 38, y: 43, size: 150, depth: 0.72, phase: 2.9, dx: 22, dy: 24, n: 11 },
  { x: 79, y: 14, size: 80, depth: 0.29, phase: 1.2, dx: 11, dy: 14, n: 12 },
  { x: 7, y: 15, size: 82, depth: 0.3, phase: 0.2, dx: 12, dy: 16, n: 13 },
];

export const IosIconsFg: React.FC<{ accent: string; accent2: string }> = ({ accent }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const t = (frame / durationInFrames) * Math.PI * 2;

  return (
    <>
      {TILES.map((tile, i) => {
        const dx = Math.sin(t + tile.phase) * tile.dx;
        const dy = Math.cos(t + tile.phase * 1.3) * tile.dy;
        const rot = Math.sin(t + tile.phase) * 6;
        const blur = (1 - tile.depth) * 3;
        const opacity = 0.82 + tile.depth * 0.18;
        const r = tile.size * 0.225;
        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: `${tile.x}%`,
              top: `${tile.y}%`,
              width: tile.size,
              height: tile.size,
              transform: `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px)) rotate(${rot}deg)`,
              borderRadius: r,
              opacity,
              filter: blur > 0.4 ? `blur(${blur}px)` : 'none',
              boxShadow: `0 22px 44px -12px rgba(15,23,42,.28), 0 0 34px ${accent}22`,
            }}
          >
            <Img
              src={staticFile(`icons/app${tile.n}.png`)}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: r }}
            />
            <div
              style={{
                position: 'absolute',
                inset: 0,
                borderRadius: r,
                boxShadow: 'inset 0 2px 1px rgba(255,255,255,.35), inset 0 -12px 30px rgba(0,0,0,.18)',
                background: 'linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,0) 42%)',
                pointerEvents: 'none',
              }}
            />
          </div>
        );
      })}
    </>
  );
};