/* global React */

// Shared nav for auxiliary pages (apply, privacy, terms). Links point back to index.
function PageNav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(15, 35, 65, 0.92)',
      backdropFilter: 'saturate(140%) blur(8px)',
      WebkitBackdropFilter: 'saturate(140%) blur(8px)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth: 1200, margin: '0 auto', padding: '14px 24px' }}>
        <a href="index.html" style={{ color: '#fff', fontWeight: 900, letterSpacing: '0.08em', fontSize: 13, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: '#1495B9' }}>BASECAMP</span>
        </a>
        <div style={{ display: 'flex', gap: 28, fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
          <a href="index.html#trail" style={{ color: 'rgba(255,255,255,0.82)', textDecoration: 'none' }}>The Trail</a>
          <a href="index.html#who" style={{ color: 'rgba(255,255,255,0.82)', textDecoration: 'none' }}>Who It's For</a>
          <a href="index.html#proof" style={{ color: 'rgba(255,255,255,0.82)', textDecoration: 'none' }}>Proof</a>
          <a href="index.html#faq" style={{ color: 'rgba(255,255,255,0.82)', textDecoration: 'none' }}>FAQ</a>
        </div>
        <div>
          <a href="apply.html" style={{
            display: 'inline-block', padding: '8px 16px', borderRadius: 9999,
            background: '#BADA55', color: '#0F2341',
            fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
            textDecoration: 'none',
          }}>Apply</a>
        </div>
      </div>
    </nav>
  );
}

// Simple footer used across aux pages.
function PageFooter() {
  return (
    <footer style={{
      padding: '48px 24px 40px',
      background: '#071326', color: 'rgba(255,255,255,0.75)',
      fontSize: 13, lineHeight: 1.6,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 24, justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <div>
          <div style={{ color: '#fff', fontWeight: 900, letterSpacing: '0.08em', fontSize: 14, marginBottom: 10 }}>
            VERTICAL VISION™ · BASECAMP
          </div>
          <div style={{ maxWidth: 440 }}>
            Vertical Vision is an independent insurance marketing organization. BaseCamp is our 10-week onboarding program for licensed agents moving from Medicare into retirement income products.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div style={{ color: '#BADA55', fontSize: 11, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>Legal</div>
            <div><a href="privacy.html" style={{ color: 'rgba(255,255,255,0.75)', textDecoration: 'none' }}>Privacy Policy</a></div>
            <div><a href="terms.html" style={{ color: 'rgba(255,255,255,0.75)', textDecoration: 'none' }}>Terms of Use</a></div>
          </div>
          <div>
            <div style={{ color: '#BADA55', fontSize: 11, fontWeight: 800, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>Apply</div>
            <div><a href="apply.html" style={{ color: 'rgba(255,255,255,0.75)', textDecoration: 'none' }}>Start your application</a></div>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '32px auto 0', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
        © {new Date().getFullYear()} Vertical Vision. All rights reserved.
      </div>
    </footer>
  );
}

// Parchment page shell — reused by privacy + terms.
function ParchmentPage({ title, effective, children }) {
  return (
    <div style={{
      fontFamily: '"Lato", system-ui, -apple-system, Arial, sans-serif',
      color: '#212529',
      background: '#FAF6E8',
      minHeight: '100vh',
    }}>
      <PageNav/>
      <main style={{
        background: 'linear-gradient(180deg, #FAF6E8 0%, #F5EFDC 100%)',
        padding: '72px 24px 96px',
      }}>
        <div style={{
          maxWidth: 820, margin: '0 auto',
          background: 'rgba(255,255,255,0.55)',
          border: '1px solid rgba(61,42,21,0.18)',
          borderRadius: 20,
          padding: 'clamp(32px, 5vw, 56px)',
          boxShadow: '0 8px 28px rgba(15,35,65,0.1), inset 0 0 80px rgba(61,42,21,0.04)',
        }}>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#3D2A15', marginBottom: 12 }}>
            Vertical Vision BaseCamp
          </div>
          <h1 style={{
            fontFamily: '"Lato", sans-serif', fontWeight: 900,
            fontSize: 'clamp(36px, 4.5vw, 56px)', color: '#0F2341',
            margin: '0 0 12px', lineHeight: 1.05, letterSpacing: '-0.01em',
          }}>{title}</h1>
          {effective && (
            <div style={{ fontSize: 14, color: '#5A4329', marginBottom: 32, fontStyle: 'italic' }}>
              Effective Date: {effective}
            </div>
          )}
          <div style={{ fontSize: 16, color: '#212529', lineHeight: 1.7 }}>
            {children}
          </div>
        </div>
      </main>
      <PageFooter/>
    </div>
  );
}

// Helpers for legal page rendering
function H2({ children }) {
  return <h2 style={{
    fontFamily: '"Lato", sans-serif', fontWeight: 900,
    fontSize: 22, color: '#0F2341',
    margin: '36px 0 12px', letterSpacing: '-0.005em',
  }}>{children}</h2>;
}
function H3({ children }) {
  return <h3 style={{
    fontFamily: '"Lato", sans-serif', fontWeight: 700,
    fontSize: 16, color: '#1495B9',
    textTransform: 'uppercase', letterSpacing: '0.08em',
    margin: '22px 0 8px',
  }}>{children}</h3>;
}
function P({ children }) {
  return <p style={{ margin: '0 0 14px', color: '#212529' }}>{children}</p>;
}
function UL({ children }) {
  return <ul style={{ margin: '0 0 14px', paddingLeft: 22, color: '#212529' }}>{children}</ul>;
}

Object.assign(window, { PageNav, PageFooter, ParchmentPage, LegalH2: H2, LegalH3: H3, LegalP: P, LegalUL: UL });
