/* global React, BIBLE_BOOKS, BIBLE_TEXT, VOTD_POOL, LANGUAGES */
const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

/* =========================================================================
   LANDING
   ========================================================================= */
function Landing({ navigate, translation }) {
  // deterministic "verse of the day" — pick a reference; text comes from the
  // active translation so the verse is in whatever language the visitor uses.
  const votd = useMemoS(() => {
    const day = Math.floor(Date.now() / 86400000);
    return VOTD_POOL[day % VOTD_POOL.length];
  }, []);

  // Path helper: route reads through the active translation if loaded,
  // else legacy /read/<book>/<ch> (loader will set the default before render).
  const activeSlug = translation && translation.slug;
  const readPath = (bid, ch) =>
    activeSlug ? `/read/${activeSlug}/${bid}/${ch}` : `/read/${bid}/${ch}`;

  // Real stats pulled from the catalog + apps_data — no fabricated numbers.
  const stats = useMemoS(() => {
    const cat = window.TRANSLATION_CATALOG;
    const apps = window.APPS || [];
    const langs = window.APPS_BY_LANGUAGE || [];
    return {
      translationCount: cat ? cat.translations.length : apps.length,
      languageCount:    langs.length,
    };
  }, [translation && translation.slug]);

  // VOTD text: look up in the active translation; show ref + translation
  // name + year. Falls back gracefully while loading.
  const votdText = useMemoS(() => {
    if (!translation) return '';
    const chap = translation.text[`${votd.book}.${votd.ch}`];
    if (!chap) return '';
    return chap[votd.v - 1] || '';
  }, [translation && translation.slug, votd]);
  const votdMeta = translation && translation.meta;

  return (
    <main>
      <div className="container">

        {/* HERO */}
        <section className="hero">
          <h1>The Word,<br/><em>offline.</em><br/>Forever.</h1>
          <p className="subdeck">
            The entire Bible, in your language, on your device. No account.
            No network. No tracking. No ads. Download it once; keep it for life.
            Every translation we make is free and in the public domain.
          </p>

          <div className="hero-meta">
            <div className="cell">
              <div className="label">Translations</div>
              <div className="k">{stats.translationCount}</div>
              <div className="v label">Public-domain · Live</div>
            </div>
            <div className="cell">
              <div className="label">Languages</div>
              <div className="k">{stats.languageCount}</div>
              <div className="v label">More in translation</div>
            </div>
            <div className="cell">
              <div className="label">Tracking</div>
              <div className="k">None</div>
              <div className="v label">No analytics, no ads</div>
            </div>
            <div className="cell">
              <div className="label">Cost</div>
              <div className="k">$0</div>
              <div className="v label">Now · Forever</div>
            </div>
          </div>
        </section>

        {/* VERSE OF THE DAY */}
        <section className="sec" style={{paddingBottom: 40}}>
          <div className="sec-head">
            <div className="num">§ 01 — Verse of the day</div>
            <h2>A word for <em>today</em>, rendered from local storage.</h2>
          </div>
          <div className="votd">
            <div className="ref">
              {votd.ref}
              {votdMeta && (
                <><br/>{votdMeta.name}{votdMeta.year ? ' · ' + votdMeta.year : ''}</>
              )}
            </div>
            <div className="body serif">
              {votdText || <span style={{opacity:0.5}}>Loading…</span>}
            </div>
            <div className="actions">
              <button onClick={() => navigate(readPath(votd.book, votd.ch))}>Read Chapter →</button>
            </div>
          </div>
        </section>

        {/* READ */}
        <section className="sec">
          <div className="sec-head">
            <div className="num">§ 02 — Read</div>
            <h2>Open the reader.<br/><em>No wait. No noise.</em></h2>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'start'}}>
            <div>
              <p style={{fontFamily:'"Newsreader", serif', fontSize:22, lineHeight:1.5, maxWidth:'32ch'}}>
                A single column of scripture. Nothing above it, nothing beside it.
                Keyboard navigation. Verse numbers that get out of the way.
                The way the book wants to be read.
              </p>
              <div style={{marginTop:28, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button
                  onClick={() => navigate(readPath('gen', 1))}
                  style={{border:'1px solid var(--rule)', padding:'14px 20px', fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase'}}>
                  Genesis 1 →
                </button>
                <button
                  onClick={() => navigate(readPath('psa', 23))}
                  style={{border:'1px solid var(--rule-soft)', padding:'14px 20px', fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase'}}>
                  Psalm 23 →
                </button>
                <button
                  onClick={() => navigate(readPath('jhn', 1))}
                  style={{border:'1px solid var(--rule-soft)', padding:'14px 20px', fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase'}}>
                  John 1 →
                </button>
              </div>
            </div>
            <div style={{border:'1px solid var(--rule-soft)', padding:'28px 30px', background:'var(--paper)'}}>
              <div className="label" style={{marginBottom:12}}>Preview · Psalm 23</div>
              <p className="serif" style={{fontSize:18, lineHeight:1.55, color:'var(--ink-2)'}}>
                <span style={{color:'var(--ink-4)', fontFamily:'"JetBrains Mono", monospace', fontSize:10, marginRight:8, verticalAlign:'super'}}>1</span>
                The Lord is my shepherd; I shall not want.
                <span style={{color:'var(--ink-4)', fontFamily:'"JetBrains Mono", monospace', fontSize:10, margin:'0 8px 0 14px', verticalAlign:'super'}}>2</span>
                He maketh me to lie down in green pastures: he leadeth me beside the still waters.
              </p>
            </div>
          </div>
        </section>

        {/* DOWNLOADS */}
        <section className="sec" id="downloads-section">
          <div className="sec-head">
            <div className="num">§ 03 — Downloads</div>
            <h2>Take it with you.<br/><em>Use it forever.</em></h2>
          </div>
          <div className="downloads">
            <div className="dl-card">
              <div className="type">PDF · English · KJV</div>
              <div className="size">4.2<span className="unit">mb</span></div>
              <div className="desc">The whole Bible, typeset for print or screen. 1,189 chapters. No DRM.</div>
              <a className="cta" href="#">Download <span className="arrow">↓</span></a>
            </div>
            <div className="dl-card">
              <div className="type">PDF · English · WEB</div>
              <div className="size">3.8<span className="unit">mb</span></div>
              <div className="desc">World English Bible. Modern public-domain translation, same format.</div>
              <a className="cta" href="#">Download <span className="arrow">↓</span></a>
            </div>
            <div className="dl-card">
              <div className="type">Android · Google Play</div>
              <div className="size">{(window.APPS || []).length}<span className="unit">apps</span></div>
              <div className="desc">A dedicated app per translation, free, public-domain text, no account.</div>
              <a className="cta" href="/apps" onClick={(e) => { e.preventDefault(); navigate('/apps'); }}>Browse apps <span className="arrow">→</span></a>
            </div>
            <div className="dl-card">
              <div className="type">iOS · TestFlight</div>
              <div className="size">—</div>
              <div className="desc">Native iOS app. Same principles. Planned for 2026.</div>
              <a className="cta soon" href="#">Planned · 2026</a>
            </div>
          </div>

          <div className="pwa" style={{marginTop: 40}}>
            <div>
              <h4 className="serif">Install as a web app</h4>
              <p>
                Add offline.bible to your home screen. The reader is designed to work without
                a network connection once installed — translations you've opened are cached on your device.
              </p>
            </div>
            <button>Install · Add to Home Screen</button>
          </div>
        </section>

        {/* ETHOS */}
        <section className="sec">
          <div className="sec-head">
            <div className="num">§ 04 — Principles</div>
            <h2>Every decision, one way.<br/><em>Toward the reader.</em></h2>
          </div>
          <div className="ethos">
            <div className="item">
              <div className="n">01 / Offline</div>
              <h3>Works without a network.</h3>
              <p>After your first visit, the reader runs locally — no requests, no waiting. Translations you've opened are cached on your device. Reload on the train, in the air, in a power cut. The text is still there.</p>
            </div>
            <div className="item">
              <div className="n">02 / Private</div>
              <h3>Nothing leaves your device.</h3>
              <p>No analytics, no cookies, no accounts. What you read, what you bookmark, where you stopped — all local.</p>
            </div>
            <div className="item">
              <div className="n">03 / Free</div>
              <h3>Public domain, in perpetuity.</h3>
              <p>Every translation we host is public-domain or freely licensed. Take it, print it, share it, translate it.</p>
            </div>
            <div className="item">
              <div className="n">04 / Many formats</div>
              <h3>Wherever you read.</h3>
              <p>Read in any browser. Install the dedicated Android app for your translation. PDF and EPUB downloads coming as each translation is finalized.</p>
            </div>
            <div className="item">
              <div className="n">05 / Universal</div>
              <h3>Every language, eventually.</h3>
              <p>Currently 12 languages live; more in active translation. AI does the first pass; native speakers review every book. Slow, steady, honest.</p>
            </div>
            <div className="item">
              <div className="n">06 / Honest</div>
              <h3>No upsell. No dark patterns.</h3>
              <p>No "premium tier." No feature gates. No notifications begging for attention. It's a book.</p>
            </div>
          </div>
        </section>

        {/* LANGUAGES PREVIEW */}
        <section className="sec">
          <div className="sec-head">
            <div className="num">§ 05 — Languages</div>
            <h2>{stats.languageCount} live now.<br/><em>Every language</em> we can reach, in time.</h2>
          </div>
          <p style={{maxWidth:'56ch', fontSize:14, lineHeight:1.65, color:'var(--ink-2)', marginBottom:28, marginTop:-8}}>
            We host {stats.translationCount} public-domain translations across {stats.languageCount} languages today,
            and are working on our own three-step translations — AI does the first pass, native speakers review every book.
            The goal is faithfulness, not speed.
          </p>
          <div className="langs-strip">
            {(window.APPS_BY_LANGUAGE || []).map(g => (
              <div key={g.code} className="lang-cell">
                <span className="native">{g.native}</span>
                <span className="status now">{g.apps.length} ·  now</span>
              </div>
            ))}
          </div>
          <div style={{marginTop:24, display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
            <div className="label">{stats.languageCount} languages · {stats.translationCount} translations live · more in active translation</div>
            <button
              onClick={() => navigate('/apps')}
              style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', borderBottom:'1px solid var(--ink)'}}>
              All apps →
            </button>
          </div>
        </section>

        {/* SUPPORT — honest, modest, non-intruding */}
        <section className="sec" style={{borderBottom:0, paddingBottom:40}}>
          <div className="sec-head">
            <div className="num">§ 06 — Support</div>
            <h2>What we actually need.<br/><em>In plain language.</em></h2>
          </div>
          <div className="support-grid">
            <div className="sup-item">
              <div className="sup-k">01</div>
              <div className="sup-t serif">Compute</div>
              <div className="sup-d">Every language we translate runs through a language model. Tokens cost money. Each full Bible pass runs a few hundred dollars at current rates.</div>
            </div>
            <div className="sup-item">
              <div className="sup-k">02</div>
              <div className="sup-t serif">Servers</div>
              <div className="sup-d">A small CDN bill to deliver PDFs and APKs worldwide. Storage for every translation, in every format, mirrored.</div>
            </div>
            <div className="sup-item">
              <div className="sup-k">03</div>
              <div className="sup-t serif">Time</div>
              <div className="sup-d">Review, typesetting, bug fixes, responding to readers. The slow, quiet work that nobody sees.</div>
            </div>
            <div className="sup-item">
              <div className="sup-k">04</div>
              <div className="sup-t serif">Bread on the table</div>
              <div className="sup-d">The people building this are volunteers with families to feed. If the project feeds you, and you can spare a little, it helps feed them back.</div>
            </div>
          </div>
          <div className="support-actions">
            <a href="https://www.patreon.com/BreakEveryYoke" className="btn-ghost">Patreon · monthly</a>
            <a href="https://www.buymeacoffee.com/JohnTibell" className="btn-ghost">Buy us a coffee · once</a>
            <a href="#" className="btn-ghost">Sponsor a language · one-time</a>
          </div>
          <p className="support-note">
            No tier rewards. No "supporter" badges. No newsletter. Nothing changes on the site
            whether you give or not — it's the same for everyone, because that's the point.
          </p>
        </section>

      </div>
    </main>
  );
}

window.Landing = Landing;