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

export const WebdesignFg: 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 shadow = '0 22px 44px -12px rgba(15,23,42,.22)';
  const softShadow = '0 14px 30px -10px rgba(15,23,42,.18)';

  // gentle periodic float helper
  const bob = (phase: number, amp = 1) => Math.sin(t + phase) * amp;

  // swatch fan: magenta -> cyan
  const swatchColors = ['#E6259A', '#EC4FA8', '#C24BB8', '#8E63C6', '#5A86CC', '#2E9FC8', '#0FB5C9'];

  return (
    <>
      {/* ===== Browser-window card (the centrepiece layout) ===== */}
      <div
        style={{
          position: 'absolute',
          left: '54%',
          top: '32%',
          width: 430,
          height: 300,
          borderRadius: 26,
          background: '#ffffff',
          boxShadow: shadow,
          border: '1px solid rgba(15,23,42,.06)',
          overflow: 'hidden',
          transform: `translate(-50%,-50%) translateY(${bob(0.0, 10)}px) rotate(${bob(2.3, 1.4)}deg)`,
        }}
      >
        {/* title bar */}
        <div
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: 46,
            background: 'linear-gradient(180deg,#fbfbfd,#f1f2f6)',
            borderBottom: '1px solid rgba(15,23,42,.06)',
          }}
        />
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: 20 + i * 24,
              top: 17,
              width: 13,
              height: 13,
              borderRadius: '50%',
              background: [accent, '#FFC24B', accent2][i],
            }}
          />
        ))}
        {/* hero block inside */}
        <div
          style={{
            position: 'absolute',
            left: 24,
            top: 66,
            width: 200,
            height: 150,
            borderRadius: 16,
            background: `linear-gradient(135deg, ${accent}, ${accent2})`,
            boxShadow: 'inset 0 2px 8px rgba(255,255,255,.35)',
          }}
        />
        {/* text lines */}
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: 248,
              top: 74 + i * 26,
              width: 150 - i * 30,
              height: 12,
              borderRadius: 6,
              background: i === 0 ? '#475569' : '#cbd5e1',
            }}
          />
        ))}
        {/* little pill button inside */}
        <div
          style={{
            position: 'absolute',
            left: 248,
            top: 158,
            width: 116,
            height: 34,
            borderRadius: 17,
            background: `linear-gradient(135deg, ${accent2}, ${accent})`,
            boxShadow: '0 8px 16px -6px rgba(230,37,154,.5)',
          }}
        />
      </div>

      {/* ===== Solid colourful rounded square (app-tile vibe) ===== */}
      <div
        style={{
          position: 'absolute',
          left: '41%',
          top: '21%',
          width: 120,
          height: 120,
          borderRadius: 28,
          background: `linear-gradient(150deg, ${accent}, #FF6FB6)`,
          boxShadow: shadow,
          transform: `translate(-50%,-50%) translateY(${bob(1.1, 14)}px) rotate(${bob(0.6, 4)}deg) scale(${1 + bob(1.1, 0.04)})`,
        }}
      >
        <div
          style={{
            position: 'absolute',
            inset: 0,
            borderRadius: 28,
            background: 'linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%)',
          }}
        />
      </div>

      {/* ===== Cyan circle ===== */}
      <div
        style={{
          position: 'absolute',
          left: '84%',
          top: '25%',
          width: 96,
          height: 96,
          borderRadius: '50%',
          background: `linear-gradient(150deg, ${accent2}, #5FE0EC)`,
          boxShadow: softShadow,
          transform: `translate(-50%,-50%) translateY(${bob(2.4, 16)}px) scale(${1 + bob(2.4, 0.05)})`,
        }}
      >
        <div
          style={{
            position: 'absolute',
            inset: 0,
            borderRadius: '50%',
            background: 'linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%)',
          }}
        />
      </div>

      {/* ===== Soft-tone rounded rect ===== */}
      <div
        style={{
          position: 'absolute',
          left: '89%',
          top: '63%',
          width: 150,
          height: 100,
          borderRadius: 22,
          background: 'linear-gradient(150deg, #FFD36E, #FF9F6E)',
          boxShadow: softShadow,
          transform: `translate(-50%,-50%) translateY(${bob(3.0, 13)}px) rotate(${bob(1.7, -3)}deg)`,
        }}
      >
        <div
          style={{
            position: 'absolute',
            inset: 0,
            borderRadius: 22,
            background: 'linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%)',
          }}
        />
      </div>

      {/* ===== Standalone pill button ===== */}
      <div
        style={{
          position: 'absolute',
          left: '47%',
          top: '76%',
          width: 168,
          height: 52,
          borderRadius: 26,
          background: `linear-gradient(135deg, ${accent}, ${accent2})`,
          boxShadow: '0 18px 36px -12px rgba(15,118,168,.45)',
          transform: `translate(-50%,-50%) translateY(${bob(4.2, 11)}px) rotate(${bob(0.9, 2)}deg)`,
        }}
      >
        <div
          style={{
            position: 'absolute',
            left: 26,
            top: '50%',
            width: 90,
            height: 10,
            borderRadius: 5,
            transform: 'translateY(-50%)',
            background: 'rgba(255,255,255,.85)',
          }}
        />
      </div>

      {/* ===== Small magenta rounded square (lower-mid) ===== */}
      <div
        style={{
          position: 'absolute',
          left: '67%',
          top: '80%',
          width: 78,
          height: 78,
          borderRadius: 20,
          background: `linear-gradient(150deg, #B14BD6, ${accent})`,
          boxShadow: softShadow,
          transform: `translate(-50%,-50%) translateY(${bob(5.0, 12)}px) rotate(${bob(2.0, 5)}deg)`,
        }}
      />

      {/* ===== Fanned swatch chips (magenta -> cyan) ===== */}
      <div
        style={{
          position: 'absolute',
          left: '76%',
          top: '47%',
          width: 0,
          height: 0,
          transform: `translateY(${bob(1.5, 9)}px)`,
        }}
      >
        {swatchColors.map((c, i) => {
          const baseAngle = (i - (swatchColors.length - 1) / 2) * 13;
          const wobble = bob(i * 0.6, 2.2);
          return (
            <div
              key={i}
              style={{
                position: 'absolute',
                left: -27,
                top: -78,
                width: 54,
                height: 132,
                borderRadius: 16,
                background: c,
                boxShadow: '0 16px 30px -14px rgba(15,23,42,.4)',
                transformOrigin: '50% 118px',
                transform: `rotate(${baseAngle + wobble}deg)`,
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  inset: 0,
                  borderRadius: 16,
                  background: 'linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 45%)',
                }}
              />
            </div>
          );
        })}
      </div>

      {/* ===== Glossy stylus / pen gliding along a gentle path ===== */}
      {(() => {
        const px = 57 + Math.sin(t) * 9;       // % travel, periodic
        const py = 50 + Math.sin(t * 2 + 1) * 8;
        const ang = -38 + Math.sin(t + 0.5) * 7;
        return (
          <div
            style={{
              position: 'absolute',
              left: `${px}%`,
              top: `${py}%`,
              width: 30,
              height: 210,
              transform: `translate(-50%,-50%) rotate(${ang}deg)`,
              filter: 'drop-shadow(0 18px 26px rgba(15,23,42,.28))',
            }}
          >
            {/* tip */}
            <div
              style={{
                position: 'absolute',
                left: 6,
                top: 0,
                width: 0,
                height: 0,
                borderLeft: '9px solid transparent',
                borderRight: '9px solid transparent',
                borderBottom: '34px solid #475569',
              }}
            />
            {/* metal collar */}
            <div
              style={{
                position: 'absolute',
                left: 0,
                top: 24,
                width: 30,
                height: 10,
                borderRadius: 4,
                background: 'linear-gradient(180deg,#e2e8f0,#94a3b8)',
              }}
            />
            {/* body */}
            <div
              style={{
                position: 'absolute',
                left: 0,
                top: 30,
                width: 30,
                height: 150,
                borderRadius: 15,
                background: `linear-gradient(100deg, ${accent}, ${accent2})`,
              }}
            />
            {/* gloss highlight */}
            <div
              style={{
                position: 'absolute',
                left: 6,
                top: 38,
                width: 7,
                height: 130,
                borderRadius: 4,
                background: 'rgba(255,255,255,.6)',
              }}
            />
          </div>
        );
      })()}
    </>
  );
};