// page-editorial.jsx — Direction C · "Editorial Warm" (theme-aware)
// Magazine-like: amber/orange bands (constant), big asymmetric type,
// photo-forward, north-star accent. Toggles light/dark.

function LandingEditorial() {
  const [mode, setMode] = React.useState('light');
  const c = mkTheme(mode);
  const W = 1280;
  const vw = useVW();
  const m = vw < 760;
  const h2 = (s) => ({ fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: s, letterSpacing: '-0.03em', lineHeight: 0.98, margin: 0, color: c.fg });
  const mono = { fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: c.orange2 };
  const body = { fontFamily: '"Archivo", sans-serif', fontSize: 17, lineHeight: 1.62, color: c.mute };
  const pad = m ? '52px 20px' : '96px 84px';

  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.14em', textTransform: 'uppercase', color: c.mute }}>{label}</span>
      {select ? (
        <select style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '14px', border: 'none', borderBottom: `2px solid ${c.fg}`, background: 'transparent', appearance: 'none', borderRadius: 0 }}>
          {SERVICE_OPTIONS.map((o) => <option key={o}>{o}</option>)}
        </select>
      ) : area ? (
        <textarea rows="3" placeholder={ph} style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '14px', border: 'none', borderBottom: `2px solid ${c.fg}`, background: 'transparent', resize: 'none', borderRadius: 0 }} />
      ) : (
        <input placeholder={ph} style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '14px', border: 'none', borderBottom: `2px solid ${c.fg}`, background: 'transparent', borderRadius: 0 }} />
      )}
    </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 ? '16px 20px' : '24px 84px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
          <LogoImg h={m ? 32 : 36} />
          <Wordmark size={m ? 17 : 20} color={c.fg} sub={c.mute} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: m ? 10 : 26 }}>
          {!m && ['Services', 'Approach', 'Contact'].map((l) => <a key={l} href="#" style={{ fontSize: 15, fontWeight: 500, color: c.fg, textDecoration: 'none' }}>{l}</a>)}
          <ThemeToggle mode={mode} setMode={setMode} c={c} />
          {!m && <a href="#" style={{ fontSize: 15, fontWeight: 700, color: c.orange2, textDecoration: 'none', borderBottom: `2px solid ${c.orange}` }}>Consultation</a>}
        </div>
      </nav>

      {/* hero */}
      <header style={{ padding: m ? '34px 20px 0' : '56px 84px 0' }}>
        <div style={mono}>Committed to your mission</div>
        <h1 style={{ ...h2(118), fontSize: 'clamp(40px, 11vw, 118px)', margin: '26px 0 0', maxWidth: 1000 }}>Protection that<br />begins with <span style={{ color: c.orange }}>your</span><br />mission.</h1>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.4fr 1fr', gap: m ? 28 : 50, marginTop: m ? 32 : 56, alignItems: m ? 'stretch' : 'end' }}>
          <Ph label="Principal / detail photography" h={420} dark={c.d} accent={c.orange2} />
          <div style={{ background: T.amber, padding: '40px 36px' }}>
            <p style={{ fontFamily: '"Archivo", sans-serif', fontSize: 19, lineHeight: 1.6, color: '#5a3a10', margin: 0 }}>{COPY.position}</p>
            <a href="#" style={{ display: 'inline-block', marginTop: 28, background: T.ink, color: T.cream, fontWeight: 700, fontSize: 16, padding: '15px 26px', textDecoration: 'none' }}>Request a Consultation →</a>
          </div>
        </div>
      </header>

      {/* services */}
      <section style={{ padding: pad }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, marginBottom: m ? 30 : 50 }}>
          <LogoImg h={26} />
          <h2 style={h2(m ? 34 : 46)}>What we do</h2>
        </div>
        {SERVICES.map((s, i) => (
          <div key={s.n} style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '180px 1fr 1.3fr', gap: m ? 10 : 40, alignItems: m ? 'start' : 'center', padding: m ? '28px 0' : '40px 0', borderTop: `1px solid ${c.line}`, borderBottom: i === SERVICES.length - 1 ? `1px solid ${c.line}` : 'none' }}>
            <div style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 900, fontSize: m ? 52 : 88, color: T.amber, lineHeight: 0.8, letterSpacing: '-0.04em' }}>{s.n}</div>
            <h3 style={{ ...h2(34) }}>{s.title}</h3>
            <p style={{ ...body, margin: 0 }}>{s.blurb}</p>
          </div>
        ))}
      </section>

      {/* approach — full orange band (constant) */}
      <section style={{ padding: pad, background: T.orange, color: T.cream }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '0.8fr 1.2fr', gap: m ? 24 : 56, alignItems: 'center' }}>
          <h2 style={{ ...h2(58), color: T.cream }}>We start with your mission.</h2>
          <div>
            <p style={{ fontFamily: '"Archivo", sans-serif', fontSize: 23, lineHeight: 1.5, color: T.cream, margin: 0, fontWeight: 500 }}>{COPY.approach}</p>
            <div style={{ display: 'flex', gap: 28, marginTop: 36, flexWrap: 'wrap' }}>
              {['Commitment', 'Professionalism', 'Safety', 'Partnership'].map((p) => (
                <span key={p} style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: T.cream, borderBottom: '2px solid rgba(255,248,240,0.5)', paddingBottom: 4 }}>{p}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* contact */}
      <section style={{ padding: pad }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '0.85fr 1.15fr', gap: m ? 30 : 64 }}>
          <div>
            <div style={mono}>Contact</div>
            <h2 style={{ ...h2(48), marginTop: 18 }}>Let's talk about your mission.</h2>
            <div style={{ marginTop: 34, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[['Email', 'contact@thrulinesolutions.com'], ['Phone', '(000) 000-0000']].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: c.orange2 }}>{k}</div>
                  <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4, color: c.fg }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <form style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: 26 }} 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.fg, color: c.bg, border: 'none', fontFamily: '"Archivo", sans-serif', fontWeight: 700, fontSize: 16, padding: '17px', cursor: 'pointer', marginTop: 6 }}>Request a Consultation</button>
          </form>
        </div>
      </section>

      <footer style={{ background: T.ink, color: T.cream, padding: m ? '32px 20px' : '48px 84px', display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'center', gap: m ? 18 : 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
          <LogoImgFlat h={30} />
          <Wordmark size={18} 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 · Committed to your mission</div>
      </footer>
    </div>
  );
}
window.LandingEditorial = LandingEditorial;