// wf.jsx — shared wireframe primitives for the Kyndrid website wireframes.
// Mid-fi wireframe language: greyscale + single blue accent, Manrope, labelled
// placeholder blocks. Exported to window for use across babel scripts.

const WF = {
  navy: '#0f172a',
  ink: '#1e293b',
  slate: '#475569',
  slate2: '#64748b',
  mute: '#94a3b8',
  line: '#e2e8f0',
  line2: '#cbd5e1',
  fill: '#f1f5f9',
  fill2: '#f8fafc',
  accent: '#2563eb',
  accentSoft: '#dbeafe',
  amber: '#d97706',
  red: '#dc2626',
  green: '#059669',
  font: "'Manrope', system-ui, sans-serif",
  W: 1320, // page content width
};

// ---- layout ----
function Page({ children, w = WF.W }) {
  return (
    <div style={{ width: w, fontFamily: WF.font, color: WF.slate, background: '#fff', position: 'relative' }}>
      {children}
    </div>
  );
}

function Section({ children, pad = '72px 72px', bg = '#fff', border = false, style = {} }) {
  return (
    <section style={{ padding: pad, background: bg, borderTop: border ? `1px solid ${WF.line}` : 'none', ...style }}>
      {children}
    </section>
  );
}

function Eyebrow({ children, color = WF.accent }) {
  return (
    <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color, marginBottom: 14 }}>
      {children}
    </div>
  );
}

function H1({ children, style = {} }) {
  return <h1 style={{ fontSize: 52, lineHeight: 1.08, fontWeight: 800, color: WF.navy, letterSpacing: -1.2, margin: 0, textWrap: 'balance', ...style }}>{children}</h1>;
}
function H2({ children, style = {} }) {
  return <h2 style={{ fontSize: 36, lineHeight: 1.15, fontWeight: 800, color: WF.navy, letterSpacing: -0.8, margin: 0, textWrap: 'balance', ...style }}>{children}</h2>;
}
function H3({ children, style = {} }) {
  return <h3 style={{ fontSize: 20, lineHeight: 1.25, fontWeight: 700, color: WF.navy, letterSpacing: -0.3, margin: 0, ...style }}>{children}</h3>;
}
function Lead({ children, style = {} }) {
  return <p style={{ fontSize: 19, lineHeight: 1.5, color: WF.slate, margin: 0, maxWidth: 620, textWrap: 'pretty', ...style }}>{children}</p>;
}
function Body({ children, style = {} }) {
  return <p style={{ fontSize: 15, lineHeight: 1.55, color: WF.slate2, margin: 0, textWrap: 'pretty', ...style }}>{children}</p>;
}

// ---- buttons ----
function Btn({ children, kind = 'primary', sz = 'md' }) {
  const pad = sz === 'lg' ? '15px 26px' : '12px 20px';
  const fs = sz === 'lg' ? 16 : 14.5;
  const base = { display: 'inline-flex', alignItems: 'center', gap: 8, padding: pad, fontSize: fs, fontWeight: 700, borderRadius: 10, fontFamily: WF.font, cursor: 'default', whiteSpace: 'nowrap' };
  const styles = {
    primary: { ...base, background: WF.accent, color: '#fff', border: `1px solid ${WF.accent}` },
    dark: { ...base, background: WF.navy, color: '#fff', border: `1px solid ${WF.navy}` },
    outline: { ...base, background: '#fff', color: WF.navy, border: `1px solid ${WF.line2}` },
    ghost: { ...base, background: 'transparent', color: WF.navy, border: '1px solid transparent', padding: 0 },
  };
  return <span style={styles[kind]}>{children}{kind === 'ghost' && <Arrow />}</span>;
}
function Arrow({ c = 'currentColor' }) {
  return <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8h9M9 4l4 4-4 4" /></svg>;
}

// ---- generic icon glyph (line style) ----
function Glyph({ d, size = 22, c = WF.navy, bg = WF.accentSoft, box = 44 }) {
  return (
    <span style={{ width: box, height: box, borderRadius: 10, 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={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
    </span>
  );
}
// a small library of line-icon path sets
const IC = {
  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" /></>,
  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" /></>,
  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" /></>,
  swap: <><path d="M4 8h13l-3-3M20 16H7l3 3" /></>,
  search: <><circle cx="11" cy="11" r="6" /><path d="M16 16l5 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" /></>,
  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" /></>,
};

// ---- placeholders ----
function ImgPH({ h = 200, label = 'Image', style = {} }) {
  return (
    <div style={{ height: h, borderRadius: 12, background: WF.fill, border: `1px dashed ${WF.line2}`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', ...style }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} preserveAspectRatio="none"><line x1="0" y1="0" x2="100%" y2="100%" stroke={WF.line2} strokeWidth="1" /><line x1="100%" y1="0" x2="0" y2="100%" stroke={WF.line2} strokeWidth="1" /></svg>
      <span style={{ position: 'relative', fontSize: 12.5, fontWeight: 600, color: WF.mute, letterSpacing: 0.5, background: WF.fill, padding: '4px 10px', borderRadius: 6 }}>{label}</span>
    </div>
  );
}

// monochrome bar chart
function Bars({ data = [40, 65, 50, 80, 60, 95, 72], h = 90, accentLast = true, color = WF.line2 }) {
  const max = Math.max(...data);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: h }}>
      {data.map((v, i) => (
        <div key={i} style={{ flex: 1, height: `${(v / max) * 100}%`, borderRadius: 3, background: accentLast && i === data.length - 1 ? WF.accent : color }} />
      ))}
    </div>
  );
}
// line chart
function Line({ pts = [30, 45, 38, 60, 52, 72, 68, 85], h = 90, w = 240 }) {
  const max = Math.max(...pts), min = Math.min(...pts);
  const norm = (v) => h - ((v - min) / (max - min || 1)) * (h - 12) - 6;
  const step = w / (pts.length - 1);
  const d = pts.map((v, i) => `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(1)},${norm(v).toFixed(1)}`).join(' ');
  const area = `${d} L${w},${h} L0,${h} Z`;
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <path d={area} fill={WF.accentSoft} opacity="0.5" />
      <path d={d} fill="none" stroke={WF.accent} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
// donut/gauge
function Donut({ pct = 72, size = 96, label, sub }) {
  const r = size / 2 - 9, c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={WF.line} strokeWidth="8" />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={WF.accent} strokeWidth="8" strokeLinecap="round" strokeDasharray={`${(c * pct) / 100} ${c}`} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ fontSize: 20, fontWeight: 800, color: WF.navy }}>{label ?? `${pct}`}</span>
        {sub && <span style={{ fontSize: 10, color: WF.mute, fontWeight: 600 }}>{sub}</span>}
      </div>
    </div>
  );
}

// ---- cards ----
function Card({ children, pad = 24, style = {}, hover = false }) {
  return (
    <div style={{ background: '#fff', border: `1px solid ${WF.line}`, borderRadius: 16, padding: pad, boxShadow: '0 1px 2px rgba(16,24,40,.04)', ...style }}>
      {children}
    </div>
  );
}

// metric tile for dashboards
function Metric({ label, value, delta, deltaUp = true, chart, accent = false, alert }) {
  return (
    <div style={{ background: '#fff', border: `1px solid ${accent ? WF.accentSoft : WF.line}`, borderRadius: 12, padding: 16, display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0, minHeight: 0 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', minWidth: 0 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: WF.slate2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
        {alert && <span style={{ width: 7, height: 7, borderRadius: 4, background: alert === 'red' ? WF.red : WF.amber, flex: '0 0 auto' }} />}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, minWidth: 0, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 24, fontWeight: 800, color: WF.navy, letterSpacing: -0.5 }}>{value}</span>
        {delta && <span style={{ fontSize: 12, fontWeight: 700, color: deltaUp ? WF.green : WF.red }}>{deltaUp ? '▲' : '▼'} {delta}</span>}
      </div>
      {chart}
    </div>
  );
}

// nav bar
function Nav({ active = 'Products' }) {
  const items = ['Products', 'Sectors', 'Pricing', 'Resources', 'Company'];
  return (
    <div style={{ height: 68, borderBottom: `1px solid ${WF.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 40px', background: 'rgba(255,255,255,.9)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
        <Logo />
        <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
          {items.map((it) => (
            <span key={it} style={{ fontSize: 14.5, fontWeight: 600, color: it === active ? WF.navy : WF.slate2, display: 'flex', alignItems: 'center', gap: 5 }}>
              {it}
              {(it === 'Products' || it === 'Sectors') && <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M2 4l3 3 3-3" /></svg>}
            </span>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <span style={{ fontSize: 14.5, fontWeight: 600, color: WF.slate2 }}>Sign in</span>
        <Btn kind="primary">Book a demo</Btn>
      </div>
    </div>
  );
}

function Logo({ light = false }) {
  return (
    <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
      <span style={{ width: 26, height: 26, borderRadius: 7, background: light ? '#fff' : WF.navy, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke={light ? WF.navy : '#fff'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 13V3M3 8l6-5M3 8l6 5" /></svg>
      </span>
      <span style={{ fontSize: 19, fontWeight: 800, color: light ? '#fff' : WF.navy, letterSpacing: -0.5 }}>Kyndrid</span>
    </span>
  );
}

// footer
function Footer() {
  const cols = [
    ['Products', ['Kyndrid Intelligence', 'Asset Ops', 'Staff Ops']],
    ['Sectors', ['Hospitality', 'Retail', 'Convenience', 'Charities', 'Multi-site']],
    ['Company', ['About', 'Careers', 'Contact', 'Security']],
    ['Resources', ['Guides', 'Help centre', 'API docs', 'Status']],
  ];
  return (
    <div style={{ background: WF.navy, padding: '56px 72px 40px', color: '#cbd5e1' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 32 }}>
        <div>
          <Logo light />
          <p style={{ fontSize: 13.5, lineHeight: 1.5, color: '#94a3b8', marginTop: 16, maxWidth: 240 }}>Connected operations software for performance, assets and staff.</p>
        </div>
        {cols.map(([h, links]) => (
          <div key={h}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: '#fff', letterSpacing: 0.5, marginBottom: 14 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {links.map((l) => <span key={l} style={{ fontSize: 13.5, color: '#94a3b8' }}>{l}</span>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,.1)', marginTop: 40, paddingTop: 20, display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: '#64748b' }}>
        <span>© 2026 Kyndrid Ltd. All rights reserved.</span>
        <span style={{ display: 'flex', gap: 20 }}><span>Privacy</span><span>Terms</span><span>Cookies</span></span>
      </div>
    </div>
  );
}

// section heading block (centered)
function SectionHead({ eyebrow, title, sub, align = 'center', maxW = 680 }) {
  return (
    <div style={{ textAlign: align, marginBottom: 44, maxWidth: align === 'center' ? maxW : 'none', marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <H2>{title}</H2>
      {sub && <Lead style={{ marginTop: 16, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>{sub}</Lead>}
    </div>
  );
}

Object.assign(window, {
  WF, Page, Section, Eyebrow, H1, H2, H3, Lead, Body, Btn, Arrow, Glyph, IC,
  ImgPH, Bars, Line, Donut, Card, Metric, Nav, Logo, Footer, SectionHead,
});