// Syncline Works site — shared components
const { useState, useEffect } = React;

// ─── Canonical fold mark (locked: asymmetry 0.55, tightness 0.5) ────
function SynclineFold({ size = 120, colors = SW, tightness = 0.5, asymmetry = 0.55 }) {
  const w = 200, h = 140;
  const cx = 100 + asymmetry * 14;
  const trough = 70 + tightness * 30;
  const shoulder = 25 - tightness * 10;

  const band = (y, thickness, asymOffset = 0) => {
    const topY = y;
    const botY = y + thickness;
    const leftX = 10 - asymOffset;
    const rightX = w - 10 + asymOffset;
    return `
      M ${leftX} ${topY + shoulder}
      Q ${leftX + 30} ${topY + shoulder * 0.6}, ${cx - 30} ${topY + trough * 0.9}
      Q ${cx} ${topY + trough}, ${cx + 30} ${topY + trough * 0.9}
      Q ${rightX - 30} ${topY + shoulder * 0.6}, ${rightX} ${topY + shoulder}
      L ${rightX} ${botY + shoulder}
      Q ${rightX - 30} ${botY + shoulder * 0.6}, ${cx + 30} ${botY + trough * 0.9}
      Q ${cx} ${botY + trough}, ${cx - 30} ${botY + trough * 0.9}
      Q ${leftX + 30} ${botY + shoulder * 0.6}, ${leftX} ${botY + shoulder}
      Z
    `;
  };
  const gap = 3, thk = 10;
  return (
    <svg width={size} height={size * h / w} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
      <path d={band(0, thk, 0)} fill={colors.slate} />
      <path d={band(thk + gap, thk, 2)} fill={colors.ink} />
      <path d={band((thk + gap) * 2, thk, 4)} fill={colors.orange} />
      <path d={band((thk + gap) * 3, thk, 6)} fill={colors.clay} />
    </svg>
  );
}

// ─── Hand-kerned wordmark ──────────────────────────────────────────
function HandKernedWordmark({ size = 28, color = SW.ink, caps = false, weight = 600 }) {
  const text = caps ? 'SYNCLINE WORKS' : 'Syncline Works';
  const kernLower = {
    'S-y': -0.045, 'y-n': -0.01, 'n-c': -0.02, 'c-l': -0.055,
    'l-i': -0.025, 'i-n': -0.01, 'n-e': -0.015,
    'e- ': 0.02, ' -W': -0.03, 'W-o': -0.06, 'o-r': -0.015,
    'r-k': -0.02, 'k-s': -0.005,
  };
  const kernCaps = {
    'S-Y': -0.04, 'Y-N': -0.06, 'N-C': -0.02, 'C-L': -0.03,
    'L-I': -0.02, 'I-N': -0.005, 'N-E': -0.01,
    'E- ': 0.04, ' -W': 0.02, 'W-O': -0.05, 'O-R': -0.015,
    'R-K': -0.015, 'K-S': -0.01,
  };
  const kernMap = caps ? kernCaps : kernLower;
  const chars = text.split('');
  return (
    <div style={{
      fontFamily: SW_FONTS.space, fontWeight: weight, fontSize: size,
      color, lineHeight: 1, whiteSpace: 'nowrap', letterSpacing: 0,
      display: 'inline-block',
    }}>
      {chars.map((ch, i) => {
        const next = chars[i + 1];
        const key = next ? `${ch}-${next}` : null;
        const delta = key && kernMap[key] != null ? kernMap[key] : 0;
        const isSpace = ch === ' ';
        return (
          <span key={i} style={{
            display: 'inline-block',
            marginRight: `${delta}em`,
            whiteSpace: isSpace ? 'pre' : 'normal',
          }}>{ch}</span>
        );
      })}
    </div>
  );
}

// ─── Compact brand lockup for nav + footer ─────────────────────────
function BrandLock({ size = 56, wordmarkSize = 28, color = SW.ink, markColors = SW }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <SynclineFold size={size} colors={markColors} />
      <HandKernedWordmark size={wordmarkSize} color={color} />
    </div>
  );
}

// ─── Top navigation ────────────────────────────────────────────────
function SiteNav({ current = 'home' }) {
  const links = [
    { id: 'practices', label: 'Practices', href: 'practices.html' },
    { id: 'product', label: 'The Method', href: 'product.html' },
    { id: 'contact', label: 'Contact', href: 'index.html#contact' },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="nav-left" aria-label="Syncline Works home">
          <BrandLock />
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={`nav-link ${l.id === current ? 'active' : ''}`}>
              {l.label}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

// ─── Site footer ───────────────────────────────────────────────────
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{ marginBottom: 20 }}>
              <SynclineFold size={40} colors={{ ...SW, slate: SW.stone, ink: SW.cream }} />
            </div>
            <HandKernedWordmark size={20} color={SW.cream} />
            <div style={{
              fontFamily: SW_FONTS.plex, fontStyle: 'italic',
              fontSize: 14, color: SW.stone, marginTop: 14,
              maxWidth: 320, lineHeight: 1.5, opacity: 0.85,
            }}>
              Structural risk diagnostics for systems that still look stable.
            </div>
          </div>
          <div>
            <h4>Practice</h4>
            <ul>
              <li><a href="index.html#offer">The Read</a></li>
              <li><a href="index.html#about">About</a></li>
              <li><a href="index.html#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Method</h4>
            <ul>
              <li><a href="product.html">The PEG method</a></li>
              <li><a href="product.html#axes">Pressure / Erosion / Governance</a></li>
              <li><a href="product.html#boundaries">Method discipline</a></li>
            </ul>
          </div>
          <div>
            <h4>Locate</h4>
            <ul>
              <li>Austin, Texas</li>
              <li>Est. 2026</li>
              <li><a href="mailto:hello@synclineworks.com">hello@synclineworks.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>Copyright 2026 Syncline Works LLC</div>
          <div>Austin, Texas</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SynclineFold, HandKernedWordmark, BrandLock, SiteNav, SiteFooter });

// ─── Anchor every section-head kicker bar on this page to the same width ──
// Measures the rendered text width of each `.section-head .num` after fonts
// load, finds the max, and exposes it as `--kicker-line-width`. The CSS rule
// in `site.css` consumes the variable with a `max-content` fallback so the
// site still renders correctly if JS is disabled or the API is unavailable.
(function anchorKickerBars() {
  if (typeof document === 'undefined') return;

  function setKickerWidth() {
    const nums = document.querySelectorAll('.section-head .num');
    if (!nums.length) return;
    let max = 0;
    nums.forEach((n) => {
      const w = n.getBoundingClientRect().width;
      if (w > max) max = w;
    });
    if (max > 0) {
      document.documentElement.style.setProperty(
        '--kicker-line-width',
        Math.ceil(max) + 'px',
      );
    }
  }

  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(setKickerWidth);
  } else if (document.readyState === 'complete') {
    setKickerWidth();
  } else {
    window.addEventListener('load', setKickerWidth);
  }
})();