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

export const NewsFg: 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

  // A staggered deck of editorial "article cards" that gently rise/fade
  // like a feed being scrolled — concentrated centre-to-right, left third calm.
  const cards = [
    { left: 56, top: 46, w: 330, ph: 0.0, sc: 1.06, img: accent, head: 0.5, z: 7 },
    { left: 72, top: 38, w: 300, ph: 0.8, sc: 0.97, img: accent2, head: 0.46, z: 6 },
    { left: 62, top: 70, w: 290, ph: 1.6, sc: 0.94, img: accent, head: 0.42, z: 6 },
    { left: 83, top: 60, w: 268, ph: 2.4, sc: 0.88, img: accent2, head: 0.5, z: 5 },
    { left: 48, top: 72, w: 282, ph: 3.2, sc: 0.92, img: accent, head: 0.4, z: 5 },
    { left: 86, top: 30, w: 248, ph: 4.0, sc: 0.82, img: accent2, head: 0.44, z: 4 },
    { left: 50, top: 26, w: 264, ph: 4.8, sc: 0.86, img: accent, head: 0.48, z: 5 },
  ];

  return (
    <>
      {cards.map((c, i) => {
        // Seamless vertical rise + gentle sway, all periodic
        const rise = Math.sin(t + c.ph) * 15;
        const sway = Math.cos(t + c.ph * 1.3) * 8;
        const breathe = 1 + Math.sin(t + c.ph) * 0.02;
        // Feed-like fade: brightest mid-cycle, never fully gone
        const fade = 0.8 + Math.sin(t + c.ph) * 0.2;
        const tilt = Math.sin(t + c.ph * 0.7) * 1.6;
        const scale = c.sc * breathe;

        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              left: `${c.left}%`,
              top: `${c.top}%`,
              width: c.w,
              transform: `translate(-50%, -50%) translate(${sway}px, ${rise}px) rotate(${tilt}deg) scale(${scale})`,
              opacity: fade,
              background: 'linear-gradient(180deg, #ffffff, #fdfdfe)',
              borderRadius: 24,
              padding: 18,
              boxShadow:
                '0 30px 60px -18px rgba(15,23,42,.28), 0 6px 14px -6px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9)',
              border: '1px solid rgba(15,23,42,.05)',
              boxSizing: 'border-box',
              zIndex: c.z,
            }}
          >
            {/* Amber header bar with category pill + live dot */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 13 }}>
              <div
                style={{
                  width: `${c.head * 100}%`,
                  height: 13,
                  borderRadius: 7,
                  background: `linear-gradient(90deg, ${accent}, ${accent2})`,
                  boxShadow: `0 4px 10px -3px ${accent2}88`,
                }}
              />
              <div
                style={{
                  width: 13,
                  height: 13,
                  borderRadius: '50%',
                  background: accent2,
                  boxShadow: `0 0 0 3px ${accent}33`,
                }}
              />
            </div>

            {/* Image block: solid amber gradient with white gloss highlight */}
            <div
              style={{
                position: 'relative',
                width: '100%',
                height: 100,
                borderRadius: 16,
                overflow: 'hidden',
                background: `linear-gradient(135deg, ${c.img}, ${accent2})`,
                boxShadow: `inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px -10px ${accent2}99`,
                marginBottom: 15,
              }}
            >
              {/* sweeping gloss highlight (transform-only, periodic) */}
              <div
                style={{
                  position: 'absolute',
                  left: '-25%',
                  top: '-65%',
                  width: '70%',
                  height: '130%',
                  borderRadius: '50%',
                  background: 'rgba(255,255,255,.4)',
                  filter: 'blur(10px)',
                  transform: `translateX(${(Math.sin(t + c.ph) * 0.5 + 0.5) * 260}px)`,
                }}
              />
            </div>

            {/* 3 grey text lines */}
            <div style={{ height: 10, borderRadius: 5, background: '#dfe4ee', marginBottom: 10, width: '100%' }} />
            <div style={{ height: 10, borderRadius: 5, background: '#e6eaf2', marginBottom: 10, width: '86%' }} />
            <div style={{ height: 10, borderRadius: 5, background: '#edf0f6', width: '62%' }} />
          </div>
        );
      })}

      {/* Standalone amber headline chips floating between cards */}
      {[0, 1].map((i) => {
        const ph = i * 2.6 + 1.1;
        const x = Math.cos(t + ph) * 20;
        const y = Math.sin(t + ph * 1.2) * 16;
        const fade = 0.74 + Math.sin(t + ph) * 0.22;
        const rot = Math.sin(t + ph) * 6;
        const label = i === 0 ? 'BREAKING' : 'LIVE';
        return (
          <div
            key={`chip-${i}`}
            style={{
              position: 'absolute',
              left: `${i === 0 ? 64 : 90}%`,
              top: `${i === 0 ? 52 : 44}%`,
              transform: `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${rot}deg)`,
              opacity: fade,
              padding: '9px 17px',
              borderRadius: 999,
              background: `linear-gradient(135deg, ${accent}, ${accent2})`,
              color: '#fff',
              fontWeight: 800,
              fontSize: 15,
              letterSpacing: 0.6,
              fontFamily: 'system-ui, -apple-system, Segoe UI, sans-serif',
              boxShadow: `0 18px 34px -12px ${accent2}cc, inset 0 1px 0 rgba(255,255,255,.45)`,
              zIndex: 8,
            }}
          >
            {label}
          </div>
        );
      })}
    </>
  );
};