/* Home — search-first journal */

function VariationA() {
  const t = useT();
  const courses = useSampleCourses();
  const articles = useSampleArticles();
  const allItems = React.useMemo(() => [
    courses[0], articles[0], courses[1], articles[1], courses[2], articles[2],
  ].filter(Boolean), [courses, articles]);

  const [query, setQuery] = React.useState('');
  const [activeTab, setActiveTab] = React.useState(0);
  const [activeChip, setActiveChip] = React.useState(0);

  const onSubmit = (e) => {
    e.preventDefault();
    goTo('catalogue');
  };

  return (
    <>
      <NavBar active="catalogue" />

      <main id="main">
        {/* Hero */}
        <section className="hero">
          <div className="container">
            <div className="sec-tag" style={{ marginBottom: 16 }}>{t('hero_tag')}</div>
            <h1 className="hero-title hand">
              {t('hero_title_1')}<br/>
              <span className="scribble-under">{t('hero_title_2')}</span>
            </h1>
            <p className="hero-sub">{t('hero_sub')}</p>

            <form className="search-input" onSubmit={onSubmit} role="search" aria-label={t('search')}>
              <span className="icon" aria-hidden>⌕</span>
              <input
                type="search"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder={t('search_placeholder')}
                aria-label={t('search_placeholder')}
              />
              <div className="filter-chips">
                <span className="chip chip-dash">{t('courses')}</span>
                <span className="chip chip-dash">{t('articles')}</span>
              </div>
              <button type="submit" className="btn btn-primary">{t('search_cta')}</button>
            </form>

            <div className="trending-row">
              <span className="mono">{t('trending')} →</span>
              <span className="chip" onClick={() => goTo('catalogue')}>{t('trend_glp1')}</span>
              <span className="chip" onClick={() => goTo('catalogue')}>{t('trend_rsv')}</span>
              <span className="chip" onClick={() => goTo('catalogue')}>{t('trend_af')}</span>
              <span className="chip" onClick={() => goTo('article')}>{t('trend_lecan')}</span>
              <span className="chip" onClick={() => goTo('catalogue')}>{t('trend_sepsis')}</span>
            </div>
          </div>
        </section>

        {/* CME strip */}
        <section className="section section--tint section--hatch-rule">
          <div className="container">
            <CMETracker />
          </div>
        </section>

        {/* Unified catalogue */}
        <section className="section">
          <div className="container">
            <SectionHead
              tag={t('catalog_unified')}
              title={t('catalog_title')}
              sub={t('catalog_sub')}
              action={t('see_all')}
              onAction={() => goTo('catalogue')}
            />
            <CatalogueTabs active={activeTab} onChange={setActiveTab} />
            <div className="wf-border" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, padding: 18 }}>
              <SubjectChipRow active={activeChip} onChange={setActiveChip} />
              <div className="wf-rule-dash" style={{ margin: '16px 0' }} />
              <div className="card-grid-2">
                {allItems.map((it, i) => <ContentCard key={i} item={it} />)}
              </div>
              <div className="text-center" style={{ marginTop: 18 }}>
                <button className="btn" onClick={() => goTo('catalogue')}>{t('load_more')}</button>
              </div>
            </div>
          </div>
        </section>

        {/* Specialty directory */}
        <section className="section section--tint">
          <div className="container">
            <SectionHead
              tag={t('specs_tag')}
              title={t('specs_title')}
              sub={t('specs_sub')}
            />
            <SpecialtyGrid count={48} initialVisible={16} />
          </div>
        </section>

        {/* Tiers */}
        <section className="section">
          <div className="container">
            <SectionHead tag={t('membership_tag')} title={t('membership_title')} sub={t('membership_sub')} />
            <SubscriptionTiers />
          </div>
        </section>

        {/* Newsletter */}
        <section className="section">
          <div className="container">
            <Newsletter />
          </div>
        </section>
      </main>

      <Footer />
    </>
  );
}

window.VariationA = VariationA;