// FormaRiso: formas simples impressas em duas tintas fora de registro (sol, estrela, onda, arco, listras). Apoio discreto: estoura, gira em passos e fica respirando.
import React from 'react';
import {COR, mola, seg, useF} from '../base';

export type FormaRisoProps = {nome?: 'sol' | 'estrela' | 'onda' | 'arco' | 'listras'; x?: number; y?: number; tam?: number; inicio?: number};
const Forma: React.FC<{nome: string; cor: string; modo: 'cheio' | 'reticula'}> = ({nome, cor, modo}) => {
  const fill = modo === 'cheio' ? cor : 'url(#ret-azul)';
  switch (nome) {
    case 'estrela': return <polygon points={Array.from({length: 10}).map((_, i) => { const r = i % 2 ? 22 : 48, a = (i / 10) * Math.PI * 2 - Math.PI / 2; return `${50 + Math.cos(a) * r},${52 + Math.sin(a) * r}`; }).join(' ')} fill={fill} />;
    case 'onda': return <path d="M2 40 Q14 14 26 40 T50 40 T74 40 T98 40 M2 66 Q14 40 26 66 T50 66 T74 66 T98 66" stroke={modo === 'cheio' ? cor : COR.azul} strokeWidth="9" fill="none" strokeLinecap="round" />;
    case 'arco': return <path d="M8 80 A42 42 0 0 1 92 80" stroke={modo === 'cheio' ? cor : COR.azul} strokeWidth="20" fill="none" />;
    case 'listras': return <>{[0, 1, 2, 3, 4].map((i) => <rect key={i} x={8 + i * 19} y="10" width="11" height="80" fill={modo === 'cheio' ? cor : COR.azul} />)}</>;
    default: return <><circle cx="50" cy="50" r="26" fill={fill} />{Array.from({length: 12}).map((_, i) => <rect key={i} x="47" y="4" width="6" height="14" fill={modo === 'cheio' ? cor : COR.azul} transform={`rotate(${i * 30} 50 50)`} />)}</>;
  }
};
export const FormaRiso: React.FC<FormaRisoProps> = ({nome = 'sol', x = 800, y = 360, tam = 300, inicio = 0}) => {
  const f = useF() - inicio;
  const p = mola(seg(f, 0, 12), 1.8);
  const reg = (1 - p) * 40 + 8;
  const rot = (1 - p) * -120 + Math.sin(f / 14) * 5;
  const camada = (cor: string, modo: 'cheio' | 'reticula', dx: number, dy: number) => <svg viewBox="0 0 100 100" width={tam} height={tam} style={{position: 'absolute', left: dx, top: dy, mixBlendMode: 'multiply', overflow: 'visible'}}>
    <defs><pattern id="ret-azul" width="9" height="9" patternUnits="userSpaceOnUse"><circle cx="4.5" cy="4.5" r="3.2" fill={COR.azul} /></pattern></defs><Forma nome={nome} cor={cor} modo={modo} /></svg>;
  return <div style={{position: 'absolute', left: x - tam / 2, top: y - tam / 2, width: tam, height: tam, transform: `rotate(${rot}deg) scale(${Math.max(0.01, p)})`}}>{camada(COR.rosa, 'cheio', -reg, -reg * 0.6)}{camada(COR.azul, 'reticula', reg, reg * 0.6)}</div>;
};