// ISTOK Group — section components // --- Logo (inline) --- const Logo = ({ size = 36 }) => ( ISTOKGroup ); // --- Reveal-on-scroll hook --- const useReveal = () => { React.useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; // --- Nav --- const Nav = ({ t, lang, onLang }) => { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); }; // --- Hero --- const Hero = ({ t }) => { React.useEffect(() => { const cv = document.getElementById('hero-canvas'); if (cv && window.startHeroCanvas) { const dispose = window.startHeroCanvas(cv); return dispose; } }, []); return (
{t.hero.eyebrow}

{t.hero.headline[0]} {t.hero.headline[1]}
{t.hero.headline[2]}

{t.hero.sub}

{t.hero.meta.map((m, i) => (
{m.num}
{m.lbl}
))}
); }; // --- Ticker --- const Ticker = ({ items }) => ( ); // --- About --- const About = ({ t }) => (
{t.about.label} ISTOK / 2026

{t.about.title}

{t.about.lead}

{t.about.body}

{t.about.partner.label}

{t.about.partner.title}

{t.about.partner.body}

); // --- Service icons (simple stroke SVGs) --- const ServiceIcon = ({ idx }) => { const a = 'rgb(71,158,254)'; const w = 'rgba(212,222,249,0.7)'; const common = { width: 56, height: 56, viewBox: '0 0 56 56', fill: 'none' }; switch (idx) { case 0: // Rack build return ( {[10, 16, 22, 28, 34, 40].map(y => )} ); case 1: // Labeling return ( ); case 2: // Cable pulling — spool return ( ); case 3: // Patching return ( ); case 4: // Cable test — pass return ( ); case 5: // Troubleshooting — wrench return ( ); case 6: // Cable dressing — vertical lines bundled return ( {[14, 20, 26, 32, 38, 44].map(x => )} ); case 7: // Lift / scissor return ( ); default: return null; } }; // --- Services --- const Services = ({ t }) => { useTileGlow(); return (
{t.services.label} 8 / Disciplines

{t.services.title}

{t.services.sub}

{t.services.items.map((it, i) => (
{it.num} / 08
{it.title}
))}
); }; const useTileGlow = () => { React.useEffect(() => { const tiles = document.querySelectorAll('.service-tile'); const handlers = []; tiles.forEach(tile => { const onMove = (e) => { const r = tile.getBoundingClientRect(); tile.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%'); tile.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%'); }; tile.addEventListener('mousemove', onMove); handlers.push([tile, onMove]); }); return () => handlers.forEach(([t, h]) => t.removeEventListener('mousemove', h)); }, []); }; // --- Animated number --- const AnimatedNumber = ({ value }) => { // Parse leading number + suffix (e.g. ">400", "100,000", "24/7") const m = /^([>\d,\s\u00A0]+)(.*)$/.exec(value); if (!m) return <>{value}; const targetStr = m[1].replace(/\s|\u00A0|,/g, '').replace(/^>/, ''); const target = parseInt(targetStr, 10); const suffix = m[2]; const prefix = m[1].trim().startsWith('>') ? '>' : ''; const [current, setCurrent] = React.useState(0); const ref = React.useRef(null); React.useEffect(() => { if (isNaN(target)) return; const io = new IntersectionObserver(([en]) => { if (en.isIntersecting) { const dur = 1400; const t0 = performance.now(); const raf = (now) => { const k = Math.min(1, (now - t0) / dur); const eased = 1 - Math.pow(1 - k, 3); setCurrent(Math.round(eased * target)); if (k < 1) requestAnimationFrame(raf); }; requestAnimationFrame(raf); io.disconnect(); } }, { threshold: 0.4 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [target]); if (isNaN(target)) return {value}; const formatted = current.toLocaleString('en-US'); return {prefix}{formatted}{suffix}; }; // --- Numbers --- const Numbers = ({ t }) => (
{t.numbers.label} As of Q2 / 2026

{t.numbers.title}

{t.numbers.sub}

{t.numbers.stats.map((s, i) => (
{s.light && {s.light}}
{s.lbl}
{s.desc}
))}
); // --- Expertise --- const Expertise = ({ t }) => (
{t.expertise.label} Stack & Vendors

{t.expertise.title}

{t.expertise.body}

{t.expertise.vendors.map((v, i) => {v})}
); // --- Planning --- const Planning = ({ t }) => (
{t.planning.label} 5-stage flow

{t.planning.title}

{t.planning.body}

{t.planning.steps.map((s, i) => (
{s.num} / 05
{s.title}
{s.desc}
))}
); // --- Work gallery --- const Work = ({ t }) => { const layouts = [ { src: 'site/assets/work-01.jpg', cls: 's-5-3' }, { src: 'site/assets/work-02.jpg', cls: 's-4-3' }, { src: 'site/assets/work-08.jpg', cls: 's-3-3' }, { src: 'site/assets/work-03.jpg', cls: 's-3-2' }, { src: 'site/assets/work-05.jpg', cls: 's-4-2' }, { src: 'site/assets/work-04.jpg', cls: 's-3-2' }, { src: 'site/assets/work-06.jpg', cls: 's-6-2' }, { src: 'site/assets/work-07.jpg', cls: 's-6-2' }, ]; return (
{t.work.label} Selected · 29 programs total

{t.work.title}

{t.work.sub}

{layouts.map((l, i) => (
{t.work.tags[i]} {String(i + 1).padStart(2, '0')} · {t.work.tags[i]}
))}
); }; // --- Why Us --- const Why = ({ t }) => (
{t.why.label} Reasons / 08

{t.why.title}

{t.why.items.map((it, i) => (
{it.ttl}
{it.desc}
))}
); // --- Contact --- const Contact = ({ t }) => (
{t.contact.label}

{t.contact.title}

{t.contact.sub}

{t.contact.cta}
Email {t.contact.email}
Phone {t.contact.phones.map((p, i) => ( {p} ))}
); // --- Footer --- const Footer = ({ t }) => ( ); // Expose Object.assign(window, { Logo, Nav, Hero, Ticker, About, Services, Numbers, Expertise, Planning, Work, Why, Contact, Footer, useReveal, });