// Shared primitives — Nav, Rule, Sig, AstroMark

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [route, setRoute] = React.useState(window.location.hash || '#/');
  React.useEffect(()=>{
    const on = () => setScrolled(window.scrollY > 40);
    on(); window.addEventListener('scroll', on, { passive: true });
    const onHash = () => setRoute(window.location.hash || '#/');
    window.addEventListener('hashchange', onHash);
    return () => { window.removeEventListener('scroll', on); window.removeEventListener('hashchange', onHash); };
  }, []);
  const isHome = route === '' || route === '#/' || route === '#';
  const links = isHome
    ? [
        { href:'#mechanism', label:'Mechanism' },
        { href:'#products', label:'Products' },
        { href:'#/services', label:'Services' },
        { href:'#/for', label:'Who for' },
        { href:'#/case-studies', label:'Case studies' }
      ]
    : [
        { href:'#/', label:'Home' },
        { href:'#/services', label:'Services' },
        { href:'#/for', label:'Who for' },
        { href:'#/case-studies', label:'Case studies' },
        { href:'#/compare', label:'Compare' }
      ];
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '14px 40px',
      background: scrolled ? 'rgba(245,241,232,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      transition: 'background 200ms, border-color 200ms',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center'
    }}>
      <a href="#/" style={{display:'flex', alignItems:'center', gap:10, fontFamily:'var(--serif)', fontWeight:500, fontSize:19, letterSpacing:'-0.01em'}}>
        <LogoMark size={22} />
        <span>Concept Outbound</span>
      </a>
      <div className="mono nav-links" style={{display:'flex', gap:26, fontSize:12, letterSpacing:'0.08em', textTransform:'uppercase', alignItems:'center'}}>
        {links.map(l => (
          <a key={l.href} href={l.href} style={{opacity: route === l.href ? 1 : 0.75, transition:'opacity 150ms'}}>{l.label}</a>
        ))}
        <a href="https://cal.com/travisross/15min" target="_blank" rel="noopener" style={{color:'var(--accent)', display:'flex', alignItems:'center', gap:6}}>
          <span className="teal-dot" style={{width:6, height:6}}></span>
          Book a free audit
        </a>
      </div>
    </nav>
  );
};

const LogoMark = ({ size = 24, color }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden>
    <path d="M20 2 C10 2 2 10 2 20 C2 30 10 38 20 38 L20 30 C14.5 30 10 25.5 10 20 C10 14.5 14.5 10 20 10 L20 2 Z"
          fill={color || 'currentColor'} />
    <path d="M18 14 L26 20 L18 26 Z" fill="var(--accent, #14A8A3)" />
  </svg>
);

const Rule = ({ on = 'paper', style }) => (
  <div style={{
    height: 1,
    background: on === 'ink' ? 'var(--rule-light)' : 'var(--rule)',
    width: '100%',
    ...style
  }} />
);

// AstroMark — neutralized per feedback (no astrological references)
const AstroMark = () => null;

// Subtle page rail — shows on desktop, fades on scroll progression
const PageRail = () => {
  const [pct, setPct] = React.useState(0);
  React.useEffect(()=>{
    const on = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setPct(Math.min(1, Math.max(0, window.scrollY / h)));
    };
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <div aria-hidden style={{
      position: 'fixed', left: 16, top: '50%', transform: 'translateY(-50%)',
      height: 180, width: 1, background: 'var(--rule)', zIndex: 50,
      display: window.innerWidth > 900 ? 'block' : 'none'
    }}>
      <div style={{
        position: 'absolute', left: -3, top: `${pct*100}%`,
        width: 7, height: 7, borderRadius: '50%',
        background: 'var(--accent)', transform: 'translateY(-50%)',
        transition: 'top 80ms linear'
      }}/>
    </div>
  );
};

Object.assign(window, { Nav, LogoMark, Rule, AstroMark, PageRail });