// Metis — Shared Components: Nav, Footer, Logo

const CG = "'Cormorant Garamond', Georgia, serif";
const SANS = "'Cormorant Garamond', Georgia, serif"; // use CG for nav links too for brand consistency

const MetisLogo = ({ size = 'md' }) => {
  const scale = size === 'sm' ? 0.6 : size === 'lg' ? 1.2 : 1.33;
  const w = Math.round(110 * scale);
  const h = Math.round(52 * scale);
  return (
    <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
      <svg viewBox="0 0 110 52" width={w} height={h} xmlns="http://www.w3.org/2000/svg">
        {/* Circle monogram */}
        <circle cx="55" cy="18" r="14" fill="none" stroke="#1F5FBF" strokeWidth="1.2"/>
        <text x="55" y="23" textAnchor="middle" fill="#1F5FBF"
          fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="15" fontWeight="400">M</text>
        {/* METIS wordmark */}
        <text x="55" y="44" textAnchor="middle" fill="#1F5FBF"
          fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="13" fontWeight="400"
          letterSpacing="5">METIS</text>
      </svg>
    </div>
  );
};

const MetisFooterLogo = () => (
  <svg viewBox="0 0 110 52" width="88" height="42" xmlns="http://www.w3.org/2000/svg">
    <circle cx="55" cy="18" r="14" fill="none" stroke="#F6F7FA" strokeWidth="1.2"/>
    <text x="55" y="23" textAnchor="middle" fill="#F6F7FA"
      fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="15" fontWeight="400">M</text>
    <text x="55" y="44" textAnchor="middle" fill="#F6F7FA"
      fontFamily="'Cormorant Garamond', Georgia, serif" fontSize="13" fontWeight="400"
      letterSpacing="5">METIS</text>
  </svg>
);

const navStyles = {
  nav: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    background: '#F6F7FA',
    borderBottom: '1px solid rgba(22,33,62,0.1)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 48px', height: '80px',
  },
  links: { display: 'flex', alignItems: 'center', gap: '24px' },
  link: {
    fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: '13px',
    letterSpacing: '1.5px', textTransform: 'uppercase', color: '#16213E',
    textDecoration: 'none', cursor: 'pointer', opacity: 0.7,
    transition: 'opacity 0.2s',
    whiteSpace: 'nowrap',
  },
  linkActive: { opacity: 1, borderBottom: '1px solid #1F5FBF', paddingBottom: '2px' },
  cta: {
    fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: '13px',
    letterSpacing: '2px', textTransform: 'uppercase',
    background: '#16213E', color: '#F6F7FA',
    border: 'none', padding: '10px 22px', cursor: 'pointer',
    transition: 'background 0.2s, transform 0.2s, box-shadow 0.2s',
  },
};

const MetisNav = ({ page, setPage }) => {
  const [hovered, setHovered] = React.useState(null);
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About' },
    { id: 'solutions', label: 'Solutions' },
    { id: 'contact', label: 'Demo' },
    { id: 'contact_us', label: 'Contact Us' },
  ];
  return (
    <nav style={navStyles.nav}>
      <div onClick={() => setPage('home')}><MetisLogo /></div>
      <div style={navStyles.links}>
        {links.map(l => (
          <span key={l.id} onClick={() => setPage(l.id)}
            onMouseEnter={() => setHovered(l.id)}
            onMouseLeave={() => setHovered(null)}
            style={{
              ...navStyles.link,
              ...(page === l.id ? navStyles.linkActive : {}),
              opacity: hovered === l.id ? 1 : page === l.id ? 1 : 0.6,
            }}>{l.label}</span>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
        <a href="/app" style={{ ...navStyles.link, opacity: 0.7 }}
          onMouseEnter={e => e.currentTarget.style.opacity = 1}
          onMouseLeave={e => e.currentTarget.style.opacity = 0.7}>Sign In</a>
        <button style={navStyles.cta}
          onMouseEnter={e => { e.target.style.background = '#1F5FBF'; e.target.style.transform = 'translateY(-2px)'; e.target.style.boxShadow = '0 6px 20px rgba(22,33,62,0.18)'; }}
          onMouseLeave={e => { e.target.style.background = '#16213E'; e.target.style.transform = 'translateY(0)'; e.target.style.boxShadow = 'none'; }}
          onClick={() => setPage('contact')}>View Demo</button>
      </div>
    </nav>
  );
};

const MetisFooter = ({ setPage }) => (
  <footer style={{ background: '#16213E', color: '#F6F7FA', padding: '60px 48px 40px', marginTop: 'auto' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '48px', flexWrap: 'wrap', gap: '32px' }}>
      <div>
        <MetisFooterLogo />
        <p style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontStyle: 'italic', fontSize: '18px', color: 'rgba(246,247,250,0.85)', marginTop: '16px', maxWidth: '240px' }}>
          Verify every business. Instantly.
        </p>
      </div>
      <div style={{ display: 'flex', gap: '64px', flexWrap: 'wrap' }}>
        {[
          { title: 'Company', links: [['About', 'about'], ['Solutions', 'solutions'], ['Contact Us', 'contact_us']] },
          { title: 'Product', links: [['View a Demo', 'contact'], ['Solutions Overview', 'solutions']] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: '19px', letterSpacing: '3px', textTransform: 'uppercase', color: '#5B6B8C', marginBottom: '16px' }}>{col.title}</div>
            {col.links.map(([label, id]) => (
              <div key={label} onClick={() => setPage(id)}
                style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: '19px', color: 'rgba(246,247,250,0.9)', marginBottom: '10px', cursor: 'pointer', transition: 'color 0.2s' }}
                onMouseEnter={e => e.target.style.color = '#F6F7FA'}
                onMouseLeave={e => e.target.style.color = 'rgba(246,247,250,0.9)'}
              >{label}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
    <div style={{ borderTop: '1px solid rgba(246,247,250,0.1)', paddingTop: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
      <span style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: '18px', letterSpacing: '1px', color: 'rgba(246,247,250,0.65)' }}>© 2026 Metis. All rights reserved.</span>
      <span style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: '18px', letterSpacing: '1px', color: 'rgba(246,247,250,0.65)' }}>Workers' Comp Intelligence</span>
    </div>
  </footer>
);

Object.assign(window, { MetisLogo, MetisNav, MetisFooter });