// Shared brand tokens, components, navbar/footer for Compass Marketing Research
// Loaded as <script type="text/babel" src="shared.jsx">. Exports to window.

const C = {
  navy:      '#01405C',
  navyDeep:  '#012E42',
  ink:       '#0E1A22',
  cream:     '#FAF7F1',
  creamDeep: '#F2EDE2',
  paper:     '#FFFFFF',
  terracotta:'#C56B4D',
  terraDeep: '#A8553B',
  amber:     '#D9A559',
  sage:      '#8FA68A',
  sageDeep:  '#6B8366',
  text:      '#2A2620',
  textSoft:  '#5C5448',
  rule:      '#E5DDCD',
};

// Compass mark — extracted from the logo SVG, used standalone in spots
function CompassMark({ size = 64, color = C.navy }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="46" fill="none" stroke={color} strokeWidth="2.4"/>
      <path d="M 50 10 L 62 50 L 50 50 Z" fill={C.navy}/>
      <path d="M 50 10 L 38 50 L 50 50 Z" fill={C.navy} fillOpacity="0.55"/>
      <path d="M 50 90 L 62 50 L 50 50 Z" fill={color} fillOpacity="0.45"/>
      <path d="M 50 90 L 38 50 L 50 50 Z" fill={color}/>
      <line x1="14" y1="50" x2="22" y2="50" stroke={color} strokeWidth="2.4" strokeLinecap="round"/>
      <line x1="78" y1="50" x2="86" y2="50" stroke={color} strokeWidth="2.4" strokeLinecap="round"/>
      <circle cx="50" cy="50" r="3.2" fill={color}/>
    </svg>
  );
}

// Wordmark logo — uses the SVG asset
function CompassLogo({ height = 88 }) {
  return (
    <img src="assets/compass-logo.svg" alt="Compass Marketing Research" style={{ height, width: 'auto', display: 'block' }}/>
  );
}

const NAV_LINKS = [
  { href: 'index.html', label: 'Home' },
  { href: 'facility.html', label: 'Facility' },
  { href: 'services.html', label: 'Methodologies' },
  { href: '/contact/', label: 'Contact' },
];

function Navbar({ active = 'home', dark = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const onDark = dark && !scrolled;
  const bg = scrolled ? 'rgba(250,247,241,0.96)' : (dark ? 'transparent' : 'rgba(250,247,241,0.85)');
  const linkColor = onDark ? 'rgba(255,255,255,0.85)' : C.text;
  const linkHover = onDark ? '#fff' : C.navy;

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: bg,
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? `1px solid ${C.rule}` : '1px solid transparent',
      transition: 'background 0.35s ease, border-color 0.35s ease',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', height: 120, padding: '0 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          {scrolled || !dark
            ? <CompassLogo height={132}/>
            : <CompassLogoLight height={132}/>}
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
          {NAV_LINKS.map(l => {
            const isActive = l.label.toLowerCase() === active;
            return (
              <a key={l.href} href={l.href} style={{
                color: isActive ? (onDark ? '#fff' : C.navy) : linkColor,
                textDecoration: 'none',
                fontSize: 14, fontWeight: isActive ? 600 : 500,
                letterSpacing: '0.02em',
                position: 'relative',
                paddingBottom: 4,
                borderBottom: isActive ? `2px solid ${C.terracotta}` : '2px solid transparent',
                transition: 'color 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.color = linkHover}
              onMouseLeave={e => e.currentTarget.style.color = isActive ? (onDark ? '#fff' : C.navy) : linkColor}
              >{l.label}</a>
            );
          })}
          <a href="/contact/" style={{
            background: C.terracotta, color: '#fff', textDecoration: 'none',
            padding: '11px 22px', borderRadius: 999, fontSize: 13, fontWeight: 600, letterSpacing: '0.04em',
            transition: 'background 0.2s, transform 0.15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = C.terraDeep; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = C.terracotta; e.currentTarget.style.transform = 'none'; }}
          >Request a Bid</a>
          <a href="/contact/#respondents" style={{
            background: C.navy, color: '#fff', textDecoration: 'none',
            padding: '11px 22px', borderRadius: 999,
            fontSize: 13, fontWeight: 600, letterSpacing: '0.04em',
            transition: 'background 0.2s, transform 0.15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = C.navyDeep; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = C.navy; e.currentTarget.style.transform = 'none'; }}
          >Participate</a>
        </div>
      </div>
    </nav>
  );
}

// Light/inverted logo for dark hero
function CompassLogoLight({ height = 42 }) {
  return (
    <svg height={height} viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <text x="193.5" y="165" fontFamily="DM Serif Display, Georgia, serif" fontSize="110" fill="#fff">C</text>
      <g transform="translate(277.5 107.5)">
        <svg viewBox="0 0 100 100" width="60" height="60">
          <circle cx="50" cy="50" r="46" fill="none" stroke="#fff" strokeWidth="3"/>
          <path d="M 50 10 L 62 50 L 50 50 Z" fill="#9DC4DC"/>
          <path d="M 50 10 L 38 50 L 50 50 Z" fill="#9DC4DC" fillOpacity="0.55"/>
          <path d="M 50 90 L 62 50 L 50 50 Z" fill="#fff" fillOpacity="0.45"/>
          <path d="M 50 90 L 38 50 L 50 50 Z" fill="#fff"/>
          <line x1="14" y1="50" x2="22" y2="50" stroke="#fff" strokeWidth="2.6" strokeLinecap="round"/>
          <line x1="78" y1="50" x2="86" y2="50" stroke="#fff" strokeWidth="2.6" strokeLinecap="round"/>
          <circle cx="50" cy="50" r="3.5" fill="#fff"/>
        </svg>
      </g>
      <text x="341.5" y="165" fontFamily="DM Serif Display, Georgia, serif" fontSize="110" fill="#fff">mpass</text>
      <text x="400" y="245" fontFamily="Work Sans, sans-serif" fontSize="13" fontWeight="500" fill="#fff" fillOpacity="0.85" textAnchor="middle" letterSpacing="6.24">MARKETING  RESEARCH</text>
    </svg>
  );
}

// Eyebrow label (e.g. "Our Facility")
function Eyebrow({ children, color = C.terracotta, style }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
      textTransform: 'uppercase', color, ...style,
    }}>
      <span style={{ display: 'inline-block', width: 18, height: 1.5, background: color, marginRight: 12, verticalAlign: 'middle', position: 'relative', top: -3 }}/>
      {children}
    </div>
  );
}

// Section heading (serif)
function H2({ children, style, color = C.navy }) {
  return (
    <h2 style={{
      fontFamily: 'DM Serif Display, Georgia, serif',
      fontSize: 'clamp(34px, 4vw, 54px)',
      fontWeight: 400, color, lineHeight: 1.08, letterSpacing: '-0.01em',
      textWrap: 'balance',
      ...style,
    }}>{children}</h2>
  );
}

// Pill button
function Button({ children, href, variant = 'primary', style }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '15px 28px', borderRadius: 999,
    fontSize: 14, fontWeight: 600, letterSpacing: '0.03em',
    textDecoration: 'none', transition: 'all 0.2s', cursor: 'pointer',
    border: 'none',
  };
  const variants = {
    primary: { ...base, background: C.terracotta, color: '#fff' },
    secondary: { ...base, background: C.navy, color: '#fff' },
    ghost: { ...base, background: 'transparent', color: C.navy, border: `1.5px solid ${C.navy}` },
    ghostLight: { ...base, background: 'transparent', color: '#fff', border: `1.5px solid rgba(255,255,255,0.5)` },
  };
  const hovers = {
    primary: { background: C.terraDeep },
    secondary: { background: C.navyDeep },
    ghost: { background: C.navy, color: '#fff' },
    ghostLight: { background: '#fff', color: C.navy, borderColor: '#fff' },
  };
  const baseStyle = { ...variants[variant], ...style };
  return (
    <a href={href} style={baseStyle}
      onMouseEnter={e => Object.assign(e.currentTarget.style, hovers[variant], { transform: 'translateY(-1px)' })}
      onMouseLeave={e => Object.assign(e.currentTarget.style, baseStyle, { transform: 'none' })}
    >
      {children}
    </a>
  );
}

// Footer
function Footer() {
  return (
    <footer style={{ background: C.navyDeep, color: 'rgba(255,255,255,0.78)', padding: '72px 40px 32px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 56, marginBottom: 56 }}>
          <div>
            <CompassLogoLight height={56}/>
            <p style={{ fontSize: 14, lineHeight: 1.7, marginTop: 24, color: 'rgba(255,255,255,0.7)', maxWidth: 320 }}>
              A consumer research center delivering quality recruiting, excellent project management, and flawless execution — every time.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: C.amber, marginBottom: 18 }}>Explore</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {NAV_LINKS.map(l => (
                <li key={l.href}><a href={l.href} style={{ color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 14 }}>{l.label}</a></li>
              ))}
              <li><a href="/contact/#respondents" style={{ color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 14 }}>Join the Database</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: C.amber, marginBottom: 18 }}>Visit</div>
            <div style={{ fontSize: 14, lineHeight: 1.7 }}>
              3725 DaVinci Court<br/>
              Peachtree Corners, GA 30092
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', color: C.amber, marginBottom: 18 }}>Contact</div>
            <div style={{ fontSize: 14, lineHeight: 1.9 }}>
              <a href="tel:7704480754" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none', display: 'block' }}>(770) 448-0754</a>
              <a href="mailto:info@cmrcompass.com" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none', display: 'block' }}>info@cmrcompass.com</a>
            </div>
          </div>
        </div>
        <div style={{
          paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
          fontSize: 12, color: 'rgba(255,255,255,0.5)',
        }}>
          <div>© 2026 Compass Marketing Research. All rights reserved.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Industries served — used on home + services
const INDUSTRIES = [
  { name: 'Food & Beverage', icon: 'food' },
  { name: 'Home Care',       icon: 'home' },
  { name: 'Health & Beauty', icon: 'beauty' },
  { name: 'Restaurants',     icon: 'restaurant' },
  { name: 'Child & Baby',    icon: 'baby' },
  { name: 'Art',             icon: 'art' },
];

function IndustryIcon({ kind, size = 32, color = C.navy }) {
  const stroke = { stroke: color, strokeWidth: 1.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    food: <g {...stroke}>
      <path d="M6 14 C6 9, 10 6, 16 6 C22 6, 26 9, 26 14"/>
      <line x1="4" y1="14" x2="28" y2="14"/>
      <path d="M7 18 C9 22, 14 24, 16 24 C18 24, 23 22, 25 18"/>
    </g>,
    restaurant: <g {...stroke}>
      <path d="M9 4 V14 C9 16, 10 17, 12 17 V28"/>
      <line x1="9" y1="9" x2="14" y2="9"/>
      <path d="M14 4 V17 H12"/>
      <path d="M22 4 C19 4, 17 7, 17 11 C17 14, 19 16, 22 16 V28"/>
    </g>,
    beauty: <g {...stroke}>
      <path d="M16 4 C12 4, 10 8, 10 12 C10 16, 12 18, 16 18 C20 18, 22 16, 22 12 C22 8, 20 4, 16 4 Z"/>
      <path d="M16 18 V28"/>
      <path d="M11 24 H21"/>
    </g>,
    home: <g {...stroke}>
      <path d="M5 16 L16 6 L27 16"/>
      <path d="M8 14 V26 H24 V14"/>
      <rect x="14" y="19" width="4" height="7"/>
    </g>,
    baby: <g {...stroke}>
      <circle cx="16" cy="14" r="8"/>
      <circle cx="13" cy="13" r="0.8" fill={color}/>
      <circle cx="19" cy="13" r="0.8" fill={color}/>
      <path d="M13 17 C14 18.5, 18 18.5, 19 17"/>
      <path d="M9 9 C7 8, 6 6, 8 5"/>
      <path d="M23 9 C25 8, 26 6, 24 5"/>
    </g>,
  };
  return <svg width={size} height={size} viewBox="0 0 32 32">{paths[kind]}</svg>;
}

// Service icon (line illustration set)
function ServiceIcon({ kind, size = 40, color = C.terracotta }) {
  const stroke = { stroke: color, strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const set = {
    recruit: <g {...stroke}>
      <circle cx="14" cy="14" r="5"/>
      <path d="M6 28 C6 22, 10 20, 14 20 C18 20, 22 22, 22 28"/>
      <circle cx="26" cy="11" r="3"/>
      <path d="M22 19 C24 19, 30 19, 30 26"/>
    </g>,
    clt: <g {...stroke}>
      <rect x="5" y="8" width="10" height="7" rx="1"/>
      <rect x="17" y="8" width="10" height="7" rx="1"/>
      <rect x="5" y="19" width="10" height="7" rx="1"/>
      <rect x="17" y="19" width="10" height="7" rx="1"/>
      <circle cx="10" cy="11.5" r="1" fill={color}/>
      <circle cx="22" cy="11.5" r="1" fill={color}/>
      <circle cx="10" cy="22.5" r="1" fill={color}/>
      <circle cx="22" cy="22.5" r="1" fill={color}/>
    </g>,
    ihut: <g {...stroke}>
      <path d="M6 16 L16 7 L26 16"/>
      <path d="M9 14 V25 H23 V14"/>
      <path d="M14 25 V19 H18 V25"/>
    </g>,
    focus: <g {...stroke}>
      <circle cx="11" cy="11" r="4"/>
      <circle cx="21" cy="11" r="4"/>
      <circle cx="16" cy="22" r="4"/>
      <path d="M11 15 V19"/>
      <path d="M21 15 V19"/>
    </g>,
    idi: <g {...stroke}>
      <path d="M5 8 H19 V18 H12 L8 22 V18 H5 Z"/>
      <path d="M22 14 H27 V22 H24 L22 25 V22"/>
    </g>,
    ethno: <g {...stroke}>
      <circle cx="16" cy="16" r="11"/>
      <path d="M5 16 H27"/>
      <path d="M16 5 C12 8, 12 24, 16 27"/>
      <path d="M16 5 C20 8, 20 24, 16 27"/>
    </g>,
    shop: <g {...stroke}>
      <path d="M6 9 H8 L10 22 H24 L26 12 H10"/>
      <circle cx="12" cy="26" r="1.5"/>
      <circle cx="22" cy="26" r="1.5"/>
    </g>,
    intercept: <g {...stroke}>
      <circle cx="16" cy="16" r="3"/>
      <circle cx="16" cy="16" r="8"/>
      <circle cx="16" cy="16" r="13"/>
    </g>,
    other: <g {...stroke}>
      <path d="M6 16 H26"/>
      <path d="M16 6 V26"/>
      <path d="M9 9 L23 23"/>
      <path d="M23 9 L9 23"/>
    </g>,
  };
  return <svg width={size} height={size} viewBox="0 0 32 32">{set[kind]}</svg>;
}

Object.assign(window, {
  C, CompassMark, CompassLogo, CompassLogoLight,
  Navbar, Footer, Eyebrow, H2, Button,
  INDUSTRIES, IndustryIcon, ServiceIcon,
});