// v4-components.jsx — Awesomic-skinned design system for 9mith Advisory
// Cosmica type (weight-driven hierarchy), Mist/Snow/Aubergine surfaces,
// maximum roundness (36px cards, pill buttons), flat surfaces — no drop shadows.

const { useState, useEffect, useRef } = React;

// Palette (Awesomic tokens)
const C = {
  aubergine: '#421d24', aubergineDeep: '#4e242c',
  graphite: '#3f3f46', slate: '#52525b', steel: '#71717a', ash: '#a1a1aa',
  pebble: '#d4d4d8', fog: '#ececee', mist: '#f4f4f5', snow: '#ffffff',
  gold: '#c2a05a', // subtle gold — logo "g" only
  onDark: 'rgba(255,255,255,0.92)', onDarkMuted: 'rgba(255,255,255,0.66)',
};

// ── Scroll visibility hook ────────────────────────────────────────────────────
function useVisible() {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const timer = setTimeout(() => setVis(true), 800);
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); clearTimeout(timer); io.disconnect(); }
    }, { threshold: 0, rootMargin: '0px 0px 80px 0px' });
    io.observe(el);
    return () => { clearTimeout(timer); io.disconnect(); };
  }, []);
  return [ref, vis];
}

// ── Fade-in wrapper (Awesomic overshoot spring) ───────────────────────────────
function FadeIn({ children, delay = 0, style: s, className }) {
  const [ref, vis] = useVisible();
  return (
    <div ref={ref} className={className} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? 'translateY(0)' : 'translateY(14px)',
      transition: `opacity 420ms ease ${delay}ms, transform 480ms cubic-bezier(0.175,0.885,0.32,1.275) ${delay}ms`,
      ...s
    }}>{children}</div>
  );
}

// ── CountUp ───────────────────────────────────────────────────────────────────
function CountUp({ to, startFrom = 0, suffix = '', prefix = '', duration = 1000, style: s, className }) {
  const [val, setVal] = useState(startFrom);
  const [triggered, setTriggered] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setTriggered(true); io.disconnect(); }
    }, { threshold: 0.5 });
    io.observe(el); return () => io.disconnect();
  }, []);
  useEffect(() => {
    if (!triggered) return;
    const t0 = Date.now();
    const tick = () => {
      const p = Math.min((Date.now() - t0) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(startFrom + (to - startFrom) * ease));
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [triggered]);
  return <span ref={ref} className={className} style={s}>{prefix}{val.toLocaleString()}{suffix}</span>;
}

// ── Logo ──────────────────────────────────────────────────────────────────────
// "g" set in Giaza — subtle gold; "mith" in aubergine (light bg) / snow (dark bg).
function Logo({ dark = false, compact = false, onClick }) {
  const gs = compact ? 30 : 46;
  const ms = compact ? 17 : 26;
  const mithColor = dark ? C.mist : C.aubergine;
  return (
    <button onClick={onClick} aria-label="9mith Advisory home" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'inline-flex', alignItems: 'baseline', userSelect: 'none' }}>
      <span style={{ fontFamily: "'Giaza',Georgia,serif", fontSize: gs, color: C.gold, lineHeight: 1, letterSpacing: '-0.5px', textShadow: dark ? '0 0 1px rgba(255,255,255,0.3)' : 'none' }}>g</span>
      <span style={{ fontFamily: "'Giaza',Georgia,serif", fontSize: ms, color: mithColor, lineHeight: 1, letterSpacing: '-0.3px' }}>mith</span>
    </button>
  );
}

// ── Eyebrow label (quiet, sentence case, with short rule) ─────────────────────
function Eyebrow({ label, dark = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
      <span style={{ width: 24, height: 2, borderRadius: 2, background: dark ? 'rgba(255,255,255,0.4)' : C.pebble }}/>
      <span style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 600, fontSize: 13, color: dark ? C.onDarkMuted : C.steel, letterSpacing: '0.01em' }}>{label}</span>
    </div>
  );
}

// ── Typography ────────────────────────────────────────────────────────────────
// Display headline / pull quote. Use <strong> inside children for weight contrast.
function PullQuote({ children, size = 36, dark = false, center = false, maxWidth = 780, muted = false, italic = false }) {
  const color = muted ? (dark ? C.onDarkMuted : C.steel) : (dark ? C.snow : C.aubergine);
  return (
    <p style={{ fontFamily: 'var(--font-cosmica)', fontSize: size, fontWeight: 400, color, lineHeight: size > 30 ? 1.1 : 1.28, maxWidth, margin: center ? '0 auto' : 0, textAlign: center ? 'center' : 'left', textWrap: 'pretty', letterSpacing: '-0.01em' }}>{children}</p>
  );
}

function Body({ children, size = 16, color, dark = false, maxWidth, style: s, italic = false }) {
  const c = color || (dark ? C.onDarkMuted : C.slate);
  return <p style={{ fontFamily: 'var(--font-cosmica)', fontSize: size, color: c, lineHeight: 1.6, fontWeight: 400, maxWidth, textWrap: 'pretty', ...s }}>{children}</p>;
}

function Caption({ children, dark = false }) {
  return <span style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 600, fontSize: 12, color: dark ? C.onDarkMuted : C.steel, letterSpacing: '0.01em' }}>{children}</span>;
}

function Hairline({ style: s, dark = false }) {
  return <div style={{ height: 1, background: dark ? 'rgba(255,255,255,0.16)' : C.pebble, ...s }}/>;
}

// ── Stat (Awesomic bare-numeral style) ────────────────────────────────────────
function StatAnnotation({ number, suffix = '', prefix = '', label, dark = false, countFrom }) {
  const borderC = dark ? 'rgba(255,255,255,0.14)' : C.pebble;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, padding: '20px 0', borderBottom: `1px solid ${borderC}` }}>
      <div style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 500, fontSize: 38, color: dark ? C.snow : C.aubergine, lineHeight: 1, minWidth: 110, letterSpacing: '-0.02em' }}>
        {countFrom !== undefined
          ? <CountUp to={number} startFrom={countFrom} suffix={suffix} prefix={prefix} duration={1000}/>
          : <>{prefix}{number}{suffix}</>}
      </div>
      <div style={{ fontFamily: 'var(--font-cosmica)', fontSize: 14, color: dark ? C.onDarkMuted : C.steel, lineHeight: 1.45, flex: 1 }}>{label}</div>
    </div>
  );
}

// ── Primary CTA — aubergine pill, pressed-glass shadow ────────────────────────
function CTAButton({ children, onClick, variant = 'primary' }) {
  const [press, setPress] = useState(false);
  const primary = variant === 'primary';
  return (
    <button onClick={onClick}
      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} onMouseLeave={() => setPress(false)}
      style={{
        fontFamily: 'var(--font-cosmica)', fontWeight: 500, fontSize: 15, cursor: 'pointer',
        padding: '14px 28px', borderRadius: 'var(--radius-pill)', lineHeight: 1,
        transform: press ? 'scale(0.97)' : 'scale(1)', transition: 'transform .2s cubic-bezier(.175,.885,.32,1.275)',
        background: primary ? C.aubergine : C.snow,
        color: primary ? C.snow : C.aubergine,
        border: primary ? 'none' : `1px solid ${C.aubergine}`,
        boxShadow: primary ? 'var(--shadow-button-primary)' : 'none',
      }}>
      {children}
    </button>
  );
}

// ── Text link with arrow (strong affordance via weight + arrow) ──────────────
function GoldLink({ children, onClick, dark = false, style: s }) {
  const [hov, setHov] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: 'none', border: 'none', cursor: 'pointer', color: dark ? C.snow : C.aubergine, fontFamily: 'var(--font-cosmica)', fontSize: 15, fontWeight: 600, padding: 0, display: 'inline-flex', alignItems: 'center', gap: 6, opacity: hov ? 0.62 : 1, transition: 'opacity 200ms, gap 200ms', ...s }}>
      <span style={{ borderBottom: `1.5px solid currentColor`, paddingBottom: 1 }}>{children.replace ? children.replace(/\s*→$/, '') : children}</span>
      <span style={{ transform: hov ? 'translateX(3px)' : 'translateX(0)', transition: 'transform 200ms' }}>→</span>
    </button>
  );
}

// ── Page section hero ─────────────────────────────────────────────────────────
function SectionHero({ label, headline, sub, dark = true, size = 46 }) {
  return (
    <section style={{ background: dark ? C.aubergine : C.mist, padding: '150px 0 90px', position: 'relative', overflow: 'hidden' }}>
      {dark && <div style={{ fontFamily: "'Giaza',Georgia,serif", fontSize: 440, color: C.gold, opacity: 0.1, position: 'absolute', right: '3%', bottom: '-80px', lineHeight: 1, userSelect: 'none', pointerEvents: 'none' }}>g</div>}
      <div className="v4-wrap" style={{ position: 'relative', zIndex: 1 }}>
        {label && <FadeIn><Eyebrow label={label} dark={dark}/></FadeIn>}
        <FadeIn delay={80}><PullQuote size={size} dark={dark} maxWidth={780}>{headline}</PullQuote></FadeIn>
        {sub && <FadeIn delay={160}><p style={{ fontFamily: 'var(--font-cosmica)', fontSize: 18, color: dark ? C.onDarkMuted : C.steel, marginTop: 24, maxWidth: 620, lineHeight: 1.55 }}>{sub}</p></FadeIn>}
      </div>
    </section>
  );
}

// ── Sector card — Snow card, 36px radius, color dot marker ────────────────────
function SectorCard({ name, color, metric, count }) {
  const [hov, setHov] = useState(false);
  return (
    <div style={{ background: C.snow, padding: '32px 28px', borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-inset-bottom)', transform: hov ? 'translateY(-4px)' : 'translateY(0)', transition: 'transform 240ms cubic-bezier(.175,.885,.32,1.275)', cursor: 'default' }}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: color, flexShrink: 0 }}/>
        <span style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 600, fontSize: 15, color: C.aubergine }}>{name}</span>
      </div>
      <p style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 500, fontSize: 24, color: C.aubergine, marginBottom: 8, letterSpacing: '-0.02em' }}>{metric}</p>
      <p style={{ fontFamily: 'var(--font-cosmica)', fontSize: 13, color: C.steel, marginBottom: 14 }}>{count}</p>

    </div>
  );
}

// ── Issue tree — rounded fog boxes, pebble connectors ─────────────────────────
function IssueTree({ root, branches }) {
  return (
    <div style={{ padding: '8px 0' }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 0 }}>
        <div style={{ background: C.aubergine, padding: '14px 30px', borderRadius: 'var(--radius-button)' }}>
          <p style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 500, fontSize: 16, color: C.snow }}>{root}</p>
        </div>
      </div>
      <div style={{ width: 1, height: 26, background: C.pebble, margin: '0 auto' }}/>
      <div style={{ height: 1, background: C.pebble, margin: '0 16%' }}/>
      <div className="v4-tree-branches">
        {branches.map((b, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ width: 1, height: 26, background: C.pebble }}/>
            <div style={{ background: C.fog, padding: '24px', width: '100%', borderRadius: 'var(--radius-card-compact)' }}>
              <p style={{ fontFamily: 'var(--font-cosmica)', fontWeight: 600, fontSize: 15, color: C.aubergine, marginBottom: 10 }}>{b.label}</p>
              <Body size={14} color={C.steel}>{b.body}</Body>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.AdvC = C;
Object.assign(window, {
  useVisible, FadeIn, CountUp, Logo, Eyebrow, PullQuote, Body, Caption, Hairline,
  StatAnnotation, CTAButton, GoldLink, SectionHero, SectorCard, IssueTree
});