import { motion, useInView, useReducedMotion } from 'framer-motion';
import { useRef } from 'react';
/* ── Scene constants ─────────────────────────────────────── */
const CX = 240; // sphere / composition centre x
const SY = 228; // sphere centre y
const SR = 80; // sphere radius
const RCX = 240,
RCY = 226; // node-ring centre
const RX = 172,
RY = 152; // node-ring radii
/* ── Palette — teal / orange / navy with brand orange ────── */
const TEAL_LINE = '#2EB4AE';
const ORANGE_LINE = '#FB6B2C';
const NAVY_LINE = '#6B92C7';
type Tone = 'teal' | 'orange' | 'navy';
const TONES: Record<
Tone,
{ line: string; depth: string; face: string; rim: string }
> = {
teal: {
line: TEAL_LINE,
depth: '#07363B',
face: 'url(#ilxFaceTeal)',
rim: 'url(#ilxRimTeal)',
},
orange: {
line: ORANGE_LINE,
depth: '#6E2803',
face: 'url(#ilxFaceOrange)',
rim: 'url(#ilxRimOrange)',
},
navy: {
line: NAVY_LINE,
depth: '#0F1D36',
face: 'url(#ilxFaceNavy)',
rim: 'url(#ilxRimNavy)',
},
};
/* ── Hexagon geometry (pointy-top, centred at 0,0) ───────── */
function hexPath(r: number): string {
const w = (r * 0.866).toFixed(2);
const h = (r / 2).toFixed(2);
return `M0,${-r} L${w},${-h} L${w},${h} L0,${r} L${-w},${h} L${-w},${-h} Z`;
}
const HEX_OUTER = hexPath(37); // + strokeWidth 6 → rounded silhouette ≈ r40
const HEX_INNER = hexPath(28.5);
/* Upper portion of inner hex — glass gloss overlay */
const HEX_GLOSS =
'M0,-28.5 L24.68,-14.25 L24.68,-3 Q0,7 -24.68,-3 L-24.68,-14.25 Z';
/* ── Stage icons — white line work, ~30px box, centred ───── */
function DocIcon(): JSX.Element {
return (
);
}
function ShieldCheckIcon(): JSX.Element {
return (
);
}
function TransferIcon(): JSX.Element {
return (
);
}
function RepaymentIcon(): JSX.Element {
return (
);
}
function CollectionsIcon(): JSX.Element {
return (
);
}
function AnalyticsIcon(): JSX.Element {
return (
);
}
/* ── Stage definitions — angles on the node ring ─────────── */
const STAGES: Array<{
label: string;
tone: Tone;
deg: number;
labelAbove: boolean;
Icon: () => JSX.Element;
}> = [
{
label: 'Application',
tone: 'teal',
deg: 240,
labelAbove: true,
Icon: DocIcon,
},
{
label: 'Approval',
tone: 'orange',
deg: 300,
labelAbove: true,
Icon: ShieldCheckIcon,
},
{
label: 'Disbursement',
tone: 'teal',
deg: 0,
labelAbove: false,
Icon: TransferIcon,
},
{
label: 'Repayment',
tone: 'navy',
deg: 60,
labelAbove: false,
Icon: RepaymentIcon,
},
{
label: 'Collections',
tone: 'teal',
deg: 120,
labelAbove: false,
Icon: CollectionsIcon,
},
{
label: 'Analytics',
tone: 'navy',
deg: 180,
labelAbove: false,
Icon: AnalyticsIcon,
},
];
function nodePos(deg: number): { x: number; y: number } {
const t = (deg * Math.PI) / 180;
return {
x: Math.round(RCX + RX * Math.cos(t)),
y: Math.round(RCY + RY * Math.sin(t)),
};
}
/* ── HexNode — floating glass hexagonal prism ────────────── */
function HexNode({
stage,
index,
inView,
reduce,
}: {
stage: (typeof STAGES)[number];
index: number;
inView: boolean;
reduce: boolean;
}): JSX.Element {
const { x, y } = nodePos(stage.deg);
const tone = TONES[stage.tone];
return (
{/* Entrance spring */}
{/* Label — outside the bob layer so it stays put */}
{stage.label}
{/* Gentle float */}
{/* Ambient glow */}
{/* Prism depth — dark hex offset below */}
{/* Outer rim */}
{/* Rim edge light */}
{/* Inner glossy face */}
{/* Glass gloss — upper half sheen */}
{/* Icon */}
);
}
/* ── Component ────────────────────────────────────────────── */
interface Props {
className?: string;
}
export function IsometricLoanIllustration({ className = '' }: Props) {
const ref = useRef(null);
const inView = useInView(ref, { once: true, margin: '-60px' });
const reduce = useReducedMotion() ?? false;
return (
);
}