/* ===========================================================
   راویار — Home screen
   =========================================================== */
function CategoryStrip({ onPick }) {
  return (
    <div className="scroll" style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '4px 0 6px' }}>
      {OMID.CATEGORIES.map(c => (
        <button key={c.id} className="gold-frame" onClick={() => onPick && onPick(c)}
          style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 11, padding: '11px 18px 11px 14px',
            borderRadius: 999, background: 'linear-gradient(180deg, rgba(24,42,86,.5), rgba(13,24,60,.6))' }}>
          <span style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center',
            background: `${c.hue}22`, color: c.hue, border: `1px solid ${c.hue}55` }}>
            <Icon name={c.icon} size={18} />
          </span>
          <span style={{ fontWeight: 700, fontSize: 15 }}>{OMID.TX(c)}</span>
          <span className="fa-num muted" style={{ fontSize: 12 }}>{OMID.num(c.count)}</span>
        </button>
      ))}
    </div>
  );
}

function Hero({ story, openStory }) {
  const poet = OMID.poetOf(story.poet);
  return (
    <section className="gold-frame" style={{ position: 'relative', height: 540, borderRadius: 'var(--r-xl)',
      overflow: 'hidden', boxShadow: 'var(--shadow-pop)' }}>
      <PosterArt grad={story.grad} seed={9} dim={0.12} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(280deg, transparent 30%, rgba(7,13,34,.55) 70%, rgba(7,13,34,.9))' }} />
      <div style={{ position: 'absolute', inset: 0, padding: '54px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', maxWidth: 720 }}>
        <div className="row gap-2" style={{ marginBottom: 18 }}>
          <span className="badge-ai"><Icon name="sparkle" size={12} /> {L('تصویرگری هوش مصنوعی', 'AI illustration')}</span>
          <span className="chip" style={{ background: 'rgba(7,13,34,.4)' }}>{OMID.TX(OMID.catOf(story.cat))}</span>
        </div>
        <div className="eyebrow" style={{ marginBottom: 10 }}>{L('داستان ویژهٔ امروز', 'Today’s featured story')}</div>
        <h1 style={{ fontSize: 62, lineHeight: 1.05, fontFamily: 'var(--display)', fontWeight: 400, letterSpacing: 1 }}>{OMID.TX(story)}</h1>
        <div className="turq" style={{ fontFamily: 'var(--verse)', fontSize: 22, marginTop: 6 }}>{OMID.TX(poet)} · {OMID.TX(story, 'era')}</div>
        <p style={{ fontSize: 18, lineHeight: 1.9, color: 'var(--cream-2)', marginTop: 16, maxWidth: 560 }}>{OMID.TX(story, 'tagline')}</p>
        <div className="row gap-3" style={{ marginTop: 14, color: 'var(--muted)', fontSize: 14 }}>
          <Stars value={story.rating} size={15} />
          <span className="row gap-1"><Icon name="clock" size={14} /> {OMID.num(story.mins)} {L('دقیقه', 'min')}</span>
          <span className="row gap-1"><Icon name="eye" size={14} /> {OMID.TX(story, 'views')} {L('بازدید', 'views')}</span>
          <span className="chip" style={{ padding: '3px 10px', fontSize: 12 }}>4K</span>
        </div>
        <div className="row gap-2" style={{ marginTop: 26 }}>
          <button className="btn btn-gold" onClick={() => openStory(story)} style={{ padding: '13px 26px', fontSize: 16 }}><Icon name="play" size={16} /> {L('تماشا کن', 'Watch now')}</button>
          <button className="btn btn-ghost" onClick={() => openStory(story)} style={{ padding: '13px 22px' }}><Icon name="book" size={16} /> {L('اطلاعات بیشتر', 'More info')}</button>
          <button className="btn btn-ghost" style={{ padding: '13px 18px' }}><Icon name="plus" size={16} /> {L('لیست من', 'My list')}</button>
        </div>
      </div>
    </section>
  );
}

function PoetsRail() {
  return (
    <Rail title={L('شاعران و راویان', 'Poets & narrators')} sub={L('میراث ادب پارسی', 'The Persian literary heritage')}
      action={<button className="chip"><Icon name="arrowR" size={14} /> {L('همه', 'All')}</button>}>
      {OMID.POETS.map(p => (
        <div key={p.id} className="col center" style={{ flex: '0 0 auto', width: 130, gap: 12, cursor: 'pointer' }}>
          <div className="gold-frame" style={{ width: 100, height: 100, borderRadius: 999, position: 'relative', overflow: 'hidden' }}>
            <PosterArt grad={[ '#0e1c3a', p.tint, '#e7c673']} seed={p.works} />
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
              fontFamily: 'var(--display)', fontSize: 30, color: 'var(--cream)', textShadow: '0 2px 10px rgba(0,0,0,.6)' }}>{OMID.TX(p)[0]}</div>
          </div>
          <div className="col center" style={{ gap: 2 }}>
            <b style={{ fontSize: 15.5 }}>{OMID.TX(p)}</b>
            <span className="muted fa-num" style={{ fontSize: 12 }}>{OMID.TX(p, 'era')} · {OMID.num(p.works)} {L('اثر', 'works')}</span>
          </div>
        </div>
      ))}
    </Rail>
  );
}

function HomeScreen({ openStory }) {
  const featured = OMID.byId('siavash');
  return (
    <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '8px 22px 30px' }}>
      <Hero story={featured} openStory={openStory} />
      <div style={{ margin: '30px 0 40px' }}><CategoryStrip /></div>

      {OMID.COLLECTIONS.map(col => (
        <Rail key={col.id} title={OMID.TX(col)}
          sub={col.id === 'tonight' ? L('پیشنهاد شخصی‌سازی‌شده', 'Personalized picks') : L('مجموعهٔ منتخب', 'Curated collection')}
          action={<button className="chip"><Icon name="arrowR" size={14} /> {L('مشاهدهٔ مجموعه', 'View collection')}</button>}>
          {col.ids.map(id => <div key={id} style={{ scrollSnapAlign: 'start' }}><StoryCard story={OMID.byId(id)} onOpen={openStory} /></div>)}
        </Rail>
      ))}

      <PoetsRail />

      {/* Themes band */}
      <section className="panel" style={{ padding: 34, marginTop: 8, position: 'relative', overflow: 'hidden' }}>
        <div className="eyebrow">{L('کاوش بر اساس موضوع', 'Explore by theme')}</div>
        <h2 style={{ fontSize: 26, marginTop: 6, marginBottom: 22 }}>{L('دروازه‌ای به جهان قصه‌ها', 'A gateway to the world of tales')}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
          {OMID.CATEGORIES.map(c => (
            <button key={c.id} className="gold-frame" style={{ position: 'relative', height: 120, borderRadius: 'var(--r-md)', overflow: 'hidden', textAlign: 'start' }}>
              <PosterArt grad={['#0e1c3a', c.hue, '#e7c673']} seed={c.count} />
              <div style={{ position: 'absolute', inset: 0, padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <Icon name={c.icon} size={24} style={{ color: 'var(--cream)' }} />
                <div className="row between">
                  <b style={{ fontSize: 19 }}>{OMID.TX(c)}</b>
                  <span className="chip fa-num" style={{ padding: '3px 10px', fontSize: 12, background: 'rgba(7,13,34,.5)' }}>{OMID.num(c.count)} {L('داستان', 'stories')}</span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}

window.HomeScreen = HomeScreen;