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

export const IthilfeFg: React.FC<{ accent: string; accent2: string }> = ({ accent, accent2 }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const p = frame / durationInFrames; // 0..1
  const t = p * Math.PI * 2;          // use sin/cos of (t + phase) for periodic motion

  const softShadow = '0 22px 44px -12px rgba(15,23,42,.22)';
  const coralGrad = `linear-gradient(145deg, ${accent2} 0%, ${accent} 58%, #E85C2B 100%)`;

  // Glossy coral iOS-style app tile with a clean white glyph, floating with depth.
  const Tile: React.FC<{
    left: number; top: number; size: number; phase: number; rotPhase: number; children: React.ReactNode;
  }> = ({ left, top, size, phase, rotPhase, children }) => {
    const float = Math.sin(t + phase) * 14;          // vertical bob
    const drift = Math.cos(t + phase * 1.3) * 8;     // horizontal sway
    const tilt = Math.sin(t + rotPhase) * 5;         // gentle rocking
    const breathe = 1 + Math.sin(t + phase * 0.9) * 0.03;
    return (
      <div
        style={{
          position: 'absolute',
          left: `${left}%`,
          top: `${top}%`,
          width: size,
          height: size,
          marginLeft: -size / 2,
          marginTop: -size / 2,
          borderRadius: size * 0.235,
          background: coralGrad,
          boxShadow: `${softShadow}, inset 0 2px 2px rgba(255,255,255,.45), inset 0 -10px 22px rgba(180,55,20,.30)`,
          transform: `translate(${drift}px, ${float}px) rotate(${tilt}deg) scale(${breathe})`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
        }}
      >
        {/* glossy top highlight */}
        <div
          style={{
            position: 'absolute',
            left: '-10%',
            top: '-30%',
            width: '120%',
            height: '70%',
            borderRadius: '50%',
            background: 'linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0))',
            opacity: 0.8,
            pointerEvents: 'none',
          }}
        />
        <div style={{ position: 'relative', width: '54%', height: '54%' }}>{children}</div>
      </div>
    );
  };

  const glyph: React.CSSProperties = {
    position: 'absolute',
    inset: 0,
    width: '100%',
    height: '100%',
    display: 'block',
  };

  // Faint expanding coral signal ring (periodic: scale & fade reset cleanly at the loop).
  const ringT = p % 1;                       // 0..1 wraps seamlessly
  const ringScale = 0.4 + ringT * 1.6;
  const ringOpacity = Math.sin(ringT * Math.PI) * 0.26; // 0 at start & end → seamless

  return (
    <>
      {/* faint expanding signal rings (behind tiles, friendly support vibe) */}
      <div
        style={{
          position: 'absolute',
          left: '66%',
          top: '50%',
          width: 520,
          height: 520,
          marginLeft: -260,
          marginTop: -260,
          borderRadius: '50%',
          border: `3px solid ${accent}`,
          opacity: ringOpacity,
          transform: `scale(${ringScale})`,
        }}
      />
      <div
        style={{
          position: 'absolute',
          left: '66%',
          top: '50%',
          width: 520,
          height: 520,
          marginLeft: -260,
          marginTop: -260,
          borderRadius: '50%',
          border: `2px solid ${accent2}`,
          opacity: ringOpacity * 0.7,
          transform: `scale(${ringScale * 0.62})`,
        }}
      />

      {/* HEADSET tile */}
      <Tile left={47} top={32} size={184} phase={0.0} rotPhase={0.5}>
        <svg viewBox="0 0 100 100" style={glyph} fill="none" stroke="#ffffff" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 56 V46 a28 28 0 0 1 56 0 v10" />
          <rect x="14" y="52" width="14" height="24" rx="6" fill="#ffffff" stroke="none" />
          <rect x="72" y="52" width="14" height="24" rx="6" fill="#ffffff" stroke="none" />
          <path d="M79 76 v6 a8 8 0 0 1 -8 8 H56" />
        </svg>
      </Tile>

      {/* CHAT BUBBLE tile */}
      <Tile left={67} top={28} size={150} phase={1.1} rotPhase={1.4}>
        <svg viewBox="0 0 100 100" style={glyph} fill="none" stroke="none" strokeLinejoin="round">
          <path d="M20 28 h60 a8 8 0 0 1 8 8 v26 a8 8 0 0 1 -8 8 H44 l-16 14 v-14 h-8 a8 8 0 0 1 -8 -8 V36 a8 8 0 0 1 8 -8 Z" fill="#ffffff" />
          <circle cx="36" cy="49" r="4.5" fill={accent} />
          <circle cx="50" cy="49" r="4.5" fill={accent} />
          <circle cx="64" cy="49" r="4.5" fill={accent} />
        </svg>
      </Tile>

      {/* WRENCH tile */}
      <Tile left={61} top={60} size={166} phase={2.2} rotPhase={2.0}>
        <svg viewBox="0 0 100 100" style={glyph} fill="none" stroke="#ffffff" strokeWidth={8} strokeLinecap="round" strokeLinejoin="round">
          <path d="M64 30 a16 16 0 1 0 12 27 L82 63 a6 6 0 0 1 0 8 L70 83 a6 6 0 0 1 -8 0 L48 69 a16 16 0 0 1 -22 -22 a16 16 0 0 1 21 -9 L62 52" />
        </svg>
      </Tile>

      {/* SHIELD-WITH-CHECK tile */}
      <Tile left={82} top={54} size={156} phase={3.0} rotPhase={0.9}>
        <svg viewBox="0 0 100 100" style={glyph} fill="none" stroke="none" strokeLinejoin="round">
          <path d="M50 16 L78 26 V50 c0 18 -12 28 -28 36 C34 78 22 68 22 50 V26 Z" fill="#ffffff" />
          <path d="M38 50 l9 9 l17 -19" fill="none" stroke={accent} strokeWidth={8} strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </Tile>

      {/* LAPTOP tile */}
      <Tile left={78} top={80} size={158} phase={4.1} rotPhase={1.8}>
        <svg viewBox="0 0 100 100" style={glyph} fill="none" stroke="none" strokeLinejoin="round">
          <rect x="24" y="26" width="52" height="34" rx="5" fill="#ffffff" />
          <rect x="32" y="33" width="36" height="20" rx="2.5" fill={accent} />
          <path d="M16 70 h68 l-6 8 H22 Z" fill="#ffffff" />
        </svg>
      </Tile>

      {/* small "live support" status tile for balance */}
      <Tile left={50} top={70} size={104} phase={5.0} rotPhase={2.6}>
        <svg viewBox="0 0 100 100" style={glyph} fill="none" stroke="none" strokeLinejoin="round">
          <circle cx="50" cy="50" r="26" fill="#ffffff" />
          <path d="M50 38 v14" stroke={accent} strokeWidth={8} strokeLinecap="round" />
          <circle cx="50" cy="62" r="3.5" fill={accent} />
        </svg>
      </Tile>
    </>
  );
};