// hf.jsx — Hi-fi design tokens + shared primitives for Kyndrid website

const HF = {
  // Core
  navy:       '#07101f',
  navyMid:    '#111c30',
  ink:        '#0e1827',
  body:       '#3d4f68',
  muted:      '#7e90a9',
  border:     '#e2e8f2',
  borderMid:  '#c8d4e2',
  fill:       '#f4f6fb',
  fillLight:  '#f9fafE',
  heroBg:     '#fafbff',
  surface:    '#ffffff',

  // Brand teal — from logo
  blue:       '#0DAD9F',
  blueDark:   '#09958A',
  blueSoft:   '#E3F7F5',
  blueLight:  '#F0FBFA',

  // Keep Intelligence product blue distinct from brand teal
  intelBlue:  '#2351d4',

  // Product colour coding
  intel: { fg: '#2351d4', bg: '#ebefff', bd: '#bfccf7' },
  asset: { fg: '#0d7c73', bg: '#edfaf8', bd: '#9addd7' },
  staff: { fg: '#7234e8', bg: '#f4efff', bd: '#d9c8fc' },

  // Semantic
  green:      '#0c9460',
  greenSoft:  '#e8faf2',
  amber:      '#d97706',
  amberSoft:  '#fff7ed',
  red:        '#e02424',

  font: "'Manrope', system-ui, sans-serif",
  W: 1320,
};

// ── Icon path library ──────────────────────────────────────────────────────────
const HIC = {
  chart:    <><path d="M4 19V5"/><path d="M4 19h16"/><rect x="8" y="11" width="3" height="5"/><rect x="14" y="7" width="3" height="9"/></>,
  box:      <><path d="M3 8l9-5 9 5v8l-9 5-9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></>,
  users:    <><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 6a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.6"/></>,
  shield:   <><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></>,
  menu:     <><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h8M8 13h8M8 17h5"/></>,
  coins:    <><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/><path d="M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/></>,
  grid:     <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
  bell:     <><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
  bulb:     <><path d="M9 18h6M10 21h4"/><path d="M8 11a4 4 0 1 1 8 0c0 2-2 3-2 5h-4c0-2-2-3-2-5z"/></>,
  plug:     <><path d="M9 2v6M15 2v6"/><path d="M6 8h12v3a6 6 0 0 1-12 0z"/><path d="M12 17v5"/></>,
  eye:      <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
  check:    <><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-5"/></>,
  hand:     <><path d="M9 11V5a1.5 1.5 0 0 1 3 0v5M12 10V4a1.5 1.5 0 0 1 3 0v6M15 10V6a1.5 1.5 0 0 1 3 0v8a6 6 0 0 1-6 6h-1a6 6 0 0 1-5-3l-2.5-4a1.5 1.5 0 0 1 2.5-1.6L9 13"/></>,
  building: <><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/></>,
  store:    <><path d="M4 9l1-5h14l1 5M4 9h16v11H4zM4 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0M9 20v-5h6v5"/></>,
  doc:      <><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4M9 13h6M9 17h6"/></>,
  wrench:   <><path d="M14 7a4 4 0 0 1-5 5l-5 5 2 2 5-5a4 4 0 0 0 5-5z"/><circle cx="16" cy="6" r="1"/></>,
  pin:      <><path d="M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
  rota:     <><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4M8 14h2M14 14h2M8 18h2"/></>,
  award:    <><circle cx="12" cy="9" r="5"/><path d="M9 13l-2 8 5-3 5 3-2-8"/></>,
  swap:     <><path d="M4 8h13l-3-3M20 16H7l3 3"/></>,
  search:   <><circle cx="11" cy="11" r="6"/><path d="M16 16l5 5"/></>,
};

// ── Glyph icon box ─────────────────────────────────────────────────────────────
function HGlyph({ d, size = 22, color = HF.blue, bg = HF.blueSoft, box = 46 }) {
  return (
    <span style={{
      width: box, height: box, borderRadius: Math.round(box * 0.26),
      background: bg, display: 'inline-flex', alignItems: 'center',
      justifyContent: 'center', flex: '0 0 auto',
    }}>
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
        stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
        {d}
      </svg>
    </span>
  );
}

function HArrow({ color = 'currentColor', size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none"
      stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8h9M9 4l4 4-4 4"/>
    </svg>
  );
}

// ── Typography ─────────────────────────────────────────────────────────────────
function HEyebrow({ children, color = HF.blue, style = {} }) {
  return (
    <div style={{
      fontSize: 12.5, fontWeight: 700, letterSpacing: '0.1em',
      textTransform: 'uppercase', color, marginBottom: 16, ...style,
    }}>{children}</div>
  );
}

function HH1({ children, style = {} }) {
  return (
    <h1 style={{
      fontSize: 60, lineHeight: 1.05, fontWeight: 800, color: HF.ink,
      letterSpacing: '-1.8px', margin: 0, textWrap: 'balance',
      fontFamily: HF.font, ...style,
    }}>{children}</h1>
  );
}

function HH2({ children, style = {} }) {
  return (
    <h2 style={{
      fontSize: 40, lineHeight: 1.14, fontWeight: 800, color: HF.ink,
      letterSpacing: '-0.9px', margin: 0, textWrap: 'balance',
      fontFamily: HF.font, ...style,
    }}>{children}</h2>
  );
}

function HH3({ children, style = {} }) {
  return (
    <h3 style={{
      fontSize: 18, lineHeight: 1.3, fontWeight: 700, color: HF.ink,
      letterSpacing: '-0.25px', margin: 0, fontFamily: HF.font, ...style,
    }}>{children}</h3>
  );
}

function HLead({ children, style = {} }) {
  return (
    <p style={{
      fontSize: 18.5, lineHeight: 1.62, color: HF.body, margin: 0,
      maxWidth: 580, textWrap: 'pretty', fontFamily: HF.font, ...style,
    }}>{children}</p>
  );
}

function HBody({ children, style = {} }) {
  return (
    <p style={{
      fontSize: 14.5, lineHeight: 1.62, color: HF.muted, margin: 0,
      textWrap: 'pretty', fontFamily: HF.font, ...style,
    }}>{children}</p>
  );
}

// ── Buttons ────────────────────────────────────────────────────────────────────
function HBtn({ children, kind = 'primary', size = 'md', style = {} }) {
  const pad  = size === 'lg' ? '14px 28px' : '11px 20px';
  const fs   = size === 'lg' ? 15.5 : 14;
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: pad, fontSize: fs, fontWeight: 700, borderRadius: 10,
    fontFamily: HF.font, cursor: 'pointer', whiteSpace: 'nowrap',
    textDecoration: 'none', ...style,
  };
  const variants = {
    primary:      { ...base, background: HF.blue,  color: '#fff', border: `1px solid ${HF.blue}`, letterSpacing: '-0.1px' },
    dark:         { ...base, background: HF.navy,  color: '#fff', border: `1px solid ${HF.navy}`, letterSpacing: '-0.1px' },
    outline:      { ...base, background: HF.surface, color: HF.ink, border: `1px solid ${HF.borderMid}` },
    ghost:        { ...base, background: 'transparent', color: HF.blue, border: 'none', padding: 0 },
    outlineLight: { ...base, background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.28)' },
  };
  return <span className="k-btn" style={variants[kind]}>{children}</span>;
}

// ── Logo ───────────────────────────────────────────────────────────────────────
// Brand teal from the Kyndrid logo mark
const KYNDRID_TEAL = '#0DAD9F';

// SVG reconstruction of the K mark. Used for the parent brand so the nav never
// shows the white rectangle baked into the older PNG.
function HBrandMark({ armFill = HF.navy, size = 40 }) {
  // viewBox "-1 -2 40 44" gives a small bleed so the rotated arm corners
  // clip cleanly at the SVG viewport edge
  return (
    <svg width={size} height={Math.round(size * 1.1)} viewBox="-1 -2 40 44" fill="none" overflow="hidden" style={{ flex: '0 0 auto' }}>
      {/* left teal spine with subtle gradient */}
      <defs>
        <linearGradient id="spineGrad" x1="0" y1="0" x2="0" y2="40" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#13BFB0"/>
          <stop offset="100%" stopColor="#0A9186"/>
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="11" height="40" rx="5.5" fill="url(#spineGrad)"/>
      {/* upper diagonal arm */}
      <polygon points="15,25 39,9 33,-1 9,15" fill={armFill}/>
      {/* lower diagonal arm */}
      <polygon points="9,25 33,41 39,31 15,15" fill={armFill}/>
      {/* teal junction dot — sits on top */}
      <circle cx="12" cy="20" r="5.5" fill={KYNDRID_TEAL}/>
    </svg>
  );
}

function HLogo({ light = false }) {
  if (!light) {
    return (
      <img
        src="assets/kyndrid-labs-original.png"
        alt="Kyndrid Labs"
        style={{ height: 76, width: 'auto', display: 'block', objectFit: 'contain' }}
      />
    );
  }
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', background: '#fff', borderRadius: 8, padding: '8px 10px' }}>
      <img
        src="assets/kyndrid-labs-original.png"
        alt="Kyndrid Labs"
        style={{ height: 54, width: 'auto', display: 'block', objectFit: 'contain' }}
      />
    </span>
  );
}

// ── Navigation ─────────────────────────────────────────────────────────────────
function HNav({ active = 'home' }) {
  const go = (route) => { if (window.__nav) { window.__nav(route); } };
  const items = [
    { label: 'Products',  route: 'products',  chevron: true },
    { label: 'Sectors',   route: 'sectors',   chevron: true },
    { label: 'Customers', route: null,        chevron: false },
    { label: 'Resources', route: null,        chevron: false },
    { label: 'Company',   route: null,        chevron: false },
  ];
  const productRoutes = ['products','intelligence','asset-ops'];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      height: 110, display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', padding: '0 48px',
      background: '#ffffff',
      borderBottom: '1px solid rgba(226,232,242,0.8)',
      fontFamily: HF.font,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 54 }}>
        <span onClick={() => go('home')} style={{ cursor: 'pointer' }}><HLogo /></span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {items.map(item => {
            const isActive = item.route === active ||
              (item.route === 'products' && productRoutes.includes(active));
            return (
              <span key={item.label} onClick={() => item.route && go(item.route)} style={{
                fontSize: 14.5, fontWeight: 600,
                color: isActive ? HF.ink : HF.body,
                display: 'flex', alignItems: 'center', gap: 4,
                cursor: item.route ? 'pointer' : 'default',
                borderBottom: isActive ? `2px solid ${HF.blue}` : '2px solid transparent',
                paddingBottom: 2,
              }}>
                {item.label}
                {item.chevron && (
                  <svg width="11" height="11" viewBox="0 0 12 12" fill="none"
                    stroke="currentColor" strokeWidth="1.7" strokeLinecap="round">
                    <path d="M2 4l4 4 4-4"/>
                  </svg>
                )}
              </span>
            );
          })}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span style={{ fontSize: 14.5, fontWeight: 600, color: HF.body, cursor: 'pointer' }}>Sign in</span>
        <span onClick={() => go('contact')} style={{ cursor: 'pointer' }}>
          <HBtn kind="primary">Book a demo</HBtn>
        </span>
      </div>
    </nav>
  );
}

// ── Section heading ────────────────────────────────────────────────────────────
function HSectionHead({ eyebrow, title, sub, align = 'center', maxW = 660 }) {
  const centered = align === 'center';
  return (
    <div style={{
      textAlign: align, marginBottom: 52,
      maxWidth: centered ? maxW : 'none',
      marginLeft: centered ? 'auto' : 0,
      marginRight: centered ? 'auto' : 0,
    }}>
      {eyebrow && <HEyebrow>{eyebrow}</HEyebrow>}
      <HH2>{title}</HH2>
      {sub && (
        <HLead style={{
          marginTop: 18,
          marginLeft: centered ? 'auto' : 0,
          marginRight: centered ? 'auto' : 0,
        }}>{sub}</HLead>
      )}
    </div>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────────
function HFooter() {
  const cols = [
    ['Products',  ['Kyndrid Intelligence', 'Asset Ops']],
    ['Sectors',   ['Hospitality', 'Retail', 'Convenience', 'Charities', 'Multi-site']],
    ['Company',   ['About', 'Careers', 'Contact', 'Security']],
  ];
  return (
    <footer style={{
      background: HF.navy, padding: '64px 72px 40px',
      color: '#94a3b8', fontFamily: HF.font,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.5fr repeat(3, 1fr)', gap: 40,
        paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,.08)',
      }}>
        <div>
          <HLogo light />
          <p style={{ fontSize: 14, lineHeight: 1.65, color: '#64748b', marginTop: 18, maxWidth: 240 }}>
            Two focused Kyndrid platforms: Asset Ops for asset and site management, and Intelligence for business insight.
          </p>
        </div>
        {cols.map(([heading, links]) => (
          <div key={heading}>
            <div style={{
              fontSize: 11.5, fontWeight: 700, color: '#fff',
              letterSpacing: '0.07em', textTransform: 'uppercase', marginBottom: 16,
            }}>{heading}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {links.map(l => (
                <span key={l} style={{ fontSize: 14, color: '#64748b', cursor: 'pointer' }}>{l}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 24, fontSize: 13, color: '#475569',
      }}>
        <span>© 2026 Kyndrid Labs Ltd. All rights reserved.</span>
        <div style={{ display: 'flex', gap: 24 }}>
          {['Privacy', 'Terms', 'Cookies'].map(l => (
            <span key={l} style={{ cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  HF, HIC,
  HGlyph, HArrow,
  HEyebrow, HH1, HH2, HH3, HLead, HBody,
  HBtn, HLogo, HNav, HFooter, HSectionHead,
  HBrandMark,
});