import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
/* ─── constants ─────────────────────────────────────────────── */
const CX = 220,
CY = 215; // svg centre
const R = 132; // orbit radius
const AR = 139; // arrow arc radius (just outside orbit)
const NR = 31; // node coin radius
const TEAL = '#FA510F';
const GOLD = '#DCE67A';
const ease = [0.16, 1, 0.3, 1] as const;
const spring = [0.34, 1.56, 0.64, 1] as const;
/* ─── helpers ────────────────────────────────────────────────── */
const rad = (d: number) => (d * Math.PI) / 180;
// deg=0 → top, positive → clockwise
const pt = (deg: number, r = R) => ({
x: +(CX + r * Math.sin(rad(deg))).toFixed(2),
y: +(CY - r * Math.cos(rad(deg))).toFixed(2),
});
// SVG arc path CW from fromDeg to toDeg on circle of radius r
const arc = (fromDeg: number, toDeg: number, r = AR): string => {
const p1 = pt(fromDeg, r),
p2 = pt(toDeg, r);
const span = (toDeg - fromDeg + 360) % 360;
return `M${p1.x},${p1.y} A${r},${r} 0 ${span > 180 ? 1 : 0} 1 ${p2.x},${p2.y}`;
};
/* ─── stage definitions ──────────────────────────────────────── */
type Stage = {
deg: number;
label: string;
sub: string;
color: string;
icon: React.ReactNode;
};
const STAGES: Stage[] = [
{
deg: 330,
label: 'Application',
sub: 'Borrower applies',
color: TEAL,
icon: (
<>
),
},
{
deg: 30,
label: 'Assessment',
sub: 'KYC & risk review',
color: GOLD,
icon: (
<>
),
},
{
deg: 90,
label: 'Approval',
sub: 'Multi-stage sign-off',
color: TEAL,
icon: (
<>
),
},
{
deg: 150,
label: 'Disbursement',
sub: 'Funds released',
color: GOLD,
icon: (
<>
),
},
{
deg: 210,
label: 'Repayment',
sub: 'Installments paid',
color: TEAL,
icon: (
<>
),
},
{
deg: 270,
label: 'Monitoring',
sub: 'Portfolio tracked',
color: GOLD,
icon: (
<>
),
},
];
const GAP = 17; // degrees trimmed from each end of arrow arc to leave gap at nodes
/* ─── component ──────────────────────────────────────────────── */
interface Props {
className?: string;
}
export function LoanCycleIllustration({ className = '' }: Props) {
const ref = useRef(null);
const inView = useInView(ref, { once: true, margin: '-60px' });
return (
);
}