// page-comic-pro.jsx — Direction E · "Refined Comic" (theme-aware)
// 50s-comic DNA (halftone, a Bangers headline, light panel framing + bursts)
// professionalized: Archivo body, restraint, whitespace. Toggles light/dark.

function LandingComicPro() {
  const [mode, setMode] = React.useState('light');
  const c = mkTheme(mode);
  const W = 1280;
  const vw = useVW();
  const m = vw < 760;
  const bangers = (s, ls = '0.5px') => ({ fontFamily: '"Bangers", display', fontSize: s, letterSpacing: ls, textTransform: 'uppercase', lineHeight: 0.95, margin: 0 });
  const body = { fontFamily: '"Archivo", sans-serif', fontSize: 17, lineHeight: 1.6, color: c.mute };
  const eyebrow = { fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: c.orange2 };
  const halftoneColor = c.d ? 'rgba(255,248,240,0.10)' : 'rgba(26,26,26,0.10)';
  const halftone = { backgroundImage: `radial-gradient(${halftoneColor} 1.3px, transparent 1.4px)`, backgroundSize: '13px 13px' };
  const pad = m ? '52px 20px' : '88px 80px';
  const softShadow = c.d ? 'rgba(0,0,0,0.5)' : 'rgba(26,26,26,0.14)';
  const panel = { border: `2px solid ${c.fg}`, background: c.bg2, boxShadow: `5px 5px 0 ${softShadow}`, borderRadius: 4 };

  const Burst = ({ size = 40, fill = c.orange, stroke = c.fg }) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <polygon fill={fill} stroke={stroke} strokeWidth="4" strokeLinejoin="round"
        points="50,5 58,18 73,11 72,27 88,27 80,40 94,47 81,55 89,69 74,69 76,85 62,78 56,92 50,80 44,92 38,78 24,85 26,69 11,69 19,55 6,47 20,40 12,27 28,27 27,11 42,18" />
    </svg>
  );

  const Field = ({ label, ph, wide, area, select }) => (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 7, gridColumn: wide ? '1 / -1' : 'auto' }}>
      <span style={{ ...eyebrow, fontSize: 11, color: c.mute }}>{label}</span>
      {select ? (
        <select style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `2px solid ${c.fg}`, borderRadius: 4, background: c.bg2 }}>
          {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: `2px solid ${c.fg}`, borderRadius: 4, background: c.bg2, resize: 'none' }} />
      ) : (
        <input placeholder={ph} style={{ font: '16px "Archivo", sans-serif', color: c.fg, padding: '13px 14px', border: `2px solid ${c.fg}`, borderRadius: 4, background: c.bg2 }} />
      )}
    </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: `2px solid ${c.fg}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <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 : 24 }}>
          {!m && ['Services', 'Approach', 'Contact'].map((l) => <a key={l} href="#" style={{ fontSize: 15, fontWeight: 600, color: c.fg, textDecoration: 'none' }}>{l}</a>)}
          <ThemeToggle mode={mode} setMode={setMode} c={c} />
          {!m && <a href="#" style={{ fontSize: 14, fontWeight: 700, color: c.bg, background: c.fg, padding: '11px 18px', borderRadius: 4, textDecoration: 'none', boxShadow: `3px 3px 0 ${c.orange}` }}>Request a Consultation</a>}
        </div>
      </nav>

      {/* hero */}
      <header style={{ ...halftone, padding: m ? '44px 20px 40px' : '84px 80px 74px', borderBottom: `2px solid ${c.fg}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1.1fr 0.9fr', gap: m ? 30 : 56, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, ...eyebrow }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: c.orange, display: 'inline-block' }} /> Investigations · Protection · Training
            </div>
            <h1 style={{ ...bangers(92, '1px'), fontSize: 'clamp(44px, 11vw, 92px)', color: c.fg, margin: '20px 0 0', textShadow: `3px 3px 0 ${c.orange}` }}>Committed to<br />your mission.</h1>
            <p style={{ ...body, fontSize: 19, color: c.fg, maxWidth: 480, marginTop: 26 }}>{COPY.position}</p>
            <div style={{ display: 'flex', gap: 14, marginTop: 34 }}>
              <a href="#" style={{ background: c.orange, color: '#1A1A1A', fontWeight: 700, fontSize: 16, padding: '15px 26px', borderRadius: 4, textDecoration: 'none', border: `2px solid ${c.fg}`, boxShadow: `4px 4px 0 ${c.fg}` }}>Request a Consultation</a>
              <a href="#" style={{ color: c.fg, fontWeight: 700, fontSize: 16, padding: '15px 22px', borderRadius: 4, textDecoration: 'none', border: `2px solid ${c.fg}` }}>Our services →</a>
            </div>
          </div>
          <div style={{ ...panel, padding: 0, overflow: 'hidden' }}>
            <Ph label="Hero / team photo" h={420} dark={c.d} accent={c.orange2} style={{ border: 'none' }} />
          </div>
        </div>
      </header>

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

      {/* services */}
      <section style={{ padding: pad }}>
        <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', alignItems: m ? 'flex-start' : 'flex-end', justifyContent: 'space-between', gap: m ? 16 : 0, marginBottom: m ? 30 : 48 }}>
          <div>
            <div style={eyebrow}>What we do</div>
            <h2 style={{ ...bangers(52), marginTop: 14, color: c.fg }}>Three service lines</h2>
          </div>
          <p style={{ ...body, maxWidth: 340, margin: 0 }}>One standard of professionalism across investigations, protection, and training.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)', gap: m ? 18 : 26 }}>
          {SERVICES.map((s) => (
            <div key={s.n} style={{ ...panel, padding: '28px 26px 30px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ ...bangers(38), color: c.orange }}>{s.n}</span>
                <Burst size={30} fill={c.amber} />
              </div>
              <h3 style={{ fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: 23, margin: '16px 0 10px', letterSpacing: '-0.01em', color: c.fg }}>{s.title}</h3>
              <p style={{ ...body, fontSize: 15.5, margin: 0 }}>{s.blurb}</p>
              <a href="#" style={{ display: 'inline-block', marginTop: 20, fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: c.fg, textDecoration: 'none', borderBottom: `2px solid ${c.orange}`, paddingBottom: 2 }}>Learn more →</a>
            </div>
          ))}
        </div>
      </section>

      {/* approach — amber panel (constant) */}
      <section style={{ padding: pad, background: c.bg2, borderTop: `2px solid ${c.fg}`, borderBottom: `2px solid ${c.fg}` }}>
        <div style={{ background: T.amber, border: `2px solid ${T.ink}`, borderRadius: 4, padding: m ? '30px 22px' : '52px 54px', display: 'grid', gridTemplateColumns: m ? '1fr' : '0.8fr 1.2fr', gap: m ? 24 : 50, alignItems: 'center', boxShadow: `7px 7px 0 ${T.ink}` }}>
          <h2 style={{ ...bangers(50), color: T.ink }}>We start with your mission.</h2>
          <div>
            <p style={{ fontFamily: '"Archivo", sans-serif', fontSize: 20, lineHeight: 1.55, color: '#3a2606', margin: 0, fontWeight: 500 }}>{COPY.approach}</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 26, flexWrap: 'wrap' }}>
              {['Commitment', 'Professionalism', 'Safety', 'Partnership'].map((p) => (
                <span key={p} style={{ fontFamily: '"Spline Sans Mono", monospace', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: T.amber, background: T.ink, padding: '8px 13px', borderRadius: 3 }}>{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 : 60 }}>
          <div>
            <div style={eyebrow}>Contact</div>
            <h2 style={{ ...bangers(46), marginTop: 14, color: c.fg }}>Request a consultation</h2>
            <p style={{ ...body, marginTop: 18, maxWidth: 320 }}>For inquiries and licensing matters, reach us directly or send a note.</p>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[['Email', 'contact@thrulinesolutions.com'], ['Phone', '(000) 000-0000']].map(([k, v]) => (
                <div key={k} style={{ ...panel, padding: '13px 18px', boxShadow: `3px 3px 0 ${softShadow}` }}>
                  <span style={{ ...eyebrow, fontSize: 11, color: c.orange2 }}>{k} </span>
                  <span style={{ fontSize: 15.5, color: c.fg, marginLeft: 6 }}>{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: `2px solid ${c.fg}`, fontFamily: '"Archivo", sans-serif', fontWeight: 800, fontSize: 16, padding: '16px', borderRadius: 4, cursor: 'pointer', boxShadow: `4px 4px 0 ${c.fg}` }}>Request a Consultation</button>
          </form>
        </div>
      </section>

      <footer style={{ background: T.ink, color: T.cream, padding: m ? '32px 20px' : '42px 80px', 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: 12 }}>
          <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.LandingComicPro = LandingComicPro;