// site-nav-hero.jsx — sticky Nav + Hero with tweakable pipeline. Exports Nav, Hero.

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 66, behavior: 'smooth' });
}

function LangToggle({ lang, setLang, light = false }) {
  const base = { border: 'none', background: 'none', cursor: 'pointer', fontFamily: T.sans, fontSize: 13.5, fontWeight: 600, padding: '2px 4px' };
  const act = light ? '#fff' : T.navy, idle = light ? 'rgba(255,255,255,.45)' : '#9aa3b8';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <button style={{ ...base, color: lang === 'en' ? act : idle }} onClick={() => setLang('en')}>EN</button>
      <span style={{ color: idle, fontSize: 12 }}>|</span>
      <button style={{ ...base, color: lang === 'hr' ? act : idle }} onClick={() => setLang('hr')}>HR</button>
    </div>
  );
}

function Wordmark({ logoText, accent, size = 19, color }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', fontFamily: T.exo, fontWeight: 800, fontSize: size, letterSpacing: 0.2, lineHeight: 1 }}>
      <span style={{ color: color || T.navy }}>{logoText}</span>
      <span style={{ color: accent, fontWeight: 700 }}>.hr</span>
    </span>
  );
}

function Nav({ c, lang, setLang, logoText, accent, logoMark, offsite = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  const narrow = useNarrow();
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', on, { passive: true }); on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  const links = [['home', c.nav.home], ['services', c.nav.services], ['process', c.nav.process], ['about', c.nav.about], ['contact', c.nav.contact]];
  // offsite (legal pages): anchors point to the home page (/#id) and navigate
  // normally; on home, intercept and smooth-scroll in place.
  const href = (id) => offsite ? `/#${id}` : `#${id}`;
  const onNav = (id) => offsite ? undefined : (e) => { e.preventDefault(); scrollToId(id); };
  // legal pages are not scrolled to the top by default, so keep the bar solid there
  const solid = scrolled || offsite;
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: solid ? 'rgba(255,255,255,.88)' : 'rgba(255,255,255,0)',
      backdropFilter: solid ? 'saturate(180%) blur(12px)' : 'none', borderBottom: `1px solid ${solid ? T.line : 'transparent'}`, transition: 'background .3s, border-color .3s' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 40px', height: 66, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href={offsite ? '/' : '#home'} onClick={onNav('home')} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <SiteMark kind={logoMark} s={26} c={T.navy} a={accent} />
          <Wordmark logoText={logoText} accent={accent} />
        </a>
        <nav style={{ display: narrow ? 'none' : 'flex', gap: 30 }}>
          {links.map(([id, label], i) => (
            <a key={id} href={href(id)} onClick={onNav(id)}
              style={{ fontFamily: T.sans, fontSize: 14.5, fontWeight: i === 0 ? 600 : 500, color: i === 0 ? T.navy : '#4a5575', textDecoration: 'none' }}>{label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <LangToggle lang={lang} setLang={setLang} />
          <button onClick={() => offsite ? (window.location.href = '/#contact') : scrollToId('contact')} style={{ background: T.navy, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 18px', fontFamily: T.sans, fontSize: 14, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}>{c.nav.cta}</button>
        </div>
      </div>
    </header>
  );
}

function Hero({ c, lang, accent, pipeFont, stages }) {
  const h = c.hero;
  const narrow = useNarrow();
  const [h1Hover, setH1Hover] = React.useState(false);
  const serifStep = pipeFont === T.serif, exoStep = pipeFont === T.exo;
  return (
    <section id="home" style={{ position: 'relative', background: T.white }}>
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', padding: '0 clamp(20px,5vw,40px)', display: 'grid', gridTemplateColumns: narrow ? '1fr' : '1.12fr 0.88fr', gap: narrow ? 8 : 52, alignItems: narrow ? 'start' : 'center', minHeight: narrow ? 'auto' : 'min(86vh, 740px)', paddingTop: narrow ? 24 : 0, paddingBottom: narrow ? 56 : 0 }}>
        {/* left */}
        <Reveal style={{ padding: narrow ? '36px 0' : '52px 0' }}>
          <Eyebrow accent={accent}>{h.badge}</Eyebrow>
          <h1 className="hero-h1" onMouseEnter={() => setH1Hover(true)} onMouseLeave={() => setH1Hover(false)}
            style={{ fontFamily: T.serif, fontSize: 'clamp(36px, 4.7vw, 60px)', lineHeight: 1.08, fontWeight: 500, letterSpacing: -1.3, color: T.navy, margin: '26px 0 22px' }}>
            <span style={{ display: 'block' }}>{h.pre.trim()}</span>
            <span style={{ position: 'relative', display: 'inline-block', fontStyle: 'italic', whiteSpace: 'nowrap' }}>{h.accent}
              <span aria-hidden="true" className="hero-ul" style={{ position: 'absolute', left: 0, right: 0, bottom: 4, height: 9, background: accent, opacity: .42, zIndex: -1, transformOrigin: 'left center', transform: h1Hover ? 'scaleX(1)' : 'scaleX(0)' }} /></span>
          </h1>
          <p style={{ fontFamily: T.sans, fontSize: 18.5, lineHeight: 1.6, color: T.muted, maxWidth: 480, margin: '0 0 34px' }}>{h.sub}</p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button onClick={() => scrollToId('services')} style={{ background: T.navy, color: '#fff', border: 'none', borderRadius: 9, padding: '15px 26px', fontFamily: T.sans, fontSize: 15.5, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}>{h.primary} →</button>
            <button onClick={() => scrollToId('contact')} style={{ background: '#fff', color: T.navy, border: `1.5px solid ${T.line}`, borderRadius: 9, padding: '15px 26px', fontFamily: T.sans, fontSize: 15.5, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}>{h.secondary}</button>
          </div>
          {/* trust strip */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 34, paddingTop: 26, borderTop: `1px solid ${T.line}`, flexWrap: 'wrap' }}>
            {h.trust.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3 3 7-8" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                <span style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 600, color: T.ink, whiteSpace: 'nowrap' }}>{item}</span>
              </div>
            ))}
          </div>
        </Reveal>

        {/* right: navy pipeline panel */}
        <Reveal delay={120} style={{ alignSelf: 'stretch', display: 'flex', alignItems: 'center', paddingBottom: 0 }}>
          <div className="hero-panel" style={{ '--accent': accent, position: 'relative', width: '100%', background: T.navy, borderRadius: 20, overflow: 'hidden', boxShadow: '0 30px 70px -30px rgba(10,42,107,.5)' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.11) 1px, transparent 0)', backgroundSize: '26px 26px', opacity: .55 }} />
            <div style={{ position: 'relative', padding: '40px 44px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 26 }}>
                <div style={{ fontFamily: T.sans, fontSize: 12.5, fontWeight: 700, letterSpacing: 1.4, color: accent, textTransform: 'uppercase' }}>{h.pipelineLabel}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: T.mono, fontSize: 11, letterSpacing: .5, color: 'rgba(255,255,255,.55)' }}>
                  <span className="hero-live-dot" style={{ width: 7, height: 7, borderRadius: 4, background: accent }} />{h.pipelineStatus}
                </div>
              </div>
              {stages.map((s, i) => {
                const last = i === stages.length - 1;
                return (
                  <div key={s.k} className="hero-stage" style={{ display: 'flex', alignItems: 'center', gap: 18, position: 'relative', paddingBottom: last ? 0 : 26, animationDelay: `${260 + i * 150}ms` }}>
                    {!last && <div style={{ position: 'absolute', left: 23, top: 48, bottom: 2, width: 2, background: 'rgba(255,255,255,.16)', overflow: 'hidden' }}><span className="hero-signal" style={{ animationDelay: `${i * 0.45}s` }} /></div>}
                    <div style={{ width: 48, height: 48, flexShrink: 0, borderRadius: '50%', display: 'grid', placeItems: 'center', background: last ? accent : 'rgba(255,255,255,.08)', border: last ? 'none' : '1.5px solid rgba(255,255,255,.22)', color: last ? T.navy : '#cdd9f2', zIndex: 1 }}>
                      <StageIcon name={s.k} sw={1.7} />
                    </div>
                    <div>
                      <div style={{ fontFamily: T.sans, fontSize: 11.5, fontWeight: 600, color: accent, letterSpacing: 1 }}>{`0${i + 1}`}</div>
                      <div style={{ fontFamily: pipeFont, fontSize: serifStep ? 22 : (exoStep ? 19 : 19), fontWeight: serifStep ? 500 : (exoStep ? 600 : 600), color: '#fff', lineHeight: 1.05 }}>{s[lang]}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, scrollToId, Wordmark, LangToggle });