// page-tactical.jsx — Direction B · "Operational" (theme-aware, defaults dark)
// High-contrast, condensed display, mono telemetry, through-line rule.

function LandingTactical() {
  const [mode, setMode] = React.useState('dark');
  const c = mkTheme(mode);
  const W = 1280;
  const vw = useVW();
  const m = vw < 760;
  const disp = (size, w = 600) => ({ fontFamily: '"Saira Condensed", sans-serif', fontWeight: w, fontSize: size, textTransform: 'uppercase', letterSpacing: '0.01em', lineHeight: 0.96, margin: 0, color: c.fg });
  const mono = { fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase' };
  const body = { fontFamily: '"Archivo", sans-serif', fontSize: 16.5, lineHeight: 1.6, color: c.mute };
  const pad = m ? '52px 20px' : '92px 80px';

  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, appearance: 'none' }}>
          {SERVICE_OPTIONS.map((o) => <option key={o}>{o}</option>)}
        </select>
      ) : area ? (
        <textarea rows="4" 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: '100%', maxWidth: '100%', overflowX: 'hidden', background: c.bg, color: c.fg, fontFamily: '"Archivo", sans-serif' }}>
      {/* nav */}
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: m ? '14px 20px' : '18px 80px', borderBottom: `1px solid ${c.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoImg h={m ? 32 : 36} />
          <span style={{ ...disp(m ? 19 : 22, 700), letterSpacing: '0.06em' }}>Thruline <span style={{ color: c.mute, fontWeight: 500 }}>Solutions</span></span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: m ? 10 : 24 }}>
          {!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>

      {/* hero */}
      <header style={{ padding: m ? '14px 20px 0' : '20px 80px 0', position: 'relative' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? '4px 14px' : 0, justifyContent: 'space-between', ...mono, fontSize: m ? 10 : 11, color: c.mute, padding: '20px 0' }}>
          <span>EST. 2026</span><span>LICENSED · INSURED</span><span>PI · EP · TRAINING</span><span>N 44.97 / W 93.26</span>
        </div>
        <div style={{ ...mono, color: c.orange, marginTop: 40 }}>Committed to your mission</div>
        <h1 style={{ ...disp(150, 700), fontSize: 'clamp(48px, 13.5vw, 150px)', margin: '20px 0 0', letterSpacing: '-0.005em' }}>
          Expect more<br />from your<br /><span style={{ color: c.orange }}>security.</span>
        </h1>
        <div style={{ display: 'flex', alignItems: 'center', margin: '44px 0 0' }}>
          <div style={{ height: 3, background: c.orange, flex: 1 }} />
          <div style={{ width: 0, height: 0, borderTop: '9px solid transparent', borderBottom: '9px solid transparent', borderLeft: `15px solid ${c.orange}` }} />
        </div>
        <p style={{ ...body, fontSize: 19, maxWidth: 620, margin: m ? '28px 0 52px' : '34px 0 96px' }}>{COPY.position}</p>
      </header>

      {/* services — telemetry rows */}
      <section style={{ padding: pad, borderTop: `1px solid ${c.line}` }}>
        <div style={{ ...mono, color: c.orange, marginBottom: 8 }}>// Capabilities</div>
        {SERVICES.map((s) => (
          <div key={s.n} style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '120px 1fr 1.2fr 60px', gap: m ? 8 : 30, alignItems: m ? 'start' : 'center', padding: m ? '26px 0' : '34px 0', borderTop: `1px solid ${c.line}` }}>
            <span style={{ ...mono, fontSize: 13, color: c.mute }}>{s.n}</span>
            <h3 style={{ ...disp(40, 600) }}>{s.title}</h3>
            <p style={{ ...body, margin: 0, fontSize: 15.5 }}>{s.blurb}</p>
            <span style={{ ...disp(28, 600), color: c.orange, textAlign: 'right' }}>→</span>
          </div>
        ))}
      </section>

      {/* approach */}
      <section style={{ padding: pad, background: c.bg2, borderTop: `1px solid ${c.line}`, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 30 : 64, alignItems: 'center' }}>
        <div><Ph label="Operations imagery" h={360} dark={c.d} accent={c.orange} /></div>
        <div>
          <div style={{ ...mono, color: c.orange }}>// Approach</div>
          <h2 style={{ ...disp(58, 700), margin: '18px 0 22px' }}>A holistic<br />approach.</h2>
          <p style={{ ...body, fontSize: 18, color: c.fg }}>{COPY.approach}</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, marginTop: 34, background: c.line, border: `1px solid ${c.line}` }}>
            {['Commitment', 'Professionalism', 'Safety', 'Partnership'].map((p) => (
              <div key={p} style={{ background: c.bg2, padding: '18px 20px', ...mono, fontSize: 12, color: c.fg }}><span style={{ color: c.orange }}>+ </span>{p}</div>
            ))}
          </div>
        </div>
      </section>

      {/* contact */}
      <section style={{ padding: pad, borderTop: `1px solid ${c.line}`, display: 'grid', gridTemplateColumns: m ? '1fr' : '0.8fr 1.2fr', gap: m ? 30 : 64 }}>
        <div>
          <div style={{ ...mono, color: c.orange }}>// Contact</div>
          <h2 style={{ ...disp(52, 700), margin: '18px 0 22px' }}>Request a<br />consultation.</h2>
          <p style={{ ...body }}>For inquiries and licensing matters, reach us directly.</p>
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[['EMAIL', 'contact@thrulinesolutions.com'], ['PHONE', '(000) 000-0000'], ['SECURE', 'Encrypted intake available']].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="Describe your mission and needs" area wide />
          <button style={{ gridColumn: '1 / -1', background: c.orange, color: '#1A1A1A', border: 'none', ...mono, fontSize: 13, fontWeight: 700, padding: '17px', cursor: 'pointer' }}>Request a Consultation →</button>
        </form>
      </section>

      <footer style={{ padding: m ? '28px 20px' : '40px 80px', borderTop: `1px solid ${c.line}`, display: 'flex', flexWrap: 'wrap', gap: m ? 8 : 0, justifyContent: 'space-between', alignItems: 'center', ...mono, fontSize: 11, color: c.mute }}>
        <span>THRULINE SOLUTIONS</span><span>© 2026 · COMMITTED TO YOUR MISSION</span>
      </footer>
    </div>
  );
}
window.LandingTactical = LandingTactical;