// V1 — Additional sections (Gap, Origin, Missions, Ezekiel, Pipeline, Trust,
// Weekly, Founder, Final CTA, Footer) — all rendered in the V1 monochrome idiom.
// Relies on globals from app.jsx: T, F, SecHead, useReveal (already mounted).

// ══════════════ 04 · GAP ══════════════
const V1Gap = () => {
  const cols = [
    { n: '01', head: 'Secular intel misses the target',
      body: "Reuters, AP, and the commercial threat feeds don't tag incidents by religion. A church burned in Jaranwala reads the same as a warehouse fire. Attacks on the global Church dissolve into statistical noise." },
    { n: '02', head: "Christian media isn't built for ops",
      body: 'Ministry newsletters land Monday. NGO reports arrive quarterly. Prayer networks get the story — after the people on the ground needed it. Narrative, not actionable.' },
    { n: '03', head: 'Nobody ties it together',
      body: 'Incident data, country risk, source credibility, theological context, and operational delivery live in different silos. The Church has been patching together intelligence from a dozen half-feeds.' },
  ];
  return (
    <section id="gap" style={{ padding: '120px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <SecHead
          pill="THE GAP"
          title="Secular intel doesn't see the Church."
          titleAccent="Christian media doesn't work like intel."
          lede="Three gaps — all avoidable, none filled. Until now."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {cols.map((c, i) => (
            <article key={i} className="v1-card v1-reveal" data-d={i + 1} style={{
              padding: '32px 28px 32px', display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div className="v1-signal-numeral" style={{
                fontFamily: F.display, fontSize: 56, fontWeight: 300, color: T.ink5,
                lineHeight: 1, letterSpacing: -1.6,
              }}>{c.n}</div>
              <div style={{
                height: 1, width: 40, background: T.saffron, opacity: 0.6,
              }} />
              <h3 style={{
                fontFamily: F.display, fontSize: 22, fontWeight: 400,
                color: T.white, margin: 0, lineHeight: 1.25, letterSpacing: -0.3,
              }}>{c.head}</h3>
              <p style={{
                fontFamily: F.body, fontSize: 14, lineHeight: 1.6,
                color: T.ink3, margin: 0, textWrap: 'pretty',
              }}>{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ══════════════ 05 · ORIGIN + MISSION (merged from old §5 + §13) ══════════════
const V1Origin = () => {
  return (
    <section id="origin" style={{ padding: '120px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '360px 1fr', gap: 72,
          alignItems: 'start',
        }}>
          {/* left: eyebrow + headline + founder card */}
          <div>
            <div className="v1-reveal"><span className="v1-pill">ORIGIN & MISSION</span></div>
            <h2 className="v1-reveal" data-d="1" style={{
              fontFamily: F.display, fontWeight: 400, fontSize: 48, lineHeight: 1.08,
              letterSpacing: -1.6, color: T.white, margin: '22px 0 0', textWrap: 'balance',
            }}>
              Serious intelligence,<br/>
              <span style={{ color: T.ink3 }}>built for the Church.</span>
            </h2>
            <div className="v1-reveal" data-d="3" style={{
              marginTop: 40, padding: '0',
              border: `1px solid ${T.line}`, borderRadius: 12, background: 'rgba(255,255,255,0.02)',
              position: 'sticky', top: 100, overflow: 'hidden',
            }}>
              {/* founder portrait — redacted by default, reveals on hover */}
              <div className="v1-portrait" style={{
                position: 'relative', width: '100%', aspectRatio: '1 / 1',
                borderBottom: `1px solid ${T.line}`,
                background: '#050506', cursor: 'pointer',
              }}>
                {/* real headshot (underlay) */}
                <img src="../../assets/founder-caleb-real.png" alt="Caleb Sloan"
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                {/* redacted overlay (fades out on hover) */}
                <img src="../../assets/founder-caleb.png" alt="" aria-hidden="true"
                  className="v1-portrait__redact"
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'grayscale(0.15)', transition: 'opacity 400ms ease' }} />
                {/* corner marks */}
                {['tl','tr','bl','br'].map((pos, i) => {
                  const p = {
                    tl: { top: 10, left: 10, borderTop: `1px solid ${T.saffron}`, borderLeft: `1px solid ${T.saffron}` },
                    tr: { top: 10, right: 10, borderTop: `1px solid ${T.saffron}`, borderRight: `1px solid ${T.saffron}` },
                    bl: { bottom: 10, left: 10, borderBottom: `1px solid ${T.saffron}`, borderLeft: `1px solid ${T.saffron}` },
                    br: { bottom: 10, right: 10, borderBottom: `1px solid ${T.saffron}`, borderRight: `1px solid ${T.saffron}` },
                  }[pos];
                  return <div key={i} aria-hidden style={{ position: 'absolute', width: 14, height: 14, ...p }} />;
                })}
                {/* classified stamp — swaps label on hover */}
                <div className="v1-portrait__stamp" style={{
                  position: 'absolute', top: 12, right: 16,
                  fontFamily: F.mono, fontSize: 9, fontWeight: 700,
                  color: T.saffron, letterSpacing: '0.22em',
                  padding: '4px 8px',
                  border: `1px solid ${T.saffronDim}`,
                  background: 'rgba(10,10,11,0.5)',
                  backdropFilter: 'blur(4px)',
                  transition: 'color 300ms ease, border-color 300ms ease',
                }}>
                  <span className="v1-portrait__stamp-redact">REDACTED</span>
                  <span className="v1-portrait__stamp-declass">DECLASSIFIED</span>
                </div>
                {/* hover hint */}
                <div className="v1-portrait__hint" style={{
                  position: 'absolute', bottom: 12, left: 16,
                  fontFamily: F.mono, fontSize: 9, color: T.ink3, letterSpacing: '0.22em',
                  transition: 'opacity 300ms ease',
                }}>▸ HOVER TO REVEAL</div>
              </div>
              <div style={{ padding: '18px 20px 20px' }}>
                <div style={{
                  fontFamily: F.mono, fontSize: 10, color: T.ink4, letterSpacing: '0.2em', marginBottom: 10,
                }}>— FOUNDER PROFILE</div>
                <div style={{
                  fontFamily: F.display, fontSize: 20, color: T.white, fontWeight: 500, letterSpacing: -0.2,
                }}>Caleb Sloan</div>
                <div style={{
                  fontFamily: F.mono, fontSize: 10.5, color: T.ink3, letterSpacing: '0.12em',
                  marginTop: 4, textTransform: 'uppercase',
                }}>Founder · ROAM Intelligence</div>
              </div>
            </div>
          </div>

          {/* right: cohesive founder's letter */}
          <div>
            <p className="v1-reveal" data-d="1" style={{
              fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.ink2,
              margin: 0, textWrap: 'pretty',
            }}>
              I wanted to pray for and support the global Church in a meaningful way, but I often realized I didn't actually know where believers were under pressure in real time — or how situations were unfolding beyond headlines.
            </p>
            <p className="v1-reveal" data-d="2" style={{
              fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.ink2,
              margin: '22px 0 0', textWrap: 'pretty',
            }}>
              Coming from a background in the intelligence community, I knew the tools and methods existed to bring clarity to complex, fast-moving environments. What stood out was that almost none of it was built specifically for the Body of Christ.
            </p>
            <p className="v1-reveal" data-d="3" style={{
              fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.ink2,
              margin: '22px 0 0', textWrap: 'pretty',
            }}>
              Operational intelligence has protected governments, corporations, and deployed teams for decades. That same discipline belongs to the Church — to those protecting congregations, sending missionaries into hard places, and praying for the persecuted.
            </p>
            <p className="v1-reveal" data-d="4" style={{
              fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.white,
              margin: '22px 0 0', fontWeight: 500, textWrap: 'pretty',
            }}>
              That gap is what led me to build ROAM Intelligence.
            </p>
            <p className="v1-reveal" data-d="5" style={{
              fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.ink2,
              margin: '22px 0 0', textWrap: 'pretty',
            }}>
              Our north star is simple: <span style={{ color: T.saffron, fontWeight: 500 }}>
                no Christian community should be taken by surprise.</span>{' '}
              Every adapter we build, every model we train, every dashboard tile we ship, gets judged against one test —{' '}
              <em style={{ fontStyle: 'italic', color: T.white }}>
                did this make it easier for a leader to know, decide, and act in time?
              </em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

// ══════════════ 06 · MISSIONS ══════════════
const V1Missions = () => {
  const missions = [
    { n: '01', title: 'NGO & Missions Directors',
      body: 'Know when a field staff region goes hot before your in-country team calls you. Brief boards and donors with sourced, verifiable intelligence — not headline summaries.',
      tag: 'OPS LEADS · SECURITY DIRECTORS · FIELD COORDINATORS' },
    { n: '02', title: 'Church Security Teams',
      body: 'Watch hostile actors and planned events near your congregation. Get alerted the moment a verified incident or pre-incident signal hits your area of operation.',
      tag: 'SECURITY TEAMS · PASTORS · RISK MANAGERS' },
    { n: '03', title: 'Sending Organizations',
      body: 'Vet country-level risk before you send. Travel advisories, live incident activity, and a 0–100 persecution score on every country — placement calls that hold up under scrutiny.',
      tag: 'MISSION BOARDS · TRAVEL SAFETY · COUNTRY DIRECTORS' },
  ];
  return (
    <section id="missions" style={{ padding: '120px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <SecHead
          pill="WHO IT'S FOR"
          title="Three missions."
          titleAccent="One command center."
          lede="ROAM meets three operational profiles where they already work — ops dashboards, security briefings, and pre-deployment vetting."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {missions.map((m, i) => (
            <article key={i} className="v1-card v1-reveal" data-d={i + 1} style={{
              padding: 28, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 300,
            }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12,
              }}>
                <span className="v1-signal-numeral" style={{
                  fontFamily: F.display, fontSize: 40, fontWeight: 300, color: T.ink5,
                  lineHeight: 1, letterSpacing: -1,
                }}>{m.n}</span>
                <span style={{
                  fontFamily: F.mono, fontSize: 9.5, color: T.saffron,
                  letterSpacing: '0.18em', fontWeight: 500,
                }}>/ FOR</span>
              </div>
              <h3 style={{
                fontFamily: F.display, fontSize: 22, fontWeight: 400,
                color: T.white, margin: 0, lineHeight: 1.25, letterSpacing: -0.3,
              }}>{m.title}</h3>
              <p style={{
                fontFamily: F.body, fontSize: 14, lineHeight: 1.6,
                color: T.ink3, margin: 0, textWrap: 'pretty', flex: 1,
              }}>{m.body}</p>
              <div style={{
                paddingTop: 16, marginTop: 'auto', borderTop: `1px solid ${T.line}`,
                fontFamily: F.mono, fontSize: 9.5, color: T.ink4,
                letterSpacing: '0.14em', lineHeight: 1.6,
              }}>{m.tag}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ══════════════ 08 · EZEKIEL ══════════════
const V1Ezekiel = () => {
  const PROMPT = 'Brief me on Nigeria over the last 30 days.';
  const BODY = "Nigeria saw 47 verified incidents in the last 30 days, concentrated in Plateau, Kaduna, and Borno states. Most severe: a coordinated village attack in Plateau on April 8 (28 fatalities, multiple sources). Risk score trended +3 this week. Boko Haram activity ticked up in Borno's Konduga LGA. Trend line suggests sustained pressure through Holy Week.";
  const SOURCES = ['Morning Star News', 'ACLED', 'Open Doors Field Report (April 12)', 'USCIRF advisory'];
  const [typed, setTyped] = React.useState('');
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) {
        io.disconnect();
        let i = 0;
        const tick = () => {
          if (i <= PROMPT.length) { setTyped(PROMPT.slice(0, i)); i++; setTimeout(tick, 28); }
        };
        tick();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section id="ezekiel" style={{ padding: '120px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <SecHead
          pill="MEET EZEKIEL"
          title="The watchman"
          titleAccent="on the wall."
          lede="Your on-call AI analyst. Reads every verified incident, every country score, every source feed — and answers the questions that matter to your mission. Cites sources. Never fabricates."
        />
        <div ref={ref} className="v1-card v1-reveal" data-d="1" style={{
          maxWidth: 880, margin: '0 auto', padding: '32px 36px',
        }}>
          {/* header */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24,
            paddingBottom: 18, borderBottom: `1px solid ${T.line}`,
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: T.saffron,
              boxShadow: `0 0 10px ${T.saffron}`, animation: 'v1-pulse 2s ease-in-out infinite',
            }} />
            <span style={{
              fontFamily: F.mono, fontSize: 11, color: T.ink, letterSpacing: '0.2em', fontWeight: 600,
            }}>EZEKIEL</span>
            <span style={{ flex: 1 }} />
            <span style={{ fontFamily: F.mono, fontSize: 10, color: T.ink4, letterSpacing: '0.14em' }}>
              v4.12 · CONFIDENCE 94%
            </span>
          </div>

          {/* user prompt */}
          <div style={{ marginBottom: 20 }}>
            <div style={{
              fontFamily: F.mono, fontSize: 9.5, color: T.ink4, letterSpacing: '0.18em', marginBottom: 8,
            }}>YOU</div>
            <div style={{
              fontFamily: F.mono, fontSize: 14, color: T.white, lineHeight: 1.5,
            }}>
              <span style={{ color: T.saffron }}>&gt;</span> {typed}
              <span style={{ animation: 'v1-caret 1s step-end infinite', color: T.saffron, marginLeft: 2 }}>▊</span>
            </div>
          </div>

          {/* ezekiel response */}
          <div>
            <div style={{
              fontFamily: F.mono, fontSize: 9.5, color: T.saffron, letterSpacing: '0.18em', marginBottom: 8, fontWeight: 600,
            }}>EZEKIEL</div>
            <p style={{
              fontFamily: F.body, fontSize: 15, lineHeight: 1.65, color: T.ink, margin: 0, textWrap: 'pretty',
            }}>{BODY}</p>

            <div style={{
              marginTop: 22, padding: '14px 16px',
              background: 'rgba(255,255,255,0.02)', border: `1px solid ${T.line}`, borderRadius: 8,
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 9.5, color: T.ink4, letterSpacing: '0.18em', marginBottom: 10,
              }}>— SOURCES · {SOURCES.length}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 12px' }}>
                {SOURCES.map((s, i) => (
                  <span key={i} style={{ fontFamily: F.mono, fontSize: 11.5, color: T.ink2, letterSpacing: '0.02em' }}>
                    <span style={{ color: T.saffron, marginRight: 5 }}>[{i + 1}]</span>{s}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ══════════════ 09 · PIPELINE ══════════════
const V1Pipeline = () => {
  const steps = [
    { n: '01', label: 'INGEST', body: '28+ sources pulled every few minutes: USCIRF, State Dept, Open Doors, ACLED, V-Dem, ACAPS, INFORM, GDACS, NASA, NOAA, USGS, plus Christian NGO feeds.' },
    { n: '02', label: 'FILTER', body: 'A first-pass classifier drops noise. Non-English content is translated in-line.' },
    { n: '03', label: 'DEDUPE', body: 'Same event in 5 sources becomes one incident card with all sources cited. Exact-match + semantic similarity.' },
    { n: '04', label: 'CLASSIFY', body: '29 standardized categories — Church Attack, Arrest, Mob Violence, Forced Conversion, and more.' },
    { n: '05', label: 'SCORE', body: '45% baseline persecution · 25% recent activity · 15% humanitarian risk · 15% travel advisories.' },
    { n: '06', label: 'NOTIFY', body: 'Email, Slack, Teams, or webhook — alerts route on verified Focus, asset, or geofence hits. In minutes.' },
    { n: '07', label: 'RECORD', body: 'Every incident, source, and score change stays on file. Audit any answer back to its raw source.' },
  ];
  return (
    <section id="pipeline" style={{ padding: '120px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <SecHead
          pill="THE PIPELINE"
          title="From raw signal"
          titleAccent="to verified alert."
          lede="Seven stages. Thousands of signals per day become hundreds of verified incidents — each sourced, scored, and ready to route."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12, position: 'relative',
        }}>
          {/* dashed connector */}
          <div aria-hidden style={{
            position: 'absolute', top: 52, left: '7%', right: '7%', height: 1,
            backgroundImage: `linear-gradient(90deg, ${T.lineHi} 50%, transparent 50%)`,
            backgroundSize: '8px 1px', backgroundRepeat: 'repeat-x',
            animation: 'v1-marquee 3s linear infinite',
          }} />
          {steps.map((s, i) => (
            <article key={i} className="v1-reveal" data-d={Math.min(i + 1, 6)} style={{
              padding: 18, background: T.panel, border: `1px solid ${T.line}`,
              borderRadius: 12, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 200,
              position: 'relative', zIndex: 1,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: T.bg, border: `1px solid ${T.saffronDim}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: F.mono, fontSize: 10, color: T.saffron, fontWeight: 600, letterSpacing: 0,
              }}>{s.n}</div>
              <div style={{
                fontFamily: F.mono, fontSize: 10, color: T.white,
                letterSpacing: '0.16em', fontWeight: 600,
              }}>{s.label}</div>
              <p style={{
                fontFamily: F.body, fontSize: 12, lineHeight: 1.55,
                color: T.ink3, margin: 0, textWrap: 'pretty',
              }}>{s.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ══════════════ 10 · TRUST & SOURCES ══════════════
const V1Trust = () => {
  const sources = [
    { label: 'GOVERNMENT & INTERGOV', body: 'Religious freedom commissions, State Department human rights reporting, UN and EU monitoring bodies.' },
    { label: 'CONFLICT & HUMANITARIAN', body: 'Event-level conflict trackers, governance and democracy indices, humanitarian needs and displacement feeds.' },
    { label: 'CHRISTIAN REPORTING', body: 'Persecution-beat newsrooms, regional ministry networks, denominational reporting, mission-field correspondents.' },
    { label: 'OPEN-SOURCE NEWS', body: 'Regional wire services, verified local reporting, and monitored social signals across 13+ languages.' },
    { label: 'GEOSPATIAL & CRISIS', body: 'Active fire detection, seismic activity, severe weather, disaster alerts, disease outbreak reporting.' },
    { label: 'FIELD & PARTNER NETS', body: 'Vetted in-country correspondents, ministry partners, and private feeds shared under source protection.' },
  ];
  const compliance = [
    'AES-256 encryption for sensitive customer data',
    'Multi-factor authentication (TOTP, FIDO2 hardware keys)',
    'SAML / OIDC single sign-on (Partner tier)',
    'SOC 2-aligned audit trails on every administrative action',
    'GDPR-compliant data export & account deletion',
    'PII discipline in all logs (no raw emails or handles)',
  ];
  return (
    <section id="trust" style={{ padding: '120px 32px', position: 'relative' }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <SecHead
          pill="THE SOURCES"
          title="The same feeds that brief governments."
          titleAccent="Plus the ones they miss."
          lede="ROAM ingests from the open-source streams that brief diplomatic posts, humanitarian responders, and newsrooms — alongside Christian-focused reporting most platforms ignore."
        />
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 56,
        }}>
          {sources.map((s, i) => (
            <article key={i} className="v1-card v1-reveal" data-d={Math.min(i + 1, 6)} style={{
              padding: 24, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 180,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: '50%', background: T.saffron,
                  boxShadow: `0 0 6px ${T.saffron}`,
                }} />
                <span style={{
                  fontFamily: F.mono, fontSize: 10, color: T.saffron,
                  letterSpacing: '0.16em', fontWeight: 600,
                }}>{s.label}</span>
              </div>
              <p style={{
                fontFamily: F.body, fontSize: 14, lineHeight: 1.55,
                color: T.ink2, margin: 0, textWrap: 'pretty',
              }}>{s.body}</p>
            </article>
          ))}
        </div>

        {/* compliance row */}
        <div className="v1-reveal" style={{
          paddingTop: 40, borderTop: `1px solid ${T.line}`,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {compliance.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={T.saffron}
                   strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
                   style={{ flexShrink: 0, marginTop: 4 }}>
                <polyline points="20 6 9 17 4 12" />
              </svg>
              <span style={{
                fontFamily: F.body, fontSize: 13.5, lineHeight: 1.55,
                color: T.ink2, textWrap: 'pretty',
              }}>{c}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ══════════════ 12 · WEEKLY FIELD BRIEF ══════════════
const V1Weekly = () => (
  <section id="weekly" style={{ padding: '120px 32px', position: 'relative' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <div className="v1-card v1-reveal" style={{
        padding: 48, display: 'grid', gridTemplateColumns: '1fr 300px', gap: 48, alignItems: 'center',
      }}>
        <div>
          <div style={{ marginBottom: 16 }}><span className="v1-pill">WEEKLY INTEL</span></div>
          <h3 style={{
            fontFamily: F.display, fontWeight: 400, fontSize: 36, lineHeight: 1.1,
            letterSpacing: -1, color: T.white, margin: 0, textWrap: 'balance',
          }}>The Weekly Field Brief.</h3>
          <p style={{
            fontFamily: F.body, fontSize: 17, lineHeight: 1.55,
            color: T.ink2, margin: '16px 0 0', maxWidth: 520, textWrap: 'pretty',
          }}>Monday-morning persecution intelligence — direct to your inbox. Free forever.</p>
          <form action={LINKS.brief} method="get" target="_blank" rel="noopener" style={{
            display: 'flex', gap: 8, marginTop: 24, maxWidth: 500,
          }}>
            <input
              type="email"
              name="email"
              placeholder="your.email@org.org"
              style={{
                flex: 1, minWidth: 0, height: 46,
                background: 'rgba(255,255,255,0.02)', border: `1px solid ${T.lineHi}`,
                borderRadius: 999, padding: '0 18px',
                fontFamily: F.body, fontSize: 14, color: T.ink,
                outline: 'none',
              }}
              onFocus={e => { e.target.style.borderColor = T.saffron; }}
              onBlur={e => { e.target.style.borderColor = T.lineHi; }}
            />
            <button className="v1-cta-pri" type="submit" style={{
              height: 46, padding: '0 22px', borderRadius: 999, cursor: 'pointer',
              fontSize: 13.5, whiteSpace: 'nowrap',
            }}>Subscribe →</button>
          </form>
          <div style={{
            fontFamily: F.body, fontSize: 12, color: T.ink4, marginTop: 14,
          }}>Read by ministry leaders, denominational staff, and prayer networks in 40+ countries. No spam.</div>
        </div>

        {/* brief preview */}
        <div aria-hidden style={{
          background: T.bg2, border: `1px solid ${T.line}`, borderRadius: 10,
          padding: 18, transform: 'rotate(1.5deg)',
        }}>
          <div style={{
            fontFamily: F.mono, fontSize: 9, color: T.ink4, letterSpacing: '0.22em',
            marginBottom: 10,
          }}>— ROAM · FIELD BRIEF</div>
          <div style={{
            fontFamily: F.display, fontWeight: 500, fontSize: 13.5, color: T.white,
            lineHeight: 1.3, marginBottom: 12, letterSpacing: -0.2,
          }}>Week of 14 Apr — Plateau surge, Kaduna pivot, Borno quiet.</div>
          {['47 verified incidents', '3 pre-incident signals', 'Risk score +3 Nigeria', '4 partner updates'].map((l, i) => (
            <div key={i} style={{
              fontFamily: F.mono, fontSize: 10, color: T.ink3, letterSpacing: '0.06em',
              lineHeight: 1.8, display: 'flex', gap: 6,
            }}>
              <span style={{ color: T.saffron }}>▸</span>{l}
            </div>
          ))}
          <div style={{
            marginTop: 12, paddingTop: 10, borderTop: `1px dashed ${T.line}`,
            fontFamily: F.mono, fontSize: 9, color: T.ink4, letterSpacing: '0.2em',
          }}>MONDAYS · 0700 GMT · FREE</div>
        </div>
      </div>
    </div>
  </section>
);

// ══════════════ 13 · FOUNDER MISSION ══════════════
const V1Founder = () => (
  <section id="founder" style={{ padding: '120px 32px', position: 'relative' }}>
    <div style={{ maxWidth: 880, margin: '0 auto' }}>
      <div className="v1-reveal"><span className="v1-pill">OUR MISSION</span></div>
      <h2 className="v1-reveal" data-d="1" style={{
        fontFamily: F.display, fontWeight: 400, fontSize: 44, lineHeight: 1.1,
        letterSpacing: -1.4, color: T.white, margin: '22px 0 0',
        maxWidth: 720, textWrap: 'balance',
      }}>Serious intelligence, built for the Church.</h2>

      <p className="v1-reveal" data-d="2" style={{
        fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.ink,
        margin: '32px 0 0', textWrap: 'pretty',
      }}>
        Operational intelligence has protected governments, corporations, and deployed teams for decades.
        ROAM brings that same discipline to the Church — for those protecting congregations, sending missionaries
        into hard places, and praying for the persecuted.
      </p>

      <p className="v1-reveal" data-d="3" style={{
        fontFamily: F.body, fontSize: 19, lineHeight: 1.6, color: T.ink2,
        margin: '18px 0 0', textWrap: 'pretty',
      }}>
        Our north star is simple: <span style={{ color: T.saffron, fontWeight: 500 }}>
          no Christian community should be taken by surprise.</span>{' '}
        Every adapter we build, every model we train, every dashboard tile we ship, gets judged against one test —{' '}
        <em style={{ fontStyle: 'italic', color: T.white }}>
          did this make it easier for a leader to know, decide, and act in time?
        </em>
      </p>

      <div className="v1-reveal" data-d="4" style={{
        marginTop: 48, paddingTop: 28, borderTop: `1px solid ${T.line}`,
        display: 'flex', justifyContent: 'flex-end',
      }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14 }}>
          <div aria-hidden style={{
            width: 48, height: 48, borderRadius: '50%',
            background: `linear-gradient(135deg, ${T.panelHi} 0%, ${T.panel} 100%)`,
            border: `1px solid ${T.line}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: F.mono, fontSize: 11, color: T.saffron, letterSpacing: '0.1em',
          }}>CS</div>
          <div>
            <div style={{ fontFamily: F.display, fontWeight: 500, fontSize: 15, color: T.white }}>
              — Caleb Sloan
            </div>
            <div style={{
              fontFamily: F.mono, fontSize: 11, color: T.ink3,
              letterSpacing: '0.08em', marginTop: 4, textTransform: 'uppercase',
            }}>Founder · USMC Veteran · Intelligence Analyst</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ══════════════ 14 · FINAL CTA ══════════════
const V1FinalCta = () => (
  <section id="final-cta" style={{ padding: '140px 32px', position: 'relative', overflow: 'hidden' }}>
    {/* ambient grid behind the cta */}
    <div className="v1-ambient-grid" aria-hidden style={{
      position: 'absolute', inset: 0, opacity: 0.5,
      backgroundImage: `
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
      `,
      backgroundSize: '48px 48px',
      maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
      WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
    }} />
    <div style={{
      maxWidth: 880, margin: '0 auto', textAlign: 'center', position: 'relative',
    }}>
      <div className="v1-reveal" style={{
        fontFamily: F.mono, fontSize: 10.5, color: T.saffron,
        letterSpacing: '0.28em', marginBottom: 28,
      }}>DEPLOY</div>
      <h2 className="v1-reveal v1-h-sweep" data-d="1" style={{
        fontFamily: F.display, fontWeight: 400, fontSize: 64, lineHeight: 1.05,
        letterSpacing: -2, margin: 0, textWrap: 'balance',
      }}>
        The world is watching the world.<br/>
        <span style={{ color: T.saffron, fontStyle: 'italic', WebkitTextFillColor: T.saffron }}>
          We're watching the Church.
        </span>
      </h2>
      <p className="v1-reveal" data-d="2" style={{
        fontFamily: F.body, fontSize: 18, lineHeight: 1.55,
        color: T.ink2, margin: '28px auto 0', maxWidth: 600, textWrap: 'pretty',
      }}>
        Join the NGOs, missions agencies, and church security teams using ROAM to protect their people and steward their mission.
      </p>
      <div className="v1-reveal" data-d="3" style={{
        marginTop: 40, display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
      }}>
        <a href={LINKS.app} target="_blank" rel="noopener" className="v1-cta-pri" style={{
          fontSize: 14.5, borderRadius: 999, padding: '14px 28px', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none',
        }}>
          Start Your Free Trial <span style={{ fontSize: 16 }}>→</span>
        </a>
        <a href={LINKS.brief} target="_blank" rel="noopener" className="v1-cta-ghost" style={{
          fontSize: 14.5, borderRadius: 999, padding: '13px 26px', cursor: 'pointer',
          textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
        }}>Read the Weekly Brief</a>
      </div>
      <div className="v1-reveal" data-d="4" style={{
        marginTop: 24, fontFamily: F.body, fontSize: 12.5,
        color: T.ink3, letterSpacing: '0.02em',
      }}>
        Free tier · No credit card · 14-day trial on paid plans · {' '}
        <span style={{ fontFamily: F.mono }}>app.roamintelligence.com</span>
      </div>
    </div>
  </section>
);

// ══════════════ 15 · FOOTER ══════════════
const V1Footer = () => {
  const PLATFORM = ['Map', 'Watch', 'Risk', 'Report', 'Ezekiel', 'API', 'Webhooks'];
  const RESOURCES = ['Weekly Field Brief', 'Documentation', 'Country Profiles', 'Status', 'Changelog'];
  const COMPANY = ['About', 'Mission', 'Contact', 'Partners', 'Press'];
  const LEGAL = ['Privacy', 'Terms', 'Security', 'Responsible Disclosure'];
  const Col = ({ title, links }) => (
    <div>
      <h3 style={{
        fontFamily: F.mono, fontWeight: 600, fontSize: 10, color: T.saffron,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        margin: '0 0 18px',
      }}>{title}</h3>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(l => (
          <li key={l}>
            <a href="#" style={{
              fontFamily: F.body, fontSize: 13.5, color: T.ink2, textDecoration: 'none',
              transition: 'color .18s',
            }}
               onMouseEnter={e => e.currentTarget.style.color = T.white}
               onMouseLeave={e => e.currentTarget.style.color = T.ink2}
            >{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
  return (
    <footer style={{
      padding: '80px 32px 40px', borderTop: `1px solid ${T.line}`, background: T.bg2,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 'var(--v1-max-width, 1200px)', margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 48,
        }}>
          <div>
            <img src="../../assets/roam-logo-white.png" alt="ROAM" style={{ height: 22 }} />
            <div style={{
              fontFamily: F.mono, fontSize: 11, color: T.ink3,
              letterSpacing: '0.04em', marginTop: 18, maxWidth: 280, lineHeight: 1.5,
            }}>Radiant Operations And Missional Intelligence</div>
            <div style={{
              fontFamily: F.body, fontSize: 12, color: T.ink4, marginTop: 18,
            }}>© 2026 ROAM Intelligence LLC · Nashville, TN</div>
          </div>
          <Col title="PLATFORM" links={PLATFORM} />
          <Col title="RESOURCES" links={RESOURCES} />
          <Col title="COMPANY" links={COMPANY} />
        </div>
        <div style={{
          paddingTop: 24, borderTop: `1px solid ${T.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 12,
        }}>
          <div style={{
            display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
            fontFamily: F.body, fontSize: 12, color: T.ink3,
          }}>
            {LEGAL.map((l, i) => (
              <React.Fragment key={l}>
                {i > 0 && <span aria-hidden style={{ opacity: 0.5 }}>·</span>}
                <a href="#" style={{ color: T.ink3, textDecoration: 'none' }}
                   onMouseEnter={e => e.currentTarget.style.color = T.saffron}
                   onMouseLeave={e => e.currentTarget.style.color = T.ink3}
                >{l}</a>
              </React.Fragment>
            ))}
          </div>
          <div style={{
            fontFamily: F.mono, fontSize: 11, color: T.saffron, letterSpacing: '0.14em',
          }}>MADE BY INTEL PROS · FOR THE CHURCH</div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {
  V1Gap, V1Origin, V1Missions, V1Ezekiel, V1Pipeline, V1Trust,
  V1Weekly, V1Founder, V1FinalCta, V1Footer,
});