// ============================================================
// BVS — shared components & primitives (deck-accurate brand)
// ============================================================
const { useState, useEffect, useRef } = React;

const BLUE = '#0017DB', BLUE_DEEP = '#000ea0', INK = '#0a0a0a', PAPER = '#f5f3ee', PAPER_DIM = '#ebe9e2', GREEN = '#4ade5b', GREEN_D = '#16a34a';
const res = (p) => (window.__resources && window.__resources[p]) || p; // offline-aware asset resolver

// ---- exact V-mark from the deck ----
const VMARK = `<svg viewBox="0 0 200 200" fill="none" style="width:100%;height:auto;display:block"><path fill="currentColor" fill-rule="evenodd" d="M2.0 6.6 L43.7 19.0 L45.2 23.6 L48.3 39.0 L28.2 32.9 L25.1 32.9 L23.6 37.5 L48.3 162.5 L157.9 76.1 L153.2 71.4 L137.8 66.8 L153.2 54.5 L198.0 66.8 L37.5 193.4 L3.5 8.2 Z"></path></svg>`;
const VMark = ({ size = 28, color = 'currentColor', style }) => (
  <span style={{ width: size, color, display: 'inline-block', lineHeight: 0, ...style }} dangerouslySetInnerHTML={{ __html: VMARK }} />
);

// ---- BVS. wordmark ----
const Wordmark = ({ size = 22, color = INK, dot = BLUE }) => (
  <span style={{ fontStyle: 'italic', fontWeight: 900, fontSize: size, letterSpacing: '-0.04em', color, lineHeight: 0.8, display: 'inline-block' }}>
    BVS<span style={{ color: dot }}>.</span>
  </span>
);

// ---- mono eyebrow with // ----
const Eyebrow = ({ children, slash = false, onBlue = false, style, className = '' }) => (
  <div className={'eyebrow ' + (onBlue ? 'on-blue ' : '') + className} style={style}>{slash ? '// ' : ''}{children}</div>
);

const Chip = ({ children, tone = 'blue', style }) => (
  <span className={'chip chip-' + tone} style={style}>{children}</span>
);

const Button = ({ children, kind = 'blue', onClick, arrow = false, style }) => (
  <button className={'btn btn-' + kind} onClick={onClick} style={style}>{children}{arrow && <span className="arr">→</span>}</button>
);

const GhostWord = ({ children, size, color, style }) => (
  <div className="ghost" style={{ fontSize: size, color, ...style }}>{children}</div>
);

// ---- reveal helpers (visible by default; .pre hides below-fold) ----
function applyReveal(els) {
  if (!els || !els.length) return null;
  const vh = window.innerHeight || 800;
  let io = null;
  if ('IntersectionObserver' in window) {
    io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.remove('pre'); io.unobserve(e.target); } });
    }, { threshold: 0.06, rootMargin: '0px 0px -6% 0px' });
  }
  els.forEach((el) => { const r = el.getBoundingClientRect(); if (r.top >= vh * 0.88) { el.classList.add('pre'); if (io) io.observe(el); } });
  setTimeout(() => els.forEach((el) => el.classList.remove('pre')), 1700);
  return io;
}
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const io = applyReveal(Array.from(ref.current.querySelectorAll('.reveal')));
    return () => { if (io) io.disconnect(); };
  }, []);
  return ref;
}
const delay = (i, step = 90) => ({ transitionDelay: `${i * step}ms` });

// ---- language toggle (globe) ----
const LANG_NAMES = { en: 'English', pl: 'Polski', sr: 'Srpski', es: 'Español', fr: 'Français', it: 'Italiano' };
function LangToggle() {
  const [lang, setLang] = useState(() => (window.__i18n ? window.__i18n.lang : 'en'));
  const [open, setOpen] = useState(false);
  const boxRef = useRef(null);
  useEffect(() => {
    const onLang = (e) => setLang(e.detail);
    const onDoc = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); };
    window.addEventListener('bvs-lang', onLang);
    document.addEventListener('pointerdown', onDoc);
    return () => { window.removeEventListener('bvs-lang', onLang); document.removeEventListener('pointerdown', onDoc); };
  }, []);
  const codes = window.__i18n ? window.__i18n.langs.map((l) => l[0]) : ['en'];
  const pick = (c) => { setOpen(false); if (window.__i18n) window.__i18n.setLang(c); else setLang(c); };
  return (
    <div ref={boxRef} data-no-i18n="true" style={{ position: 'relative', flexShrink: 0 }}>
      <button onClick={() => setOpen((o) => !o)} aria-label="Language" aria-expanded={open} className="mono" style={{ display: 'flex', alignItems: 'center', gap: 7, background: open ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.22)', borderRadius: 999, padding: '8px 13px', color: '#fff', cursor: 'pointer', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', transition: 'background .18s var(--ease)' }}
        onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.14)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = open ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'; }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: 'block' }}><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
        <span>{lang}</span>
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: 'block', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s var(--ease)' }}><path d="m6 9 6 6 6-6"></path></svg>
      </button>
      {open && (
        <div style={{ position: 'absolute', top: 'calc(100% + 10px)', right: 0, minWidth: 186, background: '#07092a', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 14, padding: 6, boxShadow: '0 24px 60px -18px rgba(0,0,0,0.65)', zIndex: 90 }}>
          {codes.map((c) => {
            const active = c === lang;
            return (
              <button key={c} onClick={() => pick(c)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, width: '100%', background: active ? 'rgba(255,255,255,0.08)' : 'transparent', border: 0, borderRadius: 9, padding: '10px 12px', cursor: 'pointer', color: active ? '#fff' : 'rgba(255,255,255,0.78)', fontFamily: 'var(--bvs-sans)', fontSize: 13.5, fontWeight: 600, textAlign: 'left', transition: 'background .15s var(--ease), color .15s var(--ease)' }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = active ? 'rgba(255,255,255,0.08)' : 'transparent'; e.currentTarget.style.color = active ? '#fff' : 'rgba(255,255,255,0.78)'; }}>
                <span>{LANG_NAMES[c] || c}</span>
                <span className="mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: active ? GREEN : 'rgba(255,255,255,0.4)' }}>{active ? '✓ ' : ''}{c}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ---- Header: BVS. wordmark + tab router ----
const NAV = [
  { id: 'solutions', label: 'AI & SaaS', route: true },
  { id: 'media',     label: 'Media', route: true },
  { id: 'case-studies', label: 'Case Studies' },
  { id: 'team',      label: 'Team' },
  { id: 'contact',   label: 'Contact' },
];

function Header({ route, onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const go = (id) => { setOpen(false); onNav(id); };
  return (
    <header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
      background: scrolled ? 'rgba(7,9,40,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'rgba(255,255,255,0.12)' : 'transparent'),
      transition: 'background .25s var(--ease), border-color .25s var(--ease)' }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72, gap: 24 }}>
        <div onClick={() => go('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', flexShrink: 0 }}>
          <VMark size={20} color="#fff" />
          {route === 'media' ? (
            <span style={{ display: 'flex', flexDirection: 'column', gap: 4, lineHeight: 1 }}>
              <span style={{ fontStyle: 'italic', fontWeight: 900, fontSize: 22, letterSpacing: '-0.04em', lineHeight: 0.8, color: '#fff', whiteSpace: 'nowrap' }}>BMG<span style={{ color: '#5a82ff' }}>.</span></span>
              <span style={{ fontSize: 10.5, fontWeight: 500, letterSpacing: '0.02em', color: 'rgba(255,255,255,0.5)', whiteSpace: 'nowrap' }}>A Product of Bleu Venture Studios</span>
            </span>
          ) : (
            <Wordmark size={24} color="#fff" dot={GREEN} />
          )}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0, minWidth: 0 }}>
        <nav className="desk-nav" style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {NAV.map((it) => {
            const active = route === it.id;
            return (
              <a key={it.id} onClick={() => go(it.id)} style={{ fontFamily: 'var(--bvs-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.02em', textTransform: 'uppercase', color: active ? BLUE : 'rgba(255,255,255,0.82)', background: active ? '#fff' : 'transparent', borderRadius: 999, padding: '9px 15px', cursor: 'pointer', transition: 'color .18s var(--ease), background .18s var(--ease)' }}
                 onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = '#fff'; }}
                 onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = 'rgba(255,255,255,0.82)'; }}>
                {it.label}
              </a>
            );
          })}
          <Button kind="white" onClick={() => go('contact')} arrow style={{ padding: '11px 16px', fontSize: 11, marginLeft: 10 }}>Book a Call</Button>
        </nav>
        <LangToggle />
        <button className="burger" onClick={() => setOpen((o) => !o)} aria-label="Menu" style={{ display: 'none', background: 'transparent', border: 0, cursor: 'pointer', flexDirection: 'column', gap: 5, padding: 6 }}>
          <span style={{ width: 24, height: 2, background: '#fff', transition: 'transform .2s', transform: open ? 'translateY(7px) rotate(45deg)' : 'none' }} />
          <span style={{ width: 24, height: 2, background: '#fff', opacity: open ? 0 : 1, transition: 'opacity .16s' }} />
          <span style={{ width: 24, height: 2, background: '#fff', transition: 'transform .2s', transform: open ? 'translateY(-7px) rotate(-45deg)' : 'none' }} />
        </button>
        </div>
      </div>
      {open && (
        <div style={{ background: '#07092a', borderTop: '1px solid rgba(255,255,255,0.12)' }}>
          <div className="wrap" style={{ display: 'flex', flexDirection: 'column', padding: '10px 8vw 20px' }}>
            {[{ id: 'home', label: 'Home' }, ...NAV].map((it) => (
              <a key={it.id} onClick={() => go(it.id)} style={{ padding: '15px 0', fontFamily: 'var(--bvs-sans)', fontSize: 15, fontWeight: 600, letterSpacing: '0.02em', textTransform: 'uppercase', borderBottom: '1px solid rgba(255,255,255,0.12)', cursor: 'pointer', color: route === it.id ? GREEN : 'rgba(255,255,255,0.88)' }}>{it.label}</a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

// ---- corner mark ----
const CornerMark = ({ dark = false }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: dark ? 'rgba(255,255,255,0.6)' : 'rgba(10,10,10,0.4)' }}>
    <VMark size={14} />
    <span className="mono" style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.28em', textTransform: 'lowercase' }}>globalizing you</span>
  </div>
);

// ---- Footer ----
function Footer({ onNav }) {
  const cols = [
    { h: 'AI & Systems', items: [['AI & Voice Agents', 'solutions'], ['Operating Systems', 'solutions'], ['Case Studies', 'case-studies'], ['Team', 'team']] },
    { h: 'Media · BMG', items: [['Media Department', 'media'], ['Our Process', 'media'], ['Top Clients', 'media'], ['Media Partners', 'media']] },
    { h: 'Studio', items: [['AI & Systems', 'solutions'], ['Media', 'media'], ['Contact', 'contact'], ['Book a Call', 'contact']] },
  ];
  return (
    <footer style={{ background: INK, color: '#fff', paddingTop: 84 }}>
      <div className="wrap">
        <div className="foot-grid" style={{ display: 'grid', gridTemplateColumns: '1.7fr repeat(3,1fr)', gap: 44, paddingBottom: 56 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <VMark size={26} color="#fff" />
              <Wordmark size={32} color="#fff" dot={GREEN} />
            </div>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.66)', lineHeight: 1.6, maxWidth: 340, margin: '0 0 20px' }}>
              One studio, three engines — AI growth systems, an owned venture portfolio, and a full media department. We globalize you and re-engineer you for the future.
            </p>
            <CornerMark dark />
          </div>
          {cols.map((col) => (
            <div key={col.h}>
              <div className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16, color: 'rgba(255,255,255,0.5)' }}>{col.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {col.items.map(([label, to]) => <li key={label} onClick={() => onNav(to)} className="ul-link" style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.85)', cursor: 'pointer' }}>{label}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid rgba(255,255,255,0.16)', padding: '24px 0 36px', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
            <a href="mailto:admin@bleuventurestudios.com" className="ul-link mono" style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)' }}>admin@bleuventurestudios.com</a>
            <a href="tel:+17738140959" className="ul-link mono" style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)' }}>+1 (773) 814-0959</a>
          </div>
          <div className="foot-legal mono" style={{ fontSize: 12.5 }}>
            <span onClick={() => onNav('privacy')} className="ul-link" style={{ color: 'rgba(255,255,255,0.8)' }}>Privacy Policy</span>
            <span onClick={() => onNav('terms')} className="ul-link" style={{ color: 'rgba(255,255,255,0.8)' }}>Terms of Service</span>
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>© 2026 Bleu Venture Studios</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---- Section header (page hero) ----
function PageHero({ kicker, title, lead, ghost }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ background: PAPER, position: 'relative', overflow: 'hidden', padding: '64px 0 52px', borderBottom: '1px solid var(--bvs-line)' }}>
      <div className="wrap" style={{ position: 'relative' }}>
        <Eyebrow className="reveal">{kicker}</Eyebrow>
        <h1 className="reveal h-disp" style={{ fontSize: 'clamp(34px,4.4vw,60px)', marginTop: 14, maxWidth: 1000, ...delay(1) }}>{title}</h1>
        {lead && <p className="reveal" style={{ fontSize: 'clamp(14px,1vw,16px)', fontWeight: 500, lineHeight: 1.5, color: 'rgba(10,10,10,0.62)', maxWidth: 680, marginTop: 22, ...delay(2) }}>{lead}</p>}
      </div>
    </section>
  );
}

// ---- CTA band ----
function CtaBand({ onNav, label = 'Let’s globalize your operation.', sub = 'AI systems and media, built around your exact business. Tell us what to re-engineer.' }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="depth" style={{ padding: '108px 0', position: 'relative', overflow: 'hidden' }}>
      <Particles density={0.8} />
      <div className="depth-aurora" />
      <div className="depth-orb" style={{ width: 380, height: 380, background: 'rgba(60,120,255,0.4)', bottom: '-140px', right: '6%' }} />
      <div className="wrap reveal" style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, flexWrap: 'wrap' }}>
        <div>
          <VMark size={40} color="#fff" style={{ marginBottom: 22 }} />
          <h2 className="h-disp" style={{ color: '#fff', fontSize: 'clamp(26px,3vw,42px)', maxWidth: 680 }}>{label}</h2>
          <p style={{ fontSize: 16.5, color: 'rgba(255,255,255,0.8)', lineHeight: 1.55, maxWidth: 520, marginTop: 18, fontWeight: 500 }}>{sub}</p>
        </div>
        <Button kind="white" onClick={() => onNav('contact')} arrow style={{ fontSize: 12.5, padding: '15px 24px' }}>Book a Discovery Call</Button>
      </div>
    </section>
  );
}

Object.assign(window, { VMark, VMARK, Wordmark, Eyebrow, Chip, Button, GhostWord, Header, Footer, CornerMark, PageHero, CtaBand, LangToggle, useReveal, applyReveal, delay, res, BLUE, BLUE_DEEP, INK, PAPER, PAPER_DIM, GREEN, GREEN_D });