// ─── Polished variant: top-level shell + GSAP wiring ───────────────────
function PolishedNav() {
const ref = React.useRef(null);
React.useEffect(() => {
const onScroll = () => {
if (!ref.current) return;
ref.current.classList.toggle('scrolled', window.scrollY > 40);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
function splitToWords(text) {
return text.split(' ').map((w, i) => (
{w}
{i < text.split(' ').length - 1 ? ' ' : ''}
));
}
function PolishedHero({ variant }) {
const D = window.ARCLINE_DATA.hero;
const heroRef = React.useRef(null);
React.useEffect(() => {
if (!window.gsap || !heroRef.current) return;
const ctx = gsap.context(() => {
const words = heroRef.current.querySelectorAll('h1 [data-reveal]');
gsap.set(words, { yPercent: 110 });
gsap.to(words, {
yPercent: 0,
duration: 1.1,
ease: 'expo.out',
stagger: 0.08,
delay: 0.15,
});
gsap.from(heroRef.current.querySelectorAll('[data-fade]'), {
opacity: 0,
y: 24,
duration: 0.9,
ease: 'power3.out',
stagger: 0.08,
delay: 0.5,
});
// orbit parallax on scroll
gsap.to(heroRef.current.querySelector('.hero-bg'), {
yPercent: 25,
scrollTrigger: {
trigger: heroRef.current,
start: 'top top',
end: 'bottom top',
scrub: true,
},
});
}, heroRef);
return () => ctx.revert();
}, [variant]);
return (
{variant === 'split' ? (
{D.eyebrow}
{D.headline.map((w, i) => (
{w}
{i < D.headline.length - 1 ? ' ' : ''}
))}
{D.sub}
) : variant === 'ticker' ? (
<>
{D.eyebrow}
{D.headline.map((w, i) => (
{w}
{i < D.headline.length - 1 ? ' ' : ''}
))}
{D.sub}
{[...D.ticker, ...D.ticker].map((t, i) => {t})}
) : (
<>
{D.eyebrow}
{D.headline.map((w, i) => (
{w}
{i < D.headline.length - 1 ? ' ' : ''}
))}
{D.sub}
{D.meta.map((m, i) => (
{m.lbl}{m.v}
))}
)}
);
}
window.PolishedNav = PolishedNav;
window.PolishedHero = PolishedHero;