// Variation B — Dark tech aesthetic
// Single-file: shell + pages (keeps it manageable)

const { useState: useStB, useEffect: useEfB, useRef: useRefB } = React;

const themeB = {
  dark: {
    bg: '#05070F',
    bgAlt: '#0A0E1F',
    surface: 'rgba(255,255,255,0.03)',
    surfaceStrong: 'rgba(255,255,255,0.06)',
    border: 'rgba(56,184,247,0.12)',
    borderStrong: 'rgba(56,184,247,0.28)',
    text: '#E8EEFB',
    textMuted: '#8892B8',
    textDim: '#565F80',
    navy: '#0E1B5C',
    sky: '#38B8F7',
    skyGlow: '#1EA4E9',
    skyTint: 'rgba(56,184,247,0.08)',
  },
  light: {
    bg: '#F7F9FD',
    bgAlt: '#EEF3FA',
    surface: '#FFFFFF',
    surfaceStrong: '#FFFFFF',
    border: 'rgba(14,27,92,0.10)',
    borderStrong: 'rgba(14,27,92,0.22)',
    text: '#0B1438',
    textMuted: '#4B5576',
    textDim: '#8089A3',
    navy: '#0E1B5C',
    sky: '#1EA4E9',
    skyGlow: '#0E1B5C',
    skyTint: 'rgba(30,164,233,0.08)',
  },
};

function ContainerB({ children, style }) {
  return <div style={{ width: '100%', maxWidth: 1320, margin: '0 auto', padding: '0 40px', ...style }}>{children}</div>;
}

function EyebrowB({ children, t }) {
  return (
    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.22em', color: t.sky, textTransform: 'uppercase', fontWeight: 500, marginBottom: 24, display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <span style={{ width: 6, height: 6, background: t.sky, borderRadius: '50%', boxShadow: `0 0 12px ${t.sky}` }} />
      <span>{children}</span>
      <span style={{ width: 40, height: 1, background: `linear-gradient(90deg, ${t.sky}, transparent)` }} />
    </div>
  );
}

function BtnB({ children, onClick, primary, t, style, ghost }) {
  const [h, setH] = useStB(false);
  let s;
  if (primary) {
    s = { background: h ? t.sky : t.skyGlow, color: t.bg === '#05070F' ? '#05070F' : '#fff', border: `1px solid ${t.sky}`, boxShadow: h ? `0 0 30px ${t.sky}55` : `0 0 0 ${t.sky}00` };
  } else if (ghost) {
    s = { background: h ? t.surfaceStrong : 'transparent', color: t.text, border: `1px solid ${h ? t.sky : t.borderStrong}` };
  } else {
    s = { background: 'transparent', color: t.text, border: `1px solid ${h ? t.sky : t.borderStrong}` };
  }
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ ...s, padding: '14px 28px', borderRadius: 4, fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', cursor: 'pointer', transition: 'all 0.3s ease', display: 'inline-flex', alignItems: 'center', gap: 10, ...style }}>
      {children}
    </button>
  );
}

function NavB({ page, setPage, lang, setLang, dark, setDark, t, c }) {
  const items = [['home', c.nav.home], ['services', c.nav.services], ['about', c.nav.about], ['contact', c.nav.contact]];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 100, background: dark ? 'rgba(5,7,15,0.75)' : 'rgba(247,249,253,0.85)', backdropFilter: 'blur(20px)', borderBottom: `1px solid ${t.border}` }}>
      <ContainerB>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
          <button onClick={() => setPage('home')} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
            <Wordmark size={32} navy={t.text} sky={t.sky} onDark={dark} />
          </button>
          <nav style={{ display: 'flex', gap: 4, alignItems: 'center', background: t.surface, border: `1px solid ${t.border}`, borderRadius: 999, padding: 4 }}>
            {items.map(([k, label]) => (
              <button key={k} onClick={() => setPage(k)}
                style={{ background: page === k ? t.surfaceStrong : 'transparent', border: 'none', padding: '8px 18px', borderRadius: 999, cursor: 'pointer',
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase',
                  color: page === k ? t.sky : t.textMuted }}>
                {label}
              </button>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button onClick={() => setLang(lang === 'es' ? 'en' : 'es')}
              style={{ background: 'none', border: `1px solid ${t.border}`, borderRadius: 4, padding: '6px 10px', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em', color: t.textMuted, cursor: 'pointer', display: 'flex', gap: 6 }}>
              <span style={{ color: lang === 'es' ? t.sky : t.textDim }}>ES</span><span>/</span><span style={{ color: lang === 'en' ? t.sky : t.textDim }}>EN</span>
            </button>
            <button onClick={() => setDark(!dark)} style={{ background: 'none', border: `1px solid ${t.border}`, borderRadius: 4, width: 32, height: 32, cursor: 'pointer', color: t.text, display: 'flex', alignItems: 'center', justifyContent: 'center' }} aria-label="Toggle theme">
              {dark ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></svg>
                : <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /></svg>}
            </button>
            <BtnB primary t={t} onClick={() => setPage('contact')}>{c.cta.quote}</BtnB>
          </div>
        </div>
      </ContainerB>
    </header>
  );
}

// ============================================================
// HERO B — big type, grid, orbital logo
// ============================================================
function HeroB({ setPage, t, c }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '80px 0 100px', borderBottom: `1px solid ${t.border}` }}>
      {/* Grid */}
      <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${t.border} 1px, transparent 1px), linear-gradient(90deg, ${t.border} 1px, transparent 1px)`, backgroundSize: '60px 60px', maskImage: 'radial-gradient(ellipse at 50% 50%, black 10%, transparent 70%)' }} />
      {/* Glow */}
      <div aria-hidden style={{ position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)', width: 900, height: 900, background: `radial-gradient(circle, ${t.sky}22, transparent 60%)`, filter: 'blur(40px)' }} />

      <ContainerB style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <EyebrowB t={t}>{c.hero.eyebrow}</EyebrowB>
          <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 'clamp(48px, 8vw, 104px)', lineHeight: 0.98, letterSpacing: '-0.04em', color: t.text, margin: '0 auto 32px', maxWidth: 1000, textWrap: 'balance' }}>
            {c.hero.title.split('.')[0]}.<br />
            <span style={{ background: `linear-gradient(90deg, ${t.sky}, ${t.text})`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontStyle: 'italic', fontWeight: 400 }}>
              {c.hero.title.split('.').slice(1).join('.').trim()}
            </span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: t.textMuted, maxWidth: 640, margin: '0 auto 40px', textWrap: 'pretty' }}>{c.hero.sub}</p>
          <div style={{ display: 'inline-flex', gap: 12 }}>
            <BtnB primary t={t} onClick={() => setPage('contact')}>{c.cta.start} →</BtnB>
            <BtnB ghost t={t} onClick={() => setPage('services')}>{c.cta.learnMore}</BtnB>
          </div>
        </div>

        {/* Orbital logo */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', marginTop: 40 }}>
          <div style={{ position: 'relative', width: 520, height: 360 }}>
            {[1, 2, 3].map(i => (
              <div key={i} style={{
                position: 'absolute', left: '50%', top: '50%', width: 200 + i * 90, height: 200 + i * 90, borderRadius: '50%',
                border: `1px ${i === 2 ? 'dashed' : 'solid'} ${t.border}`, transform: 'translate(-50%, -50%)',
                animation: `orbit-spin ${40 + i * 15}s linear ${i % 2 ? 'reverse' : 'normal'} infinite`
              }} />
            ))}
            {[0, 72, 144, 216, 288].map((a, i) => (
              <div key={i} style={{ position: 'absolute', left: '50%', top: '50%', width: 6, height: 6, borderRadius: '50%', background: t.sky, boxShadow: `0 0 12px ${t.sky}`, transform: `translate(-50%, -50%) rotate(${a}deg) translate(${200 + (i % 3) * 45}px)` }} />
            ))}
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <AnimatedLogo size={240} navy={t.sky} sky={t.sky} />
            </div>
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 80, border: `1px solid ${t.border}`, borderRadius: 4, background: t.surface }}>
          {[c.hero.stat1, c.hero.stat2, c.hero.stat3].map((s, i) => (
            <div key={i} style={{ padding: '32px 40px', borderRight: i < 2 ? `1px solid ${t.border}` : 'none', display: 'flex', alignItems: 'center', gap: 20 }}>
              <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 48, fontWeight: 500, color: t.sky, letterSpacing: '-0.02em', lineHeight: 1 }}>{s.n}</div>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.textDim, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>/0{i + 1}</div>
                <div style={{ fontSize: 14, color: t.textMuted }}>{s.l}</div>
              </div>
            </div>
          ))}
        </div>
      </ContainerB>
      <style>{`@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }`}</style>
    </section>
  );
}

// ============================================================
// SERVICES B
// ============================================================
function ServicesListB({ t, c, limit }) {
  const items = limit ? c.services.items.slice(0, limit) : c.services.items;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
      {items.map((s, i) => <ServiceCardB key={i} s={s} t={t} />)}
    </div>
  );
}

function ServiceCardB({ s, t }) {
  const [h, setH] = useStB(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: t.surface, border: `1px solid ${h ? t.borderStrong : t.border}`, borderRadius: 4, padding: 40, position: 'relative', overflow: 'hidden', transition: 'border 0.3s', cursor: 'default' }}>
      {h && <div aria-hidden style={{ position: 'absolute', top: 0, right: 0, width: 200, height: 200, background: `radial-gradient(circle, ${t.sky}15, transparent 70%)`, pointerEvents: 'none' }} />}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.sky, letterSpacing: '0.18em' }}>/SERVICE · {s.k}</div>
        <div style={{ width: 36, height: 36, borderRadius: '50%', border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: t.textMuted, transform: h ? 'rotate(-45deg)' : 'rotate(0)', transition: 'transform 0.3s' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
        </div>
      </div>
      <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 26, fontWeight: 500, color: t.text, margin: '0 0 14px', letterSpacing: '-0.02em', lineHeight: 1.15 }}>{s.t}</h3>
      <p style={{ fontSize: 15, lineHeight: 1.6, color: t.textMuted, margin: '0 0 24px', textWrap: 'pretty' }}>{s.d}</p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, paddingTop: 20, borderTop: `1px dashed ${t.border}` }}>
        {s.tags.map(tag => (
          <span key={tag} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, padding: '4px 10px', background: t.skyTint, color: t.sky, borderRadius: 2, letterSpacing: '0.04em' }}>{tag}</span>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// PROCESS B — horizontal flow
// ============================================================
function ProcessB({ t, c }) {
  return (
    <section style={{ padding: '120px 0', borderTop: `1px solid ${t.border}`, position: 'relative' }}>
      <ContainerB>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80, marginBottom: 80, alignItems: 'end' }}>
          <div>
            <EyebrowB t={t}>03 · PROCESS</EyebrowB>
            <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 56, fontWeight: 500, color: t.text, margin: 0, letterSpacing: '-0.03em', lineHeight: 1.05 }}>{c.process.title}</h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: t.textMuted, margin: 0, textWrap: 'pretty' }}>{c.process.sub}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, position: 'relative' }}>
          <div aria-hidden style={{ position: 'absolute', top: 30, left: '8%', right: '8%', height: 1, background: `linear-gradient(90deg, transparent, ${t.borderStrong}, transparent)` }} />
          {c.process.steps.map((s, i) => (
            <div key={i} style={{ position: 'relative', padding: '0 16px' }}>
              <div style={{ width: 60, height: 60, margin: '0 auto 24px', borderRadius: '50%', background: t.bg, border: `1px solid ${t.borderStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: t.sky, position: 'relative', zIndex: 2 }}>
                {s.n}
              </div>
              <h4 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 16, fontWeight: 500, color: t.text, margin: '0 0 8px', textAlign: 'center', letterSpacing: '-0.01em' }}>{s.t}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: t.textMuted, margin: 0, textAlign: 'center' }}>{s.d}</p>
            </div>
          ))}
        </div>
      </ContainerB>
    </section>
  );
}

Object.assign(window, { themeB, ContainerB, EyebrowB, BtnB, NavB, HeroB, ServicesListB, ServiceCardB, ProcessB });