/* Shared primitives for ZenTag landing */

const { useEffect, useRef, useState, useMemo, useCallback } = React;

// ----- Reveal-on-scroll hook -----
function useReveal(opts = {}) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.classList.add('in');
          io.unobserve(el);
        }
      });
    }, { threshold: opts.threshold ?? 0.12, rootMargin: opts.rootMargin ?? '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ----- Reveal wrapper -----
function Reveal({ as = 'div', delay = 0, className = '', children, ...rest }) {
  const ref = useReveal();
  const Tag = as;
  const delayClass = delay ? `reveal-delay-${delay}` : '';
  return (
    <Tag ref={ref} className={`reveal ${delayClass} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

// ----- Section header -----
function Eyebrow({ children, className = '' }) {
  return (
    <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11px] uppercase tracking-[0.18em] font-mono text-fog-300 glass ${className}`}>
      <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)', boxShadow: '0 0 8px var(--accent-glow)' }} />
      {children}
    </div>
  );
}

function SectionTitle({ eyebrow, title, sub, align = 'left', children }) {
  const alignCls = align === 'center' ? 'text-center items-center mx-auto' : 'text-left items-start';
  return (
    <div className={`flex flex-col gap-5 max-w-3xl ${alignCls}`}>
      {eyebrow && <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>}
      <Reveal delay={1}>
        <h2 className="display text-[clamp(34px,5.4vw,64px)] text-gradient">{title}</h2>
      </Reveal>
      {sub && (
        <Reveal delay={2}>
          <p className="text-[clamp(16px,1.4vw,19px)] text-fog-300 leading-relaxed max-w-2xl">{sub}</p>
        </Reveal>
      )}
      {children}
    </div>
  );
}

// ----- Buttons -----
function PrimaryBtn({ children, icon, className = '', href, ...rest }) {
  const inner = (
    <>
      {children}
      {icon !== false && (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      )}
    </>
  );
  if (href) {
    return <a href={href} className={`btn-primary inline-flex items-center gap-2 ${className}`} {...rest}>{inner}</a>;
  }
  return <button className={`btn-primary inline-flex items-center gap-2 ${className}`} {...rest}>{inner}</button>;
}

function GhostBtn({ children, className = '', href, ...rest }) {
  if (href) {
    return <a href={href} className={`btn-ghost inline-flex items-center gap-2 ${className}`} {...rest}>{children}</a>;
  }
  return <button className={`btn-ghost inline-flex items-center gap-2 ${className}`} {...rest}>{children}</button>;
}

// ----- Aurora background -----
function Aurora({ intensity = 1 }) {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div
        className="aurora floatY"
        style={{
          top: '-10%', left: '-10%', width: '60vw', height: '60vw',
          background: 'radial-gradient(circle, var(--accent) 0%, transparent 60%)',
          opacity: 0.35 * intensity,
        }}
      />
      <div
        className="aurora"
        style={{
          top: '20%', right: '-15%', width: '50vw', height: '50vw',
          background: 'radial-gradient(circle, #4f7cff 0%, transparent 60%)',
          opacity: 0.18 * intensity,
          animation: 'floatY 9s ease-in-out infinite reverse',
        }}
      />
      <div
        className="aurora"
        style={{
          bottom: '-20%', left: '20%', width: '70vw', height: '70vw',
          background: 'radial-gradient(circle, var(--accent-2) 0%, transparent 65%)',
          opacity: 0.22 * intensity,
          animation: 'floatY 11s ease-in-out infinite',
        }}
      />
    </div>
  );
}

// ----- Icons (inline, minimal) -----
const Icon = {
  Instagram: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/></svg>),
  LinkedIn: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.4 0h4.37v1.92h.06c.61-1.16 2.1-2.38 4.32-2.38 4.62 0 5.47 3.04 5.47 7v7.46h-4.55v-6.62c0-1.58-.03-3.6-2.2-3.6-2.2 0-2.54 1.72-2.54 3.48V22H7.62V8z"/></svg>),
  Twitter: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M18.244 2H21.5l-7.5 8.57L23 22h-6.844l-5.36-7.02L4.5 22H1.244l8.04-9.18L1 2h7.013l4.844 6.4L18.244 2zm-1.2 18h1.9L7.07 4H5.07l11.974 16z"/></svg>),
  TikTok: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M19.6 6.6a4.7 4.7 0 0 1-4.7-4.6h-3.4v13.7a2.9 2.9 0 1 1-2.9-2.9c.3 0 .6 0 .9.1V9.4a6.2 6.2 0 1 0 5.4 6.2V8.5a8 8 0 0 0 4.7 1.5V6.6z"/></svg>),
  WhatsApp: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M20.5 3.5A10 10 0 0 0 3.6 17L2 22l5.2-1.4A10 10 0 1 0 20.5 3.5zM12 20a8 8 0 0 1-4.1-1.1l-.3-.2-3.1.8.8-3-.2-.3a8 8 0 1 1 6.9 3.8zm4.5-6c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1c-.2.3-.6.8-.8 1-.1.2-.3.2-.5.1a6.5 6.5 0 0 1-3.3-2.9c-.2-.4.2-.4.6-1.2.1-.2 0-.3 0-.5l-.7-1.8c-.2-.5-.4-.4-.5-.4h-.4c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.3 5.2 4.6 1.9.8 2.6.9 3.6.7.6-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1-.1-.2-.3-.2-.5-.3z"/></svg>),
  Facebook: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z"/></svg>),
  YouTube: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M23 12s0-3.6-.5-5.3a2.8 2.8 0 0 0-2-2C18.8 4.2 12 4.2 12 4.2s-6.8 0-8.5.5a2.8 2.8 0 0 0-2 2C1 8.4 1 12 1 12s0 3.6.5 5.3a2.8 2.8 0 0 0 2 2c1.7.5 8.5.5 8.5.5s6.8 0 8.5-.5a2.8 2.8 0 0 0 2-2c.5-1.7.5-5.3.5-5.3zm-13.4 3.4V8.6L15.3 12l-5.7 3.4z"/></svg>),
  NFC: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}><path d="M4 10c4-4 12-4 16 0M7 13c2.5-2.5 7.5-2.5 10 0M10 16c1-1 3-1 4 0"/></svg>),
  QR: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM18 18h3v3h-3z" fill="currentColor"/></svg>),
  Spark: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>),
  Check: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12l5 5L20 7"/></svg>),
  Arrow: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>),
  Leaf: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 3c-9 0-15 6-15 14 0 1 0 2 1 4M21 3c0 9-6 15-14 15"/></svg>),
  Wallet: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M16 13h2" strokeLinecap="round"/><path d="M3 10h18"/></svg>),
  Users: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.3 3.1-6 7-6s7 2.7 7 6"/><circle cx="17" cy="9" r="2.5"/><path d="M22 19c0-2.5-2.2-4.5-5-4.5"/></svg>),
  Chart: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>),
  Calendar: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4" strokeLinecap="round"/></svg>),
  Video: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>),
  Link: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>),
  Cloud: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M7 18a5 5 0 1 1 1-9.9A6 6 0 0 1 19 9a4 4 0 0 1 0 8z"/></svg>),
  AI: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6zM19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/></svg>),
  Resume: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 8h6M9 12h6M9 16h4" strokeLinecap="round"/></svg>),
  Phone: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2" strokeLinecap="round"/></svg>),
  Sync: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 12a8 8 0 0 1-13.7 5.6M4 12A8 8 0 0 1 17.7 6.4M20 4v4h-4M4 20v-4h4"/></svg>),
  Globe: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 3 4 6 4 9s-1.5 6-4 9c-2.5-3-4-6-4-9s1.5-6 4-9z"/></svg>),
  Lead: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg>),
};

// ----- Social row -----
const SocialList = [
  { name: 'Instagram', Comp: Icon.Instagram, color: '#E1306C' },
  { name: 'LinkedIn', Comp: Icon.LinkedIn, color: '#0A66C2' },
  { name: 'TikTok', Comp: Icon.TikTok, color: '#fff' },
  { name: 'X', Comp: Icon.Twitter, color: '#fff' },
  { name: 'WhatsApp', Comp: Icon.WhatsApp, color: '#25D366' },
  { name: 'Facebook', Comp: Icon.Facebook, color: '#1877F2' },
  { name: 'YouTube', Comp: Icon.YouTube, color: '#FF0033' },
];

Object.assign(window, {
  useReveal, Reveal, Eyebrow, SectionTitle,
  PrimaryBtn, GhostBtn, Aurora, Icon, SocialList,
});
