// CartaoEndereco: o cartão do lugar (branco, canto 56 px): pino magenta, nome grande, endereço em mono, uma linha de detalhe
// (horário, tempo) e o botão "Como chegar" que aperta e solta um anel. Sobe de baixo com overshoot. Herói da cena de endereço.
import React from 'react';
import {useCurrentFrame} from 'remotion';
import {COR, FONTE, MONO, caber, e5, ov, seg} from '../base';

export type CartaoEnderecoProps = {
  nome: string;
  endereco: string;
  detalhe: string;
  botao: string;
  inicio?: number;
  /** quadro (na cena) em que o botão aperta */
  clica?: number;
  /** centro vertical, px */
  y: number;
  fim?: number;
};

export const CartaoEndereco: React.FC<CartaoEnderecoProps> = ({nome, endereco, detalhe, botao, inicio = 0, clica, y, fim = 1e9}) => {
  const f = useCurrentFrame();
  if (f < inicio - 1 || f > fim + 12) return null;
  const quando = clica ?? inicio + 26;
  const t = ov(seg(f, inicio, inicio + 18)), sai = e5(seg(f, fim, fim + 10));
  const aperta = f >= quando && f < quando + 8 ? 1 - Math.abs(f - quando - 3) / 5 : 0, anel = seg(f, quando, quando + 16);
  const tam = caber(nome, 118, 780, 800, -0.03, 'MP DM Sans');
  return <div style={{position: 'absolute', left: 100, top: y - 360, width: 880, height: 720, borderRadius: 56, background: '#fff', boxShadow: '0 60px 100px rgba(80,0,30,.45)', padding: '54px 56px', boxSizing: 'border-box', transform: `translateY(${(1 - t) * 1200 - sai * 1200}px) rotate(${(1 - t) * -4}deg)`}}>
    <svg width={96} height={120} viewBox="-50 -100 100 110" style={{display: 'block'}}><path d="M0 0 C -4 -10, -42 -52, -42 -78 A 42 42 0 0 1 42 -78 C 42 -52, 4 -10, 0 0 Z" fill={COR.magenta} /><circle cx={0} cy={-78} r={17} fill="#fff" /></svg>
    <div style={{marginTop: 24, fontFamily: FONTE, fontWeight: 800, fontSize: tam, lineHeight: 1.05, color: COR.tinta, letterSpacing: '-0.03em', whiteSpace: 'nowrap'}}>{nome}</div>
    <div style={{marginTop: 14, fontFamily: MONO, fontWeight: 500, fontSize: 42, color: COR.tinta, opacity: 0.7}}>{endereco}</div>
    <div style={{marginTop: 22, display: 'inline-block', fontFamily: FONTE, fontWeight: 700, fontSize: 40, color: COR.magentaEscuro, background: '#FFE3EC', borderRadius: 30, padding: '10px 28px'}}>{detalhe}</div>
    <div style={{position: 'absolute', left: 56, bottom: 54, width: 768, height: 130}}>
      {f >= quando && <div style={{position: 'absolute', left: -60 * anel, top: -60 * anel, right: -60 * anel, bottom: -60 * anel, borderRadius: 65 + 60 * anel, border: `${8 * (1 - anel)}px solid ${COR.magenta}`, opacity: 1 - anel}} />}
      <div style={{position: 'absolute', inset: 0, borderRadius: 65, background: COR.magenta, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 22, fontFamily: FONTE, fontWeight: 800, fontSize: 56, color: '#fff', transform: `scale(${1 - aperta * 0.04}) translateY(${aperta * 8}px)`, boxShadow: '0 14px 0 #C70E47'}}>
        {botao}
        <svg width={56} height={44} viewBox="0 0 64 50"><path d="M4 25 H54 M34 5 L56 25 L34 45" stroke="#fff" strokeWidth={9} fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
    </div>
  </div>;
};