// Landing page

const Landing = ({ tweaks, navigate }) => {
  const { Wordmark, Btn, SectionLabel, Badge, Portrait } = window;
  const tone = tweaks.tone;
  const heroLayout = tweaks.heroLayout;

  const heroCopy = {
    warm: {
      eyebrow: "Genesis 2:18 — “It is not good that the man should be alone”",
      title: <>A network for Christians<br /><em>seeking marriage</em>, not hook-ups.</>,
      sub: "For Christian singles who love their local church and want to marry someone who loves theirs. Every member is known and commended by their own pastor or elder, and close friends can add a personal reference. No subscriptions, no algorithms, no ads — just Christians hoping to marry with the gentle help of their church communities."
    },
    formal: {
      eyebrow: "A ministry of the Magnalia Foundation",
      title: <>Introductions for<br />marriage-minded<br /><em>confessional</em> singles.</>,
      sub: "The Help Meet Network connects singles from elder-governed, confessional Christian churches who are pursuing marriage and family. A pastor or elder confirms each member is in good standing; character references are added by those who know them best."
    }
  }[tone];

  const stat = (n, l) =>
  <div>
      <div className="serif" style={{ fontSize: 56, lineHeight: 1, fontWeight: 500 }}>{n}</div>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', marginTop: 10 }}>{l}</div>
    </div>;


  return (
    <div>
      {/* NAV */}
      <Nav tweaks={tweaks} navigate={navigate} active="landing" />

      {/* HERO */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        {heroLayout === 'editorial' &&
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 56px 96px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 72, alignItems: 'start' }}>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 28 }}>
                {heroCopy.eyebrow}
              </div>
              <h1 className="serif" style={{ fontSize: 76, lineHeight: 1.04, margin: 0, fontWeight: 500, letterSpacing: '-0.01em', textWrap: 'balance' }}>
                {heroCopy.title}
              </h1>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 540, marginTop: 32, textWrap: 'pretty' }} data-comment-anchor="d53deb3513-p-44-15">
                {heroCopy.sub}
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
                <Btn kind="primary" onClick={() => navigate('apply')}>Request to join</Btn>
              </div>
              <div style={{ marginTop: 48, display: 'flex', gap: 48 }}>
                {stat("147", "Confirmed members")}
                {stat("38", "Partner churches")}
                {stat("9", "Marriages — and counting")}
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ aspectRatio: '4/5', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
                <PlaceholderImage label="EDITORIAL · COUPLE WALKING" />
              </div>
              <div style={{
              position: 'absolute', bottom: -20, left: -20, background: 'var(--paper)',
              padding: '20px 24px', maxWidth: 280, border: '1px solid var(--line)',
              fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.4
            }}>
                “He who finds a wife finds a good thing and obtains favor from the LORD.”
                <div style={{ fontFamily: 'var(--mono)', fontStyle: 'normal', fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-3)', marginTop: 12, textTransform: 'uppercase' }}>Proverbs 18:22</div>
              </div>
            </div>
          </div>
        }

        {heroLayout === 'centered' &&
        <div style={{ maxWidth: 900, margin: '0 auto', padding: '120px 56px 100px', textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 32 }}>
              {heroCopy.eyebrow}
            </div>
            <h1 className="serif" style={{ fontSize: 88, lineHeight: 1.02, margin: 0, fontWeight: 500, letterSpacing: '-0.015em', textWrap: 'balance' }}>
              {heroCopy.title}
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 620, margin: '36px auto 0', textWrap: 'pretty' }}>
              {heroCopy.sub}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 44, justifyContent: 'center' }}>
              <Btn kind="primary" onClick={() => navigate('apply')}>Request to join</Btn>
            </div>
            <div style={{ marginTop: 80, display: 'flex', gap: 64, justifyContent: 'center', borderTop: '1px solid var(--line)', paddingTop: 48 }}>
              {stat("147", "Confirmed members")}
              {stat("38", "Partner churches")}
              {stat("9", "Marriages")}
            </div>
          </div>
        }

        {heroLayout === 'split' &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 640 }}>
            <div style={{ padding: '88px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 24 }}>
                {heroCopy.eyebrow}
              </div>
              <h1 className="serif" style={{ fontSize: 72, lineHeight: 1.04, margin: 0, fontWeight: 500, letterSpacing: '-0.01em', textWrap: 'balance' }}>
                {heroCopy.title}
              </h1>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 480, marginTop: 28, textWrap: 'pretty' }}>
                {heroCopy.sub}
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
                <Btn kind="primary" onClick={() => navigate('apply')}>Request to join</Btn>
              </div>
            </div>
            <div style={{ background: 'var(--bg-2)', borderLeft: '1px solid var(--line)', position: 'relative' }}>
              <PlaceholderImage label="HERO · WIDE PORTRAIT" />
            </div>
          </div>
        }
      </section>

      {/* KEY DIFFERENCES */}
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '72px 56px' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 36 }}>
            What sets us apart from everything else on the market
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid rgba(255,255,255,0.18)' }}>
            {[
            { n: "01", t: <>Every member is <em style={{ color: 'var(--taupe)', fontStyle: 'italic' }}>confirmed in good standing</em> by their own pastor or elder.</>, d: "No one joins on their own say-so. Before a profile ever goes live, a pastor or elder at the member's church confirms — in writing — that they are a member in good standing. That single safeguard is the heart of the network." },
            { n: "02", t: <>It is <em style={{ color: 'var(--taupe)', fontStyle: 'italic' }}>completely free</em> to use — now and always.</>, d: "No membership fee, no subscription, no paywalled features, no ads. The Help Meet Network is a ministry of the Magnalia Foundation, a 501(c)(3), sustained entirely by donations. Gifts are welcome, but never required." }].
            map((p, i) =>
            <div key={p.n} style={{ padding: '40px 44px 8px 0', paddingLeft: i === 1 ? 44 : 0, borderLeft: i === 1 ? '1px solid rgba(255,255,255,0.18)' : 'none' }}>
                <div className="mono" style={{ fontSize: 13, letterSpacing: '0.16em', color: 'var(--taupe)', marginBottom: 20 }}>{p.n}</div>
                <h3 className="serif" style={{ fontSize: 34, fontWeight: 500, margin: '0 0 18px', lineHeight: 1.15, textWrap: 'balance' }}>{p.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: 'rgba(255,255,255,0.72)', margin: 0, maxWidth: 520, textWrap: 'pretty' }}>{p.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* THREE PILLARS */}
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--paper)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 56px' }}>
          <SectionLabel num="01">What makes this different</SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }}>
            {[
            { n: "i.", t: "Commended, not verified", d: "No selfie checks or LinkedIn imports. A pastor or elder commends each member in writing — confirming they are in good standing and that they know them to be mature and godly — and friends who know them personally can add character references. We onboard the church first; the church commends the member." },
            { n: "ii.", t: "Marriage is the point", d: "Every profile names what they are looking for: a spouse, with the intent to marry in the next few years and to be open to children. If that is not your aim today, this is not the right tool." },
            { n: "iii.", t: "Free, by design", d: "The Help Meet Network is a ministry of the Magnalia Foundation, a 501(c)(3). Membership is and will always be free. The site is funded by donations from those it has served." }].
            map((p) =>
            <div key={p.n} style={{ padding: '40px 32px', borderRight: '1px solid var(--line)' }}>
                <div className="serif" style={{ fontSize: 32, fontStyle: 'italic', color: 'var(--taupe)', marginBottom: 16 }}>{p.n}</div>
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: '0 0 14px', lineHeight: 1.2 }}>{p.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>{p.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 56px' }}>
          <SectionLabel num="02">How it works</SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
            <div>
              <h2 className="serif" style={{ fontSize: 44, lineHeight: 1.1, fontWeight: 500, margin: 0, textWrap: 'balance' }}>
                The path from <em>request</em> to <em>introduction</em>.
              </h2>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 24 }}>
                Five steps, deliberately slow. We would rather you wait a week than sign up someone whose elders haven't met them.
              </p>
            </div>
            <div>
              {[
              { n: "01", t: "A church is onboarded", d: "A pastor, elder, or member submits a brief application. We schedule a video call with the primary pastor or elder to walk through the mission and answer questions before approving the church." },
              { n: "02", t: "A member requests to join", d: "Single members of approved churches request membership. They name the pastor or elder who will commend them — chosen from their church's leadership." },
              { n: "03", t: "A pastor commends the member", d: "We send the named pastor or elder a short form. They confirm the member is in good standing and commend them as mature and godly, ready to pursue marriage. No commendation, no profile." },
              { n: "04", t: "The profile is built", d: "Members write their own profile — testimony, vocation, presbytery, family vision. Photos are optional but encouraged. Every profile names the leader who confirmed membership, and may list character references from people who know them well." },
              { n: "05", t: "Introductions begin", d: "Browse, search, or receive a weekly introduction. When mutual interest is expressed, a private channel opens with the option to loop in either party's elder." }].
              map((s, i) =>
              <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 32, padding: '28px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                  <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--taupe)', paddingTop: 4 }}>{s.n}</div>
                  <div>
                    <h4 className="serif" style={{ fontSize: 24, fontWeight: 500, margin: '0 0 8px' }}>{s.t}</h4>
                    <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0, textWrap: 'pretty' }}>{s.d}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* MEMBERS GLIMPSE — removed per request */}

      {/* FOR ELDERS */}
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96 }}>
          <div>
            <SectionLabel num="04">For pastors & elders</SectionLabel>
            <h2 className="serif" style={{ fontSize: 44, lineHeight: 1.1, fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              Help your singles <em>without</em> playing matchmaker.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', marginTop: 28, textWrap: 'pretty' }}>
              You shepherd a flock that includes godly singles longing for marriage — and you cannot personally introduce them to every other confessional Christian single in the country. The Help Meet Network is a tool for the eldership, not a replacement for it.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', textWrap: 'pretty' }}>
              You commend each member once, in writing. Character references come from those who know the member best — and you're welcome to be one. When interest is mutual, we offer to loop you back in.
            </p>
            <Btn kind="primary" onClick={() => navigate('apply')} style={{ marginTop: 28 }}>Onboard your church →</Btn>
          </div>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 40 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 20 }}>Sample commendation — excerpt</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.5, fontStyle: 'italic', color: 'var(--ink-2)' }}>
              <div style={{ marginBottom: 18 }}>
                I, <span style={{ borderBottom: '1px solid var(--line-2)', padding: '0 24px' }}>Rev. Daniel Carrick</span>, an ordained teaching elder at <span style={{ borderBottom: '1px solid var(--line-2)', padding: '0 24px' }}>Second Pres., Greenville</span>, do commend:
              </div>
              <ul style={{ paddingLeft: 20, fontStyle: 'normal', fontSize: 15, fontFamily: 'var(--sans)', lineHeight: 1.6, color: 'var(--ink-2)' }}>
                <li style={{ marginBottom: 8 }}>...that <span style={{ borderBottom: '1px solid var(--line-2)', padding: '0 14px' }}>Hannah K.</span> is a communing member in good standing of our church;</li>
                <li style={{ marginBottom: 8 }}>...that there is no discipline pending against her;</li>
                <li style={{ marginBottom: 8 }}>...that I know her personally, and commend her as mature and godly, ready to pursue marriage.</li>
                <li><em>(Optional)</em> ...that I would gladly officiate her marriage.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* DONATION / NON-PROFIT */}
      <section style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '88px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 20 }}>
              A ministry of <a href="https://www.magnalia.foundation" target="_blank" style={{ color: 'rgba(255,255,255,0.9)', textDecoration: 'underline' }}>Magnalia Foundation</a>
            </div>
            <h2 className="serif" style={{ fontSize: 48, lineHeight: 1.08, fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              The network is free. The mission is not.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.75)', marginTop: 0, textWrap: 'pretty' }}>
              The Help Meet Network charges no membership fees and runs no advertising. We are sustained entirely by gifts from members, churches, and friends of the ministry. If the Lord uses this network in your life — or in the life of someone you love — would you consider giving?
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              <Btn kind="primary" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }}>Donate one-time</Btn>
              <Btn kind="secondary" style={{ color: 'var(--paper)', borderColor: 'rgba(255,255,255,0.4)' }}>Give monthly</Btn>
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 18, letterSpacing: '0.04em' }}>
              501(c)(3) · EIN on request · Bitcoin accepted
            </div>
          </div>
        </div>
      </section>

      <Footer tweaks={tweaks} navigate={navigate} />
    </div>);

};

const HERO_PHOTOS = {
  "EDITORIAL · COUPLE WALKING": "photo-1519741497674-611481863552", // couple, soft warm light
  "HERO · WIDE PORTRAIT": "photo-1502635385003-ee1e6a1a742d" // editorial, neutral
};

const PlaceholderImage = ({ label = "PORTRAIT" }) => {
  const photoId = HERO_PHOTOS[label] || "photo-1519741497674-611481863552";
  const url = `https://images.unsplash.com/${photoId}?w=1200&auto=format&q=80`;
  return (
    <img src={url} alt={label} style={{
      width: '100%', height: '100%', objectFit: 'cover', display: 'block',
      filter: 'saturate(0.85) contrast(0.97)'
    }} loading="lazy" />);

};

const _PlaceholderImageOld = ({ label = "PORTRAIT" }) =>
<svg viewBox="0 0 600 750" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
    <defs>
      <pattern id="hero-stripes" patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(45)">
        <rect width="14" height="14" fill="#D2C8B2" />
        <rect width="7" height="14" fill="#BBAE8E" />
      </pattern>
    </defs>
    <rect width="600" height="750" fill="url(#hero-stripes)" />
    <rect x="20" y="20" width="560" height="710" fill="none" stroke="rgba(0,0,0,0.1)" />
    <text x="300" y="380" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="14" fill="rgba(0,0,0,0.45)" letterSpacing="0.16em">{label}</text>
    <text x="300" y="406" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill="rgba(0,0,0,0.35)" letterSpacing="0.16em">PLACEHOLDER · DROP IMAGE HERE</text>
  </svg>;


const Nav = ({ tweaks, navigate, active }) => {
  const { Wordmark, Btn } = window;
  const link = (id, label, badge) =>
  <button onClick={() => navigate(id)} style={{
    background: 'none', border: 'none', cursor: 'pointer',
    fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500,
    color: active === id ? 'var(--ink)' : 'var(--ink-3)',
    padding: '6px 0', position: 'relative',
    borderBottom: active === id ? '1px solid var(--ink)' : '1px solid transparent',
    display: 'flex', alignItems: 'center', gap: 6
  }}>
      {label}
      {badge > 0 &&
    <span style={{
      background: 'var(--ink)',
      color: 'var(--paper)',
      fontSize: 10,
      fontFamily: 'var(--mono)',
      padding: '2px 6px',
      borderRadius: 10,
      minWidth: 18,
      textAlign: 'center',
      fontWeight: 600
    }}>{badge}</span>
    }
    </button>;

  return (
    <header style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg)', position: 'sticky', top: 0, zIndex: 10 }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '20px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button onClick={() => navigate('landing')} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
          <Wordmark variant={tweaks.wordmark} />
        </button>
        <nav className="hmn-nav-links" style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {(() => {
            const signOut = () => {if (window.__setRole) window.__setRole('guest');navigate('landing');};
            const role = tweaks.role || 'guest';
            if (role === 'member') return <>
              {link('member-home', 'Home')}
              {link('member-browse', 'Directory')}
              {link('member-inbox', 'Inbox', 3)}
              {link('member-matches', 'Interested')}
              <span style={{ width: 1, height: 22, background: 'var(--line-2)' }}></span>
              {link('member-profile-edit', 'Hannah K.')}
              <Btn kind="ghost" size="sm" onClick={signOut}>Sign out</Btn>
            </>;
            if (role === 'elder') return <>
              {link('elder-home', 'Dashboard')}
              {link('elder-vouch-inbox', 'Commendations', 2)}
              {link('elder-members', 'My members')}
              {link('elder-reports', 'Reports')}
              <span style={{ width: 1, height: 22, background: 'var(--line-2)' }}></span>
              <span style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>Rev. Carrick</span>
              <Btn kind="ghost" size="sm" onClick={signOut}>Sign out</Btn>
            </>;
            if (role === 'admin') return <>
              {link('admin-home', 'Overview')}
              {link('admin-churches', 'Churches')}
              {link('admin-moderation', 'Moderation')}
              <span style={{ width: 1, height: 22, background: 'var(--line-2)' }}></span>
              <span style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>Magnalia · admin</span>
              <Btn kind="ghost" size="sm" onClick={signOut}>Sign out</Btn>
            </>;
            return <>
              {link('landing', 'About')}
              <span style={{ width: 1, height: 22, background: 'var(--line-2)' }}></span>
              <Btn kind="ghost" size="sm" onClick={() => navigate('signin')}>Sign in</Btn>
              <Btn kind="primary" size="sm" onClick={() => navigate('apply')}>Request to join</Btn>
            </>;
          })()}
        </nav>
        <div className="hmn-nav-mobile">
          {(tweaks.role || 'guest') === 'guest' ?
          <Btn kind="primary" size="sm" onClick={() => navigate('apply')}>Join</Btn> :
          <Btn kind="ghost" size="sm" onClick={() => {if (window.__setRole) window.__setRole('guest');navigate('landing');}}>Sign out</Btn>}
        </div>
      </div>
    </header>);

};

const Footer = ({ tweaks, navigate }) => {
  const col = (title, items) =>
  <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 18 }}>{title}</div>
      {items.map(([label, action]) =>
    <button key={label} onClick={action} style={{
      display: 'block', background: 'none', border: 'none', padding: 0, cursor: action ? 'pointer' : 'default',
      fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--ink-2)', textAlign: 'left', marginBottom: 8, fontWeight: 500
    }}>{label}</button>
    )}
    </div>;

  return (
    <footer style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '64px 56px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 56, marginBottom: 56 }}>
          <div>
            <Wordmark variant={tweaks.wordmark} />
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', maxWidth: 360, marginTop: 16 }}>
              A ministry of the Magnalia Foundation. Built for confessional Christian churches. Free for members. Sustained by donations.
            </p>
          </div>
          {col("Apply", [
          ["Request to join", () => navigate('apply')],
          ["Sign in", () => navigate('signin')]]
          )}
          {col("Churches", [
          ["Onboard your church", () => navigate('apply')],
          ["Sign in (elders)", () => navigate('signin')],
          ["Read our doctrinal basis", () => {}]]
          )}
          {col("About", [
          ["Magnalia Foundation", () => {}],
          ["Donate", () => {}],
          ["Contact us", () => {}]]
          )}
        </div>
        <div style={{ borderTop: '1px solid var(--line)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
          <div>© 2026 Magnalia Foundation, Inc. · 501(c)(3)</div>
          <div>Soli Deo Gloria</div>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { Landing, Nav, Footer, PlaceholderImage });