/* Ava Solutions — components (v1 yellow restored + correct 4-dot logo) */
const { useEffect, useRef } = React;

/* ---------- Logo: uses the uploaded brand SVG (avasol_logo.svg), inlined via
   window.__AVASOL_LOGO__ so it inherits `currentColor` for light/dark variants. */
function Logo({ onDark = false, size = 28, style = {} }) {
  const data = (typeof window !== 'undefined' && window.__AVASOL_LOGO__) || null;
  if (!data) return <span style={{ display:'inline-block', height:size }} aria-label="Ava Solutions" />;
  // Native viewBox is 0 0 1907 793 → aspect ~2.405. Size prop = rendered height.
  const width = Math.round(size * (1907 / 793));
  // onDark forces cream inline; default leaves color to CSS cascade so
  // parent containers (e.g. .ticker.scrolled) can recolor via currentColor.
  const colorStyle = onDark ? { color: 'var(--cream)' } : {};
  return (
    <svg
      viewBox={data.viewBox}
      height={size}
      width={width}
      fill="currentColor"
      style={{ display:'inline-block', verticalAlign:'middle', ...colorStyle, ...style }}
      aria-label="Ava Solutions"
      dangerouslySetInnerHTML={{ __html: data.inner }}
    />
  );
}
/* Back-compat: LogoMark now just renders the integrated Logo at the requested size */
const LogoMark = Logo;

/* Sphere */
function Sphere({ variant = 'yellow', size = 240, style = {}, marble, parallax = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!parallax) return;
    let raf;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        if (!ref.current) return;
        const rect = ref.current.getBoundingClientRect();
        const vh = window.innerHeight;
        const progress = (rect.top + rect.height/2 - vh/2) / vh;
        ref.current.style.setProperty('--py', `${-progress * parallax * 40}px`);
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [parallax]);

  const marbleSize = marble?.size ?? size * 0.34;
  return (
    <div ref={ref} className={`sphere sphere--${variant}`}
      style={{ width:size, height:size, ...style, transform:`${style.transform||''} translateY(var(--py,0px))` }}>
      {marble && <span className="marble" style={{ width:marbleSize, height:marbleSize, left: marble.x ?? '22%', top: marble.y ?? '58%' }} />}
    </div>
  );
}

/* Top ticker */
function TopTicker({ active = 1 }) {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => { if (!ref.current) return; ref.current.classList.toggle('scrolled', window.scrollY > 40); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const slogans = [
    'ENJOY YOUR LIFE WITH A SOLUTION','НАСОЛОДЖУЙТЕСЬ ЖИТТЯМ З РІШЕННЯМ','ソリューションで人生を楽しもう',
    'DISFRUTA LA VIDA CON UNA SOLUCIÓN','솔루션과 함께 인생을 즐기세요','PROFITEZ DE LA VIE AVEC UNE SOLUTION',
    'GENIESSE DAS LEBEN MIT EINER LÖSUNG','VIVI LA VITA CON UNA SOLUZIONE',
  ];
  const track = [...slogans, ...slogans];
  return (
    <header className="ticker" ref={ref}>
      <div className="ticker-inner">
        <a href="#top"><Logo size={40} /></a>
        <div className="ticker-marquee">
          <div className="ticker-track">{track.map((s,i)=><span key={i}>{s} ·</span>)}</div>
        </div>
        <nav className="ticker-nav">
          <a href="#top" className={active===1?'active':''}>01</a>
          <a href="#philosophy" className={active===2?'active':''}>02</a>
          <a href="#ecosystem" className={active===3?'active':''}>03</a>
          <a href="#how" className={active===4?'active':''}>04</a>
          <a href="#contact" className={active===5?'active':''}>05</a>
        </nav>
      </div>
    </header>
  );
}

/* Simple fade-in reveal (no motion) */
let __revealCounter = 0;
function Reveal({ children, delay=0, as:Tag='div', className='', style={}, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { el.style.opacity = 1; io.unobserve(el); } }), { threshold:.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <Tag ref={ref} className={className} style={{ opacity:0, transition:`opacity .8s ease ${delay}ms`, ...style }} {...rest}>{children}</Tag>;
}

function CTAButton({ children, variant='dark', href='#contact' }) {
  return (
    <a href={href} className={`btn btn--${variant}`}>
      <span>{children}</span>
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h12M9 3l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/></svg>
    </a>
  );
}

Object.assign(window, { Logo, LogoMark, Sphere, TopTicker, Reveal, CTAButton });