/* primitives.jsx — light theme atomic components */
const { useEffect, useRef, useState, useMemo } = React;

/* ---------- ICONS ---------- */
const ICONS = {
  search: <path d="M21 21l-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" />,
  scale: <g><path d="M12 3v18M5 21h14M7 7l-3 7h6l-3-7zM17 7l-3 7h6l-3-7zM6 3h12" /></g>,
  gavel: <g><path d="M14 13l-7.5 7.5a2.121 2.121 0 1 1-3-3L11 10" /><path d="M16 5l3 3M19 2l3 3M22 5l-7 7M9 12l-3-3" /><path d="M3 21h7" /></g>,
  judge: <g><circle cx="12" cy="7" r="3" /><path d="M5 21v-1a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v1" /><path d="M9 13l3 3 3-3" /></g>,
  chart: <g><path d="M3 3v18h18" /><path d="M7 14l4-4 4 4 5-6" /></g>,
  sparkles: <g><path d="M12 3l1.8 4.4L18 9l-4.2 1.6L12 15l-1.8-4.4L6 9l4.2-1.6L12 3z" /><path d="M19 14l.8 2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-1L19 14z" /></g>,
  shield: <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" />,
  arrow: <g><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></g>,
  arrowUp: <g><path d="M7 17L17 7" /><path d="M9 7h8v8" /></g>,
  check: <path d="M5 12l5 5L20 7" />,
  x: <g><path d="M6 6l12 12" /><path d="M18 6L6 18" /></g>,
  bolt: <path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z" />,
  doc: <g><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M8 13h8M8 17h6" /></g>,
  lock: <g><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></g>,
  globe: <g><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18" /></g>,
  database: <g><ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5" /><path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" /></g>,
  layers: <g><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 12l10 5 10-5M2 17l10 5 10-5" /></g>,
  msgs: <g><path d="M21 11a8 8 0 0 1-8 8H9l-4 3v-3a8 8 0 1 1 16-8z" /></g>,
  pin: <g><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z" /><circle cx="12" cy="9" r="2.5" /></g>,
  history: <g><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" /><path d="M12 7v5l3 2" /></g>,
  chevron: <path d="M9 6l6 6-6 6" />,
  chevronDown: <path d="M6 9l6 6 6-6" />,
  star: <path d="M12 2l3 7 7 .8-5.2 4.8L18 22l-6-3.5L6 22l1.2-7.4L2 9.8 9 9l3-7z" />,
  cpu: <g><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3" /></g>,
  brain: <g><path d="M9 4a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 1 5 3 3 0 0 0 5 2 3 3 0 0 0 4-2 3 3 0 0 0 4-5 3 3 0 0 0-2-5 3 3 0 0 0-3-3 3 3 0 0 0-4 0z" /><path d="M12 4v16" /></g>,
  filter: <g><path d="M3 4h18l-7 8v6l-4 2v-8z" /></g>,
  euro: <g><path d="M18 7a6 6 0 1 0 0 10" /><path d="M4 10h10M4 14h10" /></g>,
  upload: <g><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M17 8l-5-5-5 5" /><path d="M12 3v12" /></g>,
  arrowRight: <g><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></g>,
  warning: <g><path d="M12 9v4M12 17h.01" /><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /></g>,
  info: <g><circle cx="12" cy="12" r="9" /><path d="M12 8v.01M11 12h1v4h1" /></g>,
  hash: <g><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" /></g>,
  paperclip: <path d="m21 12-9 9a5 5 0 0 1-7-7l9-9a3 3 0 1 1 4 4l-9 9a1 1 0 1 1-1-1l8-8" />,
  refresh: <g><path d="M21 12a9 9 0 1 1-3-6.7" /><path d="M21 3v6h-6" /></g>,
};

function Icon({ name, className = "w-5 h-5", stroke = 1.6 }) {
  const path = ICONS[name];
  if (!path) return null;
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke}
         strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
      {path}
    </svg>
  );
}

function GoogleGlyph({ className = "w-5 h-5" }) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
    </svg>
  );
}

/* ---------- Aurora (light · 4 radial blobs) ---------- */
function Aurora({ mask = "", className = "", strength = "medium" }) {
  const cls =
    strength === 'strong' ? 'aurora-strong'
    : strength === 'soft' ? 'aurora-soft'
    : 'aurora-medium';
  const maskCls = mask ? `mask-${mask}` : '';
  return (
    <div className={`aurora-wrap ${cls} ${maskCls} ${className}`} aria-hidden="true">
      <div className="aurora-blob b1" />
      <div className="aurora-blob b2" />
      <div className="aurora-blob b3" />
      <div className="aurora-blob b4" />
    </div>
  );
}

/* ---------- Flourish — serif italic phrase with hand-drawn underline ---------- */
function Flourish({ children, className = "" }) {
  const [ref, shown] = useReveal(0.2);
  return (
    <span ref={ref} className={`flourish ${shown ? 'show' : ''} ${className}`}>
      {children}
      <svg className="flourish-line" viewBox="0 0 200 8" preserveAspectRatio="none" aria-hidden="true">
        <path d="M2 5 Q 30 1, 60 4 T 120 4 T 198 3"
              strokeWidth="1.4" strokeLinecap="round" />
      </svg>
    </span>
  );
}

/* ---------- StaggerGroup wrapper ---------- */
function StaggerGroup({ children, className = "", threshold = 0.15 }) {
  const [ref, shown] = useReveal(threshold);
  return (
    <div ref={ref} className={`stagger-enter ${shown ? 'in' : ''} ${className}`}>
      {children}
    </div>
  );
}

/* ---------- Logo (ink monogram, no period) ---------- */
function Logo({ size = 28, className = "", dark = false }) {
  const dot = Math.max(3, Math.round(size * 0.12));
  return (
    <div className={`inline-flex items-center gap-2.5 ${className}`}>
      <div className="relative shrink-0" style={{ width: size, height: size }}>
        <div className="absolute inset-0 rounded-[8px]"
             style={{ background: dark ? '#fff' : '#0F0F15',
                      boxShadow: dark ? '0 1px 0 rgba(0,0,0,.08) inset' : '0 1px 0 rgba(255,255,255,.14) inset, 0 6px 16px -9px rgba(11,11,18,.55)' }} />
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="font-serif italic relative -mt-[1px]"
                style={{ fontSize: Math.round(size * 0.66), lineHeight: 1, letterSpacing: '-0.02em', color: dark ? '#0F0F15' : '#fff' }}>M</span>
        </div>
        <span className="absolute rounded-full bg-violet2-500"
              style={{ width: dot, height: dot, right: '15%', bottom: '17%' }} />
      </div>
      <span className={`text-[18px] font-semibold ${dark ? 'text-white' : 'text-ink-900'}`} style={{ letterSpacing: '-0.015em' }}>Mentaly</span>
    </div>
  );
}

/* ---------- Badge ---------- */
function Eyebrow({ children, className = "", tone = "violet" }) {
  const toneMap = {
    violet:  'text-violet2-600',
    indigo:  'text-indigo2-600',
    ink:     'text-ink-500',
    emerald: 'text-emerald-600',
  };
  return (
    <div className={`inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.22em] font-semibold ${toneMap[tone]} ${className}`}>
      <span className="h-px w-6 bg-current opacity-60" />
      {children}
    </div>
  );
}

function Pill({ children, className = "", icon }) {
  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11.5px] ${className}`}>
      {icon}
      {children}
    </span>
  );
}

/* ---------- Section ---------- */
function Section({ id, eyebrow, title, kicker, screen, children, className = "", dense = false, center = false }) {
  return (
    <section id={id} data-screen-label={screen}
      className={`relative ${dense ? 'py-12 md:py-16' : 'py-16 md:py-24'} ${className}`}>
      <div className="max-w-7xl mx-auto px-6 md:px-10">
        {(eyebrow || title) && (
          <div className={`${center ? 'mx-auto text-center' : ''} max-w-3xl mb-10 md:mb-12`}>
            {eyebrow && <Eyebrow className="mb-4">{eyebrow}</Eyebrow>}
            {title && (
              <h2 className="display text-[40px] sm:text-[52px] md:text-[64px] leading-[1.02] text-ink-900">
                {title}
              </h2>
            )}
            {kicker && (
              <p className="mt-5 text-[16.5px] text-ink-500 max-w-2xl leading-relaxed">{kicker}</p>
            )}
          </div>
        )}
        {children}
      </div>
    </section>
  );
}

/* ---------- useReveal ---------- */
function useReveal(threshold = 0.15) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, shown];
}

/* ---------- Buttons ---------- */
function PrimaryButton({ children, onClick, icon, size = 'md', className = '' }) {
  const sz = size === 'lg' ? 'px-7 py-4 text-[15px]' : size === 'sm' ? 'px-3.5 py-2 text-[13px]' : 'px-5 py-3 text-[14px]';
  return (
    <button onClick={onClick} className={`btn-ink inline-flex items-center justify-center gap-2 rounded-full font-medium transition-all focus-ring ${sz} ${className}`}>
      {children}
      {icon}
    </button>
  );
}
function GhostButton({ children, onClick, icon, size = 'md', className = '' }) {
  const sz = size === 'lg' ? 'px-7 py-4 text-[15px]' : size === 'sm' ? 'px-3.5 py-2 text-[13px]' : 'px-5 py-3 text-[14px]';
  return (
    <button onClick={onClick} className={`inline-flex items-center justify-center gap-2 rounded-full font-medium border border-ink-200/80 text-ink-700 bg-white hover:bg-paper-100 transition-all focus-ring ${sz} ${className}`}>
      {children}
      {icon}
    </button>
  );
}
function LightButton({ children, onClick, icon, size = 'md', className = '' }) {
  const sz = size === 'lg' ? 'px-7 py-4 text-[15px]' : size === 'sm' ? 'px-3.5 py-2 text-[13px]' : 'px-5 py-3 text-[14px]';
  return (
    <button onClick={onClick} className={`btn-light inline-flex items-center justify-center gap-2 rounded-full font-medium transition-all focus-ring ${sz} ${className}`}>
      {children}
      {icon}
    </button>
  );
}

/* ---------- AnswerBody ---------- */
function inlineMd(s) {
  return s
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    .replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>');
}
function parseLite(text) {
  if (!text) return [];
  const lines = text.split(/\n/);
  const out = [];
  let buf = [];
  let bullets = null;
  const flushPara = () => { if (buf.length) { out.push({ type: 'p', html: inlineMd(buf.join(' ')) }); buf = []; } };
  const flushList = () => { if (bullets) { out.push({ type: 'ul', items: bullets.map(inlineMd) }); bullets = null; } };
  for (const raw of lines) {
    const line = raw.trim();
    if (!line) { flushPara(); flushList(); continue; }
    if (/^([•\-*])\s+/.test(line)) {
      flushPara();
      bullets = bullets || [];
      bullets.push(line.replace(/^([•\-*])\s+/, ''));
    } else {
      flushList();
      buf.push(line);
    }
  }
  flushPara(); flushList();
  return out;
}
function AnswerBody({ text }) {
  const blocks = useMemo(() => parseLite(text), [text]);
  return (
    <div className="answer-body text-[15px] leading-relaxed">
      {blocks.map((b, i) => {
        if (b.type === 'ul') return <ul key={i}>{b.items.map((it,j)=><li key={j} dangerouslySetInnerHTML={{__html: it}} />)}</ul>;
        return <p key={i} dangerouslySetInnerHTML={{__html: b.html}} />;
      })}
    </div>
  );
}

function Dots() { return <span className="dots inline-flex items-center"><span/><span/><span/></span>; }

Object.assign(window, {
  Icon, GoogleGlyph, Aurora, Logo, Eyebrow, Pill, Section, useReveal,
  PrimaryButton, GhostButton, LightButton, AnswerBody, Dots, inlineMd, parseLite,
  Flourish, StaggerGroup,
});
