/* Shared atoms used across pages */

function Logo({ size = 28 }) {
  return <img src="assets/live-eye.svg" alt="" width={size} height={size} />;
}

function Icon({ name, size = 18, style }) {
  return (
    <span className="material-icons-outlined"
      style={{ fontSize: size, lineHeight: 1, userSelect: 'none', ...style }}>
      {name}
    </span>
  );
}

function StatusDot({ kind = 'pass', pulse = true }) {
  const map = {
    pass: 'var(--color-pass)',
    warn: 'var(--color-warning)',
    defect: 'var(--color-defect)',
    info: 'var(--color-info)',
    idle: 'var(--color-on-surface-tertiary)',
  };
  return (
    <span style={{
      width: 8, height: 8, borderRadius: '50%',
      background: map[kind], display: 'inline-block', flexShrink: 0,
      boxShadow: pulse ? `0 0 6px ${map[kind]}88` : 'none',
      animation: pulse ? 'viai-pulse 2s ease-in-out infinite' : 'none',
    }} />
  );
}

function Eyebrow({ children, color = 'var(--color-primary)' }) {
  return (
    <div className="eyebrow" style={{ color }}>
      <span className="dot" style={{ background: color }}></span>
      {children}
    </div>
  );
}

function Nav({ route, setRoute, theme, toggleTheme }) {
  const link = (id, label) => (
    <a href={'#' + id} onClick={(e) => { e.preventDefault(); setRoute(id); window.scrollTo(0, 0); }}
       className={route === id ? 'active' : ''}>
      {label}
    </a>
  );
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#home" className="nav-brand"
           onClick={(e) => { e.preventDefault(); setRoute('home'); window.scrollTo(0, 0); }}>
          <Logo size={28} />
          <span>VIAI</span>
          <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)',
            color: 'var(--color-on-surface-tertiary)', letterSpacing: 0.5,
            marginLeft: 4, marginTop: 4 }}>v2.4</span>
        </a>
        <div className="nav-links">
          {link('product', 'Product')}
          {link('pricing', 'Pricing')}
          {link('company', 'Company')}
        </div>
        <div className="nav-cta">
          <button className="theme-toggle" onClick={toggleTheme} aria-label="Toggle theme">
            <Icon name={theme === 'dark' ? 'light_mode' : 'dark_mode'} size={18} />
          </button>
          <button className="btn btn-ghost" onClick={() => setRoute('company')}>Sign in</button>
          <button className="btn btn-primary" onClick={() => setRoute('demo')}>
            <Icon name="play_arrow" size={16} />
            Watch Demo
          </button>
        </div>
      </div>
    </nav>
  );
}

function Footer({ setRoute }) {
  const link = (id, label) => (
    <a href={'#' + id} onClick={(e) => { e.preventDefault(); setRoute(id); window.scrollTo(0, 0); }}>
      {label}
    </a>
  );
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="nav-brand" style={{ marginBottom: 12 }}>
              <Logo size={28} />
              <span>VIAI</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--color-on-surface-secondary)',
                       maxWidth: 320, margin: 0, lineHeight: 1.5 }}>
              Visual Inspection AI — operator-grade defect detection that runs entirely on the factory floor.
            </p>
            <div style={{ marginTop: 16 }}>
              <span className="live-mini">
                <span className="dot"></span>
                ALL SYSTEMS OPERATIONAL
              </span>
            </div>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li>{link('product', 'Edge Inspector')}</li>
              <li>{link('product', 'Cloud Dashboard')}</li>
              <li>{link('product', 'Detector Lab')}</li>
              <li>{link('pricing', 'Pricing')}</li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li>{link('company', 'About')}</li>
              <li>{link('company', 'Team')}</li>
              <li>{link('company', 'Careers')}</li>
              <li>{link('company', 'Contact')}</li>
            </ul>
          </div>
          <div>
            <h5>Resources</h5>
            <ul>
              <li><a href="#">Documentation</a></li>
              <li><a href="#">API reference</a></li>
              <li><a href="#">Whitepaper</a></li>
              <li><a href="#">Status</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 VIAI Inc. — Visual Inspection AI</div>
          <div style={{ display: 'flex', gap: 16, fontFamily: 'var(--font-mono)' }}>
            <span>SOC 2 Type II</span>
            <span>·</span>
            <span>ISO 27001</span>
            <span>·</span>
            <span>Made for Industry 4.0</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, Icon, StatusDot, Eyebrow, Nav, Footer });