/* global React, Kicker, LimeCheck, TopoLines, RecruitButton, useBreakpoint */
// Scalloped wax-seal SVG โ matches the envelope's seal (deep navy, organic drip edges, dotted border, embossed number).
// Seal sits upright so the number reads straight; gets a subtle scale on hover instead of a tilt.
function WaxSeal({ number, hover, size = 96 }) {
const cx = 50, cy = 50;
// Procedural organic edge: 5 gentle lobes + a faster micro-wobble. Upright (no offset), so the number stays straight.
const N = 64;
const radii = Array.from({ length: N }, (_, i) => {
const t = (i / N) * Math.PI * 2;
return 44.8 + 2.6 * Math.sin(t * 5 + 0.35) + 0.9 * Math.sin(t * 11 + 1.7);
});
// Build smooth closed path through points.
const pts = radii.map((r, i) => {
const a = (i / N) * Math.PI * 2 - Math.PI / 2;
return [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
});
const line = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(2) + ',' + p[1].toFixed(2)).join(' ') + ' Z';
// Dotted rope border (24 dots around r=33)
const dots = [];
const DOT_N = 26;
for (let i = 0; i < DOT_N; i++) {
const a = (i / DOT_N) * Math.PI * 2;
dots.push([cx + Math.cos(a) * 33, cy + Math.sin(a) * 33]);
}
return (
);
}
const TRAIL_STEPS = [
{ n: '01', icon: '๐งญ', t: 'Orientation', b: 'What annuities really are, and where they fit in a retirement income plan โ without the jargon.' },
{ n: '02', icon: '๐', t: 'MYGAs 101', b: 'Your easiest entry point to growth โ with principal protection your clients already want.' },
{ n: '03', icon: 'โฐ', t: 'FIAs Made Simple', b: 'No jargon, no overwhelm โ just clarity on how fixed-indexed annuities actually work.' },
{ n: '04', icon: '๐ญ', t: 'Opportunity Spotting', b: 'How to recognize qualified retirement savings and the clients already sitting on them.' },
{ n: '05', icon: '๐ฃ', t: 'Cross-Sell Language', b: 'Natural ways to shift the conversation from health to wealth without breaking trust.' },
{ n: '06', icon: '๐ก', t: 'Objection Handling', b: 'What to say when clients hesitate โ compliant, client-first, rehearsed answers.' },
{ n: '07', icon: '๐', t: 'Quoting + Presenting', b: 'Show value without confusion. Run your first live quote and walk it through like a pro.' },
{ n: '08', icon: '๐', t: 'Apps + Process', b: 'How to write, submit, and issue policies โ with suitability and back-office handoff built in.' },
{ n: '09', icon: '๐ฆ', t: 'Case Walkthroughs', b: 'Real examples from real agents. See the full arc from first question to funded case.' },
{ n: '10', icon: '๐ฉ', t: 'Your First Appointments', b: 'Scripts, checklists, and a support team behind you when you sit down with your first client.' },
];
// Individual parchment step card. Rich hover: lift, slight rotate, lime rope animates, wax-seal number flips.
function StepCard({ step, index, variant }) {
const [hover, setHover] = React.useState(false);
const isBold = variant === 'bold';
const tilt = index % 2 === 0 ? -0.4 : 0.4; // subtle parchment skew alternation
return (
);
}
function TrailSection({ variant, imgBase }) {
const isBold = variant === 'bold';
const bp = useBreakpoint();
const gridCols = bp === 'mobile' ? '1fr' : bp === 'tablet' ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
// Invitation block: always fill the "empty slots" โ spans 2 on desktop (takes the last 2 of 4), 2 on tablet (full row), 1 on mobile.
const inviteSpan = bp === 'mobile' ? 1 : 2;
return (
{isBold ? 'โฆ The Expedition Route ยท 10 stations' : 'The 10-Week Trail'}
{isBold
? <>10 stations. One summit.
: <>10 weeks of content. One summit.
}
{isBold
? "You don't get a binder. You get a route, a guide, and a cohort climbing beside you. Here's the full map โ and the stations you'll pass through."
: 'Each week builds on the last โ from what annuities are, to sitting down with your first client ready to fund one.'
}
{/* Subtle lime glow behind seal on hover */}