// Pages.jsx — secondary pages (capabilities, about, contact) so all drawer routes resolve.
// (Identical to your file — only CapabilitiesPage was changed: each row is now an
//  <a href="#/entry/capability-..."> linking to the long-form deep-dive in
//  content/entries.json. Everything else is preserved.)

function PageHeader({ idx, title, lede }) {
  return (
    <section style={{ padding: "140px 0 60px", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>{idx}</div>
        <h1 className="display" style={{ fontSize: "clamp(48px, 8vw, 128px)" }}>{title}</h1>
        {lede && <p className="lede mute" style={{ marginTop: 32, maxWidth: "55ch" }}>{lede}</p>}
      </div>
    </section>
  );
}

function CapabilitiesPage({ onNavigate }) {
  const caps = [
    { n: "01", slug: "capability-app-dev",            title: "Custom Application Development", body: "Every organization has technology requirements. Some adopt cookie-cutter products. In our experience, custom applications answer requirements far better — especially when the requirements come from the field, not the slide deck.", points: ["Custom application development", "API design & integration", "Mobile-first interfaces", "Operational UX research"] },
    { n: "02", slug: "capability-it-risk-management", title: "IT Risk Management",                    body: "Leaders deal in risk every day. Many organizations fail to review their data infrastructure as vulnerable. We treat unknown risk as the worst kind, and surface it.", points: ["Risk identification & ranking", "Data infrastructure review", "Vendor & supply-chain risk", "Continuous monitoring"] },
    { n: "03", slug: "capability-infosec-audit",      title: "Information Security Auditing",         body: "Organizations must review their information technology controls to keep a competitive edge. Lulius has a unique experience base in these engagements.", points: ["Controls & policy audit", "Penetration & posture review", "Compliance roadmaps", "Independent assessments"] },
    { n: "04", slug: "capability-it-strategy",        title: "IT Design & Strategy",                  body: "We've helped commercial, government, and non-profit leaders leverage technology in accomplishing their objectives. Independent review without product bias.", points: ["Technology strategy", "Architecture review", "Initiative diligence", "Organizational design"] },
  ];

  const go = (slug) => (e) => { e.preventDefault(); onNavigate(`/entry/${slug}`); };

  return (
    <main>
      <PageHeader idx="04 / CAPABILITIES" title={<>Niche by design.<br/>Operational by necessity.</>} lede="We don't try to be all things to all customers. Four practices, deep experience, and the discipline to say no to engagements outside them." />
      <section className="section">
        <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line)" }}>
          {caps.map((c) => (
            <a
              key={c.n}
              href={`#/entry/${c.slug}`}
              onClick={go(c.slug)}
              className="cap-row"
              style={{
                display: "grid", gridTemplateColumns: "100px 1fr 1.4fr 60px",
                gap: 32, padding: "56px 0",
                borderBottom: "1px solid var(--line)",
                color: "inherit", textDecoration: "none",
                transition: "padding-left .2s ease, background .2s ease",
              }}>
              <div className="num" style={{ fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--accent)", letterSpacing: ".14em" }}>{c.n} ——</div>
              <h2 className="h2" style={{ margin: 0 }}>{c.title}</h2>
              <div>
                <p className="lede mute">{c.body}</p>
                <ul style={{ listStyle: "none", padding: 0, marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {c.points.map((p) => (
                    <li key={p} className="eyebrow" style={{ color: "var(--paper)" }}><span className="dot"></span>{p}</li>
                  ))}
                </ul>
              </div>
              <div style={{ textAlign: "right", fontFamily: "var(--f-mono)", fontSize: 18, color: "var(--mute-2)", alignSelf: "start" }}>→</div>
            </a>
          ))}
        </div>
      </section>
      <ContactCTA onNavigate={onNavigate} />
      <style>{`
        .cap-row:hover { padding-left: 16px !important; background: rgba(200,164,92,.04); }
        .cap-row:hover .num { color: var(--paper); }
        @media (max-width: 880px) {
          .cap-row { grid-template-columns: 1fr !important; gap: 16px !important; padding: 36px 0 !important; }
          .cap-row > div:last-child { display: none; }
        }
      `}</style>
    </main>
  );
}

function AboutPage({ onNavigate }) {
  return (
    <main>
      <PageHeader idx="05 / COMPANY" title={<>A small firm,<br/>built around operators.</>} lede="Lulius Innovation is a Veteran-owned company focused on software development and IT consulting. Our employees are some of the industry's most experienced. Our customers fly aircraft, run programs, and answer to commanders." />

      <section className="section">
        <div className="wrap ab-grid" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }}>
          <div className="idx"><span className="num">01 /</span> Posture</div>
          <div>
            <p className="pull">
              We are <span className="accent">veteran-owned</span> and built around people who have shipped in conditions where the work has to hold up. A four-star general sits on our board. The U.S. Army puts our software in the field.
            </p>
            <p className="lede mute" style={{ marginTop: 32 }}>
              We've been operating from Reno, Nevada since 2014 — quietly, consistently, and on engagements where deep experience compounds.
            </p>
          </div>
        </div>
      </section>

      <section className="section tight" style={{ background: "var(--ink-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="idx" style={{ marginBottom: 48 }}><span className="num">02 /</span> Board & Recognition</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--line)" }} className="ab-rec">
            {[
              { eyebrow: "BOARD · 2023", title: "Gen. James D. Thurman (Ret.)", body: "Four-star Army general and experienced aviator. Joins a board of other highly decorated veterans working to advance the Lulius mission." },
              { eyebrow: "RECOGNITION · 2023", title: "Rich Ferguson — NCET Technologist of the Year", body: "Recognized by the Nevada Center for Entrepreneurship & Technology for sustained contribution to the regional technology community." },
            ].map((it) => (
              <div key={it.title} style={{ padding: 40, borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
                <div className="eyebrow accent-text" style={{ marginBottom: 16 }}>{it.eyebrow}</div>
                <div className="h2" style={{ marginBottom: 16, fontSize: "clamp(22px, 2.6vw, 32px)" }}>{it.title}</div>
                <p className="mute" style={{ fontSize: 15 }}>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="idx" style={{ marginBottom: 48 }}><span className="num">03 /</span> SkillBridge & Internship Program</div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 60 }} className="ab-sb">
            <div>
              <h2 className="h1" style={{ marginTop: 0 }}>
                A path from<br/>service to <span className="accent-text">shipping software.</span>
              </h2>
              <p className="lede mute" style={{ marginTop: 24 }}>
                Lulius offers multiple internship paths — software development, project management, and product marketing — including DOD SkillBridge placement for transitioning service members.
              </p>
              <a href="mailto:info@luli.us" className="btn" style={{ marginTop: 32 }}>
                info@luli.us <span className="arrow">→</span>
              </a>
            </div>
            <div style={{ aspectRatio: "3/4", border: "1px solid var(--line)" }}>
              <MediaImg src="media/ab-skillbridge.jpg" alt="SkillBridge team" />
            </div>
          </div>
        </div>
      </section>

      <ContactCTA onNavigate={onNavigate} />
      <style>{`
        @media (max-width: 880px) {
          .ab-grid, .ab-sb { grid-template-columns: 1fr !important; gap: 24px !important; }
          .ab-rec { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

function ContactPage({ onNavigate }) {
  // status: "idle" | "submitting" | "submitted" | "error"
  const [status, setStatus] = React.useState("idle");
  const [errorMsg, setErrorMsg] = React.useState("");
  const [form, setForm] = React.useState({ name: "", org: "", email: "", topic: "Engagement", message: "" });
  const [hpCheck, setHpCheck] = React.useState(false); // honeypot — must stay false
  const [turnstileToken, setTurnstileToken] = React.useState("");
  const turnstileMountRef = React.useRef(null);
  const turnstileWidgetIdRef = React.useRef(null);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  // Mount Turnstile widget once the script loads. Re-render on each form mount.
  React.useEffect(() => {
    let cancelled = false;
    const mount = () => {
      if (cancelled || !turnstileMountRef.current || !window.turnstile) return;
      if (turnstileWidgetIdRef.current !== null) return;
      turnstileWidgetIdRef.current = window.turnstile.render(turnstileMountRef.current, {
        sitekey: window.TURNSTILE_SITE_KEY || "",
        theme: "dark",
        callback: (token) => setTurnstileToken(token),
        "error-callback": () => setTurnstileToken(""),
        "expired-callback": () => setTurnstileToken(""),
      });
    };
    if (window.turnstile) {
      mount();
    } else {
      const i = setInterval(() => {
        if (window.turnstile) { clearInterval(i); mount(); }
      }, 150);
      return () => { cancelled = true; clearInterval(i); };
    }
    return () => { cancelled = true; };
  }, [status]); // re-mount when returning from "submitted" → "idle"

  const submit = async (e) => {
    e.preventDefault();
    if (status === "submitting") return;
    setStatus("submitting");
    setErrorMsg("");
    try {
      const r = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, _hp_check: hpCheck, turnstileToken }),
      });
      const j = await r.json().catch(() => ({ ok: false, error: "Bad server response." }));
      if (r.ok && j.ok) {
        setStatus("submitted");
      } else {
        setErrorMsg(j.error || "Something went wrong. Try again in a moment.");
        setStatus("error");
        if (window.turnstile && turnstileWidgetIdRef.current !== null) {
          window.turnstile.reset(turnstileWidgetIdRef.current);
        }
        setTurnstileToken("");
      }
    } catch (err) {
      setErrorMsg("Network error. Check your connection and try again.");
      setStatus("error");
    }
  };

  const inputStyle = {
    background: "transparent",
    border: "none",
    borderBottom: "1px solid var(--line-2)",
    color: "var(--paper)",
    padding: "14px 0 12px",
    fontFamily: "var(--f-body)",
    fontSize: 16,
    width: "100%",
    outline: "none",
  };
  const labelStyle = {
    fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em",
    textTransform: "uppercase", color: "var(--mute)",
    display: "block", marginBottom: 8,
  };

  return (
    <main>
      <PageHeader idx="06 / CONTACT" title={<>Open a <span className="accent-text">file.</span></>} lede="Tell us about the requirement. We'll route it to the right operator." />
      <section className="section">
        <div className="wrap cn-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80 }}>
          {status !== "submitted" ? (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              {/* Honeypot — a checkbox (NOT a text input) because Chrome's
                  profile autofill aggressively fills text fields even with
                  autocomplete="off" + data-*-ignore. Checkboxes are immune
                  to that autofill, but naive bots that toggle every input
                  still trip it. */}
              <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", top: "auto", width: 1, height: 1, overflow: "hidden" }}>
                <input
                  type="checkbox"
                  name="_hp_check"
                  id="_hp_check"
                  tabIndex={-1}
                  autoComplete="off"
                  checked={hpCheck}
                  onChange={(e) => setHpCheck(e.target.checked)}
                />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }} className="cn-half">
                <div>
                  <label style={labelStyle}>Name</label>
                  <input value={form.name} onChange={set("name")} required style={inputStyle} placeholder="—" />
                </div>
                <div>
                  <label style={labelStyle}>Organization</label>
                  <input value={form.org} onChange={set("org")} style={inputStyle} placeholder="—" />
                </div>
              </div>
              <div>
                <label style={labelStyle}>Email</label>
                <input type="email" value={form.email} onChange={set("email")} required style={inputStyle} placeholder="—" />
              </div>
              <div>
                <label style={labelStyle}>Topic</label>
                <div style={{ display: "flex", gap: 0, marginTop: 8, flexWrap: "wrap" }}>
                  {["Engagement", "Platform demo", "SkillBridge", "Press / Other"].map((t) => (
                    <button type="button" key={t} onClick={() => setForm({ ...form, topic: t })}
                      style={{
                        padding: "12px 16px",
                        border: "1px solid var(--line-2)",
                        marginRight: -1, marginBottom: -1,
                        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase",
                        background: form.topic === t ? "var(--accent)" : "transparent",
                        color: form.topic === t ? "var(--ink)" : "var(--paper)",
                        cursor: "pointer",
                      }}>{t}</button>
                  ))}
                </div>
              </div>
              <div>
                <label style={labelStyle}>Brief the team</label>
                <textarea value={form.message} onChange={set("message")} required rows={6}
                  style={{ ...inputStyle, resize: "vertical", borderBottom: "1px solid var(--line-2)" }} placeholder="—" />
              </div>
              <div ref={turnstileMountRef} />
              {status === "error" && (
                <div style={{
                  padding: "14px 18px",
                  border: "1px solid var(--accent)",
                  color: "var(--paper)",
                  fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".08em",
                }}>
                  ERR · {errorMsg}
                </div>
              )}
              <button
                type="submit"
                className="btn"
                disabled={status === "submitting" || !turnstileToken}
                style={{
                  alignSelf: "flex-start",
                  marginTop: 16,
                  opacity: (status === "submitting" || !turnstileToken) ? 0.55 : 1,
                  cursor: (status === "submitting" || !turnstileToken) ? "not-allowed" : "pointer",
                }}
              >
                {status === "submitting" ? "Transmitting…" : <>Transmit <span className="arrow">→</span></>}
              </button>
            </form>
          ) : (
            <div
              role="status"
              aria-live="polite"
              className="cn-thanks"
              style={{
                position: "relative",
                border: "1px solid var(--accent)",
                padding: "56px 48px",
                background: "linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0) 100%)",
                overflow: "hidden",
              }}
            >
              <div style={{
                position: "absolute", top: 0, left: 0, right: 0, height: 2,
                background: "var(--accent)",
                transformOrigin: "left",
                animation: "cn-bar 600ms ease-out both",
              }} />

              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                border: "1px solid var(--accent)",
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 28,
                animation: "cn-pop 420ms cubic-bezier(.2,.9,.3,1.2) both",
              }}>
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true">
                  <path d="M5 13.5 L11 19 L21 7"
                    stroke="var(--accent)" strokeWidth="2"
                    strokeLinecap="square" strokeLinejoin="miter"
                    style={{
                      strokeDasharray: 30,
                      strokeDashoffset: 30,
                      animation: "cn-check 520ms 180ms ease-out forwards",
                    }} />
                </svg>
              </div>

              <div className="eyebrow accent-text" style={{ marginBottom: 14 }}>
                <span className="dot"></span>TRANSMITTED &middot; 200 OK
              </div>

              <h2 className="h1" style={{ margin: 0, lineHeight: 1.08 }}>
                Thank you, <span className="accent-text">{form.name || "operator"}</span>.
              </h2>

              <p className="lede" style={{ marginTop: 18, maxWidth: 560 }}>
                Your brief is in the queue. A team member will route it and respond directly &mdash; usually within one business day.
              </p>

              <ul style={{
                listStyle: "none", padding: 0, margin: "32px 0 0",
                display: "flex", flexDirection: "column", gap: 12,
                fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: ".06em",
                color: "var(--mute)",
              }}>
                <li>
                  <span className="accent-text" style={{ marginRight: 12 }}>01</span>
                  Confirmation copy sent to <span style={{ color: "var(--paper)" }}>{form.email || "your inbox"}</span>
                </li>
                <li>
                  <span className="accent-text" style={{ marginRight: 12 }}>02</span>
                  Routed to the right operator for <span style={{ color: "var(--paper)" }}>{form.topic}</span>
                </li>
                <li>
                  <span className="accent-text" style={{ marginRight: 12 }}>03</span>
                  Reply via email &mdash; urgent matters: <a href="tel:+17752234416" style={{ color: "var(--paper)" }}>(775) 223-4416</a>
                </li>
              </ul>

              <button onClick={() => {
                setStatus("idle");
                setErrorMsg("");
                setTurnstileToken("");
                turnstileWidgetIdRef.current = null;
                setHpCheck(false);
                setForm({ name: "", org: "", email: "", topic: "Engagement", message: "" });
              }} className="btn ghost" style={{ marginTop: 36 }}>
                Submit another &rarr;
              </button>
            </div>
          )}

          <aside style={{ display: "flex", flexDirection: "column", gap: 32 }}>
            <div>
              <div className="eyebrow mute" style={{ marginBottom: 12 }}>HEADQUARTERS</div>
              <div className="h3">450 Sinclair St<br/>Reno, NV 89501</div>
            </div>
            <div>
              <div className="eyebrow mute" style={{ marginBottom: 12 }}>DIRECT</div>
              <a href="tel:+17752234416" className="h3 tabular" style={{ display: "block" }}>(775) 223-4416</a>
              <a href="mailto:info@luli.us" className="h3" style={{ display: "block", marginTop: 4 }}>info@luli.us</a>
            </div>
            <div>
              <div className="eyebrow mute" style={{ marginBottom: 12 }}>SKILLBRIDGE</div>
              <a href="mailto:info@luli.us" style={{ fontFamily: "var(--f-display)", fontSize: 18, color: "var(--paper)" }}>info@luli.us</a>
            </div>
            <div style={{ paddingTop: 24, borderTop: "1px solid var(--line)" }}>
              <div className="eyebrow mute" style={{ marginBottom: 12 }}>POSITION</div>
              <div className="tabular" style={{ fontFamily: "var(--f-mono)", fontSize: 14, color: "var(--mute-2)" }}>
                39.52203° N<br/>119.80811° W<br/>ELEV 5,173 ft
              </div>
            </div>
          </aside>
        </div>
      </section>
      <style>{`
        @media (max-width: 880px) {
          .cn-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .cn-half { grid-template-columns: 1fr !important; gap: 32px !important; }
          .cn-thanks { padding: 40px 28px !important; }
        }
        @keyframes cn-bar  { from { transform: scaleX(0); }    to { transform: scaleX(1); } }
        @keyframes cn-pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
        @keyframes cn-check { to { stroke-dashoffset: 0; } }
        @media (prefers-reduced-motion: reduce) {
          .cn-thanks *, .cn-thanks { animation: none !important; }
        }
      `}</style>
    </main>
  );
}

window.CapabilitiesPage = CapabilitiesPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;