// Hero mock panes — one per tool. Each is a self-contained pane component.

const TOOL_LIST = [
  { id: 'pron',    icon: 'mic',        name: 'Pronunciation Coach',  url: 'pronunciation' },
  { id: 'convo',   icon: 'chat',       name: 'Conversation Sim',     url: 'conversation' },
  { id: 'level',   icon: 'target',     name: 'Level Checker',        url: 'level' },
  { id: 'gram',    icon: 'pen',        name: 'Grammar & Spelling',   url: 'grammar' },
  { id: 'dict',    icon: 'book',       name: 'Dictionary',           url: 'dictionary' },
  { id: 'reader',  icon: 'newspaper',  name: 'Reader',               url: 'reader' },
];

window.TOOL_LIST = TOOL_LIST;

// Shared header for all panes
function PaneHeader({ kicker, title, badge }) {
  return (
    <div className="flex items-center justify-between mb-6">
      <div>
        <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginBottom: 6 }}>{kicker}</div>
        <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>{title}</h3>
      </div>
      {badge}
    </div>
  );
}

// ---------- Pane 1: Pronunciation Coach ----------
function PaneProunciation() {
  // Deterministic waveform: rises and falls smoothly
  const bars = Array.from({ length: 56 }, (_, i) => {
    const x = i / 55;
    return 8 + Math.sin(x * Math.PI) * 14 + Math.sin(x * Math.PI * 4) * 3;
  });
  return (
    <>
      <PaneHeader
        kicker="Pronunciation Coach"
        title="Lesson 14 · Vowel length"
        badge={<span className="pill"><span className="live"></span> Live · Gemini audio</span>}
      />

      <div style={{ background: 'var(--paper-2)', borderRadius: 14, padding: 22 }}>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.3, letterSpacing: '-0.01em' }}>
          Aš noriu išsi
          <span style={{ color: 'var(--red)', borderBottom: '2px wavy var(--red)', paddingBottom: 2 }}>nu</span>
          omoti butą Vilniuje.
        </p>
        <div className="mt-4" style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>
          /aːʃ ˈnoːrʲʊ ɪʃˈsʲɪnuomotʲɪ ˈbutaː vʲɪlʲˈnʲuɪɛ/
        </div>
      </div>

      <div className="mt-4" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ padding: 18, background: 'var(--green-soft)', borderRadius: 12 }}>
          <div className="flex items-center gap-2 mb-2">
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--green)' }}></span>
            <span style={{ fontSize: 13, color: 'var(--green-deep)', fontWeight: 600 }}>Got right</span>
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>Stress on nó-riu. Soft "ł" before front vowels. Word boundaries clean.</div>
        </div>
        <div style={{ padding: 18, background: 'var(--red-soft)', borderRadius: 12 }}>
          <div className="flex items-center gap-2 mb-2">
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--red)' }}></span>
            <span style={{ fontSize: 13, color: 'var(--red)', fontWeight: 600 }}>Try again</span>
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>Vowel "u" in iš<strong>nu</strong>omoti needs to be longer. Sounds short — like "nuh" not "nuː".</div>
        </div>
      </div>

      <div className="mt-4" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: 'var(--ink)', borderRadius: 12, color: 'var(--paper)' }}>
        <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--green)', color: '#fff', display: 'grid', placeItems: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l14 9-14 9V3z"/></svg>
        </button>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 3, height: 28 }}>
          {bars.map((h, i) => {
            const played = i < 22;
            return <span key={i} style={{ width: 3, height: h, borderRadius: 2, background: played ? 'var(--yellow)' : 'rgba(247,243,234,0.25)' }}></span>;
          })}
        </div>
        <span style={{ fontSize: 12, opacity: 0.7, fontFamily: 'var(--mono)' }}>0:14 / 0:32</span>
      </div>
    </>
  );
}

// ---------- Pane 2: Conversation Sim ----------
function PaneConversation() {
  const msgs = [
    { who: 'ai',   text: 'Sveiki! Kuo galiu padėti?', en: 'Hi! How can I help?' },
    { who: 'you',  text: 'Norėčiau užsisakyti kavos su pienu.', en: '' },
    { who: 'ai',   text: 'Žinoma. Ar didelę, ar mažą?', en: 'Of course. Large or small?', hint: true },
    { who: 'you',  text: '...', typing: true },
  ];
  return (
    <>
      <PaneHeader
        kicker="Conversation Sim"
        title="Scenario · Ordering coffee"
        badge={<span className="pill green"><span className="dot"></span> A2 · Café</span>}
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.who === 'you' ? 'flex-end' : 'flex-start' }}>
            <div style={{
              maxWidth: '78%',
              padding: '12px 16px',
              borderRadius: m.who === 'you' ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
              background: m.who === 'you' ? 'var(--ink)' : 'var(--paper-2)',
              color: m.who === 'you' ? 'var(--paper)' : 'var(--ink)',
              fontSize: 15, lineHeight: 1.45,
            }}>
              {m.typing ? (
                <span className="flex gap-1" style={{ alignItems: 'center' }}>
                  {[0,1,2].map(d => <span key={d} style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ink-3)', animation: `tdot 1.2s ${d*0.15}s infinite` }}></span>)}
                </span>
              ) : (
                <>
                  <div>{m.text}</div>
                  {m.en && <div style={{ fontSize: 12, marginTop: 4, color: m.who === 'you' ? 'rgba(247,243,234,0.55)' : 'var(--ink-3)' }}>{m.en}</div>}
                  {m.hint && <div className="mt-2" style={{ fontSize: 12, color: 'var(--green-deep)', display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--green-deep)' }}></span>
                    Tip · accusative feminine ending
                  </div>}
                </>
              )}
            </div>
          </div>
        ))}
      </div>
      <div className="mt-6" style={{ display: 'flex', gap: 10, padding: '10px 14px', background: 'var(--paper-2)', borderRadius: 999, alignItems: 'center' }}>
        <Ic name="mic" size={18} style={{ color: 'var(--green-deep)' }} />
        <span style={{ flex: 1, fontSize: 14, color: 'var(--ink-3)' }}>Type or hold to speak…</span>
        <span style={{ fontSize: 11, color: 'var(--ink-4)', fontFamily: 'var(--mono)' }}>↵</span>
      </div>
      <style>{`@keyframes tdot { 0%,80%,100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }`}</style>
    </>
  );
}

// ---------- Pane 3: Level Checker ----------
function PaneLevel() {
  const skills = [
    { k: 'Listening',     v: 78, lvl: 'B1' },
    { k: 'Reading',       v: 84, lvl: 'B2' },
    { k: 'Grammar',       v: 62, lvl: 'A2+' },
    { k: 'Vocabulary',    v: 71, lvl: 'B1' },
    { k: 'Pronunciation', v: 55, lvl: 'A2' },
    { k: 'Speaking',      v: 48, lvl: 'A2' },
  ];
  return (
    <>
      <PaneHeader
        kicker="Level Checker"
        title="Your Lithuanian — 12-min adaptive test"
        badge={<span className="pill green"><span className="dot"></span> Result</span>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 14, padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ fontSize: 12, color: 'var(--yellow)', fontWeight: 500 }}>Overall</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 80, lineHeight: 1, marginTop: 8, fontWeight: 500 }}>B1</div>
          <div style={{ fontSize: 13, color: 'rgba(247,243,234,0.7)', marginTop: 8, lineHeight: 1.5 }}>Independent user. Can handle most situations in Vilnius — work emails, shops, doctor visits with effort.</div>
        </div>
        <div>
          {skills.map((s, i) => (
            <div key={i} style={{ padding: '10px 0', borderBottom: i < skills.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
              <div className="flex items-center justify-between" style={{ marginBottom: 6, fontSize: 13.5 }}>
                <span style={{ color: 'var(--ink-2)' }}>{s.k}</span>
                <span style={{ fontSize: 12, color: 'var(--green-deep)', fontWeight: 600 }}>{s.lvl}</span>
              </div>
              <div style={{ height: 5, background: 'var(--paper-3)', borderRadius: 99, overflow: 'hidden' }}>
                <div style={{ width: s.v + '%', height: '100%', background: s.v < 60 ? 'var(--yellow-deep)' : 'var(--green-deep)' }}></div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="mt-4" style={{ padding: 16, background: 'var(--green-soft)', borderRadius: 12, fontSize: 13.5, color: 'var(--ink-2)', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <Ic name="zap" size={16} style={{ color: 'var(--green-deep)', marginTop: 2 }} />
        <span><strong style={{ color: 'var(--ink)' }}>Next:</strong> work on speaking confidence — try the Conversation Sim "Doctor visit" scenario, 4× this week.</span>
      </div>
    </>
  );
}

// ---------- Pane 4: Grammar & Spelling ----------
function PaneGrammar() {
  return (
    <>
      <PaneHeader
        kicker="Grammar & Spelling"
        title="Your email — checked"
        badge={<span className="pill yellow"><span className="dot"></span> 3 fixes</span>}
      />
      <div style={{ background: 'var(--paper-2)', borderRadius: 14, padding: 22, fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.65 }}>
        <p>Laba diena, Ponia Petkevičiūte<sub style={{ display: 'inline-block', position: 'relative' }}>
          <span style={{ background: 'var(--red-soft)', color: 'var(--red)', padding: '1px 4px', borderRadius: 3, fontSize: 12, fontFamily: 'var(--sans)', fontWeight: 600, position: 'absolute', top: -4, left: '100%', marginLeft: 4, whiteSpace: 'nowrap' }}>+i</span>
        </sub>,</p>
        <p style={{ marginTop: 14 }}>Norėčiau <span style={{ background: 'rgba(31,122,58,0.12)', borderBottom: '2px solid var(--green)', padding: '0 2px' }}>užsiregistruoti</span> į penktadienio susitikimą. Ar dar yra vietų?</p>
        <p style={{ marginTop: 14 }}>Ačiū <span style={{ background: 'var(--red-soft)', borderBottom: '2px wavy var(--red)', padding: '0 2px' }}>iš anksto</span>. Pagarbiai,<br />Ona</p>
      </div>
      <div className="mt-4" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div style={{ padding: 14, background: 'var(--red-soft)', borderRadius: 10 }}>
          <div style={{ fontSize: 12, color: 'var(--red)', fontWeight: 600, marginBottom: 6 }}>Vocative ending</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>"Ponia Petkevičiūte" → "Ponia Petkevičiūt<strong>ei</strong>". Addressing women, vocative needs <em>-ei</em>.</div>
        </div>
        <div style={{ padding: 14, background: 'var(--red-soft)', borderRadius: 10 }}>
          <div style={{ fontSize: 12, color: 'var(--red)', fontWeight: 600, marginBottom: 6 }}>Idiom</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>"iš anksto" is correct, but in formal letters Lithuanians write "Iš anksto dėkoju" — full phrase, not just "Ačiū iš anksto".</div>
        </div>
      </div>
    </>
  );
}

// ---------- Pane 5: Dictionary ----------
function PaneDictionary() {
  const senses = [
    { lvl: 'A1', def: 'house, home', ex: 'Mano namas yra Vilniuje.', en: 'My house is in Vilnius.' },
    { lvl: 'B1', def: 'building (any)', ex: 'Senas mūrinis namas Užupyje.', en: 'An old brick building in Užupis.' },
    { lvl: 'B2', def: 'household, family', ex: 'Visas namas susirinko prie stalo.', en: 'The whole household gathered at the table.' },
  ];
  return (
    <>
      <PaneHeader
        kicker="Dictionary"
        title="Level-graded definitions"
        badge={<span className="pill"><Ic name="zap" size={11} /> Fast</span>}
      />
      <div style={{ padding: '6px 14px', background: 'var(--paper-2)', borderRadius: 999, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ color: 'var(--ink-3)' }}>⌕</span>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 22, flex: 1 }}>namas</span>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>noun, masculine · pl. namai</span>
      </div>
      <div className="mt-4">
        {senses.map((s, i) => (
          <div key={i} style={{ padding: '14px 0', borderBottom: i < senses.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
            <div className="flex items-baseline gap-3">
              <span className="pill green" style={{ padding: '2px 8px', fontSize: 11, fontWeight: 600 }}>{s.lvl}</span>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 17 }}>{s.def}</span>
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 6, fontFamily: 'var(--serif)' }}>{s.ex}</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 2 }}>{s.en}</div>
          </div>
        ))}
      </div>
      <div className="mt-4 flex gap-2 flex-wrap">
        {['namelis (dim.)', 'namiškis', 'naminis (adj.)', 'nameliuose (loc.pl.)'].map((w, i) => (
          <span key={i} className="pill" style={{ fontSize: 12 }}>{w}</span>
        ))}
      </div>
    </>
  );
}

// ---------- Pane 6: Reader ----------
function PaneReader() {
  return (
    <>
      <PaneHeader
        kicker="Reader"
        title="15min.lt — politika"
        badge={<span className="pill green"><span className="dot"></span> B1 · 4 min read</span>}
      />
      <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.65, color: 'var(--ink)' }}>
        <p style={{ marginBottom: 14 }}>
          Vilniaus meras pristatė naują <span style={{ background: 'var(--yellow-soft)', borderBottom: '2px solid var(--yellow-deep)', padding: '0 2px', cursor: 'help' }}>strategiją</span>, kuria siekiama mažinti automobilių srautą senamiestyje.
        </p>
        <p style={{ marginBottom: 14, color: 'var(--ink-2)' }}>
          Pasak savivaldybės, per ateinančius dvejus metus bus įrengta apie 30 km naujų <span style={{ background: 'var(--green-soft)', borderBottom: '2px solid var(--green)', padding: '0 2px', cursor: 'help' }}>dviračių takų</span>, o dalis gatvių taps tik pėsčiųjų zonomis.
        </p>
      </div>
      <div className="mt-4" style={{ background: 'var(--paper-2)', borderRadius: 12, padding: 16, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'flex-start' }}>
        <div style={{ fontSize: 13, color: 'var(--green-deep)', fontWeight: 600, paddingTop: 2, fontFamily: 'var(--serif)' }}>strategiją</div>
        <div>
          <div style={{ fontSize: 14, color: 'var(--ink)' }}><strong>strategija</strong> — strategy, plan of action</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 3 }}>noun, fem. sg. acc. · level B1</div>
        </div>
      </div>
      <div className="mt-3 flex items-center gap-3" style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>
        <span>7 new words</span>
        <span>·</span>
        <span>3 saved to flashcards</span>
        <span style={{ flex: 1 }}></span>
        <button className="btn ghost sm">Continue →</button>
      </div>
    </>
  );
}

const PANES = {
  pron:   PaneProunciation,
  convo:  PaneConversation,
  level:  PaneLevel,
  gram:   PaneGrammar,
  dict:   PaneDictionary,
  reader: PaneReader,
};

window.PANES = PANES;