// v4-dawn.jsx — Deep ink + cream + amber. Editorial, dramatic, "light breaking."
// Bold type scale. Asymmetric layouts. Hopeful but grounded.

(function () {
  if (!document.getElementById('v4-dawn-styles')) {
    const s = document.createElement('style');
    s.id = 'v4-dawn-styles';
    s.textContent = `
      .v4 {
        --ink: #161523;
        --ink-mid: #2D2A40;
        --paper: #F1ECDF;
        --paper-warm: #E8DFC8;
        --amber: #E8A23A;
        --amber-soft: #F5C779;
        --ink-soft-on-paper: rgba(22, 21, 35, 0.6);
        --paper-soft-on-ink: rgba(241, 236, 223, 0.65);
        font-family: 'Manrope', system-ui, sans-serif;
        color: var(--paper);
        background: var(--ink);
        line-height: 1.6;
      }
      .v4 .serif { font-family: 'Crimson Pro', 'Cormorant Garamond', Georgia, serif; }

      .v4 .nav { display: flex; justify-content: space-between; align-items: center; padding: 26px 56px; position: relative; z-index: 5; }
      .v4 .logo { font-family: 'Crimson Pro', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
      .v4 .logo .star { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; display: inline-block; box-shadow: 0 0 14px var(--amber); }
      .v4 .nav-links { display: flex; gap: 32px; align-items: center; }
      .v4 .nav-links a { text-decoration: none; color: var(--paper-soft-on-ink); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; transition: color .2s; }
      .v4 .nav-links a:hover { color: var(--amber); }

      .v4 .hero { position: relative; padding: 80px 56px 120px; overflow: hidden; }
      .v4 .hero::before {
        content: ''; position: absolute; inset: 0;
        background:
          radial-gradient(ellipse 70% 50% at 100% 0%, rgba(232, 162, 58, 0.22) 0%, transparent 60%),
          radial-gradient(ellipse 60% 40% at 0% 100%, rgba(232, 162, 58, 0.10) 0%, transparent 60%);
        pointer-events: none;
      }
      .v4 .hero-inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.45fr 1fr; grid-template-areas: 'text dove' 'meta meta'; column-gap: 48px; row-gap: 64px; align-items: center; }
      .v4 .hero-text { grid-area: text; }
      .v4 .hero-dove { grid-area: dove; display: flex; align-items: center; justify-content: center; }
      .v4 .hero-dove img { width: 100%; max-width: 460px; height: auto; transform: scaleX(-1); filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45)) drop-shadow(0 0 24px rgba(232, 162, 58, 0.18)); }
      .v4 .hero .kicker { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--amber); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 12px; }
      .v4 .hero .kicker::before { content: ''; width: 32px; height: 1px; background: var(--amber); }
      .v4 .hero h1 { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 104px; line-height: 0.95; letter-spacing: -0.025em; margin-bottom: 0; }
      .v4 .hero h1 em { font-style: italic; color: var(--amber); font-weight: 400; }
      .v4 .hero h1 .small { display: block; font-size: 64px; color: var(--paper-soft-on-ink); }
      .v4 .hero .meta { grid-area: meta; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-top: 48px; border-top: 1px solid rgba(241, 236, 223, 0.12); }
      .v4 .hero .meta .label { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
      .v4 .hero .meta p { font-size: 16px; color: var(--paper-soft-on-ink); line-height: 1.55; }
      .v4 .hero .meta p strong { color: var(--paper); font-weight: 500; }

      .v4 .widget { background: var(--paper); color: var(--ink); padding: 96px 56px; position: relative; }
      .v4 .widget::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, var(--ink), transparent); pointer-events: none; }
      .v4 .widget-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }
      .v4 .widget-lede { position: sticky; top: 56px; }
      .v4 .widget-lede .num { font-family: 'Crimson Pro', serif; font-size: 88px; font-weight: 400; color: var(--amber); line-height: 1; letter-spacing: -0.04em; margin-bottom: 8px; }
      .v4 .widget-lede .label { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft-on-paper); margin-bottom: 36px; }
      .v4 .widget-lede h2 { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px; }
      .v4 .widget-lede h2 em { font-style: italic; }
      .v4 .widget-lede p { font-size: 16px; color: var(--ink-soft-on-paper); line-height: 1.6; max-width: 340px; }
      .v4 .widget-lede .hint-arrow { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 18px; color: var(--ink-soft-on-paper); margin: -10px 0 20px; display: flex; align-items: center; gap: 6px; }
      .v4 .widget-lede .hint-arrow .arrow-glyph { color: #B07A14; font-style: normal; font-weight: 500; }

      .v4 .widget-card { background: var(--paper-warm); border-radius: 2px; padding: 40px; border: 1px solid rgba(22, 21, 35, 0.08); }
      .v4 .heart-input {
        width: 100%; min-height: 140px; padding: 0; resize: none;
        font-family: 'Crimson Pro', serif; font-size: 26px; line-height: 1.4;
        color: var(--ink); background: transparent;
        border: none; outline: none;
      }
      .v4 .heart-input::placeholder { color: var(--ink-soft-on-paper); font-style: italic; }
      .v4 .submit-row { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(22, 21, 35, 0.12); }
      .v4 .hint { font-size: 12px; color: var(--ink-soft-on-paper); letter-spacing: 0.04em; }
      .v4 .submit {
        background: var(--ink); color: var(--paper); border: none; cursor: pointer;
        padding: 14px 24px; font-family: inherit; font-size: 12px; font-weight: 600;
        letter-spacing: 0.2em; text-transform: uppercase;
        display: inline-flex; align-items: center; gap: 12px;
        transition: all .2s;
      }
      .v4 .submit:hover { background: var(--amber); color: var(--ink); }
      .v4 .submit:disabled { opacity: 0.4; cursor: not-allowed; background: var(--ink); color: var(--paper); }
      .v4 .submit .arrow { width: 18px; height: 1px; background: currentColor; position: relative; }
      .v4 .submit .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

      .v4 .thinking { margin-top: 28px; padding: 24px; background: var(--paper); border-left: 2px solid var(--amber); font-family: 'Crimson Pro', serif; font-style: italic; font-size: 19px; color: var(--ink-mid); }
      .v4 .response { margin-top: 28px; }
      .v4 .response-quote { font-family: 'Crimson Pro', serif; font-size: 26px; font-style: italic; line-height: 1.4; color: var(--ink); padding: 28px 0 32px; border-bottom: 1px solid rgba(22, 21, 35, 0.12); }
      .v4 .verses-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(22, 21, 35, 0.12); }
      .v4 .verses-bar .label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft-on-paper); }
      .v4 .trans-tabs { display: flex; gap: 4px; }
      .v4 .trans-tab { background: transparent; border: 1px solid rgba(22, 21, 35, 0.15); padding: 6px 14px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; color: var(--ink-soft-on-paper); }
      .v4 .trans-tab.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
      .v4 .verse { padding: 24px 0; border-bottom: 1px solid rgba(22, 21, 35, 0.12); display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: baseline; }
      .v4 .verse:last-child { border-bottom: none; padding-bottom: 0; }
      .v4 .verse-ref { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 17px; color: var(--amber); font-weight: 500; }
      .v4 .verse-text { font-family: 'Crimson Pro', serif; font-size: 22px; line-height: 1.4; color: var(--ink); }

      .v4 .about { background: var(--ink); padding: 120px 56px; }
      .v4 .about-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: end; }
      .v4 .about-portrait { aspect-ratio: 3/4; background: url('assets/roberta.png') center top / cover no-repeat var(--ink-mid); position: relative; overflow: hidden; }
      .v4 .about-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(22, 21, 35, 0.35) 100%); pointer-events: none; }
      .v4 .about .num { font-family: 'Crimson Pro', serif; font-size: 80px; font-weight: 400; color: var(--amber); line-height: 1; margin-bottom: 4px; }
      .v4 .about .label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); margin-bottom: 36px; }
      .v4 .about h2 { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 44px; line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 32px; }
      .v4 .about h2 em { font-style: italic; color: var(--amber-soft); }
      .v4 .about p { font-size: 17px; color: var(--paper-soft-on-ink); line-height: 1.6; margin-bottom: 18px; max-width: 560px; }
      .v4 .about .signature { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 22px; color: var(--paper); margin-top: 32px; }

      .v4 .pages { background: var(--paper); color: var(--ink); padding: 100px 56px; }
      .v4 .pages-inner { max-width: 1180px; margin: 0 auto; }
      .v4 .pages-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid rgba(22, 21, 35, 0.15); }
      .v4 .pages-head h2 { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
      .v4 .pages-head h2 em { font-style: italic; color: #B07A14; }
      .v4 .pages-head .label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft-on-paper); }
      .v4 .pages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
      .v4 .page-card { padding: 32px 26px; background: var(--paper-warm); border: 1px solid rgba(22, 21, 35, 0.10); cursor: pointer; transition: all .25s; display: flex; flex-direction: column; }
      .v4 .page-card:hover { background: #EFE4CA; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(22, 21, 35, 0.08); }
      .v4 .page-card .num { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 15px; color: #B07A14; margin-bottom: 14px; }
      .v4 .page-card .title { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; }
      .v4 .page-card .desc { font-size: 13px; line-height: 1.55; color: var(--ink-soft-on-paper); }
      .v4 .page-card .arrow { margin-top: 24px; font-size: 18px; color: var(--ink-soft-on-paper); align-self: flex-start; transition: transform .25s; }
      .v4 .page-card:hover .arrow { transform: translateX(4px); color: #B07A14; }

      .v4 .teaser { background: var(--ink); padding: 100px 56px; }
      .v4 .teaser-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
      .v4 .teaser .badge { display: inline-block; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 6px 12px; margin-bottom: 28px; }
      .v4 .teaser h3 { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 84px; line-height: 0.95; letter-spacing: -0.025em; margin-bottom: 24px; }
      .v4 .teaser h3 em { font-style: italic; color: var(--amber); }
      .v4 .teaser p { font-size: 17px; color: var(--paper-soft-on-ink); line-height: 1.6; margin-bottom: 32px; max-width: 480px; }
      .v4 .teaser .cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; }

      .v4 .teaser-art { aspect-ratio: 1/1; background: radial-gradient(circle at 30% 30%, var(--amber), #C77A1A 40%, var(--ink-mid) 80%); border-radius: 50%; position: relative; }
      .v4 .teaser-art::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; box-shadow: inset 0 0 100px rgba(0,0,0,0.3); }
      .v4 .teaser-art .wave { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; }
      .v4 .teaser-art .wave span { width: 4px; background: var(--paper); border-radius: 2px; opacity: 0.85; animation: v4wave 1.4s ease-in-out infinite; }
      @keyframes v4wave { 0%, 100% { height: 16px; } 50% { height: 60px; } }
      .v4 .teaser-art .wave span:nth-child(2) { animation-delay: 0.1s; }
      .v4 .teaser-art .wave span:nth-child(3) { animation-delay: 0.2s; }
      .v4 .teaser-art .wave span:nth-child(4) { animation-delay: 0.3s; }
      .v4 .teaser-art .wave span:nth-child(5) { animation-delay: 0.4s; }
      .v4 .teaser-art .wave span:nth-child(6) { animation-delay: 0.3s; }
      .v4 .teaser-art .wave span:nth-child(7) { animation-delay: 0.2s; }

      .v4 .foot { background: var(--ink); padding: 56px 56px 32px; border-top: 1px solid rgba(241, 236, 223, 0.1); }
      .v4 .foot-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: end; }
      .v4 .foot .logo { font-size: 18px; }
      .v4 .foot .copyright { font-size: 12px; color: var(--paper-soft-on-ink); letter-spacing: 0.08em; }
    `;
    document.head.appendChild(s);
  }
})();

function V4Dawn({ useReal = true, deepColors }) {
  const [input, setInput] = React.useState('');
  const [translation, setTranslation] = React.useState('NIV');
  const { state, ask } = useScripture(useReal);

  const styleOverride = deepColors
    ? { '--ink': deepColors[0], '--ink-mid': deepColors[1] }
    : {};

  return (
    <div className="v4" style={styleOverride}>
      <nav className="nav">
        <div></div>
        <div className="nav-links">
          <a href="#pages">Healing</a>
          <a href="#pages">Decrees</a>
          <a href="#pages">Prayer</a>
          <a href="#pages">Team</a>
        </div>
      </nav>

      <section className="hero">
        <div className="hero-inner">
          <div className="hero-text">
            <div className="kicker">Volume One · Heaven's Call to Intimacy</div>
            <h1>
              Heaven's Call<br />
              to <em>Intimacy.</em>
            </h1>
          </div>
          <div className="hero-dove">
            <img src="assets/dove.png" alt="White dove carrying a red ribbon" />
          </div>
          <div className="meta">
            <div>
              <div className="label">Who it's for</div>
              <p>Anyone who's hungry for <strong>real conversation</strong> with Abba, Jesus, and Holy Spirit — beyond the words you've been handed.</p>
            </div>
            <div>
              <div className="label">How it works</div>
              <p>Share what's stirring. Scripture meets you. <strong>The Spirit fills in the rest.</strong></p>
            </div>
            <div>
              <div className="label">Why now</div>
              <p>Because intimacy with God isn't a gated practice. <strong>It's everyone's birthright.</strong></p>
            </div>
          </div>
        </div>
      </section>

      <section className="widget" id="scripture">
        <div className="widget-inner">
          <div className="widget-lede">
            <div className="num">01</div>
            <div className="label">The Encounter</div>
            <h2>What's <em>on your heart</em>?</h2>
            <div className="hint-arrow">(Type in the box to right <span className="arrow-glyph">→</span>)</div>
            <p>Anything. A worry, a hope, a half-formed question. Speak it and let Scripture answer back.</p>
          </div>
          <div className="widget-card">
            <textarea
              className="heart-input"
              placeholder="I'm tired of pretending I'm fine. I want to hear from God again…"
              value={input}
              onChange={e => setInput(e.target.value)}
            />
            <div className="submit-row">
              <span className="hint">Held in confidence.</span>
              <button className="submit" disabled={true} onClick={() => {}}>
                Send <span className="arrow"></span>
              </button>
            </div>

            {state.phase === 'thinking' && (
              <div className="thinking">"…a moment of holy quiet…"</div>
            )}
            {state.phase === 'error' && (
              <div className="thinking" style={{ borderColor: '#A04A3A', color: '#A04A3A' }}>{state.error}</div>
            )}

            {state.phase === 'ready' && state.data && (
              <div className="response">
                <div className="response-quote">"{state.data.response}"</div>
                <div className="verses-bar">
                  <span className="label">Three verses for you</span>
                  <div className="trans-tabs">
                    {['NKJV', 'NIV', 'TPT'].map(t => (
                      <button key={t} className={`trans-tab ${translation === t ? 'active' : ''}`} onClick={() => setTranslation(t)}>{t}</button>
                    ))}
                  </div>
                </div>
                {state.data.verses.map((v, i) => (
                  <div className="verse" key={i}>
                    <div className="verse-ref">{v.reference}</div>
                    <div className="verse-text">{v.translations[translation] || v.translations.NIV}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="about" id="about">
        <div className="about-inner">
          <div className="about-portrait"></div>
          <div>
            <div className="num">02</div>
            <div className="label">The Heart Behind It</div>
            <h2>Rooted in a <em>Growing Intimacy</em> with Abba Father, Jesus, Holy Spirit for <em>Ultimate Healing</em> — Body, Mind, Spirit, and Soul.</h2>
            <p>Heaven's Call grew out of Sozo and inner-healing ministry — through the slow, holy work of God mending what had been broken.</p>
            <p>Now this site continues that work, in quieter rooms. The same Father. The same Son. The same Spirit. The same invitation.</p>
            <p className="signature">— Roberta Dixon</p>
          </div>
        </div>
      </section>

      <section className="pages" id="pages">
        <div className="pages-inner">
          <div className="pages-head">
            <h2>Where to <em>go next</em>.</h2>
            <span className="label">Four doors</span>
          </div>
          <div className="pages-grid">
            {[
              { num: 'i',   title: 'Inner Healing Discussion', desc: 'Schedule a session. Walk through prayer with someone trained to listen.' },
              { num: 'ii',  title: 'Decrees',            desc: 'Short reflections on hearing God\'s voice and dwelling in His presence.' },
              { num: 'iii', title: 'Prayer Requests',      desc: 'Send what you\'re carrying. It will not be carried alone.' },
              { num: 'iv',  title: 'Join The Team',      desc: 'Support the ministry. Keep this work in the world.' },
            ].map((p, i) => (
              <div className="page-card" key={i}>
                <span className="num">{p.num}</span>
                <span className="title">{p.title}</span>
                <span className="desc">{p.desc}</span>
                <span className="arrow">→</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="teaser" id="devotions">
        <div className="teaser-inner">
          <div>
            <span className="badge">Coming Soon</span>
            <h3>The <em>Devotions</em> app.</h3>
            <p>An audio journal. You speak. It listens. It returns a personal prayer threaded through scripture — every day, in your own voice.</p>
            <div className="cta">Join the Waitlist <span style={{ fontSize: 16 }}>→</span></div>
          </div>
          <div className="teaser-art">
            <div className="wave">
              <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            </div>
          </div>
        </div>
      </section>

      <footer className="foot" id="connect">
        <div className="foot-inner">
          <div className="copyright">© 2025 · Heaven's Call to Intimacy</div>
        </div>
      </footer>
    </div>
  );
}

window.V4Dawn = V4Dawn;