// Altus UI Kit — Core Components
// Load with: <script type="text/babel" src="Components.jsx"></script>

const altusTokens = {
  midnight: '#0A3D5C',
  deep:     '#0D1B2A',
  teal: '#0F6E56',
  mint: '#5DCAA5',
  cloud: '#F4F9F7',
  ink: '#1A1A1A',
  white: '#FFFFFF',
  muted: '#6B7B8A',
  border: '#D8E4E0',
  errorRed: '#E24B4A',
  font: "'Poppins', -apple-system, BlinkMacSystemFont, sans-serif",
};

// ── Monogram SVG ─────────────────────────────────────────────────────────────
function AltusMonogram({ size = 32, color = altusTokens.mint }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <line x1="8" y1="40" x2="24" y2="8" stroke={color} strokeWidth="4.5" strokeLinecap="round"/>
      <line x1="40" y1="40" x2="24" y2="8" stroke={color} strokeWidth="4.5" strokeLinecap="round"/>
      <line x1="14" y1="27" x2="34" y2="27" stroke={color} strokeWidth="4.5" strokeLinecap="round"/>
    </svg>
  );
}

// ── Logo Lockup ───────────────────────────────────────────────────────────────
function AltusLogo({ variant = 'light', size = 'md' }) {
  const sizes = { sm: { mono: 20, text: 14 }, md: { mono: 28, text: 18 }, lg: { mono: 36, text: 24 } };
  const s = sizes[size] || sizes.md;
  const colors = {
    light: { mono: altusTokens.mint, text: altusTokens.mint, bg: 'transparent' },
    dark:  { mono: altusTokens.midnight, text: altusTokens.midnight, bg: 'transparent' },
    teal:  { mono: altusTokens.white, text: altusTokens.white, bg: 'transparent' },
  };
  const c = colors[variant] || colors.light;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <AltusMonogram size={s.mono} color={c.mono} />
      <span style={{
        fontFamily: altusTokens.font,
        fontSize: s.text,
        fontWeight: 500,
        letterSpacing: '0.03em',
        textTransform: 'uppercase',
        color: c.text,
      }}>ALTUS</span>
    </div>
  );
}

// ── Navigation ────────────────────────────────────────────────────────────────
function Nav({ currentPage, onNavigate }) {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'services', label: 'Services' },
    { id: 'products', label: 'Products' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <nav style={{
      background: 'rgba(13,27,42,0.75)',
      backdropFilter: 'blur(18px)',
      WebkitBackdropFilter: 'blur(18px)',
      borderBottom: `1px solid rgba(93,202,165,0.12)`,
      position: 'sticky', top: 0, zIndex: 100,
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: '0 32px',
        minHeight: 64,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 16,
      }}>
        <button onClick={() => onNavigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <AltusLogo variant="light" size="md" />
        </button>
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          {links.map(link => (
            <button key={link.id} onClick={() => onNavigate(link.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: altusTokens.font,
              fontSize: 14, fontWeight: 500,
              color: currentPage === link.id ? altusTokens.mint : 'rgba(255,255,255,0.7)',
              transition: 'color 150ms',
              padding: '4px 0',
              borderBottom: currentPage === link.id ? `2px solid ${altusTokens.mint}` : '2px solid transparent',
            }}>{link.label}</button>
          ))}
          <AltusButton size="sm" onClick={() => onNavigate('contact')}>Let's talk</AltusButton>
        </div>
      </div>
    </nav>
  );
}

// ── Button ────────────────────────────────────────────────────────────────────
function AltusButton({ children, variant = 'primary', size = 'md', onClick, style = {} }) {
  const [hovered, setHovered] = React.useState(false);
  const sizes = {
    sm: { padding: '8px 16px', fontSize: 13 },
    md: { padding: '11px 22px', fontSize: 15 },
    lg: { padding: '14px 28px', fontSize: 17 },
  };
  const variants = {
    primary: {
      background: hovered ? altusTokens.mint : altusTokens.teal,
      color: hovered ? altusTokens.midnight : altusTokens.white,
      border: 'none',
      boxShadow: hovered ? '0 0 20px rgba(93,202,165,0.4)' : 'none',
      transform: hovered ? 'translateY(-2px)' : 'translateY(0)',
    },
    ghost: {
      background: hovered ? 'rgba(15,110,86,0.08)' : 'transparent',
      color: altusTokens.teal,
      border: `1.5px solid ${altusTokens.teal}`,
    },
    dark: {
      background: hovered ? '#082E47' : altusTokens.midnight,
      color: altusTokens.white,
      border: 'none',
    },
    ghost_light: {
      background: hovered ? 'rgba(93,202,165,0.2)' : 'transparent',
      color: hovered ? '#FFFFFF' : altusTokens.mint,
      border: `1.5px solid ${altusTokens.mint}`,
      boxShadow: hovered ? '0 0 16px rgba(93,202,165,0.3)' : 'none',
      transform: hovered ? 'translateY(-2px)' : 'translateY(0)',
    },
  };
  const v = variants[variant] || variants.primary;
  const s = sizes[size] || sizes.md;
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        ...s,
        fontFamily: altusTokens.font,
        fontWeight: 500,
        borderRadius: 8,
        cursor: 'pointer',
        transition: 'all 200ms ease',
        lineHeight: 1,
        ...v,
        ...style,
      }}
    >{children}</button>
  );
}

// ── Badge / Tag ───────────────────────────────────────────────────────────────
function Badge({ children, variant = 'mint' }) {
  const variants = {
    mint: { background: '#DFF3EC', color: altusTokens.teal },
    midnight: { background: altusTokens.midnight, color: altusTokens.mint },
    muted: { background: '#E8EEEC', color: altusTokens.muted },
    glass: { background: 'rgba(93,202,165,0.12)', color: altusTokens.mint, border: '1px solid rgba(93,202,165,0.2)' },
  };
  const v = variants[variant] || variants.mint;
  return (
    <span style={{
      display: 'inline-block',
      padding: '3px 10px',
      borderRadius: 9999,
      fontSize: 11,
      fontWeight: 500,
      letterSpacing: '0.04em',
      ...v,
    }}>{children}</span>
  );
}

// ── Card ──────────────────────────────────────────────────────────────────────
function Card({ children, variant = 'white', style = {} }) {
  const variants = {
    white: { background: altusTokens.white, border: `1px solid ${altusTokens.border}`, boxShadow: '0 1px 3px rgba(10,61,92,0.08)' },
    cloud: { background: altusTokens.cloud, border: `1px solid ${altusTokens.border}` },
    dark:  { background: altusTokens.midnight, border: 'none' },
  };
  return (
    <div style={{
      borderRadius: 12,
      padding: '24px',
      ...variants[variant],
      ...style,
    }}>{children}</div>
  );
}

// ── Section Label ─────────────────────────────────────────────────────────────
function SectionLabel({ children }) {
  return (
    <div style={{
      fontFamily: altusTokens.font,
      fontSize: 11,
      fontWeight: 500,
      letterSpacing: '0.1em',
      textTransform: 'uppercase',
      color: altusTokens.mint,
      marginBottom: 12,
    }}>{children}</div>
  );
}

// ── Divider ───────────────────────────────────────────────────────────────────
function Divider({ color = altusTokens.border }) {
  return <hr style={{ border: 'none', borderTop: `1px solid ${color}`, margin: 0 }} />;
}

// ── Footer ────────────────────────────────────────────────────────────────────
function Footer({ onNavigate }) {
  const linkStyle = {
    background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left',
    color: 'rgba(255,255,255,0.65)', fontSize: 13, fontFamily: altusTokens.font,
  };
  const cols = [
    { title: 'Services', links: [
      { label: 'Strategy',       target: 'services' },
      { label: 'Sales Process',  target: 'services' },
      { label: 'CRM & Tooling',  target: 'services' },
      { label: 'AI Integration', target: 'services' },
    ]},
    { title: 'Products', links: [
      { label: 'Altus Move',   target: 'products' },
      { label: 'Altus Energy', target: 'products' },
      { label: 'Altus AI',     target: 'products' },
    ]},
    { title: 'Company', links: [
      { label: 'About',          target: 'home' },
      { label: 'Contact',        target: 'contact' },
      { label: 'Privacy Policy', target: 'privacy' },
    ]},
  ];
  return (
    <footer style={{ background: '#080F18', borderTop: `1px solid rgba(93,202,165,0.1)`, padding: '48px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="footer-cols" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 32, marginBottom: 40 }}>
          <div>
            <AltusLogo variant="light" size="md" />
            <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 12, maxWidth: 260, lineHeight: 1.6, fontFamily: altusTokens.font }}>
              Strategy · Tools · Growth
            </p>
          </div>
          <div className="footer-link-cols" style={{ display: 'flex', gap: 64, flexWrap: 'wrap' }}>
            {cols.map(col => (
              <div key={col.title}>
                <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12, fontFamily: altusTokens.font }}>{col.title}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {col.links.map(l => (
                    <button key={l.label} type="button" onClick={() => onNavigate(l.target)} style={linkStyle}>{l.label}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        <Divider color="rgba(93,202,165,0.15)" />
        <div className="footer-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginTop: 24 }}>
          <span style={{ color: 'rgba(255,255,255,0.35)', fontSize: 12, fontFamily: altusTokens.font }}>© 2026 Altus. All rights reserved.</span>
          <span style={{ color: 'rgba(255,255,255,0.35)', fontSize: 12, fontFamily: altusTokens.font }}>Founded by Alasdair Johnston</span>
        </div>
      </div>
    </footer>
  );
}

// Export all to window
Object.assign(window, {
  altusTokens,
  AltusMonogram,
  AltusLogo,
  Nav,
  AltusButton,
  Badge,
  Card,
  SectionLabel,
  Divider,
  Footer,
});