{% extends "base.html" %}

{% block title %}Interlinear Bible Study - KJV Bible{% endblock %}

{% block description %}Study the KJV Bible word-by-word in Hebrew and Greek with transliteration, Strong's numbers, parsing, and definitions.{% endblock %}

{% block content %}
<h1>Interlinear Bible Study</h1>
<p class="subtitle">Explore Scripture word-by-word in the original languages</p>

<div>
    <h2>What is Interlinear Study?</h2>
    <p>Interlinear Bible study allows you to examine Scripture in its original Hebrew (Old Testament) and Greek (New Testament) languages, word-by-word. Each word shows:</p>
    <ul>
        <li><strong>Original Text</strong> — The Hebrew or Greek word as written in ancient manuscripts</li>
        <li><strong>Transliteration</strong> — How the word is pronounced in English letters</li>
        <li><strong>Strong's Number</strong> — A reference number linking to detailed lexical information</li>
        <li><strong>English Translation</strong> — How the word was translated in the KJV</li>
        <li><strong>Parsing</strong> — Grammatical information (verb tense, noun case, etc.)</li>
        <li><strong>Definition</strong> — The word's meaning and usage</li>
    </ul>
</div>

<div>
    <h2>How to Use</h2>
    <p>Simply navigate to any verse page on this site. If interlinear data is available for that verse, you'll see a <strong>"Word-by-Word Analysis"</strong> section that you can expand to explore each word in detail.</p>
    <p>Click on any Strong's number to view comprehensive lexical information at BibleHub.</p>
</div>

<div>
    <h2>Example: Genesis 1:1 (Hebrew)</h2>
    <div class="interlinear-example" style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0;">
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">בְּרֵאשִׁית</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">In the beginning</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H7225</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">בָּרָא</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">created</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H1254</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">אֱלֹהִים</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">God</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H430</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">אֵת</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">[untranslated]</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H853</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">הַשָּׁמַיִם</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">the heavens</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H8064</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">וְאֵת</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">and</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H853</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Hebrew', 'Ezra SIL', serif; direction: rtl;">הָאָרֶץ</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">the earth</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">H776</span>
        </div>
    </div>
    <p style="font-size: 0.9rem;"><a href="/book/Genesis/chapter/1/verse/1#interlinear">View full analysis →</a></p>
</div>

<div>
    <h2>Example: John 1:1 (Greek)</h2>
    <div class="interlinear-example" style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0;">
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Greek', 'Gentium Plus', serif;">Ἐν</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">In</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">G1722</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Greek', 'Gentium Plus', serif;">ἀρχῇ</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">the beginning</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">G746</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Greek', 'Gentium Plus', serif;">ἦν</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">was</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">G1510</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Greek', 'Gentium Plus', serif;">ὁ</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">the</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">G3588</span>
        </div>
        <div style="text-align: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px;">
            <span style="display: block; font-size: 2.2rem; font-family: 'SBL Greek', 'Gentium Plus', serif;">λόγος</span>
            <span style="display: block; font-size: 0.85rem; color: #4a7c59; font-weight: 600;">Word</span>
            <span style="display: block; font-size: 0.7rem; color: var(--text-tertiary);">G3056</span>
        </div>
    </div>
    <p style="font-size: 0.9rem;"><a href="/book/John/chapter/1/verse/1#interlinear">View full analysis →</a></p>
</div>

<div>
    <h2>Featured Verses</h2>
    <p>Explore these well-known passages with word-by-word analysis:</p>
    <ul>
        {% for verse in featured_verses %}
        <li>
            <a href="{{ verse.url }}"><strong>{{ verse.reference }}</strong></a> — {{ verse.note }}
        </li>
        {% endfor %}
    </ul>
</div>

<div>
    <h2>Why Study Interlinearly?</h2>
    <ul>
        <li><strong>Deeper Understanding</strong> — Discover nuances lost in translation</li>
        <li><strong>Word Studies</strong> — Trace how specific Greek or Hebrew words are used throughout Scripture</li>
        <li><strong>Context</strong> — Understand the grammatical structure of passages</li>
        <li><strong>Original Meaning</strong> — Get closer to what the original authors wrote</li>
    </ul>
</div>

<nav>
    <p><a href="/">← Home</a></p>
</nav>

<script>
// Keyboard navigation for links
var navItems = Array.from(document.querySelectorAll('a[href], p, li'));
var selectedIndex = -1;

function selectItem(index) {
    if (selectedIndex >= 0 && selectedIndex < navItems.length) {
        navItems[selectedIndex].classList.remove('selected');
    }
    selectedIndex = Math.max(0, Math.min(index, navItems.length - 1));
    navItems[selectedIndex].classList.add('selected');
    navItems[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
}

document.addEventListener('keydown', function(e) {
    // Don't handle if user is typing in an input
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

    if (e.key === 'ArrowLeft') {
        e.preventDefault();
        history.back();
    } else if (e.key === 'ArrowDown' || e.key === 'j') {
        e.preventDefault();
        selectItem(selectedIndex < 0 ? 0 : selectedIndex + 1);
    } else if (e.key === 'ArrowUp' || e.key === 'k') {
        e.preventDefault();
        selectItem(selectedIndex - 1);
    } else if (e.key === 'Enter' && selectedIndex >= 0) {
        e.preventDefault();
        var item = navItems[selectedIndex];
        if (item.href) {
            window.location.href = item.href;
        } else if (item.querySelector('a')) {
            window.location.href = item.querySelector('a').href;
        }
    } else if (e.key === 'Escape') {
        if (selectedIndex >= 0) {
            navItems[selectedIndex].classList.remove('selected');
            selectedIndex = -1;
        }
    }
});
</script>
<style>
.selected {
    outline: 2px solid #4a7c59 !important;
    outline-offset: 2px;
    background: rgba(74, 124, 89, 0.05) !important;
}
[data-theme="dark"] .selected {
    outline-color: #6b9b7a !important;
    background: rgba(107, 155, 122, 0.1) !important;
}
</style>
{% endblock %}