// page-spine.jsx — Direction F · "The Through-Line" (theme-aware, defaults dark)
// One continuous orange line threads the page; every section is a node on it.
// All section backgrounds stay neutral so the line is never interrupted.

function LandingSpine() {
  const [mode, setMode] = React.useState('dark');
  const c = mkTheme(mode);
  const W = 1280;
  const vw = useVW();
  const m = vw < 760;
  const SPINE = m ? 26 : 232;
  const black = (s) => ({ fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: s, letterSpacing: '-0.035em', lineHeight: 0.96, margin: 0 });
  const mono = { fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase' };

  function Row({ n, bg, padV = 90, children, node = true, sym }) {
    const pv = m ? Math.round(padV * 0.6) : padV;
    return (
      <div style={{ position: 'relative', background: bg, padding: `${pv}px ${m ? 20 : 80}px ${pv}px 0` }}>
        <div style={{ position: 'absolute', left: SPINE, top: 0, bottom: 0, width: 3, background: c.orange, zIndex: 0 }} />
        {node && (
          <React.Fragment>
            <div style={{ position: 'absolute', left: SPINE + 3, top: '50%', width: m ? 22 : 56, height: 2, background: c.orange, transform: 'translateY(-1px)', zIndex: 1 }} />
            <div style={{ position: 'absolute', left: SPINE - 14, top: '50%', transform: 'translateY(-50%)', width: 31, height: 31, borderRadius: '50%', background: c.orange, border: `4px solid ${bg}`, boxShadow: `0 0 0 3px ${c.orange}`, zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: 13, color: '#1A1A1A' }}>{sym}</div>
          </React.Fragment>
        )}
        <div style={{ marginLeft: SPINE + (m ? 42 : 96), position: 'relative', zIndex: 1 }}>{children}</div>
      </div>
    );
  }

  const Field = ({ label, ph, wide, area, select }) => (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 7, gridColumn: wide ? '1 / -1' : 'auto' }}>
      <span style={{ ...mono, fontSize: 10.5, color: c.mute }}>{label}</span>
      {select ? (
        <select style={{ font: '15px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `1px solid ${c.fieldLine}`, borderRadius: 0, background: c.fieldBg }}>
          {SERVICE_OPTIONS.map((o) => <option key={o}>{o}</option>)}
        </select>
      ) : area ? (
        <textarea rows="3" placeholder={ph} style={{ font: '15px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `1px solid ${c.fieldLine}`, borderRadius: 0, background: c.fieldBg, resize: 'none' }} />
      ) : (
        <input placeholder={ph} style={{ font: '15px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `1px solid ${c.fieldLine}`, borderRadius: 0, background: c.fieldBg }} />
      )}
    </label>
  );

  return (
    <div style={{ width: W, background: c.bg, fontFamily: '"Archivo", sans-serif', color: c.fg, position: 'relative' }}>
      {/* nav */}
      <nav style={{ position: 'relative', zIndex: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: m ? '14px 20px' : '20px 80px', background: c.bg2, color: c.fg, borderBottom: `1px solid ${c.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoImg h={m ? 32 : 36} />
          <Wordmark size={m ? 17 : 19} color={c.fg} sub={c.mute} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: m ? 10 : 22 }}>
          {!m && ['Services', 'Approach', 'Contact'].map((l) => <a key={l} href="#" style={{ ...mono, fontSize: 12, color: c.fg, opacity: 0.75, textDecoration: 'none' }}>{l}</a>)}
          <ThemeToggle mode={mode} setMode={setMode} c={c} />
          {!m && <a href="#" style={{ ...mono, fontSize: 12, color: '#1A1A1A', background: c.orange, padding: '11px 16px', textDecoration: 'none', fontWeight: 600 }}>Consultation</a>}
        </div>
      </nav>

      {/* spine start cap */}
      <div style={{ position: 'relative', background: c.bg, height: 0 }}>
        <div style={{ position: 'absolute', left: SPINE - 9, top: -3, width: 21, height: 21, borderRadius: '50%', background: c.orange, border: `4px solid ${c.bg}`, boxShadow: `0 0 0 3px ${c.orange}`, zIndex: 3 }} />
      </div>

      {/* hero */}
      <Row bg={c.bg} padV={104} node={false}>
        <div style={{ ...mono, color: c.orange }}>The through-line &nbsp;·&nbsp; Est. 2026</div>
        <h1 style={{ ...black(108), fontSize: 'clamp(42px, 10vw, 108px)', color: c.fg, margin: '24px 0 0' }}>Committed<br />to your<br /><span style={{ color: c.orange }}>mission.</span></h1>
        <p style={{ fontFamily: '"Archivo", sans-serif', fontSize: 19, lineHeight: 1.6, color: c.mute, maxWidth: 520, marginTop: 28 }}>{COPY.position}</p>
        <div style={{ display: 'flex', gap: 14, marginTop: 34 }}>
          <a href="#" style={{ background: c.orange, color: '#1A1A1A', fontWeight: 800, fontSize: 16, padding: '15px 26px', textDecoration: 'none' }}>Request a Consultation</a>
          <a href="#" style={{ color: c.fg, fontWeight: 700, fontSize: 16, padding: '15px 22px', textDecoration: 'none', border: `1px solid ${c.line}` }}>Follow the line ↓</a>
        </div>
      </Row>

      {/* services intro */}
      <Row bg={c.bg2} sym="◦" padV={40}>
        <div style={{ ...mono, color: c.orange2 }}>What we do</div>
        <h2 style={{ ...black(40), marginTop: 12, color: c.fg }}>Three service lines, one through-line.</h2>
      </Row>

      {/* services as nodes */}
      {SERVICES.map((s, i) => (
        <Row key={s.n} bg={i % 2 ? c.bg2 : c.bg} sym={s.n} padV={56}>
          <div style={{ position: 'relative' }}>
            <span style={{ position: 'absolute', right: 0, top: m ? -22 : -46, fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: m ? 68 : 150, lineHeight: 0.7, color: c.amber, letterSpacing: '-0.05em', zIndex: 0, opacity: c.d ? 0.18 : 0.7 }}>{s.n}</span>
            <h3 style={{ ...black(46), color: c.fg, position: 'relative', zIndex: 1 }}>{s.title}</h3>
            <p style={{ fontFamily: '"Archivo", sans-serif', fontSize: 18, lineHeight: 1.6, color: c.mute, maxWidth: 620, marginTop: 14, position: 'relative', zIndex: 1 }}>{s.blurb}</p>
          </div>
        </Row>
      ))}

      {/* approach */}
      <Row bg={c.bg2} sym="✦" padV={84}>
        <div style={{ ...mono, color: c.orange2 }}>Our approach</div>
        <h2 style={{ ...black(56), fontSize: 'clamp(34px, 8vw, 56px)', color: c.fg, marginTop: 14 }}>We start with<br />your <span style={{ color: c.orange }}>mission.</span></h2>
        <p style={{ fontFamily: '"Archivo", sans-serif', fontSize: 21, lineHeight: 1.55, color: c.fg, fontWeight: 500, maxWidth: 700, marginTop: 22 }}>{COPY.approach}</p>
        <div style={{ display: 'flex', gap: 26, marginTop: 30, flexWrap: 'wrap' }}>
          {['Commitment', 'Professionalism', 'Safety', 'Partnership'].map((p) => (
            <span key={p} style={{ ...mono, fontSize: 12.5, color: c.fg, borderBottom: `2px solid ${c.orange}`, paddingBottom: 4 }}>{p}</span>
          ))}
        </div>
      </Row>

      {/* contact node */}
      <Row bg={c.bg} sym="→" padV={88}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '0.8fr 1.2fr', gap: m ? 28 : 56 }}>
          <div>
            <div style={{ ...mono, color: c.orange }}>Contact</div>
            <h2 style={{ ...black(44), color: c.fg, marginTop: 14 }}>The line ends at your mission.</h2>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[['Email', 'contact@thrulinesolutions.com'], ['Phone', '(000) 000-0000']].map(([k, v]) => (
                <div key={k}><div style={{ ...mono, fontSize: 10.5, color: c.mute }}>{k}</div><div style={{ fontSize: 16, color: c.fg, marginTop: 4 }}>{v}</div></div>
              ))}
            </div>
          </div>
          <form style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 18 }} onSubmit={(e) => e.preventDefault()}>
            <Field label="Name" ph="Jane Doe" />
            <Field label="Organization" ph="Organization" />
            <Field label="Email" ph="jane@org.com" />
            <Field label="Phone" ph="(000) 000-0000" />
            <Field label="Service interest" select wide />
            <Field label="Message" ph="How can we support your mission?" area wide />
            <button style={{ gridColumn: '1 / -1', background: c.orange, color: '#1A1A1A', border: 'none', fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: 16, padding: '17px', cursor: 'pointer' }}>Request a Consultation →</button>
          </form>
        </div>
      </Row>

      {/* arrowhead terminator */}
      <div style={{ position: 'relative', background: c.bg, paddingBottom: 64 }}>
        <div style={{ position: 'absolute', left: SPINE, top: 0, height: 30, width: 3, background: c.orange }} />
        <div style={{ position: 'absolute', left: SPINE - 13.5, top: 30, width: 0, height: 0, borderLeft: '15px solid transparent', borderRight: '15px solid transparent', borderTop: `22px solid ${c.orange}` }} />
        <div style={{ position: 'absolute', left: SPINE + 44, top: 22, ...mono, fontSize: 11, color: c.mute }}>Mission</div>
      </div>

      <footer style={{ background: c.bg2, color: c.fg, padding: m ? '30px 20px 36px' : '34px 80px 44px', display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'center', gap: m ? 16 : 0, borderTop: `1px solid ${c.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoImgFlat h={28} />
          <Wordmark size={17} color={c.fg} sub={c.mute} />
        </div>
        <div style={{ ...mono, fontSize: 11, color: c.mute }}>© 2026 · Committed to your mission</div>
      </footer>
    </div>
  );
}
window.LandingSpine = LandingSpine;