// Shared primitives for the bold homepage: Fold mark, shared styles, section
// label component. All bold-homepage files depend on this loading first.

const FoldMarkHP = ({ size = 36, mono = false, dark = true }) => {
  const flat = mono ? (dark ? '#fff' : '#0b1220') : null;
  const id = `fmhp-${Math.random().toString(36).slice(2, 7)}`;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#7dd3fc" />
          <stop offset="1" stopColor="#3b82f6" />
        </linearGradient>
      </defs>
      {/* Fold mark: C folded into bracket — references "CTRL" as control character */}
      <path d="M 8 6 L 8 34 L 24 34" stroke={flat || `url(#${id})`} strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter" fill="none" />
      <path d="M 20 14 L 32 14 L 32 26 L 20 26" stroke={flat || `url(#${id})`} strokeWidth="3" strokeLinecap="square" strokeLinejoin="miter" fill="none" />
    </svg>
  );
};

// Section label — mono micro-caps with accent rule
const SectionLabel = ({ n, label, color = '#38bdf8' }) => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  return (
    <div style={{
      ...mono, fontSize: 11, letterSpacing: 2.5, color,
      display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20,
      textTransform: 'uppercase',
    }}>
      <span style={{ display: 'inline-block', width: 28, height: 1, background: color }} />
      <span style={{ color: '#475569', fontWeight: 600 }}>{n}</span>
      <span>{label}</span>
    </div>
  );
};

// Big section header
const SectionH = ({ children, align = 'left', maxWidth = 720 }) => (
  <h2 style={{
    fontSize: 48, lineHeight: 1.05, fontWeight: 800,
    letterSpacing: -1.5, margin: 0, marginBottom: 20,
    color: '#f1f5f9', maxWidth,
    textAlign: align, ...(align === 'center' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
  }}>
    {children}
  </h2>
);

const SectionSub = ({ children, align = 'left', maxWidth = 640 }) => (
  <p style={{
    fontSize: 17, lineHeight: 1.6, color: '#94a3b8',
    margin: 0, marginBottom: 48, maxWidth,
    textAlign: align, ...(align === 'center' ? { marginLeft: 'auto', marginRight: 'auto' } : {}),
  }}>
    {children}
  </p>
);

Object.assign(window, { FoldMarkHP, SectionLabel, SectionH, SectionSub });