import { motion } from 'framer-motion';
import bostromLogo from '@/assets/bostrom-logo.png';
import { useBootPrice } from '@/hooks/useBootPrice';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { PriceChart } from './PriceChart';
import { useSectionTracking } from '@/hooks/useSectionTracking';
// Format price with subscript notation for small numbers (CoinGecko style)
// e.g., 0.00000000127 becomes 0.0โ127 where โ indicates 9 zeros
const formatPriceWithSubscript = (price: number): React.ReactNode => {
if (price >= 0.01) {
return price < 1 ? price.toFixed(4) : price.toFixed(2);
}
// Convert to string to count leading zeros after decimal
const priceStr = price.toFixed(20);
const match = priceStr.match(/^0\.(0+)(\d+)/);
if (match) {
const zeroCount = match[1].length;
// Get significant digits (up to 4)
const significantDigits = match[2].slice(0, 4);
// Unicode subscript digits
const subscriptDigits: Record<string, string> = {
'0': 'โ', '1': 'โ', '2': 'โ', '3': 'โ', '4': 'โ',
'5': 'โ
', '6': 'โ', '7': 'โ', '8': 'โ', '9': 'โ'
};
const subscriptNumber = zeroCount.toString().split('').map(d => subscriptDigits[d]).join('');
return (
<>
0.0<span className="text-[0.7em] align-baseline">{subscriptNumber}</span>{significantDigits}
</>
);
}
return price.toExponential(2);
};
const formatLargeNumber = (num: number): string => {
if (num >= 1e12) {
return `${(num / 1e12).toFixed(2)}T`;
} else if (num >= 1e9) {
return `${(num / 1e9).toFixed(2)}B`;
} else if (num >= 1e6) {
return `${(num / 1e6).toFixed(2)}M`;
} else if (num >= 1e3) {
return `${(num / 1e3).toFixed(2)}K`;
}
return num.toFixed(2);
};
const formatSupply = (num: number): string => {
// For mobile-friendly display, use abbreviated format for very large numbers
if (num >= 1e12) {
return `${(num / 1e12).toFixed(2)}T`;
} else if (num >= 1e9) {
return `${(num / 1e9).toFixed(2)}B`;
}
return num.toLocaleString('en-US', { maximumFractionDigits: 0 });
};
export const TokenSection = () => {
const sectionRef = useSectionTracking('token');
const {
price,
priceChange24h,
marketCap,
fullyDilutedValuation,
volume24h,
circulatingSupply,
totalSupply,
stakingApr,
priceHistory,
isLoading
} = useBootPrice();
const BootLogo = () => (
<img src={bostromLogo} alt="BOOT" className="inline-block h-8 md:h-10 w-auto" />
);
// Calculate Market Cap locally: Price ร Total Supply
const calculatedMarketCap = price !== null && totalSupply !== null
? price * totalSupply
: null;
return (
<section ref={sectionRef} id="token" className="py-24 relative overflow-hidden">
{/* Background glow */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/10 rounded-full blur-3xl" />
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-4xl mx-auto text-center">
{/* Token Info */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className="flex items-center justify-center gap-4 mb-4">
<img
src={bostromLogo}
alt="BOOT Token"
className="w-16 h-16 animate-pulse-glow"
/>
<h2 className="text-4xl md:text-5xl font-orbitron font-bold">
<span className="text-primary text-glow-primary">$BOOT</span>
</h2>
</div>
<p className="text-xl text-foreground mb-8 max-w-2xl mx-auto">
The native token of Bostrom network. Stake BOOT to secure the network,
mint hydrogen, and participate in governance.
</p>
{/* Price Chart - above formula */}
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="mb-8 p-4 rounded-xl border border-border bg-card/30"
>
<PriceChart
data={priceHistory}
isPositive={(priceChange24h ?? 0) >= 0}
/>
</motion.div>
{/* Formula: Price ร Supply = Market Cap */}
<div className="flex flex-col lg:flex-row items-stretch justify-center gap-4 lg:gap-6 mb-8">
{/* Price Block */}
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
className="p-4 pt-3 rounded-xl border-2 border-primary/70 bg-background w-full lg:w-[200px] lg:flex-shrink-0 h-[130px] flex flex-col items-center"
style={{ boxShadow: '0 0 25px rgba(0, 255, 65, 0.3)' }}
>
{/* Header row: Price + Change - fixed at top */}
<div className="flex items-center justify-center gap-2 shrink-0">
<h3
className="text-lg font-orbitron font-bold text-cyan-300 text-center"
style={{ textShadow: '0 0 8px #00FFFF, 0 0 20px #00FFFF' }}
>
Price
</h3>
{!isLoading && priceChange24h !== null && (
<div className={`flex items-center gap-1 ${
priceChange24h >= 0 ? 'text-primary' : 'text-red-400'
}`}>
{priceChange24h >= 0 ? (
<TrendingUp className="w-3 h-3" />
) : (
<TrendingDown className="w-3 h-3" />
)}
<span className="font-mono text-xs font-bold">
{priceChange24h >= 0 ? '+' : ''}{priceChange24h.toFixed(2)}%
</span>
</div>
)}
</div>
{/* Value - centered in remaining space */}
<div className="flex-1 flex items-center justify-center">
<div className="text-2xl font-orbitron font-bold text-primary text-glow-primary text-center whitespace-nowrap">
{isLoading ? (
<span className="animate-pulse">...</span>
) : price !== null ? (
<>${formatPriceWithSubscript(price)}</>
) : (
<span className="text-muted-foreground text-lg">N/A</span>
)}
</div>
</div>
</motion.div>
{/* Multiplication Sign */}
<div className="text-4xl font-orbitron font-bold text-primary flex items-center justify-center">
ร
</div>
{/* Supply Block */}
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2 }}
className="p-4 pt-3 rounded-xl border-2 border-primary/70 bg-background w-full lg:w-[200px] lg:flex-shrink-0 h-[130px] flex flex-col items-center"
style={{ boxShadow: '0 0 25px rgba(0, 255, 65, 0.3)' }}
>
<div className="shrink-0">
<h3
className="text-lg font-orbitron font-bold text-cyan-300 text-center"
style={{ textShadow: '0 0 8px #00FFFF, 0 0 20px #00FFFF' }}
>
Supply
</h3>
</div>
<div className="flex-1 flex items-center justify-center">
<div className="text-2xl font-orbitron font-bold text-primary flex items-center justify-center gap-2 whitespace-nowrap">
{isLoading ? (
<span className="animate-pulse text-muted-foreground">...</span>
) : totalSupply !== null ? (
<>
<BootLogo />
<span>{formatSupply(totalSupply)}</span>
</>
) : (
<span className="text-muted-foreground text-lg">N/A</span>
)}
</div>
</div>
</motion.div>
{/* Equals Sign */}
<div className="text-4xl font-orbitron font-bold text-primary flex items-center justify-center">
=
</div>
{/* Market Cap Block (calculated locally) */}
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.3 }}
className="p-4 pt-3 rounded-xl border-2 w-full lg:w-[200px] lg:flex-shrink-0 h-[130px] flex flex-col items-center"
style={{
borderColor: 'rgba(255, 0, 255, 0.7)',
backgroundColor: '#000000',
boxShadow: '0 0 20px rgba(255, 0, 255, 0.25), 0 0 40px rgba(255, 0, 255, 0.15)'
}}
>
<div className="shrink-0">
<h3
className="text-lg font-orbitron font-bold text-cyan-300 text-center"
style={{ textShadow: '0 0 8px #00FFFF, 0 0 20px #00FFFF' }}
>
Market Cap
</h3>
</div>
<div className="flex-1 flex items-center justify-center">
<div className="text-2xl font-orbitron font-bold text-center whitespace-nowrap"
style={{ color: '#FF00FF', textShadow: '0 0 10px rgba(255, 0, 255, 0.6)' }}
>
{isLoading ? (
<span className="animate-pulse text-muted-foreground">...</span>
) : calculatedMarketCap !== null ? (
<span>${formatLargeNumber(calculatedMarketCap)}</span>
) : (
<span className="text-muted-foreground text-lg">N/A</span>
)}
</div>
</div>
</motion.div>
</div>
{/* CTA - Single BUY button */}
<div className="flex justify-center">
<a
href="https://app.osmosis.zone/assets/ibc/FE2CD1E6828EC0FAB8AF39BAC45BC25B965BA67CCBC50C13A14BD610B0D1E2C4"
target="_blank"
rel="noopener noreferrer"
className="px-16 sm:px-24 py-4 sm:py-5 font-orbitron font-bold text-lg sm:text-xl rounded-lg hover:scale-105 transition-all text-center flex items-center gap-2 justify-center"
style={{
backgroundColor: '#FF00FF',
color: '#000000',
boxShadow: '0 0 40px rgba(255, 0, 255, 0.6), 0 0 80px rgba(255, 0, 255, 0.3)'
}}
>
BUY <img src={bostromLogo} alt="BOOT" className="h-6 sm:h-7 w-auto" /> BOOT
</a>
</div>
</motion.div>
</div>
</div>
</section>
);
};