// Prototype welcome gate — shown first, explains this is a prototype for feedback

const FEEDBACK_FORM_URL = "https://forms.gle/ttNdZbQVUAcwBVF8A";

const Welcome = ({ tweaks, navigate }) => {
  const { Wordmark, Btn } = window;

  return (
    <div style={{ background: 'var(--bg)', minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      {/* Slim header */}
      <header style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '20px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Wordmark variant={tweaks.wordmark} />
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)' }}>
            Prototype · Preview
          </span>
        </div>
      </header>

      <main style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '64px 24px' }} data-comment-anchor="89cd2a1c70-main-20-7">
        <div style={{ width: '100%', maxWidth: 880 }}>

          {/* Eyebrow badge */}
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 36 }}>
            <span className="mono" style={{
              fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-2)',
              border: '1px solid var(--line-2)', padding: '8px 16px', borderRadius: 2, background: 'var(--paper)'
            }}>
              An early look — not yet live
            </span>
          </div>

          <h1 className="serif" style={{ fontSize: 60, lineHeight: 1.04, fontWeight: 500, margin: 0, textAlign: 'center', letterSpacing: '-0.01em', textWrap: 'balance' }}>
            Help us build the<br /><em>Help Meet Network.</em>
          </h1>

          <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 600, margin: '32px auto 0', textAlign: 'center', textWrap: 'pretty' }}>What you're about to see is just an early prototype — a provisional sketch of a marriage-minded network for confessional Christian singles, each known and commended by one of their own pastors or elders. Nothing here is final. We're gathering honest feedback and gauging interest before we build the real thing, and your perspective would be a great gift to us.

          </p>

          {/* Two CTAs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, marginTop: 56, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
            <button onClick={() => navigate('landing')} style={{
              textAlign: 'left', background: 'var(--accent)', color: 'var(--paper)',
              border: '1px solid var(--accent)', padding: '32px 32px 28px', cursor: 'pointer',
              fontFamily: 'inherit', display: 'flex', flexDirection: 'column', minHeight: 200,
              transition: 'transform 120ms'
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 14 }}>Step 1</div>
              <div className="serif" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.2, marginBottom: 12 }}>Review the prototype</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.8)', flex: 1 }}>Walk through the concept as a visitor, a member, a pastor, or an elder. Everything can be explored and we want feedback on it all.

              </div>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.2)',
                fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>Enter the prototype</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic' }}>→</span>
              </div>
            </button>

            <a href={FEEDBACK_FORM_URL} target="_blank" rel="noopener noreferrer" style={{
              textAlign: 'left', background: 'var(--paper)', color: 'var(--ink)',
              border: '1px solid var(--line-2)', padding: '32px 32px 28px', cursor: 'pointer',
              fontFamily: 'inherit', display: 'flex', flexDirection: 'column', minHeight: 200,
              textDecoration: 'none', transition: 'transform 120ms, border-color 120ms'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.borderColor = 'var(--ink)';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.borderColor = 'var(--line-2)';}}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 14 }}>Step 2</div>
              <div className="serif" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.2, marginBottom: 12 }}>Share your feedback</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)', flex: 1 }}>Tell us what resonates, what's missing, and whether you'd use something like this. A few minutes in a short form.

              </div>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)',
                fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>Open the form</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic' }}>↗</span>
              </div>
            </a>
          </div>

          <p style={{ fontSize: 13, color: 'var(--ink-3)', textAlign: 'center', marginTop: 40, fontStyle: 'italic' }}>
            A ministry of the <a href="https://www.magnalia.foundation/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-2)', textDecoration: 'underline', textDecorationColor: 'var(--line-2)' }}>Magnalia Foundation</a>. The names, photos, and profiles inside are illustrative only.
          </p>
        </div>
      </main>

      {/* Footer strip */}
      <footer style={{ borderTop: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '24px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em', flexWrap: 'wrap', gap: 12 }}>
          <span><a href="https://www.magnalia.foundation/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>© 2026 Magnalia Foundation, Inc. · 501(c)(3)</a></span>
          <span>Soli Deo Gloria</span>
        </div>
      </footer>
    </div>);

};

window.Welcome = Welcome;
window.HMN_FEEDBACK_URL = FEEDBACK_FORM_URL;