/* global React */ // Hero — the headline moment. function Hero({ t = {} }) { const DS = window.ReconcileAIDesignSystem_c7572b; const { ExceptionCard, Badge } = DS; const ALL_CARDS = [ { merchant: 'Amazon Web Services', amount: '£1,248.00', date: '2026-06-03 · 09:14', reason: 'No matching invoice found, but the amount and timing match your usual monthly cloud bill. Most likely AWS hosting.', suggestedAccount: 'Software & hosting', confidence: 96, pastTransactions: [{ date: '2026-05-03', amount: '£1,248.00' }, { date: '2026-04-03', amount: '£1,248.00' }, { date: '2026-03-03', amount: '£1,198.00' }] }, { merchant: 'Stripe Inc.', amount: '£320.50', date: '2026-06-02 · 14:22', reason: "Payment processor fee matching your typical monthly Stripe volume charge. Consistent with last quarter's figures.", suggestedAccount: 'Payment processing', confidence: 94, pastTransactions: [{ date: '2026-05-02', amount: '£298.60' }, { date: '2026-04-02', amount: '£312.20' }] }, { merchant: 'Notion Labs', amount: '£84.00', date: '2026-06-01 · 11:05', reason: "Annual team workspace renewal. Same amount and merchant as last year's subscription — high confidence auto-match.", suggestedAccount: 'Software & hosting', confidence: 97, pastTransactions: [{ date: '2025-06-01', amount: '£84.00' }] }, { merchant: 'WeWork', amount: '£2,100.00', date: '2026-05-31 · 08:00', reason: 'Monthly co-working desk rental matching your office space contract. Recurring charge on the first of every month.', suggestedAccount: 'Rent & facilities', confidence: 92, pastTransactions: [{ date: '2026-05-01', amount: '£2,100.00' }, { date: '2026-04-01', amount: '£2,100.00' }, { date: '2026-03-01', amount: '£2,100.00' }] }, { merchant: 'Google Cloud', amount: '£567.80', date: '2026-05-30 · 10:30', reason: 'Cloud compute and storage charges consistent with engineering team usage. Aligns with your active GCP project billing.', suggestedAccount: 'Software & hosting', confidence: 91, pastTransactions: [{ date: '2026-04-30', amount: '£489.20' }, { date: '2026-03-30', amount: '£531.60' }] }, ]; const [currentIdx, setCurrentIdx] = React.useState(0); const [animKey, setAnimKey] = React.useState(0); const [isExiting, setIsExiting] = React.useState(false); const [isInteracting, setInteracting] = React.useState(false); const advancingRef = React.useRef(false); const hadInteractionRef = React.useRef(false); // Two-phase transition: fade out current card, then swap + fade in new card const goNext = React.useCallback(() => { if (advancingRef.current) return; advancingRef.current = true; setIsExiting(true); setTimeout(() => { setCurrentIdx(i => (i + 1) % ALL_CARDS.length); setAnimKey(k => k + 1); setIsExiting(false); advancingRef.current = false; }, 520); }, []); // Pause while the user has the dropdown or review panel open. // When they close it, wait 1 s then advance — instead of the usual 5 s. React.useEffect(() => { if (isInteracting) { hadInteractionRef.current = true; return; } const delay = hadInteractionRef.current ? 1000 : 5000; hadInteractionRef.current = false; const timer = setTimeout(goNext, delay); return () => clearTimeout(timer); }, [currentIdx, isInteracting, goNext]); React.useEffect(() => { requestAnimationFrame(() => window.lucide && window.lucide.createIcons()); }); // On manual resolve: clear any lingering interaction state, show "Reconciled" briefly, // then swap in the next card without the exit animation. const handleManualResolve = () => { if (advancingRef.current) return; advancingRef.current = true; setInteracting(false); setTimeout(() => { setCurrentIdx(i => (i + 1) % ALL_CARDS.length); setAnimKey(k => k + 1); advancingRef.current = false; }, 650); }; const card = ALL_CARDS[currentIdx]; return (
); } window.Hero = Hero;