/* ═══════════════════════════════════════════════
   Design System — tokens, animations, shared utils
   ═══════════════════════════════════════════════ */

/* ── Scroll reveal hook ── */
function useReveal(threshold = 0.12) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, vis];
}

/* ── Stagger delay for lists ── */
function stagger(i, base = 60) { return i * base; }

/* ── Animated wrapper ── */
function Reveal({ children, delay = 0, y = 24, style = {}, className = '' }) {
  const [ref, vis] = useReveal();
  return (
    <div ref={ref} className={className} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity 0.7s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.7s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
      ...style,
    }}>
      {children}
    </div>
  );
}

/* ── Section wrapper ── */
function Section({ id, children, bg = '#fff', pad = 'clamp(84px, 10vw, 136px) 0', style = {} }) {
  return (
    <section id={id} style={{ background: bg, padding: pad, ...style }}>
      <div style={{ maxWidth: 1380, margin: '0 auto', padding: '0 clamp(28px, 4.5vw, 64px)' }}>
        {children}
      </div>
    </section>
  );
}

/* ── Section header ── */
function SectionHead({ eyebrow, title, sub, accent = '#2563EB', align = 'center', maxW = 760 }) {
  return (
    <Reveal style={{ textAlign: align, maxWidth: align === 'center' ? maxW : 'none', margin: align === 'center' ? '0 auto 78px' : '0 0 56px' }}>
      {eyebrow && <p style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', color: accent, marginBottom: 16, textTransform: 'uppercase' }}>{eyebrow}</p>}
      <h2 style={{ fontSize: 'clamp(34px, 4vw, 56px)', fontWeight: 760, color: '#0a0a1a', lineHeight: 1.1, letterSpacing: '-0.035em', marginBottom: sub ? 22 : 0, textWrap: 'pretty' }}>{title}</h2>
      {sub && <p style={{ fontSize: 19, lineHeight: 1.68, color: '#5e5e70', fontWeight: 400 }}>{sub}</p>}
    </Reveal>
  );
}

/* ── Card ── */
function FeatureCard({ icon, title, desc, accent = '#2563EB', delay = 0 }) {
  const [hov, setHov] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div
        onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{
          background: '#fff', borderRadius: 22, padding: '38px 32px',
          border: `1px solid ${hov ? accent + '22' : '#f0f0f5'}`,
          boxShadow: hov ? '0 8px 32px rgba(0,0,0,0.07)' : '0 1px 4px rgba(0,0,0,0.03)',
          transform: hov ? 'translateY(-4px)' : 'translateY(0)',
          transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)',
          height: '100%',
        }}
      >
        <div style={{
          width: 54, height: 54, borderRadius: 16, background: `${accent}08`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 24, fontSize: 22, transition: 'background 0.3s',
          ...(hov ? { background: `${accent}13` } : {}),
        }}>{icon}</div>
        <h3 style={{ fontSize: 19, fontWeight: 680, color: '#0a0a1a', marginBottom: 12, letterSpacing: '-0.02em' }}>{title}</h3>
        <p style={{ fontSize: 15.5, lineHeight: 1.72, color: '#6a6a7a' }}>{desc}</p>
      </div>
    </Reveal>
  );
}

/* ── Floating card (hero) ── */
function FloatCard({ children, style = {}, delay = 0, float = true }) {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setVis(true), 300 + delay);
    return () => clearTimeout(t);
  }, [delay]);
  return (
    <div style={{
      background: '#fff', borderRadius: 14, padding: '13px 16px',
      boxShadow: '0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04)',
      fontSize: 13, color: '#1a1a2e', fontWeight: 500,
      position: 'absolute', zIndex: 3,
      opacity: vis ? 1 : 0,
      transform: vis ? 'translateY(0)' : 'translateY(16px)',
      transition: 'all 0.9s cubic-bezier(0.16,1,0.3,1)',
      animation: float && vis ? 'arcFloat 4s ease-in-out infinite' : 'none',
      ...style,
    }}>
      {children}
    </div>
  );
}

/* ── Button ── */
function Btn({ children, href = '#', primary = true, accent = '#2563EB', size = 'md', style = {} }) {
  const [hov, setHov] = React.useState(false);
  const pad = size === 'lg' ? '15px 32px' : size === 'sm' ? '10px 20px' : '13px 28px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 13.5 : 15;
  return (
    <a href={href}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: pad, borderRadius: 12, fontSize: fs, fontWeight: 650,
        textDecoration: 'none', transition: 'all 0.25s cubic-bezier(0.16,1,0.3,1)',
        transform: hov ? 'translateY(-2px)' : 'translateY(0)',
        ...(primary ? {
          background: accent, color: '#fff',
          boxShadow: hov ? `0 10px 28px ${accent}30` : `0 3px 12px ${accent}30`,
        } : {
          background: '#fff', color: '#1a1a2e',
          border: '1.5px solid #e2e2ea',
          boxShadow: hov ? '0 4px 16px rgba(0,0,0,0.07)' : 'none',
        }),
        ...style,
      }}
    >
      {children}
    </a>
  );
}

/* ── Arrow icon ── */
function ArrowRight({ color = '#fff', size = 14 }) {
  return <svg width={size} height={size} viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

/* ── Check icon ── */
function Check({ color = '#2563EB', size = 14 }) {
  return <svg width={size} height={size} viewBox="0 0 14 14"><circle cx="7" cy="7" r="7" fill={color + '10'}/><path d="M4.5 7l2 2L9.5 5.5" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>;
}

window.useReveal = useReveal;
window.stagger = stagger;
window.Reveal = Reveal;
window.Section = Section;
window.SectionHead = SectionHead;
window.FeatureCard = FeatureCard;
window.FloatCard = FloatCard;
window.Btn = Btn;
window.ArrowRight = ArrowRight;
window.Check = Check;