// Wireframe primitives — Apple-inspired low-fi wireframes.
// Clean geometric shapes, system font stack, restrained mono palette + 1 blue accent.
// Hand-drawn "annotation" font for margin notes only.

const WF = {
  // Monochrome base
  paper: '#fdfdfc',
  ink: '#1d1d1f',
  ink2: '#515154',
  ink3: '#86868b',
  line: '#d2d2d7',
  line2: '#e8e8ed',
  fill: '#f5f5f7',
  fill2: '#fafafa',
  // Single accent (Apple systemBlue)
  accent: '#0071e3',
  accentSoft: '#e8f1fc',
  // Status tints (kept very muted in wireframes)
  ok: '#1a8754',
  okSoft: '#e6f4ec',
  warn: '#b5651d',
  warnSoft: '#fbf1e4',
  bad: '#b4232c',
  badSoft: '#fbe9eb',
  // Fonts
  sans: '"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  display: '"SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  hand: '"Caveat", "Bradley Hand", cursive',
  mono: '"SF Mono", ui-monospace, Menlo, monospace',
};

// Inject shared wireframe CSS once
if (typeof document !== 'undefined' && !document.getElementById('wf-styles')) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap';
  document.head.appendChild(link);

  const s = document.createElement('style');
  s.id = 'wf-styles';
  s.textContent = `
    .wf { font-family: ${WF.sans}; color: ${WF.ink}; background: ${WF.paper}; }
    .wf * { box-sizing: border-box; }
    .wf-display { font-family: ${WF.display}; letter-spacing: -0.02em; font-weight: 600; }
    .wf-hand { font-family: ${WF.hand}; color: ${WF.ink2}; }
    .wf-mono { font-family: ${WF.mono}; }
    .wf-note { font-family: ${WF.hand}; color: ${WF.accent}; font-size: 15px; line-height: 1.15; }
    .wf-arrow { stroke: ${WF.accent}; stroke-width: 1.4; fill: none; stroke-linecap: round; }

    /* placeholder box — striped like figma placeholders */
    .wf-ph {
      background:
        repeating-linear-gradient(135deg, ${WF.line2} 0 1px, transparent 1px 10px),
        ${WF.fill2};
      border: 1px solid ${WF.line};
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      color: ${WF.ink3}; font-family: ${WF.mono}; font-size: 11px;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .wf-ph.dark {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px),
        ${WF.ink};
      color: rgba(255,255,255,.5);
      border-color: ${WF.ink};
    }

    /* text line placeholders */
    .wf-line { height: 8px; background: ${WF.line2}; border-radius: 4px; }
    .wf-line.dark { background: rgba(255,255,255,.18); }
    .wf-line.thin { height: 6px; }
    .wf-line.thick { height: 12px; }

    /* chip */
    .wf-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 999px;
      background: ${WF.fill}; border: 1px solid ${WF.line};
      font-size: 11px; color: ${WF.ink2};
      letter-spacing: 0.02em;
    }
    .wf-chip.accent { background: ${WF.accentSoft}; color: ${WF.accent}; border-color: transparent; }
    .wf-chip.ok { background: ${WF.okSoft}; color: ${WF.ok}; border-color: transparent; }
    .wf-chip.warn { background: ${WF.warnSoft}; color: ${WF.warn}; border-color: transparent; }
    .wf-chip.bad { background: ${WF.badSoft}; color: ${WF.bad}; border-color: transparent; }

    /* buttons */
    .wf-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 18px; border-radius: 999px;
      font-family: ${WF.sans}; font-size: 14px; font-weight: 500;
      border: 1px solid ${WF.line}; background: transparent; color: ${WF.ink};
      cursor: pointer; transition: background .12s, transform .12s;
    }
    .wf-btn:hover { background: ${WF.fill}; }
    .wf-btn.primary { background: ${WF.ink}; color: white; border-color: ${WF.ink}; }
    .wf-btn.primary:hover { background: #000; }
    .wf-btn.accent { background: ${WF.accent}; color: white; border-color: ${WF.accent}; }
    .wf-btn.accent:hover { filter: brightness(1.05); }
    .wf-btn.ghost { border-color: transparent; }
    .wf-btn.sm { padding: 7px 14px; font-size: 13px; }
    .wf-btn.lg { padding: 14px 26px; font-size: 15px; }

    /* nav */
    .wf-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 32px; border-bottom: 1px solid ${WF.line2};
      background: rgba(253,253,252,0.85); backdrop-filter: saturate(180%) blur(20px);
      position: sticky; top: 0; z-index: 10;
    }
    .wf-nav .links { display: flex; gap: 24px; font-size: 13px; color: ${WF.ink2}; }
    .wf-nav .links a { cursor: pointer; }
    .wf-nav .links a:hover { color: ${WF.ink}; }

    /* section + spacing */
    .wf-section { padding: 72px 48px; }
    .wf-section.tight { padding: 48px 48px; }
    .wf-section.hero { padding: 96px 48px 72px; }
    .wf-eyebrow {
      font-family: ${WF.mono}; font-size: 11px; letter-spacing: 0.14em;
      text-transform: uppercase; color: ${WF.ink3};
    }
    .wf-h1 { font-family: ${WF.display}; font-size: 68px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.02; }
    .wf-h2 { font-family: ${WF.display}; font-size: 44px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; }
    .wf-h3 { font-family: ${WF.display}; font-size: 28px; font-weight: 600; letter-spacing: -0.016em; line-height: 1.15; }
    .wf-h4 { font-family: ${WF.display}; font-size: 20px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
    .wf-sub { font-size: 18px; color: ${WF.ink2}; line-height: 1.5; font-weight: 400; }
    .wf-body { font-size: 15px; color: ${WF.ink2}; line-height: 1.55; }
    .wf-small { font-size: 13px; color: ${WF.ink3}; line-height: 1.5; }

    /* cards */
    .wf-card {
      background: ${WF.paper}; border: 1px solid ${WF.line2};
      border-radius: 18px; padding: 24px;
    }
    .wf-card.fill { background: ${WF.fill}; }
    .wf-card.dark { background: ${WF.ink}; color: white; border-color: ${WF.ink}; }
    .wf-card.accent { background: ${WF.accent}; color: white; border-color: ${WF.accent}; }

    /* annotation callouts (sketchy, low-fi layer) */
    .wf-annot {
      position: absolute; font-family: ${WF.hand}; color: ${WF.accent};
      font-size: 16px; line-height: 1.1; pointer-events: none;
    }

    /* page frame — resembles a browser chrome but minimal */
    .wf-page {
      width: 100%; background: ${WF.paper}; color: ${WF.ink};
      font-family: ${WF.sans}; overflow: hidden;
    }
    .wf-chrome {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px; background: ${WF.fill}; border-bottom: 1px solid ${WF.line2};
    }
    .wf-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: ${WF.line}; }
    .wf-chrome .url {
      flex: 1; background: ${WF.paper}; border: 1px solid ${WF.line2};
      border-radius: 8px; padding: 4px 12px; font-family: ${WF.mono}; font-size: 11px;
      color: ${WF.ink3}; text-align: center;
    }

    /* footer */
    .wf-footer {
      border-top: 1px solid ${WF.line2};
      padding: 40px 48px 32px;
      background: ${WF.fill2};
      font-size: 12px; color: ${WF.ink3};
    }

    /* phone frame */
    .wf-phone {
      width: 220px; background: ${WF.ink}; border-radius: 32px;
      padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.12);
    }
    .wf-phone .screen {
      background: ${WF.paper}; border-radius: 24px; overflow: hidden;
      aspect-ratio: 9/19.5; position: relative;
    }
  `;
  document.head.appendChild(s);
}

// ─── Primitive components ─────────────────────────────

function Line({ w = '100%', h, dark, style }) {
  return <div className={'wf-line' + (dark ? ' dark' : '')} style={{ width: w, ...(h ? { height: h } : {}), ...style }} />;
}

function Lines({ n = 3, widths, dark, gap = 10, style }) {
  const ws = widths || Array.from({ length: n }, (_, i) => `${95 - i * 8}%`);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, ...style }}>
      {ws.map((w, i) => <Line key={i} w={w} dark={dark} />)}
    </div>
  );
}

function Placeholder({ label = 'image', w = '100%', h = 180, dark, radius = 12, style }) {
  return (
    <div className={'wf-ph' + (dark ? ' dark' : '')} style={{ width: w, height: h, borderRadius: radius, ...style }}>
      {label}
    </div>
  );
}

function Chip({ children, tone = 'default' }) {
  return <span className={'wf-chip' + (tone !== 'default' ? ' ' + tone : '')}>{children}</span>;
}

function Btn({ children, variant = 'default', size, style, onClick }) {
  const cls = ['wf-btn', variant, size].filter(Boolean).join(' ');
  return <button className={cls} style={style} onClick={onClick}>{children}</button>;
}

function Nav({ links = ['Care Workers', 'Facilities', 'Agencies', 'How it Works', 'Pricing', 'About'], active, cta = 'Get Started', onNav }) {
  return (
    <div className="wf-nav">
      <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
        <div className="wf-display" style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.02em' }}>Credz</div>
        <div className="links">
          {links.map(l => (
            <a key={l}
              style={{ color: active === l ? WF.ink : WF.ink2, fontWeight: active === l ? 500 : 400 }}
              onClick={() => onNav && onNav(l)}
            >{l}</a>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <a style={{ fontSize: 13, color: WF.ink2, cursor: 'pointer' }}>Sign in</a>
        <Btn variant="accent" size="sm">{cta}</Btn>
      </div>
    </div>
  );
}

function Chrome({ url = 'credz.health' }) {
  return (
    <div className="wf-chrome">
      <div className="dot" /><div className="dot" /><div className="dot" />
      <div className="url">{url}</div>
      <div style={{ width: 54 }} />
    </div>
  );
}

function Footer({ compact }) {
  const columns = [
    {
      title: 'Product',
      links: [
        ['Care Workers', '#/care-workers'],
        ['Facilities', '#/facilities'],
        ['Agencies', '#/agencies'],
        ['Pricing', '#/pricing'],
      ],
    },
    {
      title: 'Company',
      links: [
        ['About', '#/about'],
        ['Contact', '#/contact'],
        ['Status', 'https://status.mycredz.app'],
      ],
    },
    {
      title: 'Resources',
      links: [
        ['Dev index', '/_mock'],
        ['API health', '/api/health'],
        ['GitHub repo', 'https://github.com/opendoorz/lg-credz'],
      ],
    },
    {
      title: 'Legal',
      links: [
        ['Terms of Service', '/legal/terms'],
        ['Privacy Policy', '/legal/privacy'],
        ['Security', '/legal/security'],
        ['Support', 'mailto:support@mycredz.app'],
      ],
    },
  ];

  return (
    <div className="wf-footer">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32, marginBottom: 28 }}>
        <div>
          <div className="wf-display" style={{ fontSize: 16, fontWeight: 600, marginBottom: 10, color: WF.ink }}>Credz</div>
          <div style={{ fontSize: 12, color: WF.ink3, lineHeight: 1.55, maxWidth: 240 }}>
            The digital passport for care workers. Canadian-built. PIPEDA &amp; PHIPA aligned.
          </div>
        </div>
        {columns.map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: WF.ink2, marginBottom: 10 }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
              {col.links.map(([label, href]) => (
                <a
                  key={label}
                  href={href}
                  style={{ color: WF.ink3, textDecoration: 'none' }}
                >
                  {label}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'space-between', paddingTop: 20, borderTop: `1px solid ${WF.line2}` }}>
        <div>© 2026 LionGuard Corporation. All rights reserved.</div>
        <div>support@mycredz.app</div>
      </div>
    </div>
  );
}

// Eyebrow + label components
function Eyebrow({ children, color }) {
  return <div className="wf-eyebrow" style={color ? { color } : {}}>{children}</div>;
}

// Sketchy note — positioned absolute, with pointer arrow
function Note({ children, x, y, arrowTo, maxW = 180 }) {
  return (
    <div className="wf-annot" style={{ left: x, top: y, maxWidth: maxW }}>
      {children}
    </div>
  );
}

// Icon placeholder (just a square with a stroke)
function Ico({ size = 36, fill, children }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 8,
      background: fill || WF.fill, border: `1px solid ${WF.line2}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 14, color: WF.ink2,
    }}>{children}</div>
  );
}

Object.assign(window, { WF, Line, Lines, Placeholder, Chip, Btn, Nav, Chrome, Footer, Eyebrow, Note, Ico });