/* global React */
const { useState, useEffect, useRef } = React;
// ---------- Mir Consulting mark (real logo) ----------
function MirMark({ size = 30 }) {
return (
);
}
// ---------- Logo (Mir Consulting) ----------
function Logo({ size = 30, sub = true }) {
return (
Mir Consulting
{sub && APPLIED AI}
);
}
// ---------- CTA button ----------
function CTAButton({ children, size='lg', variant='primary', icon=true, onClick, href, style={} }) {
const variants = {
primary: {
background: 'linear-gradient(90deg, #EF8D88, #E07B74)',
color: '#0D2B52',
border: '1px solid transparent',
boxShadow: '0 10px 25px -8px rgba(239,141,136,0.4), inset 0 1px 0 rgba(255,255,255,0.25)',
},
outline: {
background: 'transparent',
color: 'var(--cothon-cream)',
border: '1px solid var(--cothon-navy-border)',
},
ghost: {
background: 'transparent',
color: 'var(--cothon-cream)',
border: '1px solid transparent',
},
};
const sizes = {
sm: { height:36, padding:'0 14px', fontSize:13, borderRadius:8 },
md: { height:44, padding:'0 20px', fontSize:14, borderRadius:10 },
lg: { height:54, padding:'0 26px', fontSize:15, borderRadius:12 },
};
const As = href ? 'a' : 'button';
return (
{ e.currentTarget.style.transform='translateY(-1px)'; e.currentTarget.style.filter='brightness(1.06)'; }}
onMouseLeave={e => { e.currentTarget.style.transform=''; e.currentTarget.style.filter=''; }}>
{children}
{icon && }
);
}
// ---------- Tiny inline SVG icons (Lucide-style, 1.5 stroke) ----------
function Stroke({ children, size=16, color='currentColor', extra={} }) {
return (
);
}
const Arrow = (p) => ;
const ArrowUR = (p) => ;
const Check = (p) => ;
const CheckCirc = (p) => ;
const Clock = (p) => ;
const Alert = (p) => ;
const XCirc = (p) => ;
const Sparkle = (p) => ;
const Search = (p) => ;
const Bell = (p) => ;
const Globe = (p) => ;
const Trend = (p) => ;
const Dollar = (p) => ;
const Bldg = (p) => ;
const Shield = (p) => ;
const Target = (p) => ;
const Users = (p) => ;
const Brain = (p) => ;
const FileText = (p) => ;
const Lock = (p) => ;
const Pin = (p) => ;
const Minus = (p) => ;
const Plus = (p) => ;
const Layers = (p) => ;
const Zap = (p) => ;
const MessageSq = (p) => ;
const Workflow = (p) => ;
const Cpu = (p) => ;
// ---------- Section wrapper ----------
function Section({ children, id, dividerTop=true, py='var(--s-24)', maxWidth=1240, style={} }) {
return (
);
}
// ---------- Micro label / eyebrow ----------
function Eyebrow({ children, color='var(--cothon-sand)', mark }) {
return (
{mark && }
{children}
);
}
// ---------- Hairline status pill ----------
function StatusPill({ children, color='var(--cothon-mint)' }) {
return (
{children}
);
}
// ---------- Gradient text ----------
function Gradient({ children, from='#EF8D88', to='#D68A59', style={} }) {
return (
{children}
);
}
// ---------- Scroll-reveal hook + wrapper ----------
function useInView(opts = {}) {
const ref = React.useRef(null);
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
if (!ref.current || seen) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) { setSeen(true); io.disconnect(); }
});
}, { threshold: 0.12, rootMargin: '-40px 0px', ...opts });
io.observe(ref.current);
return () => io.disconnect();
}, []);
return [ref, seen];
}
function Reveal({ children, delay = 0, y = 24, duration = 700, as: As = 'div', style = {}, ...rest }) {
const [ref, seen] = useInView();
return (
{children}
);
}
// ---------- CountUp ----------
function CountUp({ to = 100, duration = 1500, prefix = '', suffix = '', format = (v) => Math.round(v).toLocaleString(), trigger = true }) {
const [v, setV] = React.useState(0);
React.useEffect(() => {
if (!trigger) return;
let raf;
const start = performance.now();
const step = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(eased * to);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [to, duration, trigger]);
return {prefix}{format(v)}{suffix};
}
Object.assign(window, {
Logo, MirMark, CTAButton, Section, Eyebrow, StatusPill, Gradient,
Arrow, ArrowUR, Check, CheckCirc, Clock, Alert, XCirc, Sparkle,
Search, Bell, Globe, Trend, Dollar, Bldg, Shield, Target, Users, Brain,
FileText, Lock, Pin, Minus, Plus, Layers, Zap, MessageSq, Workflow, Cpu,
Reveal, CountUp, useInView
});