// Home page — bright, editorial hero and key sections, driven by TEXTS

function HomePage() {
  useLang();
  const featured = PRODUCTS.slice(0, 5);
  const h = TEXTS.home || {};
  const stats = h.stats || [];
  const ab = TEXTS.about || {};
  const companyStats = ab.stats || [];
  const advItems = (TEXTS.advantages?.items) || [];
  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-bg">
          <div className="hero-blob hero-blob-1"/>
          <div className="hero-blob hero-blob-2"/>
          <div className="hero-blob hero-blob-3"/>
        </div>
        <div className="hero-grid">
          <h1 className="hero-title">
            {h.heroTitle1}<br/>
            <span className="hero-italic">{h.heroTitleItalic}</span><br/>
            {h.heroTitle2} <span className="hero-accent">{h.heroAccent}</span>
          </h1>
          <p className="hero-desc">{h.heroDesc}</p>
          <div className="hero-ctas">
            <Link to="/catalog" className="btn btn-primary">
              {h.heroCta1 || "Смотреть каталог"}
              <span className="btn-arrow">→</span>
            </Link>
            <Link to="/about" className="btn btn-ghost">{h.heroCta2 || "О компании"}</Link>
          </div>
          {stats.length > 0 && (
            <div className="hero-stats">
              {stats.map((s, i) => (
                <div key={i}><strong>{s.num}</strong><span>{s.label}</span></div>
              ))}
            </div>
          )}
        </div>
        <div className="hero-gallery">
          {featured.map((p, i) => (
            <Link key={p.slug} to={`/product/${p.slug}`} className={`hero-card hero-card-${i}`}>
              <PhotoOrSwatch product={p} photo={PHOTOS.hero?.[`slot${i+1}`]} alt={`${p.name} — ${p.effect}`}/>
              <div className="hero-card-meta">
                <span>{String(i+1).padStart(2,"0")}</span>
                <strong>{p.name}</strong>
                <em>{p.effect}</em>
              </div>
            </Link>
          ))}
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee">
        <div className="marquee-track">
          {[...Array(3)].map((_, j) => (
            <div key={j} className="marquee-row">
              {PRODUCTS.slice(0, 9).map((p, k) => (
                <React.Fragment key={k}>
                  <span>{p.name.toUpperCase()}</span>
                  <span className="dot-sep">●</span>
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* MANIFESTO */}
      {h.manifesto && (
        <section className="manifesto">
          <div className="manifesto-eyebrow">{h.manifestoEyebrow || "Манифест"}</div>
          <p className="manifesto-text">{h.manifesto}</p>
        </section>
      )}

      {/* COMPANY IN NUMBERS (teaser from /about stats) */}
      {companyStats.length > 0 && (
        <section className="home-numbers">
          <div className="section-head">
            <div>
              <div className="eyebrow">{t("home.numbersEyebrow")}</div>
              <h2 className="section-title">{t("home.numbersTitle")}</h2>
            </div>
            <Link to="/about" className="link-arrow">{t("home.moreAbout")}</Link>
          </div>
          <div className="home-numbers-grid">
            {companyStats.map((s, i) => (
              <div key={i} className="home-number">
                <strong>{s.num}</strong>
                <span>{s.label}</span>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* KEY PRODUCTS */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="eyebrow">{h.keyProductsEyebrow || "Ключевые продукты"}</div>
            <h2 className="section-title">{h.keyProductsTitle || "Коллекция фактур"}</h2>
          </div>
          <Link to="/catalog" className="link-arrow">{t("home.fullCatalog")}</Link>
        </div>
        <div className="products-row">
          {PRODUCTS.slice(0, 8).map(p => (
            <Link key={p.slug} to={`/product/${p.slug}`} className="product-small">
              <div className="ps-swatch"><ProductCoverOrSwatch product={p}/></div>
              <div className="ps-name">{p.name}</div>
              <div className="ps-effect">{p.effect}</div>
            </Link>
          ))}
        </div>
      </section>

      {/* WHY US — 6 icon cards */}
      {advItems.length > 0 && (
        <section className="advantages">
          <div className="advantages-inner">
            <div className="eyebrow light">{h.advantagesEyebrow || "Преимущества"}</div>
            <h2 className="section-title light">
              {(h.advantagesTitle || "Почему выбирают нас").split("\n").map((line, i, arr) => (
                <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
              ))}
            </h2>
            <div className="adv-grid">
              {advItems.map((a, i) => (
                <div key={i} className="adv-card">
                  <div className="adv-icon" aria-hidden="true">{a.icon}</div>
                  <div className="adv-num">{a.num || String(i+1).padStart(2, "0")}</div>
                  <h3>{a.title}</h3>
                  <p>{a.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* OBJECTS — "Нам доверяют" */}
      {OBJECTS.length > 0 && (
        <section className="section">
          <div className="section-head">
            <div>
              <div className="eyebrow">{h.objectsEyebrow || "Объекты"}</div>
              <h2 className="section-title">{h.objectsTitle || "Нам доверяют"}</h2>
            </div>
            <Link to="/objects" className="link-arrow">{t("home.allObjects")}</Link>
          </div>
          <div className="obj-strip">
            {OBJECTS.slice(0, 6).map((o) => (
              <div key={o.name} className="obj-card">
                {o.photo && (
                  <div className="obj-card-photo"><img src={o.photo} alt="" loading="lazy" onError={e => { e.currentTarget.parentElement.style.display = "none"; }}/></div>
                )}
                <div className="obj-year">{o.year}</div>
                <div className="obj-name">{o.name}</div>
                <div className="obj-type">{o.type}</div>
                <div className="obj-surface">{o.surface}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* INSIGHTS — latest 3 publications */}
      {INSIGHTS.length > 0 && (
        <section className="section home-insights">
          <div className="section-head">
            <div>
              <div className="eyebrow">{t("home.insightsEyebrow")}</div>
              <h2 className="section-title">{t("home.insightsTitle")}</h2>
            </div>
            <Link to="/insights" className="link-arrow">{t("home.insightsAll")}</Link>
          </div>
          <div className="insights-grid">
            {INSIGHTS.slice()
              .sort((a, b) => (b.date || "").localeCompare(a.date || ""))
              .slice(0, 3)
              .map(ins => <InsightCard key={ins.slug} insight={ins}/>)}
          </div>
        </section>
      )}

      {/* PARTNER CTA — banner to /partnership */}
      <section className="home-partner-cta">
        <div className="home-partner-cta-inner">
          <div className="eyebrow">{t("home.partnerEyebrow")}</div>
          <h2 className="section-title">{t("home.partnerTitle")}</h2>
          <p>{t("home.partnerDesc")}</p>
          <div className="home-partner-ctas">
            <Link to="/partnership" className="btn btn-primary">{t("home.partnerBtn")}</Link>
            <Link to="/contacts" className="btn btn-ghost">{t("home.partnerContact")}</Link>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta">
        <div className="cta-content">
          <div className="eyebrow">{h.ctaEyebrow || "Консультация"}</div>
          <h2 className="section-title">
            {(h.ctaTitle || "Подберём покрытие\nпод ваш проект").split("\n").map((line, i, arr) => (
              <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
            ))}
          </h2>
          <p>{h.ctaDesc}</p>
          <Link to="/contacts" className="btn btn-primary">{t("home.contactCta")}</Link>
        </div>
        <div className="cta-swatches">
          {PRODUCTS.slice(9, 12).map((p, i) => (
            <div key={p.slug} className="cta-swatch">
              <PhotoOrSwatch product={p} photo={PHOTOS.cta[i]} alt={p.name}/>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;