/* global React */
/* ==========================================================
   Shared primitives lifted from the SkillsCake marketing kit.
   Kept inline so the /about rewrite bundle is self-contained.
   ========================================================== */

function Wordmark({ height = 72 }) {
  return (
    <img
      src="design-system/assets/logo-skillscake-s-dot.svg"
      alt="SkillsCake"
      style={{ display: 'block', height, width: 'auto' }}
    />
  );
}

function Button({ children, variant = 'primary', href, onClick, type = 'button' }) {
  const cls = `sc-btn ${variant === 'pro' ? 'sc-btn-pro' : ''}`;
  if (href) return <a href={href} className={cls}>{children}</a>;
  return <button type={type} className={cls} onClick={onClick}>{children}</button>;
}

function NavCta({ children, href, onClick }) {
  if (href) return <a href={href} className="sc-nav-cta">{children}</a>;
  return <button type="button" className="sc-nav-cta" onClick={onClick}>{children}</button>;
}

function Divider() {
  return <hr className="sc-divider" />;
}

/* About page header — same bones as marketing nav; active crumb is /about. */
function ExpertHeader({ launchMode }) {
  const isOpen = launchMode === 'open';
  return (
    <header style={{
      padding: '0.65rem 0 1.1rem',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: '1rem',
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center', gap: '0.7rem', lineHeight: 0, textDecoration: 'none' }}>
        <Wordmark height={80} />
        <span style={{
          fontFamily: 'var(--font-mono)',
          fontSize: '0.62rem',
          color: 'var(--text-faint)',
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          borderLeft: '1px solid var(--border)',
          paddingLeft: '0.7rem',
          marginLeft: '0.15rem',
          alignSelf: 'center',
          lineHeight: 1,
          transform: 'translateY(2px)',
        }}>
          / About
        </span>
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: '1.4rem' }}>
        <a href="/learn" className="sc-nav-link">Learn</a>
        <a href="/about" className="sc-nav-link" style={{ color: 'var(--text-bright)' }}>About</a>
        {isOpen
          ? <NavCta href="/signup">Get started</NavCta>
          : <NavCta href="/#waitlist">Join the waitlist</NavCta>}
      </nav>
    </header>
  );
}

/* Minimal footer — same bones as marketing, shortened. */
function ExpertFooter() {
  return (
    <footer style={{
      padding: '2rem 0 1.5rem',
      marginTop: '1rem',
      borderTop: '1px solid var(--border)',
      display: 'flex',
      justifyContent: 'space-between',
      flexWrap: 'wrap',
      gap: '0.75rem 1rem',
    }}>
      <span className="sc-footnote">
        © 2026 Agent Horizon LLC.<br />
        SkillsCake™ is a product of Agent Horizon LLC.
      </span>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.4rem' }}>
        <nav style={{ display: 'flex', gap: '0.4rem', fontSize: '0.7rem' }}>
          <a href="https://x.com/skillscake" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-dim)', textDecoration: 'none' }}>X</a>
          <span style={{ color: 'var(--text-faint)' }}>·</span>
          <a href="https://bsky.app/profile/skillscake.bsky.social" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-dim)', textDecoration: 'none' }}>Bluesky</a>
          <span style={{ color: 'var(--text-faint)' }}>·</span>
          <a href="https://www.linkedin.com/company/agent-horizon-llc/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-dim)', textDecoration: 'none' }}>LinkedIn</a>
        </nav>
        <a href="https://agenthorizonai.com" style={{ fontSize: '0.7rem', color: 'var(--text-dim)', textDecoration: 'none' }}>agenthorizonai.com</a>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Wordmark,
  Button,
  NavCta,
  Divider,
  ExpertHeader,
  ExpertFooter,
});
