// Palmeiras: duas palmeiras de silhueta (preto-noite com borda magenta de 3 px) plantadas no horizonte, uma à esquerda e uma à
// direita. Sobem com sobra em 16 quadros e balançam ±2° (período 60 quadros) em torno da base. Sempre apoio, nunca no centro.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, eb} from '../base';
import {HORIZONTE} from '../texturas/Fundo';

const FOLHAS = [-75, -45, -15, 15, 45, 75, 105].map((a) => a);
const Palma: React.FC<{x: number; escala: number; lado: 1 | -1; fase: number; t: number}> = ({x, escala, lado, fase, t}) => {
  const sway = Math.sin((t / 60) * 2 * Math.PI + fase) * 2;
  return <svg viewBox="-200 -700 400 740" style={{position: 'absolute', left: x - 200 * escala, top: HORIZONTE + 30 - 740 * escala, width: 400 * escala, height: 740 * escala, overflow: 'visible', transformOrigin: '50% 100%', transform: `scaleX(${lado}) rotate(${sway}deg)`}}>
    <path d="M-14 40 C-10 -200 20 -400 40 -600 L62 -600 C44 -400 22 -200 18 40 Z" fill={COR.noite} stroke={COR.magenta} strokeWidth="3" />
    <g transform="translate(51 -600)">
      {FOLHAS.map((a, i) => <path key={i} transform={`rotate(${a - 90})`} d="M0 0 C40 -50 130 -70 210 -20 C140 -44 70 -34 0 0Z" fill={COR.noite} stroke={COR.magenta} strokeWidth="3" strokeLinejoin="round" />)}
    </g>
  </svg>;
};

export type PalmeirasProps = {inicio?: number; fim?: number};

export const Palmeiras: React.FC<PalmeirasProps> = ({inicio = 0, fim}) => {
  const f = useCurrentFrame();
  const t = f - inicio;
  if (t < 0 || (fim !== undefined && f >= fim)) return null;
  const p = eb(t / 16, 1.4);
  return <div style={{position: 'absolute', inset: 0, transform: `translateY(${(1 - p) * 500}px)`}}>
    <Palma x={150} escala={0.8} lado={1} fase={0} t={t} />
    <Palma x={940} escala={0.62} lado={-1} fase={2} t={t} />
  </div>;
};