// page-clean.jsx — Direction A · "Clean Authority" (theme-aware)
// Minimal, generous whitespace, sparing orange. Toggles light/dark.

function LandingClean() {
  const [mode, setMode] = React.useState('light');
  const c = mkTheme(mode);
  const W = 1280;
  const vw = useVW();
  const m = vw < 760;
  const link = { fontFamily: '"Archivo", sans-serif', fontSize: 15, fontWeight: 500, color: c.fg, textDecoration: 'none', opacity: 0.8 };
  const eyebrow = { fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: c.orange2 };
  const h2 = { fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.02em', color: c.fg, margin: 0, lineHeight: 1.04 };
  const body = { fontFamily: '"Archivo", sans-serif', fontSize: 17, lineHeight: 1.6, color: c.mute };
  const sectionPad = m ? '52px 20px' : '88px 80px';

  const Field = ({ label, ph, wide, area, select }) => (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 7, gridColumn: wide ? '1 / -1' : 'auto' }}>
      <span style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: c.mute }}>{label}</span>
      {select ? (
        <select style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `1px solid ${c.fieldLine}`, borderRadius: 2, background: c.fieldBg, appearance: 'none' }}>
          {SERVICE_OPTIONS.map((o) => <option key={o}>{o}</option>)}
        </select>
      ) : area ? (
        <textarea rows="4" placeholder={ph} style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `1px solid ${c.fieldLine}`, borderRadius: 2, background: c.fieldBg, resize: 'none' }} />
      ) : (
        <input placeholder={ph} style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `1px solid ${c.fieldLine}`, borderRadius: 2, background: c.fieldBg }} />
      )}
    </label>
  );

  return (
    <div style={{ width: '100%', maxWidth: '100%', overflowX: 'hidden', background: c.bg, fontFamily: '"Archivo", sans-serif', color: c.fg }}>
      {/* nav */}
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: m ? '14px 20px' : '20px 80px', borderBottom: `1px solid ${c.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
          <LogoImg h={m ? 34 : 40} />
          <Wordmark size={m ? 17 : 20} color={c.fg} sub={c.mute} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: m ? 10 : 26 }}>
          {!m && <React.Fragment>
          <a style={link} href="#">Services</a>
          <a style={link} href="#">Approach</a>
          <a style={link} href="#">Contact</a>
          </React.Fragment>}
          <ThemeToggle mode={mode} setMode={setMode} c={c} />
          {!m && <a href="#" style={{ ...link, opacity: 1, color: c.bg, background: c.fg, padding: '11px 18px', borderRadius: 2, fontWeight: 600 }}>Request a Consultation</a>}
        </div>
      </nav>

      {/* hero */}
      <header style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.15fr 1fr', gap: m ? 30 : 56, padding: m ? '44px 20px 36px' : '96px 80px 84px', alignItems: 'center' }}>
        <div>
          <div style={eyebrow}>Investigations · Protection · Training</div>
          <h1 style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: 'clamp(40px, 8.6vw, 76px)', lineHeight: 0.98, letterSpacing: '-0.035em', margin: '22px 0 0', color: c.fg }}>
            Committed to<br />your mission.
          </h1>
          <p style={{ ...body, fontSize: 19, maxWidth: 480, marginTop: 26 }}>{COPY.position}</p>
          <div style={{ display: 'flex', gap: 14, marginTop: 36 }}>
            <a href="#" style={{ background: c.orange, color: '#1A1A1A', fontWeight: 700, fontSize: 16, padding: '15px 26px', borderRadius: 2, textDecoration: 'none' }}>Request a Consultation</a>
            <a href="#" style={{ color: c.fg, fontWeight: 600, fontSize: 16, padding: '15px 22px', borderRadius: 2, textDecoration: 'none', border: `1px solid ${c.fg}` }}>Our services →</a>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <Ph label="Field photography" h={460} dark={c.d} accent={c.orange2} />
          <div style={{ position: 'absolute', left: -26, bottom: 34, width: 92, height: 92, background: c.bg, border: `1px solid ${c.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <LogoImg h={50} />
          </div>
        </div>
      </header>

      {/* credibility bar */}
      <div style={{ display: 'flex', flexWrap: 'wrap', borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}` }}>
        {['Licensed & insured', 'Discreet by default', 'Operationally ready', 'Mission-aligned'].map((t, i) => (
          <div key={t} style={{ flex: m ? '1 1 50%' : 1, padding: m ? '16px 20px' : '22px 28px', borderLeft: (!m && i) ? `1px solid ${c.line}` : 'none', fontFamily: '"Spline Sans Mono", monospace', fontSize: m ? 11 : 12.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: c.fg, paddingLeft: m ? 20 : (i ? 28 : 80) }}>
            <span style={{ color: c.orange }}>—</span> {t}
          </div>
        ))}
      </div>

      {/* services */}
      <section style={{ padding: sectionPad }}>
        <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'flex-end', gap: m ? 18 : 0, marginBottom: m ? 32 : 56 }}>
          <div>
            <div style={eyebrow}>What we do</div>
            <h2 style={{ ...h2, marginTop: 16 }}>Three service lines,<br />one standard.</h2>
          </div>
          <p style={{ ...body, maxWidth: 340, margin: 0 }}>{COPY.approachShort}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', borderTop: `2px solid ${c.fg}` }}>
          {SERVICES.map((s, i) => (
            <div key={s.n} style={{ padding: m ? '26px 2px 30px' : '34px 34px 40px', borderLeft: (!m && i) ? `1px solid ${c.line}` : 'none', borderTop: (m && i) ? `1px solid ${c.line}` : 'none' }}>
              <div style={{ ...eyebrow, color: c.orange }}>{s.n}</div>
              <h3 style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 700, fontSize: 25, margin: '18px 0 12px', letterSpacing: '-0.01em', color: c.fg }}>{s.title}</h3>
              <p style={{ ...body, fontSize: 16, margin: 0 }}>{s.blurb}</p>
              <a href="#" style={{ display: 'inline-block', marginTop: 22, fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: c.fg, textDecoration: 'none' }}>Learn more →</a>
            </div>
          ))}
        </div>
      </section>

      {/* approach */}
      <section style={{ padding: sectionPad, background: c.bg2, borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '0.9fr 1.1fr', gap: m ? 28 : 64, alignItems: 'start' }}>
          <div>
            <div style={eyebrow}>Our approach</div>
            <h2 style={{ ...h2, marginTop: 16 }}>We start with<br />your mission.</h2>
          </div>
          <div>
            <p style={{ ...body, fontSize: 21, color: c.fg, lineHeight: 1.55 }}>{COPY.approach}</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 30, flexWrap: 'wrap' }}>
              {['Commitment', 'Professionalism', 'Safety', 'Partnership'].map((p) => (
                <span key={p} style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: c.fg, border: `1px solid ${c.line}`, padding: '9px 14px', borderRadius: 2 }}>{p}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* contact */}
      <section style={{ padding: sectionPad }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '0.85fr 1.15fr', gap: m ? 30 : 64 }}>
          <div>
            <div style={eyebrow}>Contact</div>
            <h2 style={{ ...h2, marginTop: 16, fontSize: 38 }}>Request a<br />consultation.</h2>
            <p style={{ ...body, marginTop: 20, maxWidth: 320 }}>For inquiries and licensing matters, reach us directly or send a note.</p>
            <div style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[['Email', 'contact@thrulinesolutions.com'], ['Phone', '(000) 000-0000'], ['Hours', 'Mon–Fri · 24/7 for clients']].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: c.orange2, width: 60 }}>{k}</span>
                  <span style={{ fontSize: 16, color: c.fg }}>{v}</span>
                </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: 700, fontSize: 16, padding: '16px', borderRadius: 2, cursor: 'pointer' }}>Request a Consultation</button>
          </form>
        </div>
      </section>

      {/* footer — constant ink block */}
      <footer style={{ background: T.ink, color: T.cream, padding: m ? '32px 20px' : '44px 80px', display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'center', gap: m ? 18 : 0, borderTop: `1px solid ${c.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
          <LogoImgFlat h={30} />
          <Wordmark size={17} color={T.cream} sub="rgba(255,248,240,0.5)" />
        </div>
        <div style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 11.5, letterSpacing: '0.1em', color: 'rgba(255,248,240,0.5)', textTransform: 'uppercase' }}>© 2026 Thruline Solutions · Licensed & insured</div>
      </footer>
    </div>
  );
}
window.LandingClean = LandingClean;