// shared.jsx — site chrome (header + footer) and shared style helpers used by BOTH pages.
// Defined once here at global scope so app.jsx and services-page.jsx never redeclare them.

const wrap = (max, pad, extra = {}) => ({ maxWidth: max, margin: '0 auto', padding: pad, ...extra });
const h2Style = { fontFamily: 'var(--font-display)', fontSize: 38, color: 'var(--color-navy)', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 14px' };
const ghostDark = { display: 'inline-flex', alignItems: 'center', gap: 9, height: 52, padding: '0 24px', borderRadius: 'var(--radius-md)', border: '1px solid rgba(255,255,255,0.4)', backgroundColor: 'transparent', color: '#fff', fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, cursor: 'pointer' };
const footColTitle = { fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 14 };
const footLink = { display: 'block', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'rgba(255,255,255,0.78)', textDecoration: 'none', marginBottom: 10, cursor: 'pointer' };

// Tabler stroke icon (matches the logo's single-weight arc). Used for service-domain icons.
const Ti = ({ name, size = 16, color = 'var(--color-teal)', style = {} }) => (
  <i className={'ti ti-' + name} aria-hidden="true" style={{ fontSize: size, color, lineHeight: 1, flexShrink: 0, ...style }} />
);

const Eyebrow = ({ children, tone = 'light' }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: tone === 'dark' ? 'var(--color-teal)' : 'var(--color-teal-deep)', marginBottom: 16 }}>
    <span style={{ width: 18, height: 1.5, backgroundColor: 'var(--color-teal)' }} />{children}
  </div>
);

const SITE_NAV = [['Services', 'services'], ['How it works', 'how'], ['Schedule', 'schedule'], ['Support', 'support']];

// Prominent header logo for strong brand recognition from ads / social.
function SiteHeader({ page = 'home', active = '', onNav }) {
  const ns = window.ITbyPeopleDesignSystem_44acd8 || {};
  const { Logo, Button } = ns;
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, height: 76, backgroundColor: 'rgba(255,255,255,0.88)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--color-line)' }}>
      <div style={wrap(1200, '0 32px', { height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' })}>
        <a href="index.html" aria-label="ITbyPeople home" onClick={(e) => { if (page === 'home') { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); } }} style={{ textDecoration: 'none', display: 'inline-flex' }}>
          <Logo size={32} tone="light" />
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }} className="topnav">
          {SITE_NAV.map(([label, key]) => (
            <button key={key} onClick={() => onNav(key)} className={'nav-link' + (active === key ? ' active' : '')}>{label}</button>
          ))}
        </nav>
        <Button variant="primary" size="sm" onClick={() => onNav('schedule')}>Talk to a real person</Button>
      </div>
    </header>
  );
}

function SiteFooter({ onNav }) {
  const ns = window.ITbyPeopleDesignSystem_44acd8 || {};
  const { Logo } = ns;
  return (
    <footer style={{ backgroundColor: 'var(--color-navy)', color: '#fff', padding: '56px 32px 40px' }}>
      <div style={wrap(1200, 0, { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 40, flexWrap: 'wrap' })}>
        <div style={{ maxWidth: 340 }}>
          <Logo size={24} tone="dark" tagline />
          <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.62)', margin: '18px 0 0' }}>In an era of AI, we are still the humans behind the solution.</p>
        </div>
        <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
          <div>
            <div style={footColTitle}>Company</div>
            {SITE_NAV.map(([label, key]) => <a key={key} href="#" onClick={(e) => { e.preventDefault(); onNav(key); }} style={footLink}>{label}</a>)}
          </div>
          <div>
            <div style={footColTitle}>Get in touch</div>
            <a href="mailto:info@itbypeople.com" style={{ ...footLink, fontFamily: 'var(--font-mono)' }}>info@itbypeople.com</a>
            <div style={{ ...footLink, cursor: 'default' }}>Mon–Fri · 9:00–17:00 ET</div>
          </div>
        </div>
      </div>
      <div style={wrap(1200, 0, { marginTop: 44, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.12)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 })}>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)' }}>© 2026 ITbyPeople. All rights reserved.</span>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)' }}>itbypeople.com</span>
      </div>
    </footer>
  );
}

Object.assign(window, { wrap, h2Style, ghostDark, footColTitle, footLink, Ti, Eyebrow, SiteHeader, SiteFooter, SITE_NAV });